"use client"

import { useState, useEffect } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { Search, Truck, Pencil, Trash2, Eye, ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import SupplierDialog from "./SupplierDialog"

type SupplierWithCount = {
  id: string
  name: string
  phone: string | null
  email: string | null
  address: string | null
  createdAt: Date
  productsCount: number
}

type SuppliersTableProps = {
  suppliers: SupplierWithCount[]
  total: number
  page: number
  totalPages: number
}

export default function SuppliersTable({ suppliers, total, page, totalPages }: SuppliersTableProps) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const [searchQuery, setSearchQuery] = useState(searchParams.get('search') || '')
  const [deleteId, setDeleteId] = useState<string | null>(null)
  const [deleting, setDeleting] = useState(false)
  const [viewSupplier, setViewSupplier] = useState<SupplierWithCount | null>(null)
  const [editSupplier, setEditSupplier] = useState<SupplierWithCount | null>(null)

  useEffect(() => {
    const timer = setTimeout(() => {
      const params = new URLSearchParams()
      if (searchQuery) params.set('search', searchQuery)
      params.set('page', '1')
      router.push(`?${params.toString()}`)
    }, 500)
    return () => clearTimeout(timer)
  }, [searchQuery, router])

  const handlePageChange = (newPage: number) => {
    const params = new URLSearchParams()
    const search = searchParams.get('search')
    if (search) params.set('search', search)
    params.set('page', String(newPage))
    router.push(`?${params.toString()}`)
  }

  const handleDelete = async (id: string) => {
    setDeleting(true)
    try {
      const response = await fetch(`/api/suppliers/${id}`, { method: 'DELETE' })
      if (response.ok) {
        router.refresh()
      }
    } catch (error) {
      console.error('Error deleting supplier:', error)
    } finally {
      setDeleting(false)
      setDeleteId(null)
    }
  }

  return (
    <>
      <div className="flex items-center gap-4">
        <div className="relative flex-1 max-w-sm">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <Input 
            placeholder="Rechercher un fournisseur..." 
            className="pl-10"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
      </div>

      <div className="rounded-lg border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Fournisseur</TableHead>
              <TableHead>Téléphone</TableHead>
              <TableHead>Email</TableHead>
              <TableHead>Adresse</TableHead>
              <TableHead className="text-right">Produits</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {suppliers.length === 0 ? (
              <TableRow>
                <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
                  Aucun fournisseur trouvé
                </TableCell>
              </TableRow>
            ) : (
              suppliers.map((supplier) => (
                <TableRow key={supplier.id}>
                  <TableCell className="font-medium">
                    <div className="flex items-center gap-2">
                      <Truck className="h-4 w-4 text-muted-foreground" />
                      {supplier.name}
                    </div>
                  </TableCell>
                  <TableCell>{supplier.phone || '-'}</TableCell>
                  <TableCell>{supplier.email || '-'}</TableCell>
                  <TableCell>{supplier.address || '-'}</TableCell>
                  <TableCell className="text-right">
                    <span className="font-medium">{supplier.productsCount}</span>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex items-center justify-end gap-1">
                      <Button variant="ghost" size="icon" onClick={() => setViewSupplier(supplier)}>
                        <Eye className="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="icon" onClick={() => setEditSupplier(supplier)}>
                        <Pencil className="h-4 w-4" />
                      </Button>
                      <Dialog open={deleteId === supplier.id} onOpenChange={(open) => !open && setDeleteId(null)}>
                        <DialogTrigger asChild>
                          <Button variant="ghost" size="icon" className="text-red-500" onClick={() => setDeleteId(supplier.id)}>
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </DialogTrigger>
                        <DialogContent>
                          <DialogHeader>
                            <DialogTitle>Confirmer la suppression</DialogTitle>
                            <DialogDescription>
                              Êtes-vous sûr de vouloir supprimer "{supplier.name}" ? Cette action est irréversible.
                            </DialogDescription>
                          </DialogHeader>
                          <DialogFooter>
                            <Button variant="outline" onClick={() => setDeleteId(null)}>Annuler</Button>
                            <Button variant="destructive" onClick={() => handleDelete(supplier.id)} disabled={deleting}>
                              {deleting ? 'Suppression...' : 'Supprimer'}
                            </Button>
                          </DialogFooter>
                        </DialogContent>
                      </Dialog>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      {totalPages > 1 && (
        <div className="flex items-center justify-between px-2 py-4">
          <div className="text-sm text-muted-foreground">
            Affichage de {((page - 1) * 10) + 1} à {Math.min(page * 10, total)} sur {total} résultats
          </div>
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              disabled={page <= 1}
              onClick={() => handlePageChange(page - 1)}
            >
              <ChevronLeft className="h-4 w-4" />
            </Button>
            <span className="text-sm">Page {page} sur {totalPages}</span>
            <Button
              variant="outline"
              size="sm"
              disabled={page >= totalPages}
              onClick={() => handlePageChange(page + 1)}
            >
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      )}

      <Dialog open={!!viewSupplier} onOpenChange={(open) => !open && setViewSupplier(null)}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>Détails du fournisseur</DialogTitle>
          </DialogHeader>
          {viewSupplier && (
            <div className="grid gap-4 py-4">
              <div>
                <Label className="text-muted-foreground text-sm">Nom</Label>
                <p className="font-medium">{viewSupplier.name}</p>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label className="text-muted-foreground text-sm">Téléphone</Label>
                  <p className="font-medium">{viewSupplier.phone || '-'}</p>
                </div>
                <div>
                  <Label className="text-muted-foreground text-sm">Email</Label>
                  <p className="font-medium">{viewSupplier.email || '-'}</p>
                </div>
              </div>
              <div>
                <Label className="text-muted-foreground text-sm">Adresse</Label>
                <p className="font-medium">{viewSupplier.address || '-'}</p>
              </div>
              <div className="pt-2 border-t">
                <Label className="text-muted-foreground text-sm">Nombre de produits</Label>
                <p className="font-medium">{viewSupplier.productsCount}</p>
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setViewSupplier(null)}>Fermer</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <SupplierDialog supplier={editSupplier} trigger={<span />} open={!!editSupplier} onOpenChange={(open) => !open && setEditSupplier(null)} />
    </>
  )
}