import {
    Badge, Button, Card, CardContent, CardHeader, CardTitle,
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
} from "@repo/shadcn-ui/components";
import { Banknote, FileText, Languages, Mail, MapPin, Phone, Smartphone, X } from "lucide-react";
// CustomerViewDialog.tsx
import { useCustomerQuery } from "../../hooks";

type CustomerViewDialogProps = {
    customerId: string | null;
    open: boolean;
    onOpenChange: (open: boolean) => void;
}

export const CustomerViewDialog = ({
    customerId,
    open,
    onOpenChange,
}: CustomerViewDialogProps) => {
    const {
        data: customer,
        isLoading,
        isError,
        error,
    } = useCustomerQuery(customerId ?? "", { enabled: open && !!customerId });

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-3xl bg-card border-border p-0">
                <DialogHeader className="px-6 pt-6">
                    <DialogTitle id="customer-view-title" className="flex items-center justify-between">
                        <span className="text-balance">
                            {customer?.name ?? "Cliente"}
                            {customer?.trade_name && (
                                <span className="ml-2 text-muted-foreground">({customer.trade_name})</span>
                            )}
                        </span>
                        <Button
                            type="button"
                            size="icon"
                            variant="ghost"
                            className="cursor-pointer"
                            onClick={() => onOpenChange(false)}
                            aria-label="Cerrar"
                        >
                            <X className="size-4" />
                        </Button>
                    </DialogTitle>
                    <DialogDescription className="px-0">
                        {customer?.tin ? (
                            <Badge variant="secondary" className="ml-0 font-mono">{customer.tin}</Badge>
                        ) : (
                            <span className="text-muted-foreground">Ficha del cliente</span>
                        )}
                    </DialogDescription>
                </DialogHeader>

                <div className="px-6 pb-6">
                    {isLoading && <p role="status" aria-live="polite">Cargando…</p>}
                    {isError && (
                        <p role="alert" className="text-destructive">
                            {(error as Error)?.message ?? "No se pudo cargar el cliente"}
                        </p>
                    )}

                    {!isLoading && !isError && customer && (
                        <div className="grid gap-6 md:grid-cols-2 max-h-[70vh] overflow-y-auto pr-1">
                            <Card>
                                <CardHeader>
                                    <CardTitle className="flex items-center gap-2 text-lg">
                                        <FileText className="size-5 text-primary" />
                                        Información Básica
                                    </CardTitle>
                                </CardHeader>
                                <CardContent className="space-y-3">
                                    <div>
                                        <dt className="text-sm text-muted-foreground">Nombre</dt>
                                        <dd className="mt-1">{customer.name}</dd>
                                    </div>
                                    {customer.reference && (
                                        <div>
                                            <dt className="text-sm text-muted-foreground">Referencia</dt>
                                            <dd className="mt-1 font-mono">{customer.reference}</dd>
                                        </div>
                                    )}
                                    {customer.legal_record && (
                                        <div>
                                            <dt className="text-sm text-muted-foreground">Registro Legal</dt>
                                            <dd className="mt-1">{customer.legal_record}</dd>
                                        </div>
                                    )}
                                    {!!customer.default_taxes?.length && (
                                        <div>
                                            <dt className="text-sm text-muted-foreground">Impuestos por defecto</dt>
                                            <dd className="mt-1 flex flex-wrap gap-1">
                                                {customer.default_taxes.map((tax: string) => (
                                                    <Badge key={tax} variant="secondary">{tax}</Badge>
                                                ))}
                                            </dd>
                                        </div>
                                    )}
                                </CardContent>
                            </Card>

                            <Card>
                                <CardHeader>
                                    <CardTitle className="flex items-center gap-2 text-lg">
                                        <MapPin className="size-5 text-primary" />
                                        Dirección
                                    </CardTitle>
                                </CardHeader>
                                <CardContent className="space-y-3">
                                    <div>
                                        <dt className="text-sm text-muted-foreground">Calle</dt>
                                        <dd className="mt-1">
                                            {customer.street}
                                            {customer.street2 && (<><br />{customer.street2}</>)}
                                        </dd>
                                    </div>
                                    <div className="grid grid-cols-2 gap-4">
                                        <div>
                                            <dt className="text-sm text-muted-foreground">Ciudad</dt>
                                            <dd className="mt-1">{customer.city}</dd>
                                        </div>
                                        <div>
                                            <dt className="text-sm text-muted-foreground">Código Postal</dt>
                                            <dd className="mt-1">{customer.postal_code}</dd>
                                        </div>
                                    </div>
                                    <div className="grid grid-cols-2 gap-4">
                                        <div>
                                            <dt className="text-sm text-muted-foreground">Provincia</dt>
                                            <dd className="mt-1">{customer.province}</dd>
                                        </div>
                                        <div>
                                            <dt className="text-sm text-muted-foreground">País</dt>
                                            <dd className="mt-1">{customer.country}</dd>
                                        </div>
                                    </div>
                                </CardContent>
                            </Card>

                            <Card className="md:col-span-2">
                                <CardHeader>
                                    <CardTitle className="flex items-center gap-2 text-lg">
                                        <Mail className="size-5 text-primary" />
                                        Contacto y Preferencias
                                    </CardTitle>
                                </CardHeader>
                                <CardContent className="grid gap-6 md:grid-cols-2">
                                    <div className="space-y-3">
                                        {customer.email_primary && (
                                            <div className="flex items-start gap-3">
                                                <Mail className="mt-0.5 size-4 text-muted-foreground" />
                                                <div className="flex-1">
                                                    <dt className="text-sm text-muted-foreground">Email</dt>
                                                    <dd className="mt-1">{customer.email_primary}</dd>
                                                </div>
                                            </div>
                                        )}
                                        {customer.mobile_primary && (
                                            <div className="flex items-start gap-3">
                                                <Smartphone className="mt-0.5 size-4 text-muted-foreground" />
                                                <div className="flex-1">
                                                    <dt className="text-sm text-muted-foreground">Móvil</dt>
                                                    <dd className="mt-1">{customer.mobile_primary}</dd>
                                                </div>
                                            </div>
                                        )}
                                        {customer.phone_primary && (
                                            <div className="flex items-start gap-3">
                                                <Phone className="mt-0.5 size-4 text-muted-foreground" />
                                                <div className="flex-1">
                                                    <dt className="text-sm text-muted-foreground">Teléfono</dt>
                                                    <dd className="mt-1">{customer.phone_primary}</dd>
                                                </div>
                                            </div>
                                        )}
                                    </div>

                                    <div className="space-y-3">
                                        <div className="flex items-start gap-3">
                                            <Languages className="mt-0.5 size-4 text-muted-foreground" />
                                            <div className="flex-1">
                                                <dt className="text-sm text-muted-foreground">Idioma</dt>
                                                <dd className="mt-1">{customer.language_code}</dd>
                                            </div>
                                        </div>
                                        <div className="flex items-start gap-3">
                                            <Banknote className="mt-0.5 size-4 text-muted-foreground" />
                                            <div className="flex-1">
                                                <dt className="text-sm text-muted-foreground">Moneda</dt>
                                                <dd className="mt-1">{customer.currency_code}</dd>
                                            </div>
                                        </div>
                                    </div>
                                </CardContent>
                            </Card>
                        </div>
                    )}
                </div>
            </DialogContent>
        </Dialog>
    );
};
