'use client'
// src/components/projects/ProjectsFilterBar.tsx
// Input: filters state + onChange callback + count of visible projects
// Output: filter bar with type pills, status pills, criticality select, search input
// Rationale: controlled filter UI — no local state, parent owns the state

import { Search, X } from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion'
import { Input } from '@/components/ui/Input'
import { Select } from '@/components/ui/Select'
import { cn } from '@/lib/utils'
import type { StructureType, ProjectStatus, Criticality } from '@/types'

export interface ProjectFilters {
  type: StructureType | 'all'
  status: ProjectStatus | 'all'
  criticality: Criticality | 'all'
  search: string
}

interface ProjectsFilterBarProps {
  filters: ProjectFilters
  onChange: (filters: ProjectFilters) => void
  count: number
}

const typeOptions: { value: ProjectFilters['type']; label: string }[] = [
  { value: 'all', label: 'Tous les types' },
  { value: 'bridge', label: 'Pont' },
  { value: 'building', label: 'Bâtiment' },
]

const statusOptions: { value: ProjectFilters['status']; label: string }[] = [
  { value: 'all', label: 'Tous les statuts' },
  { value: 'active', label: 'Actif' },
  { value: 'monitoring', label: 'Surveillance' },
  { value: 'alert', label: 'Alerte' },
  { value: 'archived', label: 'Archivé' },
]

const criticalityOptions: { value: ProjectFilters['criticality']; label: string }[] = [
  { value: 'all', label: 'Toutes les criticités' },
  { value: 'low', label: 'Faible' },
  { value: 'medium', label: 'Modérée' },
  { value: 'high', label: 'Haute' },
  { value: 'critical', label: 'Critique' },
]

// Pill button for type / status filters
function Pill({
  active,
  onClick,
  children,
}: {
  active: boolean
  onClick: () => void
  children: React.ReactNode
}) {
  return (
    <button
      onClick={onClick}
      className={cn(
        'relative h-[34px] px-3 rounded-md text-body transition-all duration-[150ms] border',
        active
          ? 'bg-accent-subtle border-accent-border text-accent'
          : 'bg-bg-subtle border-bg-border text-text-secondary hover:border-accent-border/50 hover:text-text-primary',
      )}
    >
      {children}
      {active && (
        <motion.span
          layoutId={`pill-active-${children}`}
          className="absolute inset-0 rounded-md bg-accent-subtle border border-accent-border -z-10"
          transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
        />
      )}
    </button>
  )
}

const hasActiveFilters = (f: ProjectFilters) =>
  f.type !== 'all' || f.status !== 'all' || f.criticality !== 'all' || f.search !== ''

export function ProjectsFilterBar({ filters, onChange, count }: ProjectsFilterBarProps) {
  const setFilter = <K extends keyof ProjectFilters>(key: K, value: ProjectFilters[K]) =>
    onChange({ ...filters, [key]: value })

  const reset = () =>
    onChange({ type: 'all', status: 'all', criticality: 'all', search: '' })

  return (
    <div className="mb-6 space-y-3">
      {/* Row 1: type pills + status pills + criticality select + search */}
      <div className="flex items-center gap-3 flex-wrap">
        {/* Type pills */}
        <div className="flex items-center gap-1.5">
          {typeOptions.map((opt) => (
            <Pill
              key={opt.value}
              active={filters.type === opt.value}
              onClick={() => setFilter('type', opt.value)}
            >
              {opt.label}
            </Pill>
          ))}
        </div>

        <div className="w-px h-5 bg-bg-border" />

        {/* Status pills */}
        <div className="flex items-center gap-1.5">
          {statusOptions.map((opt) => (
            <Pill
              key={opt.value}
              active={filters.status === opt.value}
              onClick={() => setFilter('status', opt.value)}
            >
              {opt.label}
            </Pill>
          ))}
        </div>

        <div className="ml-auto flex items-center gap-2">
          {/* Criticality select */}
          <div className="w-44">
            <Select
              options={criticalityOptions}
              value={filters.criticality}
              onChange={(v) => setFilter('criticality', v as ProjectFilters['criticality'])}
            />
          </div>

          {/* Search */}
          <div className="w-56">
            <Input
              placeholder="Rechercher un projet…"
              iconLeft={<Search size={14} strokeWidth={1.5} />}
              value={filters.search}
              onChange={(e) => setFilter('search', e.target.value)}
            />
          </div>
        </div>
      </div>

      {/* Row 2: count + reset */}
      <div className="flex items-center justify-between">
        <motion.span
          key={count}
          initial={{ opacity: 0.6 }}
          animate={{ opacity: 1 }}
          className="text-caption text-text-muted"
        >
          {count} projet{count !== 1 ? 's' : ''} correspondant{count !== 1 ? 's' : ''}
        </motion.span>

        <AnimatePresence>
          {hasActiveFilters(filters) && (
            <motion.button
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.9 }}
              transition={{ duration: 0.15 }}
              onClick={reset}
              className="flex items-center gap-1 text-caption text-text-muted hover:text-text-primary transition-colors duration-fast"
            >
              <X size={12} strokeWidth={1.5} />
              Réinitialiser
            </motion.button>
          )}
        </AnimatePresence>
      </div>
    </div>
  )
}