'use client';

import { forwardRef } from 'react';
import type { Cfdi } from '@horux/shared';

interface CfdiConcepto {
  descripcion: string;
  cantidad: number;
  valorUnitario: number;
  importe: number;
  claveUnidad?: string;
  claveProdServ?: string;
  noIdentificacion?: string;
}

interface CfdiInvoiceProps {
  cfdi: Cfdi;
  conceptos?: CfdiConcepto[];
}

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

const formatDate = (dateString: string) => {
  const d = new Date(dateString);
  d.setHours(d.getHours() - 1);
  return d.toLocaleDateString('es-MX', {
    day: '2-digit',
    month: 'long',
    year: 'numeric',
  });
};

const formatDateTime = (dateString: string) => {
  const d = new Date(dateString);
  d.setHours(d.getHours() - 1);
  return d.toLocaleString('es-MX', {
    day: '2-digit',
    month: 'short',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  });
};

const typeLabels: Record<string, string> = {
  EMITIDO: 'Emitido',
  RECIBIDO: 'Recibido',
};

const tipoCompLabels: Record<string, string> = {
  I: 'Ingreso',
  E: 'Egreso',
  T: 'Traslado',
  P: 'Pago',
  N: 'Nómina',
};

const formaPagoLabels: Record<string, string> = {
  '01': 'Efectivo',
  '02': 'Cheque nominativo',
  '03': 'Transferencia electrónica',
  '04': 'Tarjeta de crédito',
  '28': 'Tarjeta de débito',
  '99': 'Por definir',
};

const metodoPagoLabels: Record<string, string> = {
  PUE: 'Pago en una sola exhibición',
  PPD: 'Pago en parcialidades o diferido',
};

const regimenFiscalLabels: Record<string, string> = {
  '601': 'General de Ley Personas Morales',
  '603': 'Personas Morales con Fines no Lucrativos',
  '605': 'Sueldos y Salarios e Ingresos Asimilados a Salarios',
  '606': 'Arrendamiento',
  '608': 'Demás ingresos',
  '609': 'Consolidación',
  '610': 'Residentes en el Extranjero sin Establecimiento Permanente en México',
  '611': 'Ingresos por Dividendos (socios y accionistas)',
  '612': 'Personas Físicas con Actividades Empresariales y Profesionales',
  '614': 'Ingresos por intereses',
  '615': 'Régimen de los ingresos por obtención de premios',
  '616': 'Sin obligaciones fiscales',
  '620': 'Sociedades Cooperativas de Producción que optan por diferir sus ingresos',
  '621': 'Incorporación Fiscal',
  '622': 'Actividades Agrícolas, Ganaderas, Silvícolas y Pesqueras',
  '623': 'Opcional para Grupos de Sociedades',
  '624': 'Coordinados',
  '625': 'Régimen de las Actividades Empresariales con ingresos a través de Plataformas Tecnológicas',
  '626': 'Régimen Simplificado de Confianza',
};

const tipoRelacionLabels: Record<string, string> = {
  '01': 'Nota de crédito',
  '02': 'Nota de débito',
  '03': 'Devolución de mercancía',
  '04': 'Sustitución de CFDI previo',
  '05': 'Traslados de mercancias facturados previamente',
  '06': 'Factura generada por traslados previos',
  '07': 'CFDI por aplicación de anticipo',
};

const usoCfdiLabels: Record<string, string> = {
  G01: 'Adquisición de mercancías',
  G02: 'Devoluciones, descuentos o bonificaciones',
  G03: 'Gastos en general',
  I01: 'Construcciones',
  I02: 'Mobilario y equipo de oficina',
  I03: 'Equipo de transporte',
  I04: 'Equipo de cómputo',
  I05: 'Dados, troqueles, moldes',
  I06: 'Comunicaciones telefónicas',
  I07: 'Comunicaciones satelitales',
  I08: 'Otra maquinaria y equipo',
  D01: 'Honorarios médicos',
  D02: 'Gastos médicos por incapacidad',
  D03: 'Gastos funerales',
  D04: 'Donativos',
  D05: 'Intereses por créditos hipotecarios',
  D06: 'Aportaciones voluntarias SAR',
  D07: 'Primas por seguros de gastos médicos',
  D08: 'Gastos de transportación escolar',
  D09: 'Depósitos en cuentas para el ahorro',
  D10: 'Pagos por servicios educativos',
  P01: 'Por definir',
  S01: 'Sin efectos fiscales',
  CP01: 'Pagos',
  CN01: 'Nómina',
};

export const CfdiInvoice = forwardRef<HTMLDivElement, CfdiInvoiceProps>(
  ({ cfdi, conceptos }, ref) => {
    return (
      <div
        ref={ref}
        className="bg-white text-gray-800 max-w-[850px] mx-auto text-sm shadow-lg"
        style={{ fontFamily: 'Segoe UI, Roboto, Arial, sans-serif' }}
      >
        {/* Header con gradiente */}
        <div className="bg-gradient-to-r from-blue-700 to-blue-900 text-white p-6">
          <div className="flex justify-between items-start">
            <div>
              <h2 className="text-lg font-semibold opacity-90">Emisor</h2>
              <p className="text-xl font-bold mt-1">{cfdi.nombreEmisor}</p>
              <p className="text-blue-200 text-sm mt-1">RFC: {cfdi.rfcEmisor}</p>
            </div>
            <div className="text-right">
              <div className="flex items-center justify-end gap-3 mb-2">
                <span
                  className={`px-3 py-1 text-xs font-bold rounded-full ${
                    cfdi.status === 'Vigente' || cfdi.status === '1'
                      ? 'bg-green-400 text-green-900'
                      : 'bg-red-400 text-red-900'
                  }`}
                >
                  {cfdi.status === 'Vigente' || cfdi.status === '1' ? 'VIGENTE' : 'CANCELADO'}
                </span>
                <span className="px-3 py-1 text-xs font-bold rounded-full bg-white/20">
                  {typeLabels[cfdi.type] || cfdi.type} {cfdi.tipoComprobante ? `(${tipoCompLabels[cfdi.tipoComprobante] || cfdi.tipoComprobante})` : ''}
                </span>
              </div>
              <div className="text-3xl font-bold tracking-tight">
                {cfdi.serie && <span className="text-blue-300">{cfdi.serie}-</span>}
                {cfdi.folio || 'S/N'}
              </div>
              <p className="text-blue-200 text-sm mt-1">
                {cfdi.tipoComprobante === 'P' && cfdi.fechaPagoP
                  ? `Pago: ${formatDate(cfdi.fechaPagoP)}`
                  : formatDate(cfdi.fechaEmision)}
              </p>
            </div>
          </div>
        </div>

        <div className="p-6">
          {/* Receptor */}
          <div className="bg-gray-50 rounded-lg p-4 mb-5 border-l-4 border-blue-600">
            <div className="flex items-start justify-between">
              <div className="flex-1 min-w-0">
                <p className="text-xs text-gray-500 uppercase tracking-wide font-medium">Receptor</p>
                <p className="text-lg font-semibold text-gray-800 mt-1">{cfdi.nombreReceptor}</p>
                <div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1 text-sm text-gray-600">
                  <span>RFC: {cfdi.rfcReceptor}</span>
                  {cfdi.codigoPostalReceptor && (
                    <span>C.P.: {cfdi.codigoPostalReceptor}</span>
                  )}
                  {cfdi.regimenFiscalReceptor && (
                    <span>
                      Régimen: {cfdi.regimenFiscalReceptor}
                      {regimenFiscalLabels[cfdi.regimenFiscalReceptor]
                        ? ` — ${regimenFiscalLabels[cfdi.regimenFiscalReceptor]}`
                        : ''}
                    </span>
                  )}
                </div>
              </div>
              {cfdi.usoCfdi && (
                <div className="text-right ml-4 flex-shrink-0">
                  <p className="text-xs text-gray-500 uppercase tracking-wide font-medium">Uso CFDI</p>
                  <p className="text-sm font-medium text-gray-700 mt-1">
                    {cfdi.usoCfdi} - {usoCfdiLabels[cfdi.usoCfdi] || ''}
                  </p>
                </div>
              )}
            </div>
          </div>

          {/* CFDIs Relacionados (no-P) */}
          {(cfdi.cfdiTipoRelacion || cfdi.cfdisRelacionados) && cfdi.tipoComprobante !== 'P' && (
            <div className="bg-amber-50 rounded-lg p-3 mb-5 border border-amber-200">
              <div className="flex items-start gap-3">
                <svg className="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                </svg>
                <div className="flex-1 min-w-0">
                  <p className="text-xs font-semibold text-amber-800 uppercase tracking-wide">CFDI Relacionado</p>
                  {cfdi.cfdiTipoRelacion && (
                    <p className="text-sm text-gray-700 mt-1">
                      <span className="font-medium">Tipo de relación:</span>{' '}
                      {cfdi.cfdiTipoRelacion} — {tipoRelacionLabels[cfdi.cfdiTipoRelacion] || 'Desconocido'}
                    </p>
                  )}
                  {cfdi.cfdisRelacionados && (
                    <div className="text-sm text-gray-700 mt-1">
                      <span className="font-medium">UUIDs relacionados:</span>
                      <div className="flex flex-wrap gap-2 mt-1">
                        {cfdi.cfdisRelacionados.split('|').map((uuid) => uuid.trim()).filter(Boolean).map((uuid, idx) => (
                          <span
                            key={idx}
                            className="inline-block px-2 py-0.5 bg-white border border-amber-200 rounded text-xs font-mono text-gray-600"
                          >
                            {uuid}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          )}

          {/* Complemento de Pago (solo tipo P) */}
          {cfdi.tipoComprobante === 'P' && (
            <div className="bg-emerald-50 rounded-lg p-4 mb-5 border border-emerald-200">
              <div className="flex items-start gap-3">
                <svg className="w-5 h-5 text-emerald-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-6a1 1 0 11-2 0 1 1 0 012 0z" />
                </svg>
                <div className="flex-1 min-w-0 space-y-2">
                  <p className="text-xs font-semibold text-emerald-800 uppercase tracking-wide">Complemento de Pago</p>
                  {cfdi.montoPago > 0 && (
                    <div className="flex justify-between items-center">
                      <span className="text-sm text-gray-700">Monto pagado</span>
                      <span className="text-sm font-bold text-emerald-700">{formatCurrency(cfdi.montoPago)}</span>
                    </div>
                  )}
                  {cfdi.fechaPagoP && (
                    <div className="flex justify-between items-center">
                      <span className="text-sm text-gray-700">Fecha de pago</span>
                      <span className="text-sm font-medium text-gray-800">{formatDate(cfdi.fechaPagoP)}</span>
                    </div>
                  )}
                  {cfdi.numParcialidad && (
                    <div className="flex justify-between items-center">
                      <span className="text-sm text-gray-700">Parcialidad</span>
                      <span className="text-sm font-medium text-gray-800">{cfdi.numParcialidad}</span>
                    </div>
                  )}
                  {cfdi.uuidRelacionado && (
                    <div className="pt-1">
                      <span className="text-sm text-gray-700 font-medium">UUID relacionado (factura pagada):</span>
                      <div className="flex flex-wrap gap-2 mt-1">
                        {cfdi.uuidRelacionado.split('|').map((uuid) => uuid.trim()).filter(Boolean).map((uuid, idx) => (
                          <span
                            key={idx}
                            className="inline-block px-2 py-0.5 bg-white border border-emerald-200 rounded text-xs font-mono text-gray-600"
                          >
                            {uuid}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}
                  {cfdi.saldoInsoluto && (
                    <div className="flex justify-between items-center">
                      <span className="text-sm text-gray-700">Saldo insoluto</span>
                      <span className="text-sm font-medium text-gray-800">{cfdi.saldoInsoluto}</span>
                    </div>
                  )}
                  {/* Impuestos del pago */}
                  {(cfdi.isrRetencionPago > 0 || cfdi.ivaTrasladoPago > 0 || cfdi.ivaRetencionPago > 0 || cfdi.iepsTrasladoPago > 0 || cfdi.iepsRetencionPago > 0) && (
                    <div className="pt-2 border-t border-emerald-100">
                      <p className="text-xs font-medium text-emerald-700 mb-1">Impuestos del pago</p>
                      <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm">
                        {cfdi.isrRetencionPago > 0 && (
                          <div className="flex justify-between"><span className="text-gray-600">ISR Ret.</span><span className="text-red-600">-{formatCurrency(cfdi.isrRetencionPago)}</span></div>
                        )}
                        {cfdi.ivaTrasladoPago > 0 && (
                          <div className="flex justify-between"><span className="text-gray-600">IVA Tras.</span><span>{formatCurrency(cfdi.ivaTrasladoPago)}</span></div>
                        )}
                        {cfdi.ivaRetencionPago > 0 && (
                          <div className="flex justify-between"><span className="text-gray-600">IVA Ret.</span><span className="text-red-600">-{formatCurrency(cfdi.ivaRetencionPago)}</span></div>
                        )}
                        {cfdi.iepsTrasladoPago > 0 && (
                          <div className="flex justify-between"><span className="text-gray-600">IEPS Tras.</span><span>{formatCurrency(cfdi.iepsTrasladoPago)}</span></div>
                        )}
                        {cfdi.iepsRetencionPago > 0 && (
                          <div className="flex justify-between"><span className="text-gray-600">IEPS Ret.</span><span className="text-red-600">-{formatCurrency(cfdi.iepsRetencionPago)}</span></div>
                        )}
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          )}

          {/* Datos del Comprobante */}
          <div className="grid grid-cols-4 gap-3 mb-5">
            <div className="bg-gray-50 rounded-lg p-3 text-center">
              <p className="text-xs text-gray-500 uppercase tracking-wide">Método Pago</p>
              <p className="text-sm font-semibold text-gray-800 mt-1">
                {cfdi.metodoPago || '-'}
              </p>
              <p className="text-xs text-gray-500">
                {cfdi.metodoPago ? metodoPagoLabels[cfdi.metodoPago] || '' : ''}
              </p>
            </div>
            <div className="bg-gray-50 rounded-lg p-3 text-center">
              <p className="text-xs text-gray-500 uppercase tracking-wide">Forma Pago</p>
              <p className="text-sm font-semibold text-gray-800 mt-1">
                {cfdi.formaPago || '-'}
              </p>
              <p className="text-xs text-gray-500">
                {cfdi.formaPago ? formaPagoLabels[cfdi.formaPago] || '' : ''}
              </p>
            </div>
            <div className="bg-gray-50 rounded-lg p-3 text-center">
              <p className="text-xs text-gray-500 uppercase tracking-wide">Moneda</p>
              <p className="text-sm font-semibold text-gray-800 mt-1">{cfdi.moneda || 'MXN'}</p>
              {cfdi.tipoCambio && cfdi.tipoCambio !== 1 && (
                <p className="text-xs text-gray-500">TC: {cfdi.tipoCambio}</p>
              )}
            </div>
            <div className="bg-gray-50 rounded-lg p-3 text-center">
              <p className="text-xs text-gray-500 uppercase tracking-wide">Versión</p>
              <p className="text-sm font-semibold text-gray-800 mt-1">CFDI 4.0</p>
            </div>
          </div>

          {/* Conceptos — ocultar para tipo P (concepto dummy) */}
          {conceptos && conceptos.length > 0 && cfdi.tipoComprobante !== 'P' && (
            <div className="mb-5">
              <h3 className="text-xs text-gray-500 uppercase tracking-wide font-medium mb-2 flex items-center gap-2">
                <span className="w-1 h-4 bg-blue-600 rounded-full"></span>
                Conceptos
              </h3>
              <div className="border border-gray-200 rounded-lg overflow-hidden">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="bg-gray-100">
                      <th className="text-left py-3 px-4 font-semibold text-gray-700">Descripción</th>
                      <th className="text-center py-3 px-3 font-semibold text-gray-700 w-24">No. Id.</th>
                      <th className="text-center py-3 px-3 font-semibold text-gray-700 w-20">Cant.</th>
                      <th className="text-right py-3 px-4 font-semibold text-gray-700 w-32">P. Unitario</th>
                      <th className="text-right py-3 px-4 font-semibold text-gray-700 w-32">Importe</th>
                    </tr>
                  </thead>
                  <tbody>
                    {conceptos.map((concepto, idx) => (
                      <tr
                        key={idx}
                        className={`border-t border-gray-100 ${idx % 2 === 1 ? 'bg-gray-50/50' : ''}`}
                      >
                        <td className="py-3 px-4">
                          <p className="text-gray-800">{concepto.descripcion}</p>
                          {concepto.claveProdServ && (
                            <p className="text-xs text-gray-400 mt-0.5">
                              Clave: {concepto.claveProdServ}
                              {concepto.claveUnidad && ` | Unidad: ${concepto.claveUnidad}`}
                            </p>
                          )}
                        </td>
                        <td className="text-center py-3 px-3 text-gray-700">
                          {concepto.noIdentificacion || <span className="text-gray-300">—</span>}
                        </td>
                        <td className="text-center py-3 px-3 text-gray-700">{concepto.cantidad}</td>
                        <td className="text-right py-3 px-4 text-gray-700">
                          {formatCurrency(concepto.valorUnitario)}
                        </td>
                        <td className="text-right py-3 px-4 font-medium text-gray-800">
                          {formatCurrency(concepto.importe)}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {/* Totales — ocultar bloque tradicional para tipo P */}
          {cfdi.tipoComprobante !== 'P' && (
            <div className="flex justify-end mb-5">
              <div className="w-80 bg-gray-50 rounded-lg overflow-hidden">
                <div className="divide-y divide-gray-200">
                  <div className="flex justify-between py-2.5 px-4">
                    <span className="text-gray-600">Subtotal</span>
                    <span className="font-medium">{formatCurrency(cfdi.subtotal)}</span>
                  </div>
                  {cfdi.descuento > 0 && (
                    <div className="flex justify-between py-2.5 px-4">
                      <span className="text-gray-600">Descuento</span>
                      <span className="font-medium text-red-600">-{formatCurrency(cfdi.descuento)}</span>
                    </div>
                  )}
                  {cfdi.ivaTraslado > 0 && (
                    <div className="flex justify-between py-2.5 px-4">
                      <span className="text-gray-600">IVA (16%)</span>
                      <span className="font-medium">{formatCurrency(cfdi.ivaTraslado)}</span>
                    </div>
                  )}
                  {cfdi.ivaRetencion > 0 && (
                    <div className="flex justify-between py-2.5 px-4">
                      <span className="text-gray-600">IVA Retenido</span>
                      <span className="font-medium text-red-600">-{formatCurrency(cfdi.ivaRetencion)}</span>
                    </div>
                  )}
                  {cfdi.isrRetencion > 0 && (
                    <div className="flex justify-between py-2.5 px-4">
                      <span className="text-gray-600">ISR Retenido</span>
                      <span className="font-medium text-red-600">-{formatCurrency(cfdi.isrRetencion)}</span>
                    </div>
                  )}
                </div>
                <div className="bg-blue-700 text-white py-3 px-4 flex justify-between items-center">
                  <span className="font-semibold">TOTAL</span>
                  <span className="text-xl font-bold">{formatCurrency(cfdi.total)}</span>
                </div>
              </div>
            </div>
          )}

          {/* Timbre Fiscal Digital */}
          <div className="bg-gradient-to-r from-gray-100 to-gray-50 rounded-lg p-4 border border-gray-200">
            <div className="flex gap-4">
              {/* QR Placeholder */}
              <div className="w-24 h-24 bg-white border-2 border-gray-300 rounded-lg flex items-center justify-center flex-shrink-0">
                <div className="text-center">
                  <svg className="w-12 h-12 text-gray-400 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h2M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
                  </svg>
                  <span className="text-[10px] text-gray-400 mt-1 block">QR</span>
                </div>
              </div>

              {/* Info del Timbre */}
              <div className="flex-1 min-w-0">
                <h3 className="text-xs text-gray-500 uppercase tracking-wide font-semibold mb-2 flex items-center gap-2">
                  <svg className="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                  </svg>
                  Timbre Fiscal Digital
                </h3>
                <div className="space-y-1.5">
                  <div>
                    <span className="text-xs text-gray-500">UUID: </span>
                    <span className="text-xs font-mono text-blue-700 font-medium">{cfdi.uuid}</span>
                  </div>
                  <div>
                    {cfdi.fechaCertSat && (<>
                    <span className="text-xs text-gray-500">Fecha Certificación SAT: </span>
                    <span className="text-xs font-medium text-gray-700">{formatDateTime(cfdi.fechaCertSat)}</span>
                    </>)}
                  </div>
                </div>
              </div>
            </div>

            {/* Leyenda */}
            <p className="text-[10px] text-gray-400 mt-3 text-center border-t border-gray-200 pt-2">
              Este documento es una representación impresa de un CFDI • Verificable en: https://verificacfdi.facturaelectronica.sat.gob.mx
            </p>
          </div>
        </div>
      </div>
    );
  }
);

CfdiInvoice.displayName = 'CfdiInvoice';