"use client";

import { format } from "date-fns";
import { fr } from "date-fns/locale";
import { Activity, Calendar, CreditCard, Edit, FileText, Mail, Phone, User, UserCheck, Users } from "lucide-react";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

import {
  useClient,
  useClientActivities,
  useClientContacts,
  useClientDocuments,
} from "@/hooks/clients/use-clients-queries";
import type { Client } from "@/types/clients";

interface ClientDetailDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  clientId: number | null;
  onEdit?: (client: Client) => void;
  onConvertToMember?: (client: Client) => void;
}

// Helper component for form labels to fix the missing Label component
function Label({ children, className = "", ...props }: any) {
  return (
    <label
      className={`text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${className ?? ""}`}
      {...props}
    >
      {children}
    </label>
  );
}

// Helper functions to reduce cognitive complexity
function getGenderDisplay(gender?: string) {
  if (gender === "M") return "Masculin";
  if (gender === "F") return "Féminin";
  if (gender === "O") return "Autre";
  return "Non renseigné";
}

function formatCurrency(amount: string | number) {
  const num = typeof amount === "string" ? parseFloat(amount) : amount;
  if (isNaN(num)) return "0 F.CFA";
  return new Intl.NumberFormat("fr-CM", {
    style: "currency",
    currency: "XAF",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  })
    .format(num)
    .replace("XAF", "F.CFA");
}

function getInitials(fullName: string) {
  return fullName
    .split(" ")
    .map((name) => name.charAt(0))
    .join("")
    .toUpperCase()
    .slice(0, 2);
}

function getStatusColor(status: string) {
  switch (status.toLowerCase()) {
    case "active":
      return "bg-green-100 text-green-800 border-green-200";
    case "inactive":
      return "bg-red-100 text-red-800 border-red-200";
    case "pending":
      return "bg-yellow-100 text-yellow-800 border-yellow-200";
    default:
      return "bg-gray-100 text-gray-800 border-gray-200";
  }
}

function getKycStatusColor(status: string) {
  switch (status.toLowerCase()) {
    case "completed":
      return "bg-green-100 text-green-800 border-green-200";
    case "in_progress":
      return "bg-blue-100 text-blue-800 border-blue-200";
    case "rejected":
      return "bg-red-100 text-red-800 border-red-200";
    case "pending":
      return "bg-orange-100 text-orange-800 border-orange-200";
    default:
      return "bg-gray-100 text-gray-800 border-gray-200";
  }
}

export function ClientDetailDialog({
  open,
  onOpenChange,
  clientId,
  onEdit,
  onConvertToMember,
}: ClientDetailDialogProps) {
  const { data: client, isLoading } = useClient(clientId!);
  const { data: activities } = useClientActivities(clientId!);
  const { data: documents } = useClientDocuments(clientId!);
  const { data: contacts } = useClientContacts(clientId!);

  if (!clientId || isLoading) {
    return (
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="max-h-[90vh] max-w-4xl overflow-y-auto">
          <div className="flex h-96 items-center justify-center">
            <div className="border-primary h-8 w-8 animate-spin rounded-full border-b-2"></div>
          </div>
        </DialogContent>
      </Dialog>
    );
  }

  if (!client) {
    return (
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="max-h-[90vh] max-w-4xl overflow-y-auto">
          <div className="flex h-96 items-center justify-center">
            <p className="text-muted-foreground">Client non trouvé</p>
          </div>
        </DialogContent>
      </Dialog>
    );
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[90vh] max-w-5xl overflow-y-auto">
        <DialogHeader className="space-y-4">
          <div className="flex items-start justify-between">
            <div className="flex items-center space-x-4">
              <Avatar className="h-16 w-16">
                <AvatarFallback className="text-lg">{getInitials(client.full_name)}</AvatarFallback>
              </Avatar>
              <div>
                <DialogTitle className="text-2xl">{client.full_name}</DialogTitle>
                <DialogDescription className="text-base">
                  {client.client_number} • {client.email}
                </DialogDescription>
                <div className="mt-2 flex items-center gap-2">
                  <Badge variant="outline" className={getStatusColor(client.status)}>
                    {client.status_display}
                  </Badge>
                  {client.is_member ? (
                    <Badge variant="outline" className="border-blue-200 bg-blue-100 text-blue-800">
                      Membre
                    </Badge>
                  ) : (
                    <Badge variant="outline" className="border-gray-200 bg-gray-100 text-gray-800">
                      Client
                    </Badge>
                  )}
                  <Badge variant="outline" className={getKycStatusColor(client.kyc_status ?? "")}>
                    {client.kyc_status_display ?? "KYC non défini"}
                  </Badge>
                </div>
              </div>
            </div>
            <div className="flex space-x-2">
              {!client.is_member && onConvertToMember && (
                <Button onClick={() => onConvertToMember(client)} size="sm">
                  <UserCheck className="mr-2 h-4 w-4" />
                  Convertir en membre
                </Button>
              )}
              {onEdit && (
                <Button onClick={() => onEdit(client)} variant="outline" size="sm">
                  <Edit className="mr-2 h-4 w-4" />
                  Modifier
                </Button>
              )}
            </div>
          </div>
        </DialogHeader>

        <Tabs defaultValue="overview" className="w-full">
          <TabsList className="grid w-full grid-cols-5">
            <TabsTrigger value="overview">Vue d&apos;ensemble</TabsTrigger>
            <TabsTrigger value="personal">Personnel</TabsTrigger>
            <TabsTrigger value="documents">Documents</TabsTrigger>
            <TabsTrigger value="contacts">Contacts</TabsTrigger>
            <TabsTrigger value="activities">Activités</TabsTrigger>
          </TabsList>

          <TabsContent value="overview" className="space-y-6">
            <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Dépôts totaux</CardTitle>
                  <CreditCard className="text-muted-foreground h-4 w-4" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{formatCurrency(client.total_deposits || 0)}</div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Prêts actifs</CardTitle>
                  <FileText className="text-muted-foreground h-4 w-4" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{formatCurrency(client.total_loans || 0)}</div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Score de crédit</CardTitle>
                  <Activity className="text-muted-foreground h-4 w-4" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{client.credit_score || "N/A"}</div>
                </CardContent>
              </Card>
            </div>

            <Card>
              <CardHeader>
                <CardTitle>Informations générales</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="flex items-center space-x-2">
                    <Mail className="text-muted-foreground h-4 w-4" />
                    <span className="text-sm">{client.email}</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Phone className="text-muted-foreground h-4 w-4" />
                    <span className="text-sm">{client.phone_number}</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <User className="text-muted-foreground h-4 w-4" />
                    <span className="text-sm">Gestionnaire: {client.account_manager_name ?? "Non assigné"}</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Calendar className="text-muted-foreground h-4 w-4" />
                    <span className="text-sm">
                      Inscrit le {format(new Date(client.created_at), "dd MMMM yyyy", { locale: fr })}
                    </span>
                  </div>
                </div>
                {client.notes && (
                  <div>
                    <h4 className="mb-2 text-sm font-medium">Notes</h4>
                    <p className="text-muted-foreground text-sm">{client.notes}</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="personal" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Informations personnelles</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label className="text-sm font-medium">Prénom</Label>
                    <p className="text-muted-foreground text-sm">{client.user?.first_name ?? "Non renseigné"}</p>
                  </div>
                  <div>
                    <Label className="text-sm font-medium">Nom</Label>
                    <p className="text-muted-foreground text-sm">{client.user?.last_name ?? "Non renseigné"}</p>
                  </div>
                  <div>
                    <Label className="text-sm font-medium">Date de naissance</Label>
                    <p className="text-muted-foreground text-sm">
                      {client.user?.date_of_birth
                        ? format(new Date(client.user.date_of_birth), "dd MMMM yyyy", {
                            locale: fr,
                          })
                        : "Non renseignée"}
                    </p>
                  </div>
                  <div>
                    <Label className="text-sm font-medium">Genre</Label>
                    <p className="text-muted-foreground text-sm">{getGenderDisplay(client.user?.gender)}</p>
                  </div>
                  <div>
                    <Label className="text-sm font-medium">Nationalité</Label>
                    <p className="text-muted-foreground text-sm">{client.user?.nationality ?? "Non renseignée"}</p>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Adresse</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 gap-4">
                  <div>
                    <Label className="text-sm font-medium">Adresse</Label>
                    <p className="text-muted-foreground text-sm">{client.user?.address ?? "Non renseignée"}</p>
                  </div>
                  <div className="grid grid-cols-3 gap-4">
                    <div>
                      <Label className="text-sm font-medium">Ville</Label>
                      <p className="text-muted-foreground text-sm">{client.user?.city ?? "Non renseignée"}</p>
                    </div>
                    <div>
                      <Label className="text-sm font-medium">Pays</Label>
                      <p className="text-muted-foreground text-sm">{client.user?.country ?? "Non renseigné"}</p>
                    </div>
                    <div>
                      <Label className="text-sm font-medium">Code postal</Label>
                      <p className="text-muted-foreground text-sm">{client.user?.postal_code ?? "Non renseigné"}</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="documents" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Documents KYC</CardTitle>
                <CardDescription>Documents d&apos;identité et de vérification du client</CardDescription>
              </CardHeader>
              <CardContent>
                {documents && documents.length > 0 ? (
                  <div className="space-y-4">
                    {documents.map((doc) => (
                      <div key={doc.id} className="flex items-center justify-between rounded-lg border p-4">
                        <div className="flex items-center space-x-3">
                          <FileText className="text-muted-foreground h-5 w-5" />
                          <div>
                            <p className="font-medium">{doc.file_name}</p>
                            <p className="text-muted-foreground text-sm">
                              {doc.document_type} • Téléchargé le{" "}
                              {format(new Date(doc.created_at), "dd MMM yyyy", { locale: fr })}
                            </p>
                          </div>
                        </div>
                        <Badge variant={doc.is_verified ? "default" : "secondary"}>
                          {doc.is_verified ? "Vérifié" : "En attente"}
                        </Badge>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p className="text-muted-foreground py-8 text-center">Aucun document téléchargé</p>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="contacts" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Contacts de référence</CardTitle>
                <CardDescription>Personnes à contacter en cas d&apos;urgence</CardDescription>
              </CardHeader>
              <CardContent>
                {contacts && contacts.length > 0 ? (
                  <div className="space-y-4">
                    {contacts.map((contact) => (
                      <div key={contact.id} className="flex items-center justify-between rounded-lg border p-4">
                        <div className="flex items-center space-x-3">
                          <Users className="text-muted-foreground h-5 w-5" />
                          <div>
                            <p className="font-medium">
                              {contact.first_name} {contact.last_name}
                            </p>
                            <p className="text-muted-foreground text-sm">
                              {contact.relationship} • {contact.phone_number}
                            </p>
                          </div>
                        </div>
                        <Badge variant="destructive">Contact d&apos;urgence</Badge>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p className="text-muted-foreground py-8 text-center">Aucun contact enregistré</p>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="activities" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Historique des activités</CardTitle>
                <CardDescription>Toutes les actions effectuées sur ce compte client</CardDescription>
              </CardHeader>
              <CardContent>
                {activities && activities.length > 0 ? (
                  <div className="space-y-4">
                    {activities.map((activity) => (
                      <div key={activity.id} className="flex items-start space-x-3 border-b pb-4 last:border-b-0">
                        <Activity className="text-muted-foreground mt-0.5 h-5 w-5" />
                        <div className="flex-1">
                          <p className="font-medium">{activity.description}</p>
                          <p className="text-muted-foreground text-sm">
                            {format(new Date(activity.created_at), "dd MMM yyyy à HH:mm", {
                              locale: fr,
                            })}
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p className="text-muted-foreground py-8 text-center">Aucune activité enregistrée</p>
                )}
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  );
}