'use client'
// src/app/partners/page.tsx
// Input: none (reads from partners mock)
// Output: partners list page with stats, tabs filter, card grid, SecureDeployModal
// Rationale: screen [10] — partner distribution (US16-US20)

import { useState, useMemo } from 'react'
import { UserPlus, Users } 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 { Tabs } from '@/components/ui/Tabs'
import { EmptyState } from '@/components/ui/EmptyState'
import { PartnersStats } from '@/components/partners/PartnersStats'
import { PartnerCard } from '@/components/partners/PartnerCard'
import { SecureDeployModal } from '@/components/partners/SecureDeployModal'
import { partners } from '@/lib/mock'
import type { Partner } from '@/types'

// ── Tab definitions ───────────────────────────────────────────────────────────

const TABS = [
  { id: 'all', label: 'Tous' },
  { id: 'active', label: 'Actifs' },
  { id: 'pending', label: 'En attente' },
]

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

function filterPartners(tab: string): Partner[] {
  if (tab === 'active') return partners.filter((p) => p.status === 'active')
  if (tab === 'pending') return partners.filter((p) => p.status === 'pending')
  return partners
}

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

export default function PartnersPage() {
  const [activeTab, setActiveTab] = useState('all')
  const [selectedPartner, setSelectedPartner] = useState<Partner | null>(null)
  const [modalOpen, setModalOpen] = useState(false)

  const filtered = useMemo(() => filterPartners(activeTab), [activeTab])

  function handleDeploy(partner: Partner) {
    setSelectedPartner(partner)
    setModalOpen(true)
  }

  function handleModalClose() {
    setModalOpen(false)
    // Keep selectedPartner so modal can animate out cleanly
    setTimeout(() => setSelectedPartner(null), 300)
  }

  return (
    <AppShell
      topbarContent={
        <Breadcrumbs items={[{ label: 'Partenaires' }]} />
      }
    >
      <PageHeader
        title="Partenaires"
        description="Bureaux d'études et ingénieurs qui déploient Structura"
        actions={
          <Button
            variant="primary"
            size="md"
            iconLeft={<UserPlus size={16} strokeWidth={1.5} />}
          >
            Inviter un partenaire
          </Button>
        }
      />

      {/* Stats row */}
      <PartnersStats />

      {/* Tabs */}
      <Tabs
        tabs={TABS}
        active={activeTab}
        onChange={(id) => setActiveTab(id)}
        className="mb-5"
      />

      {/* Partner grid with animated transitions */}
      <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={<Users size={32} strokeWidth={1.5} />}
              title="Aucun partenaire dans cette catégorie"
              description="Changez de filtre ou invitez un nouveau partenaire."
            />
          </motion.div>
        ) : (
          <motion.div
            key={`grid-${activeTab}`}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.15 }}
            className="grid grid-cols-2 gap-5"
          >
            {filtered.map((partner, index) => (
              <PartnerCard
                key={partner.id}
                partner={partner}
                index={index}
                onDeploy={handleDeploy}
              />
            ))}
          </motion.div>
        )}
      </AnimatePresence>

      {/* Secure Deploy modal */}
      <SecureDeployModal
        open={modalOpen}
        partner={selectedPartner}
        onClose={handleModalClose}
      />
    </AppShell>
  )
}