"use client";

import {
  ArrowRight,
  Calendar,
  CalendarCheck,
  CheckCircle2,
  Clock,
  DollarSign,
  Edit,
  FileText,
  Package,
  Trash2,
  User,
  X,
} from "lucide-react";
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 { Reservation, ReservationStatus } from "@/types/reservation";

interface ReservationDetailModalProps {
  isOpen: boolean;
  onClose: () => void;
  reservation: Reservation | null;
  onEdit: (reservation: Reservation) => void;
  onDelete: (id: string) => void;
  onConvertToRental: (id: string) => void;
}

export function ReservationDetailModal({
  isOpen,
  onClose,
  reservation,
  onEdit,
  onDelete,
  onConvertToRental,
}: ReservationDetailModalProps) {
  if (!isOpen || !reservation) return null;

  const renderStatusBadge = (status: ReservationStatus) => {
    switch (status) {
      case "CONFIRMED":
        return <Badge tone="blue">Confirmada (Sinal Pago)</Badge>;
      case "PENDING":
        return <Badge tone="blue">Pendente de Sinal</Badge>;
      case "CONVERTED":
        return <Badge tone="green">Convertida em Locação</Badge>;
      case "EXPIRED":
        return <Badge tone="red">Expirada</Badge>;
      case "CANCELED":
        return <Badge tone="red">Cancelada</Badge>;
      default:
        return <Badge tone="blue">{status}</Badge>;
    }
  };

  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 Reserva */}
        <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">
              <CalendarCheck className="h-7 w-7 text-primary" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h2 className="text-2xl font-bold font-mono">{reservation.code}</h2>
                {renderStatusBadge(reservation.status)}
              </div>
              <p className="text-sm text-muted-foreground flex items-center gap-2 mt-0.5">
                <span>Cliente: <strong className="text-foreground">{reservation.customer?.name}</strong></span>
                <span>•</span>
                <span>{reservation.customer?.document}</span>
              </p>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <Button variant="secondary" size="sm" onClick={() => onEdit(reservation)}>
              <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 reserva ${reservation.code}?`)) {
                  onDelete(reservation.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 Reservado */}
        <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 Reservada
          </h3>

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

            <div className="text-right">
              <p className="text-xs text-muted-foreground">Valor da Diária</p>
              <p className="text-lg font-bold text-primary">
                {currency(reservation.equipment?.dailyRate || 0)}/dia
              </p>
            </div>
          </div>
        </div>

        {/* Linha do Tempo e Depósito */}
        <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" /> Período da Reserva
            </p>
            <p className="mt-2 text-sm font-bold text-foreground">
              {formatDate(reservation.startDate)} até {formatDate(reservation.endDate)}
            </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" /> Validade da Reserva
            </p>
            <p className="mt-2 text-sm font-bold text-foreground">
              Até {formatDate(reservation.validUntil)}
            </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" />
              {reservation.status === "PENDING"
                ? "Sinal / Depósito Previsto"
                : "Sinal / Depósito Pago"}
            </p>
            <p className="mt-2 text-xl font-bold text-emerald-600 dark:text-emerald-400">
              {currency(reservation.depositAmount)}
            </p>
          </div>
        </div>

        {/* Observações */}
        {reservation.notes && (
          <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">
              Observações
            </h3>
            <p className="mt-1 text-sm text-foreground/90">{reservation.notes}</p>
          </div>
        )}

        {/* Botão Principal de Conversão em Locação */}
        {reservation.status !== "CONVERTED" && reservation.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">
                Pronto para entregar o equipamento?
              </h4>
              <p className="text-xs text-muted-foreground">
                Converta esta reserva em um contrato de locação ativo com 1-clique.
              </p>
            </div>
            <Button
              onClick={() => {
                onConvertToRental(reservation.id);
                onClose();
              }}
              className="bg-emerald-600 hover:bg-emerald-700 text-white shadow-xs"
            >
              Converter em Locação <ArrowRight className="ml-1.5 h-4 w-4" />
            </Button>
          </div>
        )}

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