'use client';

import { formatCurrency, formatDate, formatDateTime } from '@/lib/utils';
import { nombreVisibleParaCliente, normalizePrintAssetUrl } from '@/lib/print';

interface CotizacionPrintProps {
  ot: any;
  cliente: any;
  cotizacion: any;
  companyName?: string;
}

function getLineUnitTotal(linea: any) {
  const cantidad = Number(linea?.cantidad || 0);
  if (cantidad > 0) {
    return Number(linea?.total || 0) / cantidad;
  }

  return Number(linea?.total || 0);
}

export default function CotizacionPrint({ ot, cliente, cotizacion, companyName }: CotizacionPrintProps) {
  const vehiculo = ot?.vehiculo || {};
  const lineas = cotizacion?.lineas || [];
  const servicios = lineas.filter((l: any) => l.esServicio);
  const productos = lineas.filter((l: any) => !l.esServicio);
  const observaciones =
    String(cotizacion?.notas || ot?.observaciones || ot?.requerimientoCliente || "").trim();
  const tienda = ot?.tienda || {};
  const nombreImpresion =
    tienda.nombreImpresion || tienda.nombre || companyName || 'Taller Mecánico';
  const direccionImpresion = tienda.direccionImpresion || tienda.direccion || '';
  const telefonoImpresion = tienda.telefonoImpresion || '';
  const logoUrl = normalizePrintAssetUrl(tienda.logoUrl);

  return (
    <div className="print-document">
      <header className="print-header print-header-branded">
        <div className="print-header-left">
          {logoUrl ? (
            <img src={logoUrl} alt={nombreImpresion} className="print-store-logo" />
          ) : (
            <h1 className="print-company-name">{nombreImpresion}</h1>
          )}
          {direccionImpresion ? (
            <p className="print-store-address">{direccionImpresion}</p>
          ) : null}
          {telefonoImpresion ? (
            <p className="print-store-phone">Tel: {telefonoImpresion}</p>
          ) : null}
          <p className="print-subtitle">Cotización de Servicio</p>
        </div>
        <div className="print-header-right">
          <div className="print-badge">{cotizacion?.numeroCotizacion || 'Borrador'}</div>
          <p className="print-date">Fecha: {cotizacion?.createdAt ? formatDate(cotizacion.createdAt) : formatDate(new Date())}</p>
          <p className="print-date">OT: {ot?.numeroOt || '-'}</p>
          <p className="print-date">Placa: {vehiculo.placa || '-'}</p>
          <p className="print-date">Cliente: {cliente?.nombre || ot?.clienteTarjeta || '-'}</p>
        </div>
      </header>

      <div className="print-divider" />

      <div className="print-grid-2">
        <section className="print-section">
          <h2 className="print-section-title">Cliente</h2>
          <table className="print-info-table">
            <tbody>
              <tr><td className="print-label">Nombre</td><td className="print-value">{cliente?.nombre || ot?.clienteTarjeta || '-'}</td></tr>
              <tr><td className="print-label">Tarjeta</td><td className="print-value">{ot?.clienteTarjeta || '-'}</td></tr>
              {cliente?.telefono ? <tr><td className="print-label">Teléfono</td><td className="print-value">{cliente.telefono}</td></tr> : null}
              {cliente?.nit ? <tr><td className="print-label">NIT</td><td className="print-value">{cliente.nit}</td></tr> : null}
            </tbody>
          </table>
        </section>
        <section className="print-section">
          <h2 className="print-section-title">Vehículo</h2>
          <table className="print-info-table">
            <tbody>
              <tr><td className="print-label">Placa</td><td className="print-value print-value-bold">{vehiculo.placa || '-'}</td></tr>
              <tr><td className="print-label">Marca / Modelo</td><td className="print-value">{vehiculo.marca || '-'} {vehiculo.modelo || ''}</td></tr>
              <tr><td className="print-label">Año</td><td className="print-value">{vehiculo.anio || '-'}</td></tr>
              <tr><td className="print-label">Kilometraje</td><td className="print-value">{Number(ot?.km || 0).toLocaleString()} km</td></tr>
              {ot?.mecanico?.nombre ? <tr><td className="print-label">Mecánico</td><td className="print-value">{ot.mecanico.nombre}</td></tr> : null}
            </tbody>
          </table>
        </section>
      </div>

      <section className="print-section">
        <div className="print-status-row">
          <span className="print-label">Estado de la cotización:</span>
          <span className={`print-status-badge ${cotizacion?.estado === 'aprobada' ? 'print-status-approved' : ''}`}>
            {cotizacion?.estado === 'aprobada' ? 'Aprobada' : cotizacion?.estado === 'enviada' ? 'Enviada' : cotizacion?.estado === 'rechazada' ? 'Rechazada' : 'Cuenta abierta'}
          </span>
        </div>
      </section>

      {lineas.length > 0 ? (
        <section className="print-section">
          <h2 className="print-section-title">Detalle de Productos y Servicios</h2>
          <table className="print-table print-table-products">
            <thead>
              <tr>
                <th className="print-col-narrow">#</th>
                <th className="print-col-code">Código</th>
                <th>Descripción</th>
                <th className="print-col-type">Tipo</th>
                <th className="print-col-number">Cantidad</th>
                <th className="print-col-money">P. Unitario</th>
                <th className="print-col-money">Total</th>
              </tr>
            </thead>
            <tbody>
              {lineas.map((linea: any, i: number) => (
                <tr key={linea.id || i}>
                  <td className="print-col-narrow">{i + 1}</td>
                  <td className="print-col-code print-mono">{linea.plu}</td>
                  <td>{linea.descripcion || '-'}</td>
                  <td className="print-col-type">{linea.esServicio ? 'Servicio' : 'Repuesto'}</td>
                  <td className="print-col-number">{Number(linea.cantidad || 0).toLocaleString()}</td>
                  <td className="print-col-money">{formatCurrency(getLineUnitTotal(linea))}</td>
                  <td className="print-col-money print-value-bold">{formatCurrency(Number(linea.total || 0))}</td>
                </tr>
              ))}
            </tbody>
          </table>

          <div className="print-totals">
            <div className="print-total-row print-total-grand">
              <span>Total</span>
              <span>{formatCurrency(Number(cotizacion?.total || 0))}</span>
            </div>
          </div>

          <div className="print-summary-row">
            {productos.length > 0 ? <span>{productos.length} repuesto(s)</span> : null}
            {servicios.length > 0 ? <span>{servicios.length} servicio(s)</span> : null}
            <span>{lineas.length} línea(s) en total</span>
          </div>
        </section>
      ) : (
        <section className="print-section">
          <p className="print-empty">No hay productos o servicios agregados a esta cotización.</p>
        </section>
      )}

      <section className="print-section">
        <h2 className="print-section-title">Solicitud de Cliente</h2>
        {observaciones ? (
          <p className="print-text-block">{observaciones}</p>
        ) : (
          <p className="print-empty">Sin notas adicionales.</p>
        )}
      </section>

      <div className="print-divider" />

      <div className="print-signatures">
        <div className="print-signature-block">
          {cotizacion?.estado === 'aprobada' && cotizacion?.decisionClienteFirma ? (
            <>
              <img
                src={cotizacion.decisionClienteFirma}
                alt={`Firma de ${cotizacion.decisionClienteNombre || 'cliente'}`}
                className="print-signature-img"
              />
              <p className="print-signature-label">Aprobado por el Cliente</p>
              <p className="print-signature-sub">Nombre: {cotizacion.decisionClienteNombre || '-'}</p>
              <p className="print-signature-sub">
                Fecha: {cotizacion.decisionClienteAt ? formatDateTime(cotizacion.decisionClienteAt) : '-'}
              </p>
            </>
          ) : (
            <>
              <div className="print-signature-line" />
              <p className="print-signature-label">Aprobado por el Cliente</p>
              <p className="print-signature-sub">Nombre: ________________________</p>
              <p className="print-signature-sub">Fecha: _________________________</p>
            </>
          )}
        </div>
        <div className="print-signature-block">
          <div className="print-signature-line" />
          <p className="print-signature-label">Asesor de Servicio</p>
          {nombreVisibleParaCliente(cotizacion?.asesorNombre) ? (
            <p className="print-signature-sub">
              {nombreVisibleParaCliente(cotizacion?.asesorNombre)}
            </p>
          ) : null}
          {cotizacion?.fechaAprobacion ? (
            <p className="print-signature-sub">Fecha: {formatDateTime(cotizacion.fechaAprobacion)}</p>
          ) : null}
        </div>
      </div>

      <footer className="print-footer">
        <p>Cotización {cotizacion?.numeroCotizacion || ''} - OT {ot?.numeroOt || ''} - {formatDateTime(new Date())}</p>
        <p className="print-legal">Precios sujetos a cambio sin previo aviso. Cotización válida por 15 días. Los trabajos se realizarán previa autorización del cliente.</p>
      </footer>
    </div>
  );
}