"use client";

import {
  Calendar,
  CheckCircle2,
  Clock,
  DollarSign,
  Edit,
  ExternalLink,
  Package,
  Trash2,
  Wrench,
  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 { MaintenanceStatus, ServiceOrder } from "@/types/maintenance";

interface MaintenanceDetailModalProps {
  isOpen: boolean;
  onClose: () => void;
  serviceOrder: ServiceOrder | null;
  onEdit: (serviceOrder: ServiceOrder) => void;
  onDelete: (id: string) => void;
  onStatusChange: (id: string, status: MaintenanceStatus) => void;
}

export function MaintenanceDetailModal({
  isOpen,
  onClose,
  serviceOrder,
  onEdit,
  onDelete,
  onStatusChange,
}: MaintenanceDetailModalProps) {
  if (!isOpen || !serviceOrder) return null;

  const renderStatusBadge = (status: MaintenanceStatus) => {
    switch (status) {
      case "OPEN":
        return <Badge tone="blue">Aberta (Pendente)</Badge>;
      case "IN_PROGRESS":
        return <Badge tone="blue">Em Andamento</Badge>;
      case "DONE":
        return <Badge tone="green">Concluída</Badge>;
      case "CANCELED":
        return <Badge tone="red">Cancelada</Badge>;
      default:
        return <Badge tone="blue">{status}</Badge>;
    }
  };

  const payable = serviceOrder.payables && serviceOrder.payables[0];

  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-3xl max-h-[90vh] overflow-y-auto p-6 shadow-2xl">
        {/* Header da OS */}
        <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">
              <Wrench className="h-7 w-7 text-primary" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h2 className="text-2xl font-bold font-mono">{serviceOrder.code}</h2>
                {renderStatusBadge(serviceOrder.status)}
              </div>
              <p className="text-sm font-semibold text-foreground mt-0.5">
                {serviceOrder.title}
              </p>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <Button variant="secondary" size="sm" onClick={() => onEdit(serviceOrder)}>
              <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 a OS ${serviceOrder.code}?`)) {
                  onDelete(serviceOrder.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>

        {/* Detalhes do Equipamento */}
        <div className="mt-6 rounded-xl border bg-card p-4">
          <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-2 mb-3">
            <Package className="h-4 w-4" /> Máquina Vinculada à Manutenção
          </h3>

          <div className="flex flex-wrap items-center justify-between gap-4">
            <div>
              <p className="font-bold text-lg text-foreground">
                {serviceOrder.equipment
                  ? `${serviceOrder.equipment.brand} ${serviceOrder.equipment.model}`
                  : "Equipamento Industrial"}
              </p>
              <p className="text-xs font-mono text-muted-foreground">
                Código: {serviceOrder.equipment?.code || "EQ-100"} ({serviceOrder.equipment?.assetTag || "PAT-900"})
              </p>
            </div>

            <div className="text-right">
              <p className="text-xs text-muted-foreground">Status Atual da Máquina</p>
              <span className="inline-block mt-1 font-bold text-sm text-amber-600 dark:text-amber-400 font-mono">
                {serviceOrder.equipment?.status || "MANUTENÇÃO"}
              </span>
            </div>
          </div>
        </div>

        {/* Linha do Tempo e Custo */}
        <div className="mt-5 grid gap-4 sm:grid-cols-3">
          <div className="rounded-xl border bg-muted/40 p-4">
            <p className="text-xs font-medium uppercase text-muted-foreground flex items-center gap-1.5">
              <Calendar className="h-4 w-4 text-blue-500" /> Data de Abertura
            </p>
            <p className="mt-2 text-sm font-bold text-foreground">
              {formatDate(serviceOrder.openedAt)}
            </p>
          </div>

          <div className="rounded-xl border bg-muted/40 p-4">
            <p className="text-xs font-medium uppercase text-muted-foreground flex items-center gap-1.5">
              <Clock className="h-4 w-4 text-amber-500" /> Data de Encerramento
            </p>
            <p className="mt-2 text-sm font-bold text-foreground">
              {serviceOrder.closedAt ? formatDate(serviceOrder.closedAt) : "Em aberto"}
            </p>
          </div>

          <div className="rounded-xl border bg-muted/40 p-4">
            <p className="text-xs font-medium uppercase text-muted-foreground flex items-center gap-1.5">
              <DollarSign className="h-4 w-4 text-emerald-500" /> Custo Total da Manutenção
            </p>
            <p className="mt-2 text-xl font-bold text-emerald-600 dark:text-emerald-400">
              {currency(serviceOrder.cost)}
            </p>
          </div>
        </div>

        {/* Informações do Contas a Pagar Vinculado */}
        {payable ? (
          <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-2">
                <DollarSign className="h-4 w-4" /> Título Vinculado no Contas a Pagar
              </p>
              <p className="text-sm font-semibold text-foreground mt-1">
                {payable.supplier ? `Fornecedor: ${payable.supplier.name}` : "Fornecedor não especificado"}
              </p>
              <p className="text-xs text-muted-foreground mt-0.5">
                Vencimento: <strong>{formatDate(payable.dueDate)}</strong> • Status: <strong>{payable.status}</strong>
              </p>
            </div>
            <Link href="/financeiro">
              <Button size="sm" variant="secondary" className="gap-1.5">
                Ver no Financeiro <ExternalLink className="h-3.5 w-3.5" />
              </Button>
            </Link>
          </div>
        ) : (
          <div className="mt-5 rounded-xl border bg-muted/30 p-3 text-xs text-muted-foreground flex items-center justify-between">
            <span>Nenhum título no Contas a Pagar gerado para esta OS.</span>
            <Button size="sm" variant="ghost" onClick={() => onEdit(serviceOrder)}>
              Gerar no Financeiro
            </Button>
          </div>
        )}

        {/* Descrição Detalhada */}
        {serviceOrder.description && (
          <div className="mt-5 rounded-xl border bg-blue-500/5 p-4 border-blue-500/20">
            <h3 className="text-xs font-semibold uppercase tracking-wider text-blue-600 dark:text-blue-400">
              Descrição dos Serviços e Diagnóstico Técnico
            </h3>
            <p className="mt-1.5 text-sm text-foreground/90 whitespace-pre-line">{serviceOrder.description}</p>
          </div>
        )}

        {/* Ações Rápidas de Transição de Status */}
        {serviceOrder.status !== "DONE" && serviceOrder.status !== "CANCELED" && (
          <div className="mt-6 rounded-xl border bg-emerald-500/10 p-4 border-emerald-500/30 flex flex-wrap items-center justify-between gap-4">
            <div>
              <h4 className="font-bold text-emerald-700 dark:text-emerald-300">
                Ações da Ordem de Serviço
              </h4>
              <p className="text-xs text-muted-foreground">
                Atualize o status ou conclua a manutenção para liberar a máquina no sistema.
              </p>
            </div>
            <div className="flex items-center gap-2">
              {serviceOrder.status === "OPEN" && (
                <Button
                  onClick={() => {
                    onStatusChange(serviceOrder.id, "IN_PROGRESS");
                    onClose();
                  }}
                  variant="secondary"
                  className="shadow-xs"
                >
                  <Wrench className="mr-1.5 h-4 w-4" /> Iniciar Reparo
                </Button>
              )}
              <Button
                onClick={() => {
                  onStatusChange(serviceOrder.id, "DONE");
                  onClose();
                }}
                className="bg-emerald-600 hover:bg-emerald-700 text-white shadow-xs"
              >
                <CheckCircle2 className="mr-1.5 h-4 w-4" /> Concluir OS
              </Button>
            </div>
          </div>
        )}

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