"use client";

import { FC, useEffect } from "react";
import { Documento } from "@/types/document";
import { LuX, LuEye, LuTrash2, LuPackage } from "react-icons/lu";
import Link from "next/link";

interface DetailsDrawerProps {
    document: Documento | null;
    isOpen: boolean;
    onClose: () => void;
    onDelete: (doc: Documento) => void;
}

export default function DetailsDrawer({
    document,
    isOpen,
    onClose,
    onDelete,
}: DetailsDrawerProps) {
    // Cerrar con ESC
    useEffect(() => {
        const handleEsc = (e: KeyboardEvent) => {
            if (e.key === "Escape") onClose();
        };
        if (isOpen) {
            window.addEventListener("keydown", handleEsc);
        }
        return () => window.removeEventListener("keydown", handleEsc);
    }, [isOpen, onClose]);

    if (!document) return null;

    // Extraer datos
    const extractedData =
        document.extractedData &&
            typeof document.extractedData === "object" &&
            !Array.isArray(document.extractedData)
            ? (document.extractedData as Record<string, unknown>)
            : {};

    // Buscar array de items/productos
    const itemsKey = Object.keys(extractedData).find((key) =>
        key.toLowerCase().includes("item") || key.toLowerCase().includes("product")
    );
    const items = itemsKey && Array.isArray(extractedData[itemsKey])
        ? (extractedData[itemsKey] as Record<string, unknown>[])
        : [];

    // Campos generales (excluir items)
    const generalFields = Object.entries(extractedData).filter(
        ([key]) => key !== itemsKey
    );

    return (
        <>
            {/* Overlay */}
            <div
                className={`fixed inset-0 bg-overlay z-40 transition-opacity duration-300 ${isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
                    }`}
                onClick={onClose}
            />

            {/* Drawer */}
            <div
                className={`fixed right-0 top-0 h-full w-full md:w-[600px] bg-background shadow-2xl z-50 transform transition-transform duration-300 ease-in-out overflow-y-auto ${isOpen ? "translate-x-0" : "translate-x-full"
                    }`}
            >
                {/* Header */}
                <div className="sticky top-0 bg-background border-b border-border-subtle px-6 py-5 flex items-center justify-between z-10">
                    <div>
                        <h2 className="text-xl font-bold text-text">Detalles de Factura</h2>
                        <p className="text-sm text-text-subtle mt-0.5">{document.fileName}</p>
                    </div>
                    <button
                        onClick={onClose}
                        className="p-2 hover:bg-background-alt rounded-full transition-colors text-text-subtle hover:text-text-muted"
                    >
                        <LuX className="h-6 w-6" />
                    </button>
                </div>

                <div className="p-6 space-y-8">
                    {/* Información General */}
                    <div className="space-y-4">
                        <h3 className="text-xs font-bold text-text-subtle uppercase tracking-widest mb-4">
                            Información General
                        </h3>
                        {generalFields.map(([key, value]) => (
                            <div key={key} className="flex justify-between items-baseline py-1 group hover:bg-background-alt transition-colors rounded px-2 -mx-2">
                                <span className="text-sm font-medium text-text-muted capitalize">
                                    {key.replace(/_/g, " ")}:
                                </span>
                                <span className="text-sm font-semibold text-text text-right max-w-[60%] break-words">
                                    {typeof value === "object" && value !== null
                                        ? JSON.stringify(value)
                                        : String(value || "—")}
                                </span>
                            </div>
                        ))}
                    </div>

                    {/* Tabla de Productos */}
                    {items.length > 0 && (
                        <div>
                            <h3 className="text-xs font-bold text-text-subtle uppercase tracking-widest mb-4 flex items-center gap-2">
                                <LuPackage className="h-4 w-4" />
                                Productos
                            </h3>
                            <div className="border border-border rounded-lg overflow-hidden">
                                <table className="w-full text-sm">
                                    <thead className="bg-background-alt border-b border-border">
                                        <tr>
                                            {Object.keys(items[0]).map((key) => (
                                                <th
                                                    key={key}
                                                    className="px-4 py-3 text-left text-xs font-bold text-text-muted uppercase tracking-wider"
                                                >
                                                    {key.replace(/_/g, " ")}
                                                </th>
                                            ))}
                                        </tr>
                                    </thead>
                                    <tbody className="divide-y divide-border-subtle bg-background">
                                        {items.map((item, idx) => (
                                            <tr key={idx} className="hover:bg-background-alt transition-colors">
                                                {Object.values(item).map((val, i) => (
                                                    <td key={i} className="px-4 py-3 text-text font-medium">
                                                        {String(val || "—")}
                                                    </td>
                                                ))}
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    )}

                    {/* Meta Info (Empleado) */}
                    <div className="bg-info-background border border-info-border rounded-lg p-4 flex items-center justify-between">
                        <span className="text-sm font-medium text-info">Empleado:</span>
                        <span className="text-sm font-bold text-text">
                            {document.owner.name || document.owner.username}
                        </span>
                    </div>
                </div>

                {/* Footer Actions */}
                <div className="sticky bottom-0 bg-background border-t border-border-subtle px-6 py-4 flex gap-3 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
                    <Link
                        href={`/documents/${document.id}`}
                        className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary-hover transition-colors font-semibold shadow-sm shadow-primary/20"
                    >
                        <LuEye className="h-5 w-5" />
                        Ver Imagen Original
                    </Link>
                    <button
                        onClick={() => onDelete(document)}
                        className="flex items-center justify-center gap-2 px-6 py-3 bg-destructive text-destructive-foreground rounded-lg hover:bg-destructive-hover transition-colors font-semibold shadow-sm shadow-destructive/20"
                    >
                        <LuTrash2 className="h-5 w-5" />
                        Eliminar
                    </button>
                </div>
            </div>
        </>
    );
}