/**
 * ContratoDetailPage - Detalle del contrato con tabs
 */

import { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
  ArrowLeft,
  FileText,
  Building2,
  Calendar,
  DollarSign,
  Pencil,
  Send,
  CheckCircle,
  PlayCircle,
  XCircle,
  ListTodo,
  FilePlus,
  Clock,
  Plus,
  Trash2,
} from 'lucide-react';
import {
  useContract,
  useContractPartidas,
  useContractAddendums,
  useSubmitContract,
  useApproveContract,
  useActivateContract,
  useCompleteContract,
  useTerminateContract,
  useDeleteContractPartida,
  useDeleteContractAddendum,
} from '../../../hooks/useContracts';
import type { Contract, ContractPartida, ContractAddendum } from '../../../types/contracts.types';
import {
  CONTRACT_TYPE_OPTIONS,
  CONTRACT_STATUS_OPTIONS,
  ADDENDUM_TYPE_OPTIONS,
  ADDENDUM_STATUS_OPTIONS,
} from '../../../types/contracts.types';
import {
  StatusBadgeFromOptions,
  LoadingOverlay,
  EmptyState,
  ConfirmDialog,
  Modal,
  ModalFooter,
  TextareaField,
} from '../../../components/common';
import { ContractForm } from '../../../components/contracts/ContractForm';
import { AddendaModal } from '../../../components/contracts/AddendaModal';
import { PartidaModal } from '../../../components/contracts/PartidaModal';

type TabType = 'info' | 'partidas' | 'addendas';

export function ContratoDetailPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState<TabType>('info');
  const [showEditModal, setShowEditModal] = useState(false);
  const [showAddendaModal, setShowAddendaModal] = useState(false);
  const [showPartidaModal, setShowPartidaModal] = useState(false);
  const [editingAddenda, setEditingAddenda] = useState<ContractAddendum | null>(null);
  const [editingPartida, setEditingPartida] = useState<ContractPartida | null>(null);
  const [deletePartidaId, setDeletePartidaId] = useState<string | null>(null);
  const [deleteAddendaId, setDeleteAddendaId] = useState<string | null>(null);
  const [showTerminateModal, setShowTerminateModal] = useState(false);
  const [terminateReason, setTerminateReason] = useState('');

  const { data: contract, isLoading, error } = useContract(id || '');
  const { data: partidas, isLoading: loadingPartidas } = useContractPartidas(id || '');
  const { data: addendums, isLoading: loadingAddendums } = useContractAddendums(id || '');

  const submitMutation = useSubmitContract();
  const approveMutation = useApproveContract();
  const activateMutation = useActivateContract();
  const completeMutation = useCompleteContract();
  const terminateMutation = useTerminateContract();
  const deletePartidaMutation = useDeleteContractPartida();
  const deleteAddendaMutation = useDeleteContractAddendum();

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('es-MX', {
      style: 'currency',
      currency: 'MXN',
    }).format(value);
  };

  const handleSubmit = async () => {
    if (id) await submitMutation.mutateAsync(id);
  };

  const handleApprove = async () => {
    if (id) await approveMutation.mutateAsync(id);
  };

  const handleActivate = async () => {
    if (id) await activateMutation.mutateAsync(id);
  };

  const handleComplete = async () => {
    if (id) await completeMutation.mutateAsync(id);
  };

  const handleTerminate = async () => {
    if (id && terminateReason) {
      await terminateMutation.mutateAsync({ id, reason: terminateReason });
      setShowTerminateModal(false);
      setTerminateReason('');
    }
  };

  const handleDeletePartida = async () => {
    if (id && deletePartidaId) {
      await deletePartidaMutation.mutateAsync({ contractId: id, partidaId: deletePartidaId });
      setDeletePartidaId(null);
    }
  };

  const handleDeleteAddenda = async () => {
    if (id && deleteAddendaId) {
      await deleteAddendaMutation.mutateAsync({ contractId: id, addendumId: deleteAddendaId });
      setDeleteAddendaId(null);
    }
  };

  if (isLoading) {
    return <LoadingOverlay message="Cargando contrato..." />;
  }

  if (error || !contract) {
    return (
      <EmptyState
        title="Contrato no encontrado"
        description="El contrato solicitado no existe o fue eliminado."
      />
    );
  }

  const tabs = [
    { id: 'info', label: 'Informacion General', icon: FileText },
    { id: 'partidas', label: 'Partidas', icon: ListTodo, count: partidas?.length },
    { id: 'addendas', label: 'Addendas', icon: FilePlus, count: addendums?.length },
  ];

  const canSubmit = contract.status === 'draft';
  const canApprove = contract.status === 'review';
  const canActivate = contract.status === 'approved';
  const canComplete = contract.status === 'active';
  const canTerminate = ['active', 'approved'].includes(contract.status);

  return (
    <div>
      {/* Header */}
      <div className="mb-6">
        <button
          onClick={() => navigate('/admin/contratos')}
          className="flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 mb-4"
        >
          <ArrowLeft className="w-4 h-4 mr-2" />
          Volver a contratos
        </button>

        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
          <div className="flex items-start gap-4">
            <div className="p-3 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
              <FileText className="w-8 h-8 text-blue-600 dark:text-blue-400" />
            </div>
            <div>
              <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
                {contract.contractNumber}
              </h1>
              <p className="text-gray-600 dark:text-gray-400">{contract.name}</p>
              <div className="flex items-center gap-3 mt-2">
                <StatusBadgeFromOptions
                  value={contract.contractType}
                  options={[...CONTRACT_TYPE_OPTIONS]}
                />
                <StatusBadgeFromOptions
                  value={contract.status}
                  options={[...CONTRACT_STATUS_OPTIONS]}
                />
              </div>
            </div>
          </div>

          <div className="flex flex-wrap gap-2">
            <button
              onClick={() => setShowEditModal(true)}
              className="flex items-center px-4 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
            >
              <Pencil className="w-4 h-4 mr-2" />
              Editar
            </button>

            {canSubmit && (
              <button
                onClick={handleSubmit}
                disabled={submitMutation.isPending}
                className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
              >
                <Send className="w-4 h-4 mr-2" />
                Enviar a Revision
              </button>
            )}

            {canApprove && (
              <button
                onClick={handleApprove}
                disabled={approveMutation.isPending}
                className="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50"
              >
                <CheckCircle className="w-4 h-4 mr-2" />
                Aprobar
              </button>
            )}

            {canActivate && (
              <button
                onClick={handleActivate}
                disabled={activateMutation.isPending}
                className="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50"
              >
                <PlayCircle className="w-4 h-4 mr-2" />
                Activar
              </button>
            )}

            {canComplete && (
              <button
                onClick={handleComplete}
                disabled={completeMutation.isPending}
                className="flex items-center px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50"
              >
                <CheckCircle className="w-4 h-4 mr-2" />
                Completar
              </button>
            )}

            {canTerminate && (
              <button
                onClick={() => setShowTerminateModal(true)}
                className="flex items-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
              >
                <XCircle className="w-4 h-4 mr-2" />
                Terminar
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400">Monto Contrato</p>
              <p className="text-xl font-bold text-gray-900 dark:text-gray-100">
                {formatCurrency(contract.contractAmount)}
              </p>
            </div>
            <DollarSign className="w-8 h-8 text-blue-500" />
          </div>
        </div>
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400">Facturado</p>
              <p className="text-xl font-bold text-green-600">
                {formatCurrency(contract.invoicedAmount)}
              </p>
            </div>
            <FileText className="w-8 h-8 text-green-500" />
          </div>
        </div>
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400">Pagado</p>
              <p className="text-xl font-bold text-blue-600">
                {formatCurrency(contract.paidAmount)}
              </p>
            </div>
            <DollarSign className="w-8 h-8 text-blue-500" />
          </div>
        </div>
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400">Avance</p>
              <p className="text-xl font-bold text-gray-900 dark:text-gray-100">
                {contract.progressPercentage}%
              </p>
            </div>
            <div className="w-12 h-12 relative">
              <svg className="w-full h-full" viewBox="0 0 36 36">
                <path
                  className="text-gray-200 dark:text-gray-700"
                  strokeWidth="3"
                  stroke="currentColor"
                  fill="none"
                  d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831a 15.9155 15.9155 0 0 1 0 -31.831"
                />
                <path
                  className="text-blue-600"
                  strokeWidth="3"
                  strokeLinecap="round"
                  stroke="currentColor"
                  fill="none"
                  strokeDasharray={`${contract.progressPercentage}, 100`}
                  d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831a 15.9155 15.9155 0 0 1 0 -31.831"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm">
        <div className="border-b border-gray-200 dark:border-gray-700">
          <nav className="flex -mb-px">
            {tabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id as TabType)}
                className={`flex items-center px-6 py-4 border-b-2 font-medium text-sm transition-colors ${
                  activeTab === tab.id
                    ? 'border-blue-500 text-blue-600 dark:text-blue-400'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
                }`}
              >
                <tab.icon className="w-4 h-4 mr-2" />
                {tab.label}
                {tab.count !== undefined && (
                  <span className="ml-2 px-2 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded-full">
                    {tab.count}
                  </span>
                )}
              </button>
            ))}
          </nav>
        </div>

        <div className="p-6">
          {activeTab === 'info' && <ContractInfoTab contract={contract} />}
          {activeTab === 'partidas' && (
            <PartidasTab
              partidas={partidas || []}
              isLoading={loadingPartidas}
              onAdd={() => {
                setEditingPartida(null);
                setShowPartidaModal(true);
              }}
              onEdit={(p) => {
                setEditingPartida(p);
                setShowPartidaModal(true);
              }}
              onDelete={setDeletePartidaId}
            />
          )}
          {activeTab === 'addendas' && (
            <AddendasTab
              addendums={addendums || []}
              isLoading={loadingAddendums}
              onAdd={() => {
                setEditingAddenda(null);
                setShowAddendaModal(true);
              }}
              onEdit={(a) => {
                setEditingAddenda(a);
                setShowAddendaModal(true);
              }}
              onDelete={setDeleteAddendaId}
            />
          )}
        </div>
      </div>

      {/* Modals */}
      {showEditModal && (
        <ContractForm
          contract={contract}
          onClose={() => setShowEditModal(false)}
        />
      )}

      {showAddendaModal && (
        <AddendaModal
          contractId={id || ''}
          addendum={editingAddenda}
          onClose={() => {
            setShowAddendaModal(false);
            setEditingAddenda(null);
          }}
        />
      )}

      {showPartidaModal && (
        <PartidaModal
          contractId={id || ''}
          partida={editingPartida}
          onClose={() => {
            setShowPartidaModal(false);
            setEditingPartida(null);
          }}
        />
      )}

      {/* Terminate Modal */}
      {showTerminateModal && (
        <Modal
          isOpen={true}
          onClose={() => setShowTerminateModal(false)}
          title="Terminar Contrato"
          size="md"
          footer={
            <ModalFooter>
              <button
                type="button"
                className="px-4 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
                onClick={() => setShowTerminateModal(false)}
              >
                Cancelar
              </button>
              <button
                type="button"
                onClick={handleTerminate}
                disabled={!terminateReason || terminateMutation.isPending}
                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
              >
                {terminateMutation.isPending ? 'Terminando...' : 'Terminar Contrato'}
              </button>
            </ModalFooter>
          }
        >
          <TextareaField
            label="Razon de terminacion"
            required
            value={terminateReason}
            onChange={(e) => setTerminateReason(e.target.value)}
            placeholder="Describa la razon por la cual se termina el contrato..."
            rows={4}
          />
        </Modal>
      )}

      {/* Delete Confirmations */}
      <ConfirmDialog
        isOpen={!!deletePartidaId}
        onClose={() => setDeletePartidaId(null)}
        onConfirm={handleDeletePartida}
        title="Eliminar Partida"
        message="Esta seguro de eliminar esta partida del contrato?"
        confirmLabel="Eliminar"
        variant="danger"
        isLoading={deletePartidaMutation.isPending}
      />

      <ConfirmDialog
        isOpen={!!deleteAddendaId}
        onClose={() => setDeleteAddendaId(null)}
        onConfirm={handleDeleteAddenda}
        title="Eliminar Addenda"
        message="Esta seguro de eliminar esta addenda?"
        confirmLabel="Eliminar"
        variant="danger"
        isLoading={deleteAddendaMutation.isPending}
      />
    </div>
  );
}

// ============================================================================
// CONTRACT INFO TAB
// ============================================================================

function ContractInfoTab({ contract }: { contract: Contract }) {
  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString('es-MX', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    });
  };

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
      {/* General Info */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center">
          <FileText className="w-5 h-5 mr-2" />
          Datos Generales
        </h3>
        <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 space-y-3">
          <InfoRow label="Numero de Contrato" value={contract.contractNumber} />
          <InfoRow label="Nombre" value={contract.name} />
          {contract.description && (
            <InfoRow label="Descripcion" value={contract.description} />
          )}
          <InfoRow label="Moneda" value={contract.currency} />
          <InfoRow label="Retencion" value={`${contract.retentionPercentage}%`} />
          <InfoRow label="Anticipo" value={`${contract.advancePercentage}%`} />
        </div>
      </div>

      {/* Client/Subcontractor Info */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center">
          <Building2 className="w-5 h-5 mr-2" />
          {contract.contractType === 'client' ? 'Datos del Cliente' : 'Datos del Subcontratista'}
        </h3>
        <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 space-y-3">
          {contract.contractType === 'client' ? (
            <>
              <InfoRow label="Cliente" value={contract.clientName || '-'} />
              <InfoRow label="RFC" value={contract.clientRfc || '-'} />
              <InfoRow label="Direccion" value={contract.clientAddress || '-'} />
            </>
          ) : (
            <>
              <InfoRow label="Subcontratista" value={contract.subcontractor?.businessName || '-'} />
              <InfoRow label="RFC" value={contract.subcontractor?.rfc || '-'} />
              <InfoRow label="Especialidad" value={contract.specialty || '-'} />
            </>
          )}
        </div>
      </div>

      {/* Dates */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center">
          <Calendar className="w-5 h-5 mr-2" />
          Vigencia
        </h3>
        <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 space-y-3">
          <InfoRow label="Fecha Inicio" value={formatDate(contract.startDate)} />
          <InfoRow label="Fecha Fin" value={formatDate(contract.endDate)} />
          {contract.signedAt && (
            <InfoRow label="Fecha Firma" value={formatDate(contract.signedAt)} />
          )}
        </div>
      </div>

      {/* Payment Terms */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center">
          <DollarSign className="w-5 h-5 mr-2" />
          Condiciones de Pago
        </h3>
        <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
          <p className="text-sm text-gray-700 dark:text-gray-300">
            {contract.paymentTerms || 'Sin condiciones especificas'}
          </p>
        </div>
      </div>

      {/* Audit Info */}
      <div className="space-y-4 lg:col-span-2">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center">
          <Clock className="w-5 h-5 mr-2" />
          Historial
        </h3>
        <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 space-y-3">
          <InfoRow label="Creado" value={formatDate(contract.createdAt)} />
          <InfoRow label="Actualizado" value={formatDate(contract.updatedAt)} />
          {contract.submittedAt && (
            <InfoRow label="Enviado a revision" value={formatDate(contract.submittedAt)} />
          )}
          {contract.approvedAt && (
            <InfoRow label="Aprobado" value={formatDate(contract.approvedAt)} />
          )}
          {contract.terminatedAt && (
            <>
              <InfoRow label="Terminado" value={formatDate(contract.terminatedAt)} />
              <InfoRow label="Razon" value={contract.terminationReason || '-'} />
            </>
          )}
        </div>
      </div>

      {/* Notes */}
      {contract.notes && (
        <div className="space-y-4 lg:col-span-2">
          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
            Notas
          </h3>
          <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
            <p className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
              {contract.notes}
            </p>
          </div>
        </div>
      )}
    </div>
  );
}

function InfoRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex justify-between">
      <span className="text-sm text-gray-500 dark:text-gray-400">{label}</span>
      <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{value}</span>
    </div>
  );
}

// ============================================================================
// PARTIDAS TAB
// ============================================================================

interface PartidasTabProps {
  partidas: ContractPartida[];
  isLoading: boolean;
  onAdd: () => void;
  onEdit: (partida: ContractPartida) => void;
  onDelete: (id: string) => void;
}

function PartidasTab({ partidas, isLoading, onAdd, onEdit, onDelete }: PartidasTabProps) {
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('es-MX', {
      style: 'currency',
      currency: 'MXN',
    }).format(value);
  };

  if (isLoading) {
    return <div className="text-center py-8 text-gray-500">Cargando partidas...</div>;
  }

  const total = partidas.reduce((sum, p) => sum + (p.totalAmount || p.quantity * p.unitPrice), 0);

  return (
    <div>
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
          Partidas del Contrato
        </h3>
        <button
          onClick={onAdd}
          className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
        >
          <Plus className="w-4 h-4 mr-2" />
          Agregar Partida
        </button>
      </div>

      {partidas.length === 0 ? (
        <EmptyState
          icon={<ListTodo className="w-12 h-12 text-gray-400" />}
          title="Sin partidas"
          description="Agrega las partidas del contrato."
        />
      ) : (
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead className="bg-gray-50 dark:bg-gray-700">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">
                  Concepto
                </th>
                <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">
                  Cantidad
                </th>
                <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">
                  P.U.
                </th>
                <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">
                  Total
                </th>
                <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">
                  Acciones
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
              {partidas.map((partida) => (
                <tr key={partida.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
                  <td className="px-4 py-3">
                    <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
                      {partida.conceptoCode || 'N/A'}
                    </div>
                    <div className="text-sm text-gray-500 dark:text-gray-400">
                      {partida.conceptoDescription || '-'}
                    </div>
                  </td>
                  <td className="px-4 py-3 text-right text-sm text-gray-900 dark:text-gray-100">
                    {partida.quantity.toLocaleString()} {partida.unit || ''}
                  </td>
                  <td className="px-4 py-3 text-right text-sm text-gray-900 dark:text-gray-100">
                    {formatCurrency(partida.unitPrice)}
                  </td>
                  <td className="px-4 py-3 text-right text-sm font-medium text-gray-900 dark:text-gray-100">
                    {formatCurrency(partida.totalAmount || partida.quantity * partida.unitPrice)}
                  </td>
                  <td className="px-4 py-3 text-right">
                    <div className="flex items-center justify-end gap-1">
                      <button
                        onClick={() => onEdit(partida)}
                        className="p-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded"
                      >
                        <Pencil className="w-4 h-4" />
                      </button>
                      <button
                        onClick={() => onDelete(partida.id)}
                        className="p-1 text-gray-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
            <tfoot className="bg-gray-50 dark:bg-gray-700">
              <tr>
                <td colSpan={3} className="px-4 py-3 text-right text-sm font-medium text-gray-900 dark:text-gray-100">
                  Total:
                </td>
                <td className="px-4 py-3 text-right text-sm font-bold text-gray-900 dark:text-gray-100">
                  {formatCurrency(total)}
                </td>
                <td></td>
              </tr>
            </tfoot>
          </table>
        </div>
      )}
    </div>
  );
}

// ============================================================================
// ADDENDAS TAB
// ============================================================================

interface AddendasTabProps {
  addendums: ContractAddendum[];
  isLoading: boolean;
  onAdd: () => void;
  onEdit: (addendum: ContractAddendum) => void;
  onDelete: (id: string) => void;
}

function AddendasTab({ addendums, isLoading, onAdd, onEdit, onDelete }: AddendasTabProps) {
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('es-MX', {
      style: 'currency',
      currency: 'MXN',
    }).format(value);
  };

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString('es-MX', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    });
  };

  if (isLoading) {
    return <div className="text-center py-8 text-gray-500">Cargando addendas...</div>;
  }

  return (
    <div>
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
          Addendas del Contrato
        </h3>
        <button
          onClick={onAdd}
          className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
        >
          <Plus className="w-4 h-4 mr-2" />
          Nueva Addenda
        </button>
      </div>

      {addendums.length === 0 ? (
        <EmptyState
          icon={<FilePlus className="w-12 h-12 text-gray-400" />}
          title="Sin addendas"
          description="No hay addendas registradas para este contrato."
        />
      ) : (
        <div className="space-y-4">
          {addendums.map((addendum) => (
            <div
              key={addendum.id}
              className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50"
            >
              <div className="flex items-start justify-between">
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-2">
                    <span className="font-medium text-gray-900 dark:text-gray-100">
                      {addendum.addendumNumber}
                    </span>
                    <StatusBadgeFromOptions
                      value={addendum.addendumType}
                      options={[...ADDENDUM_TYPE_OPTIONS]}
                    />
                    <StatusBadgeFromOptions
                      value={addendum.status}
                      options={[...ADDENDUM_STATUS_OPTIONS]}
                    />
                  </div>
                  <h4 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1">
                    {addendum.title}
                  </h4>
                  <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                    {addendum.description}
                  </p>
                  <div className="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
                    <span>Vigencia: {formatDate(addendum.effectiveDate)}</span>
                    {addendum.amountChange !== 0 && (
                      <span className={addendum.amountChange > 0 ? 'text-green-600' : 'text-red-600'}>
                        {addendum.amountChange > 0 ? '+' : ''}{formatCurrency(addendum.amountChange)}
                      </span>
                    )}
                    {addendum.newEndDate && (
                      <span>Nueva fecha fin: {formatDate(addendum.newEndDate)}</span>
                    )}
                  </div>
                </div>
                <div className="flex items-center gap-1 ml-4">
                  <button
                    onClick={() => onEdit(addendum)}
                    className="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg"
                  >
                    <Pencil className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => onDelete(addendum.id)}
                    className="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}