'use client'

import { useState, useEffect } from 'react'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import {
  Plus,
  Search,
  Edit,
  Trash2,
  Image as ImageIcon,
  QrCode,
  AlertTriangle,
  Package,
  Filter,
  X
} from 'lucide-react'
import { toast } from 'sonner'
import { ProduitFormDialog } from './ProduitFormDialog'
import { QRCodeDialog } from './QRCodeDialog'
import { ImageGalleryDialog } from './ImageGalleryDialog'

export type CategorieProduit = 'MONTURE' | 'VERRE' | 'LENTILLE' | 'ACCESSOIRE'

export interface Produit {
  id: string
  reference: string
  designation: string
  categorie: CategorieProduit
  fournisseurId?: string | null
  fournisseurNom?: string | null
  prixAchatHT: number
  prixVenteTTC: number
  tva: number
  stock: number
  stockMin: number
  emplacement?: string | null
  marque?: string | null
  typeMonture?: string | null
  typeVerre?: string | null
  indice?: number | null
  materiau?: string | null
  couleur?: string | null
  dimensions?: string | null
  description?: string | null
  codeBarre?: string | null
  actif: boolean
  createdAt: string
  updatedAt: string
  images?: Fichier[]
}

export interface Fichier {
  id: string
  nom: string
  url: string
  taille: number
  mimeType: string
}

export interface ProduitFilters {
  search: string
  categorie: string
  stockStatus: string
  actif: string
}

export function ProduitListe() {
  const [produits, setProduits] = useState<Produit[]>([])
  const [loading, setLoading] = useState(true)
  const [selectedProduit, setSelectedProduit] = useState<Produit | null>(null)
  const [isFormOpen, setIsFormOpen] = useState(false)
  const [isQrOpen, setIsQrOpen] = useState(false)
  const [isImageOpen, setIsImageOpen] = useState(false)
  const [filters, setFilters] = useState<ProduitFilters>({
    search: '',
    categorie: 'all',
    stockStatus: 'all',
    actif: 'all'
  })

  const fetchProduits = async () => {
    try {
      setLoading(true)
      const params = new URLSearchParams()
      if (filters.search) params.append('search', filters.search)
      if (filters.categorie !== 'all') params.append('categorie', filters.categorie)
      if (filters.stockStatus !== 'all') params.append('stockStatus', filters.stockStatus)
      if (filters.actif !== 'all') params.append('actif', filters.actif === 'true' ? 'true' : 'false')

      const response = await fetch(`/api/produits?${params.toString()}`)
      if (!response.ok) throw new Error('Failed to fetch products')

      const data = await response.json()
      setProduits(data)
    } catch (error) {
      console.error('Error fetching produits:', error)
      toast.error('Erreur lors du chargement des produits')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    fetchProduits()
  }, [filters])

  const handleDelete = async (id: string) => {
    if (!confirm('Êtes-vous sûr de vouloir supprimer ce produit ?')) return

    try {
      const response = await fetch(`/api/produits/${id}`, {
        method: 'DELETE',
      })

      if (!response.ok) throw new Error('Failed to delete product')

      toast.success('Produit supprimé avec succès')
      fetchProduits()
    } catch (error) {
      console.error('Error deleting produit:', error)
      toast.error('Erreur lors de la suppression du produit')
    }
  }

  const handleToggleActif = async (id: string, currentStatus: boolean) => {
    try {
      const response = await fetch(`/api/produits/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ actif: !currentStatus }),
      })

      if (!response.ok) throw new Error('Failed to update product')

      toast.success('Statut du produit mis à jour')
      fetchProduits()
    } catch (error) {
      console.error('Error updating produit:', error)
      toast.error('Erreur lors de la mise à jour du produit')
    }
  }

  const getStockStatus = (produit: Produit) => {
    if (produit.stock <= 0) return { label: 'Rupture', variant: 'destructive' as const }
    if (produit.stock < produit.stockMin) return { label: 'Stock bas', variant: 'destructive' as const }
    if (produit.stock < produit.stockMin * 2) return { label: 'Stock faible', variant: 'default' as const }
    return { label: 'En stock', variant: 'secondary' as const }
  }

  const getCategorieBadgeColor = (categorie: string) => {
    switch (categorie) {
      case 'MONTURE': return 'bg-blue-500'
      case 'VERRE': return 'bg-green-500'
      case 'LENTILLE': return 'bg-purple-500'
      case 'ACCESSOIRE': return 'bg-orange-500'
      default: return 'bg-gray-500'
    }
  }

  const hasActiveFilters = filters.search || filters.categorie !== 'all' || filters.stockStatus !== 'all' || filters.actif !== 'all'

  const filteredProduits = produits

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h2 className="text-2xl font-bold text-gray-900">Gestion des Produits</h2>
          <p className="text-sm text-gray-500 mt-1">
            {filteredProduits.length} produit{filteredProduits.length !== 1 ? 's' : ''} dans le catalogue
          </p>
        </div>
        <Button onClick={() => { setSelectedProduit(null); setIsFormOpen(true); }} className="gap-2">
          <Plus className="h-4 w-4" />
          Nouveau Produit
        </Button>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500">Total Produits</p>
                <p className="text-2xl font-bold">{produits.length}</p>
              </div>
              <Package className="h-8 w-8 text-blue-500" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500">Stock Bas</p>
                <p className="text-2xl font-bold text-red-600">
                  {produits.filter(p => p.stock < p.stockMin).length}
                </p>
              </div>
              <AlertTriangle className="h-8 w-8 text-red-500" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500">Valeur Stock HT</p>
                <p className="text-2xl font-bold">
                  {new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(
                    produits.reduce((acc, p) => acc + (p.prixAchatHT * p.stock), 0)
                  )}
                </p>
              </div>
              <div className="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center">
                <span className="text-green-600 font-bold text-sm">€</span>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500">Produits Actifs</p>
                <p className="text-2xl font-bold text-green-600">
                  {produits.filter(p => p.actif).length}
                </p>
              </div>
              <div className={`h-8 w-8 rounded-full ${produits.filter(p => p.actif).length > 0 ? 'bg-green-100' : 'bg-gray-100'} flex items-center justify-center`}>
                <span className={`${produits.filter(p => p.actif).length > 0 ? 'text-green-600' : 'text-gray-400'} font-bold text-sm`}>
                  {produits.filter(p => p.actif).length}
                </span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Filters */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="text-lg flex items-center gap-2">
              <Filter className="h-5 w-5" />
              Filtres
            </CardTitle>
            {hasActiveFilters && (
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setFilters({ search: '', categorie: 'all', stockStatus: 'all', actif: 'all' })}
                className="gap-2"
              >
                <X className="h-4 w-4" />
                Effacer
              </Button>
            )}
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Rechercher..."
                value={filters.search}
                onChange={(e) => setFilters({ ...filters, search: e.target.value })}
                className="pl-10"
              />
            </div>
            <Select value={filters.categorie} onValueChange={(value) => setFilters({ ...filters, categorie: value })}>
              <SelectTrigger>
                <SelectValue placeholder="Catégorie" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Toutes les catégories</SelectItem>
                <SelectItem value="MONTURE">Montures</SelectItem>
                <SelectItem value="VERRE">Verres</SelectItem>
                <SelectItem value="LENTILLE">Lentilles</SelectItem>
                <SelectItem value="ACCESSOIRE">Accessoires</SelectItem>
              </SelectContent>
            </Select>
            <Select value={filters.stockStatus} onValueChange={(value) => setFilters({ ...filters, stockStatus: value })}>
              <SelectTrigger>
                <SelectValue placeholder="État du stock" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Tous les états</SelectItem>
                <SelectItem value="low">Stock bas</SelectItem>
                <SelectItem value="ok">En stock</SelectItem>
                <SelectItem value="out">Rupture</SelectItem>
              </SelectContent>
            </Select>
            <Select value={filters.actif} onValueChange={(value) => setFilters({ ...filters, actif: value })}>
              <SelectTrigger>
                <SelectValue placeholder="Statut" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Tous les statuts</SelectItem>
                <SelectItem value="true">Actifs</SelectItem>
                <SelectItem value="false">Inactifs</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

      {/* Products Table */}
      <Card>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Référence</TableHead>
                  <TableHead>Désignation</TableHead>
                  <TableHead>Catégorie</TableHead>
                  <TableHead>Marque</TableHead>
                  <TableHead className="text-right">Stock</TableHead>
                  <TableHead className="text-right">Prix Achat HT</TableHead>
                  <TableHead className="text-right">Prix Vente TTC</TableHead>
                  <TableHead>Emplacement</TableHead>
                  <TableHead>Statut</TableHead>
                  <TableHead className="text-center">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {loading ? (
                  <TableRow>
                    <TableCell colSpan={10} className="text-center py-8">
                      <div className="flex items-center justify-center">
                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                      </div>
                    </TableCell>
                  </TableRow>
                ) : filteredProduits.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={10} className="text-center py-8 text-gray-500">
                      Aucun produit trouvé
                    </TableCell>
                  </TableRow>
                ) : (
                  filteredProduits.map((produit) => {
                    const stockStatus = getStockStatus(produit)
                    return (
                      <TableRow key={produit.id} className={!produit.actif ? 'opacity-50' : ''}>
                        <TableCell className="font-medium">{produit.reference}</TableCell>
                        <TableCell>
                          <div className="font-medium">{produit.designation}</div>
                          {produit.codeBarre && (
                            <div className="text-xs text-gray-500 mt-1">
                              Code-barres: {produit.codeBarre}
                            </div>
                          )}
                        </TableCell>
                        <TableCell>
                          <Badge className={`${getCategorieBadgeColor(produit.categorie)} text-white`}>
                            {produit.categorie}
                          </Badge>
                        </TableCell>
                        <TableCell>{produit.marque || '-'}</TableCell>
                        <TableCell className="text-right">
                          <div className="flex items-center justify-end gap-2">
                            <span className={`font-semibold ${produit.stock < produit.stockMin ? 'text-red-600' : ''}`}>
                              {produit.stock}
                            </span>
                            {produit.stock < produit.stockMin && (
                              <AlertTriangle className="h-4 w-4 text-red-500" />
                            )}
                          </div>
                          <div className="text-xs text-gray-500">Min: {produit.stockMin}</div>
                        </TableCell>
                        <TableCell className="text-right font-mono">
                          {new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(produit.prixAchatHT)}
                        </TableCell>
                        <TableCell className="text-right font-mono">
                          {new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(produit.prixVenteTTC)}
                        </TableCell>
                        <TableCell>{produit.emplacement || '-'}</TableCell>
                        <TableCell>
                          <Badge variant={stockStatus.variant}>
                            {stockStatus.label}
                          </Badge>
                          {!produit.actif && (
                            <Badge variant="outline" className="ml-1 mt-1">
                              Inactif
                            </Badge>
                          )}
                        </TableCell>
                        <TableCell className="text-center">
                          <div className="flex items-center justify-center gap-1">
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => { setSelectedProduit(produit); setIsFormOpen(true); }}
                              title="Modifier"
                            >
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => { setSelectedProduit(produit); setIsQrOpen(true); }}
                              title="QR Code"
                            >
                              <QrCode className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => { setSelectedProduit(produit); setIsImageOpen(true); }}
                              title="Images"
                            >
                              <ImageIcon className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleToggleActif(produit.id, produit.actif)}
                              title={produit.actif ? "Désactiver" : "Activer"}
                            >
                              {produit.actif ? (
                                <X className="h-4 w-4 text-red-500" />
                              ) : (
                                <div className="h-4 w-4 rounded-full bg-green-500" />
                              )}
                            </Button>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleDelete(produit.id)}
                              title="Supprimer"
                              className="text-red-500 hover:text-red-700"
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    )
                  })
                )}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

      {/* Dialogs */}
      <ProduitFormDialog
        open={isFormOpen}
        onOpenChange={setIsFormOpen}
        produit={selectedProduit}
        onSuccess={fetchProduits}
      />

      <QRCodeDialog
        open={isQrOpen}
        onOpenChange={setIsQrOpen}
        produit={selectedProduit}
      />

      <ImageGalleryDialog
        open={isImageOpen}
        onOpenChange={setIsImageOpen}
        produit={selectedProduit}
        onRefresh={fetchProduits}
      />
    </div>
  )
}
