"use client";

import {
  BriefcaseBusiness,
  DollarSign,
  Edit,
  ExternalLink,
  Mail,
  Phone,
  Trash2,
  User,
  X,
} from "lucide-react";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { currency, formatDate } from "@/lib/utils";
import { Supplier } from "@/types/supplier";

interface SupplierDetailModalProps {
  isOpen: boolean;
  onClose: () => void;
  supplier: Supplier | null;
  onEdit: (supplier: Supplier) => void;
  onDelete: (id: string) => void;
}

export function SupplierDetailModal({
  isOpen,
  onClose,
  supplier,
  onEdit,
  onDelete,
}: SupplierDetailModalProps) {
  if (!isOpen || !supplier) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs transition-all">
      <Card className="w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6 shadow-2xl">
        {/* Header do Fornecedor */}
        <div className="flex flex-wrap items-start justify-between gap-4 border-b pb-4">
          <div className="flex items-center gap-3">
            <div className="rounded-xl border bg-muted/60 p-3">
              <BriefcaseBusiness className="h-7 w-7 text-primary" />
            </div>
            <div>
              <h2 className="text-xl font-bold">{supplier.name}</h2>
              {supplier.document && (
                <p className="text-xs font-mono text-muted-foreground mt-0.5">
                  CNPJ/CPF: {supplier.document}
                </p>
              )}
            </div>
          </div>

          <div className="flex items-center gap-2">
            <Button variant="secondary" size="sm" onClick={() => onEdit(supplier)}>
              <Edit className="mr-1.5 h-4 w-4" /> Editar
            </Button>

            <Button
              variant="ghost"
              size="icon"
              className="text-rose-500 hover:bg-rose-500/10 hover:text-rose-600"
              onClick={() => {
                if (confirm(`Tem certeza que deseja excluir o fornecedor ${supplier.name}?`)) {
                  onDelete(supplier.id);
                  onClose();
                }
              }}
            >
              <Trash2 className="h-4 w-4" />
            </Button>

            <Button variant="ghost" size="icon" onClick={onClose}>
              <X className="h-5 w-5" />
            </Button>
          </div>
        </div>

        {/* Informações de Contato */}
        <div className="mt-5 grid gap-4 sm:grid-cols-3">
          <div className="rounded-xl border bg-muted/40 p-3.5">
            <p className="text-xs font-medium uppercase text-muted-foreground flex items-center gap-1.5">
              <User className="h-3.5 w-3.5 text-blue-500" /> Contato Direto
            </p>
            <p className="mt-1.5 text-sm font-semibold text-foreground">
              {supplier.contactName || "Não informado"}
            </p>
          </div>

          <div className="rounded-xl border bg-muted/40 p-3.5">
            <p className="text-xs font-medium uppercase text-muted-foreground flex items-center gap-1.5">
              <Phone className="h-3.5 w-3.5 text-emerald-500" /> Telefone
            </p>
            <p className="mt-1.5 text-sm font-semibold text-foreground font-mono">
              {supplier.phone || "Não informado"}
            </p>
          </div>

          <div className="rounded-xl border bg-muted/40 p-3.5">
            <p className="text-xs font-medium uppercase text-muted-foreground flex items-center gap-1.5">
              <Mail className="h-3.5 w-3.5 text-purple-500" /> E-mail
            </p>
            <p className="mt-1.5 text-sm font-semibold text-foreground truncate">
              {supplier.email || "Não informado"}
            </p>
          </div>
        </div>

        {/* Resumo Financeiro */}
        <div className="mt-5 rounded-xl border bg-purple-500/10 p-4 border-purple-500/30 flex flex-wrap items-center justify-between gap-4">
          <div>
            <p className="text-xs font-bold uppercase tracking-wider text-purple-700 dark:text-purple-300 flex items-center gap-1.5">
              <DollarSign className="h-4 w-4" /> Títulos no Contas a Pagar
            </p>
            <p className="text-xl font-bold text-purple-900 dark:text-purple-100 mt-1">
              {currency(supplier.totalOpenAmount || 0)} em aberto
            </p>
            <p className="text-xs text-muted-foreground mt-0.5">
              Total de <strong>{supplier.openPayablesCount || 0}</strong> faturas pendentes de pagamento.
            </p>
          </div>

          <Link href={`/financeiro?tab=PAYABLES&search=${encodeURIComponent(supplier.name)}`}>
            <Button size="sm" variant="secondary" className="gap-1.5">
              Ver no Financeiro <ExternalLink className="h-3.5 w-3.5" />
            </Button>
          </Link>
        </div>

        {/* Títulos Financeiros Vinculados */}
        {supplier.payables && supplier.payables.length > 0 && (
          <div className="mt-5 space-y-2">
            <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
              Histórico de Lançamentos Associados
            </h3>
            <div className="divide-y rounded-lg border bg-card text-xs">
              {supplier.payables.map((p) => (
                <div key={p.id} className="flex items-center justify-between p-3">
                  <div>
                    <p className="font-semibold text-foreground">{p.description || "Ordem de Manutenção"}</p>
                    <p className="text-muted-foreground">Vencimento: {formatDate(p.dueDate)}</p>
                  </div>
                  <div className="text-right">
                    <p className="font-bold text-foreground">{currency(p.amount)}</p>
                    <Badge tone={p.status === "PAID" ? "green" : "blue"}>
                      {p.status === "PAID" ? "PAGO" : "EM ABERTO"}
                    </Badge>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        <div className="mt-6 flex justify-end border-t pt-4">
          <Button variant="secondary" onClick={onClose}>
            Fechar
          </Button>
        </div>
      </Card>
    </div>
  );
}