'use client'
// src/app/projects/page.tsx
// Input: none (reads from mock data)
// Output: projects list page with stats, filters, animated card grid
// Rationale: screen [7] — projects overview

import { useState, useMemo } from 'react'
import { Plus, FolderOpen } from 'lucide-react'
import { AnimatePresence, motion } from 'framer-motion'
import { AppShell } from '@/components/shell/AppShell'
import { PageHeader } from '@/components/shell/PageHeader'
import { Breadcrumbs } from '@/components/shell/Breadcrumbs'
import { Button } from '@/components/ui/Button'
import { EmptyState } from '@/components/ui/EmptyState'
import { ProjectsStats } from '@/components/projects/ProjectsStats'
import { ProjectsFilterBar, type ProjectFilters } from '@/components/projects/ProjectsFilterBar'
import { ProjectCard } from '@/components/projects/ProjectCard'
import { projects } from '@/lib/mock'

// ── Filter logic ─────────────────────────────────────────────────────────────

const DEFAULT_FILTERS: ProjectFilters = {
  type: 'all',
  status: 'all',
  criticality: 'all',
  search: '',
}

function applyFilters(filters: ProjectFilters) {
  return projects.filter((p) => {
    if (filters.type !== 'all' && p.type !== filters.type) return false
    if (filters.status !== 'all' && p.status !== filters.status) return false
    if (filters.criticality !== 'all' && p.criticality !== filters.criticality) return false
    if (filters.search) {
      const q = filters.search.toLowerCase()
      if (!p.name.toLowerCase().includes(q) && !p.location.toLowerCase().includes(q)) return false
    }
    return true
  })
}

// ── Page ─────────────────────────────────────────────────────────────────────

export default function ProjectsPage() {
  const [filters, setFilters] = useState<ProjectFilters>(DEFAULT_FILTERS)

  const filtered = useMemo(() => applyFilters(filters), [filters])

  return (
    <AppShell
      topbarContent={
        <Breadcrumbs items={[{ label: 'Projets' }]} />
      }
    >
      <PageHeader
        title="Projets"
        description="Vue d'ensemble des structures monitorées"
        actions={
          <Button variant="primary" size="md" iconLeft={<Plus size={16} strokeWidth={1.5} />}>
            Nouveau projet
          </Button>
        }
      />

      {/* Aggregated stats */}
      <ProjectsStats />

      {/* Filter bar */}
      <ProjectsFilterBar
        filters={filters}
        onChange={setFilters}
        count={filtered.length}
      />

      {/* Project grid */}
      <AnimatePresence mode="wait">
        {filtered.length === 0 ? (
          <motion.div
            key="empty"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
          >
            <EmptyState
              icon={<FolderOpen size={32} strokeWidth={1.5} />}
              title="Aucun projet correspondant"
              description="Modifiez les filtres pour voir d'autres projets."
            />
          </motion.div>
        ) : (
          <motion.div
            key="grid"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.15 }}
            className="grid grid-cols-3 gap-5"
          >
            {filtered.map((project, index) => (
              <ProjectCard key={project.id} project={project} index={index} />
            ))}
          </motion.div>
        )}
      </AnimatePresence>
    </AppShell>
  )
}