'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 { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Badge } from '@/components/ui/badge'
import { ScrollArea } from '@/components/ui/scroll-area'
import {
  Search,
  Plus,
  Eye,
  Pencil,
  Phone,
  Mail,
  MapPin,
  Calendar,
  FileText,
  User
} from 'lucide-react'
import { ClientForm } from './client-form'
import { ClientDetail } from './client-detail'

interface Client {
  id: string
  nom: string
  prenom: string
  email: string | null
  telephone: string
  adresse: string | null
  ville: string | null
  codePostal: string | null
  dateNaissance: string | null
  notes: string | null
  createdAt: string
  patients?: Patient[]
}

interface Patient {
  id: string
  dateCreation: string
  odSphere: number | null
  odCylindre: number | null
  odAxe: number | null
  ogSphere: number | null
  ogCylindre: number | null
  ogAxe: number | null
  addition: number | null
  pd: number | null
  hauteur: number | null
  notes: string | null
  ordonnances?: Ordonnance[]
}

interface Ordonnance {
  id: string
  numero: string
  dateEmission: string
  medecin: string | null
  notes: string | null
}

export function ClientList() {
  const [clients, setClients] = useState<Client[]>([])
  const [filteredClients, setFilteredClients] = useState<Client[]>([])
  const [searchTerm, setSearchTerm] = useState('')
  const [loading, setLoading] = useState(true)
  const [selectedClient, setSelectedClient] = useState<Client | null>(null)
  const [editingClient, setEditingClient] = useState<Client | null>(null)
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
  const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false)

  useEffect(() => {
    fetchClients()
  }, [])

  useEffect(() => {
    if (searchTerm === '') {
      setFilteredClients(clients)
    } else {
      const term = searchTerm.toLowerCase()
      const filtered = clients.filter(client =>
        client.nom.toLowerCase().includes(term) ||
        client.prenom.toLowerCase().includes(term) ||
        client.telephone.includes(term) ||
        (client.email && client.email.toLowerCase().includes(term)) ||
        (client.ville && client.ville.toLowerCase().includes(term))
      )
      setFilteredClients(filtered)
    }
  }, [searchTerm, clients])

  const fetchClients = async () => {
    try {
      const response = await fetch('/api/clients')
      if (response.ok) {
        const data = await response.json()
        setClients(data)
        setFilteredClients(data)
      }
    } catch (error) {
      console.error('Error fetching clients:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleClientSaved = async () => {
    setIsAddDialogOpen(false)
    setEditingClient(null)
    await fetchClients()
  }

  const handleViewClient = (client: Client) => {
    console.log('handleViewClient called with:', client.id, client.nom, client.prenom, client)
    // Force dialog to close first if already open with different client
    if (isDetailDialogOpen && selectedClient?.id !== client.id) {
      setIsDetailDialogOpen(false)
      // Small delay to ensure dialog closes
      setTimeout(() => {
        setSelectedClient(client)
        setIsDetailDialogOpen(true)
      }, 50)
    } else {
      setSelectedClient(client)
      setIsDetailDialogOpen(true)
    }
  }

  const handleEditClient = (client: Client) => {
    setEditingClient(client)
    setIsAddDialogOpen(true)
  }

  const formatDate = (dateString: string | null) => {
    if (!dateString) return '-'
    return new Date(dateString).toLocaleDateString('fr-FR')
  }

  const getAge = (dateNaissance: string | null) => {
    if (!dateNaissance) return null
    const today = new Date()
    const birth = new Date(dateNaissance)
    let age = today.getFullYear() - birth.getFullYear()
    const monthDiff = today.getMonth() - birth.getMonth()
    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
      age--
    }
    return age
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div>
          <h2 className="text-2xl font-bold text-gray-900">Gestion des Clients</h2>
          <p className="text-sm text-gray-500">
            {clients.length} client{clients.length !== 1 ? 's' : ''} enregistré{clients.length !== 1 ? 's' : ''}
          </p>
        </div>
        <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
          <DialogTrigger asChild>
            <Button className="gap-2">
              <Plus className="h-4 w-4" />
              Nouveau Client
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>
                {editingClient ? 'Modifier le Client' : 'Nouveau Client'}
              </DialogTitle>
              <DialogDescription>
                {editingClient
                  ? 'Modifiez les informations du client'
                  : 'Remplissez les informations pour créer un nouveau client'}
              </DialogDescription>
            </DialogHeader>
            <ClientForm
              client={editingClient}
              onSave={handleClientSaved}
              onCancel={() => {
                setIsAddDialogOpen(false)
                setEditingClient(null)
              }}
            />
          </DialogContent>
        </Dialog>
      </div>

      {/* Search */}
      <Card>
        <CardContent className="pt-6">
          <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 par nom, prénom, téléphone, email ou ville..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>
        </CardContent>
      </Card>

      {/* Clients Table */}
      <Card>
        <CardContent className="p-0">
          <ScrollArea className="h-[600px]">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Client</TableHead>
                  <TableHead>Contact</TableHead>
                  <TableHead>Adresse</TableHead>
                  <TableHead>Naissance</TableHead>
                  <TableHead>Fiches</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {loading ? (
                  <TableRow>
                    <TableCell colSpan={6} className="text-center py-8">
                      Chargement...
                    </TableCell>
                  </TableRow>
                ) : filteredClients.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={6} className="text-center py-8">
                      <div className="flex flex-col items-center gap-2">
                        <User className="h-12 w-12 text-gray-400" />
                        <p className="text-gray-500">
                          {searchTerm ? 'Aucun client trouvé' : 'Aucun client enregistré'}
                        </p>
                      </div>
                    </TableCell>
                  </TableRow>
                ) : (
                  filteredClients.map((client) => (
                    <TableRow key={client.id} className="hover:bg-gray-50">
                      <TableCell>
                        <div>
                          <div className="font-medium">
                            {client.prenom} {client.nom}
                          </div>
                          <div className="text-sm text-gray-500">
                            {getAge(client.dateNaissance) !== null && (
                              <span className="mr-2">{getAge(client.dateNaissance)} ans</span>
                            )}
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="space-y-1">
                          {client.email && (
                            <div className="flex items-center gap-2 text-sm">
                              <Mail className="h-3 w-3 text-gray-400" />
                              <span className="truncate max-w-[150px]">{client.email}</span>
                            </div>
                          )}
                          <div className="flex items-center gap-2 text-sm">
                            <Phone className="h-3 w-3 text-gray-400" />
                            <span>{client.telephone}</span>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        {client.adresse || client.ville || client.codePostal ? (
                          <div className="space-y-1">
                            {client.adresse && (
                              <div className="text-sm text-gray-600 truncate max-w-[150px]">
                                {client.adresse}
                              </div>
                            )}
                            <div className="flex items-center gap-1 text-sm text-gray-500">
                              <MapPin className="h-3 w-3" />
                              <span>
                                {client.codePostal && `${client.codePostal} `}
                                {client.ville}
                              </span>
                            </div>
                          </div>
                        ) : (
                          <span className="text-gray-400 text-sm">Non renseignée</span>
                        )}
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2 text-sm">
                          <Calendar className="h-3 w-3 text-gray-400" />
                          {formatDate(client.dateNaissance)}
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge variant="secondary" className="gap-1">
                          <FileText className="h-3 w-3" />
                          {client.patients?.length || 0}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleViewClient(client)}
                          >
                            <Eye className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleEditClient(client)}
                          >
                            <Pencil className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </ScrollArea>
        </CardContent>
      </Card>

      {/* Client Detail Dialog */}
      <Dialog open={isDetailDialogOpen} onOpenChange={setIsDetailDialogOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Détail du Client</DialogTitle>
            <DialogDescription>
              Informations complètes et fiches de vision
            </DialogDescription>
          </DialogHeader>
          {selectedClient && (
            <ClientDetail
              key={selectedClient.id}
              client={selectedClient}
              onClose={() => setIsDetailDialogOpen(false)}
              onUpdate={fetchClients}
            />
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}