"use client"

import { useState, useEffect } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { Search, AlertTriangle, Eye, Pencil, Trash2, ChevronLeft, ChevronRight } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { formatCurrency } from "@/lib/utils"
import ProductDialog from "./ProductDialog"
import { SortableHeader } from "@/components/SortableHeader"

type Product = {
  id: string
  sku: string
  name: string
  category: string
  brand: string | null
  quantity: number
  minStock: number
  purchasePrice: any
  salePrice: any
  isFree: boolean
}

type ProductsTableProps = {
  products: Product[]
  categories: string[]
  total: number
  page: number
  totalPages: number
}

export default function ProductsTable({ products, categories, total, page, totalPages }: ProductsTableProps) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const [searchQuery, setSearchQuery] = useState(searchParams.get('search') || '')
  const [selectedCategory, setSelectedCategory] = useState(searchParams.get('category') || 'all')
  const [stockStatus, setStockStatus] = useState(searchParams.get('stock') || 'all')
  const [deleteId, setDeleteId] = useState<string | null>(null)
  const [deleting, setDeleting] = useState(false)
  const [viewProduct, setViewProduct] = useState<Product | null>(null)
  const [editProduct, setEditProduct] = useState<Product | null>(null)
  const [deleteError, setDeleteError] = useState<string | null>(null)

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

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

  const handleDelete = async (id: string) => {
    setDeleting(true)
    setDeleteError(null)
    try {
      const response = await fetch(`/api/products/${id}`, { method: 'DELETE' })

      if (response.ok) {
        setDeleteId(null)
        router.refresh()
      } else {
        const errorData = await response.json()
        setDeleteError(errorData.error || 'Failed to delete product')
      }
    } catch (error) {
      console.error('Error deleting product:', error)
      setDeleteError('An error occurred while deleting the product. Please try again.')
    } finally {
      setDeleting(false)
    }
  }

  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 produit..." 
            className="pl-10"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
        <Select value={selectedCategory} onValueChange={setSelectedCategory}>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Catégorie" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">Toutes les catégories</SelectItem>
            {categories.map((cat) => (
              <SelectItem key={cat} value={cat}>{cat}</SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Select value={stockStatus} onValueChange={setStockStatus}>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Statut du stock" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">Tous</SelectItem>
            <SelectItem value="low">Stock faible</SelectItem>
            <SelectItem value="out">Rupture</SelectItem>
            <SelectItem value="normal">Normal</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="rounded-lg border">
        <Table>
          <TableHeader>
            <TableRow>
              <SortableHeader column="sku" label="SKU" />
              <SortableHeader column="name" label="Produit" />
              <SortableHeader column="category" label="Catégorie" />
              <SortableHeader column="brand" label="Marque" />
              <SortableHeader column="quantity" label="Stock" className="text-right" />
              <SortableHeader column="purchasePrice" label="Prix d'achat" className="text-right" />
              <SortableHeader column="salePrice" label="Prix de vente" className="text-right" />
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {products.length === 0 ? (
              <TableRow>
                <TableCell colSpan={8} className="text-center text-muted-foreground py-8">
                  Aucun produit trouvé
                </TableCell>
              </TableRow>
            ) : (
              products.map((product) => (
                <TableRow key={product.id}>
                  <TableCell className="font-medium">{product.sku}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      {product.name}
                      {product.isFree && (
                        <Badge variant="outline" className="bg-teal-50 text-teal-700 border-teal-200 text-[10px] h-4">Gratuit</Badge>
                      )}
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge variant="secondary">{product.category}</Badge>
                  </TableCell>
                  <TableCell>{product.brand}</TableCell>
                  <TableCell className="text-right">
                    <div className="flex items-center justify-end gap-2">
                      {product.quantity <= product.minStock && (
                        <AlertTriangle className="h-4 w-4 text-amber-500" />
                      )}
                      <span className={product.quantity === 0 ? "text-red-500 font-medium" : ""}>
                        {product.quantity}
                      </span>
                    </div>
                  </TableCell>
                  <TableCell className="text-right">{formatCurrency(Number(product.purchasePrice))}</TableCell>
                  <TableCell className="text-right">{formatCurrency(Number(product.salePrice))}</TableCell>
                  <TableCell className="text-right">
                    <div className="flex items-center justify-end gap-1">
                      <Button variant="ghost" size="icon" onClick={() => setViewProduct(product)}>
                        <Eye className="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="icon" onClick={() => setEditProduct(product)}>
                        <Pencil className="h-4 w-4" />
                      </Button>
                      <Dialog open={deleteId === product.id} onOpenChange={(open) => !open && setDeleteId(null)}>
                        <DialogTrigger asChild>
                          <Button variant="ghost" size="icon" className="text-red-500" onClick={() => setDeleteId(product.id)}>
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </DialogTrigger>
                        <DialogContent>
                          <DialogHeader>
                            <DialogTitle>Confirmer la suppression</DialogTitle>
                            <DialogDescription>
                              Êtes-vous sûr de vouloir supprimer "{product.name}" ? Cette action est irréversible.
                            </DialogDescription>
                          </DialogHeader>
                          {deleteError && (
                            <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-700">
                              <div className="flex items-start gap-2">
                                <AlertTriangle className="h-4 w-4 flex-shrink-0 mt-0.5" />
                                <div>{deleteError}</div>
                              </div>
                            </div>
                          )}
                          <DialogFooter>
                            <Button variant="outline" onClick={() => { setDeleteId(null); setDeleteError(null) }}>
                              {deleteError ? 'Fermer' : 'Annuler'}
                            </Button>
                            {!deleteError && (
                              <Button variant="destructive" onClick={() => handleDelete(product.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={!!viewProduct} onOpenChange={(open) => !open && setViewProduct(null)}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>Détails du produit</DialogTitle>
          </DialogHeader>
          {viewProduct && (
            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label className="text-muted-foreground text-sm">SKU</Label>
                  <p className="font-medium">{viewProduct.sku}</p>
                </div>
                <div>
                  <Label className="text-muted-foreground text-sm">Nom</Label>
                  <div className="flex items-center gap-2">
                    <p className="font-medium">{viewProduct.name}</p>
                    {viewProduct.isFree && (
                      <Badge variant="outline" className="bg-teal-50 text-teal-700 border-teal-200 text-[10px] h-4">Gratuit</Badge>
                    )}
                  </div>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label className="text-muted-foreground text-sm">Catégorie</Label>
                  <p className="font-medium">{viewProduct.category}</p>
                </div>
                <div>
                  <Label className="text-muted-foreground text-sm">Marque</Label>
                  <p className="font-medium">{viewProduct.brand || '-'}</p>
                </div>
              </div>
              <div className="grid grid-cols-3 gap-4">
                <div>
                  <Label className="text-muted-foreground text-sm">Stock</Label>
                  <p className="font-medium">{viewProduct.quantity}</p>
                </div>
                <div>
                  <Label className="text-muted-foreground text-sm">Prix d'achat</Label>
                  <p className="font-medium">{formatCurrency(Number(viewProduct.purchasePrice))}</p>
                </div>
                <div>
                  <Label className="text-muted-foreground text-sm">Prix de vente</Label>
                  <p className="font-medium">{formatCurrency(Number(viewProduct.salePrice))}</p>
                </div>
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setViewProduct(null)}>Fermer</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <ProductDialog product={editProduct} trigger={<span />} open={!!editProduct} onOpenChange={(open) => !open && setEditProduct(null)} />
    </>
  )
}