"use client";

import { formatCurrency, formatDateTime } from "@/lib/utils";
import { normalizePrintAssetUrl } from "@/lib/print";

interface EntregaPrintProps {
  ot: any;
  cliente: any;
  companyName?: string;
}

export default function EntregaPrint({ ot, cliente, companyName }: EntregaPrintProps) {
  const vehiculo = ot?.vehiculo || {};
  const firma = ot?.firma;
  const cotizacion = ot?.cotizaciones?.[0];
  const lineas = cotizacion?.lineas || [];
  const servicios = lineas.filter((l: any) => l.esServicio);
  const repuestos = lineas.filter((l: any) => !l.esServicio);
  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 */}
      <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">Comprobante de Entrega de Vehículo</p>
        </div>
        <div className="print-header-right">
          <div className="print-badge">{ot?.numeroOt || "Sin número"}</div>
          <p className="print-date">
            Entrega: {ot?.fechaSalida ? formatDateTime(ot.fechaSalida) : "Pendiente"}
          </p>
        </div>
      </header>

      <div className="print-divider" />

      {/* Client + Vehicle Grid */}
      <div className="print-grid-2">
        <section className="print-section">
          <h2 className="print-section-title">Datos del 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}
            </tbody>
          </table>
        </section>

        <section className="print-section">
          <h2 className="print-section-title">Datos del 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">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>

      {/* Dates */}
      <div className="print-grid-2">
        <section className="print-section">
          <h2 className="print-section-title">Fecha de Entrada</h2>
          <p className="print-value">{ot?.fechaEntrada ? formatDateTime(ot.fechaEntrada) : "-"}</p>
        </section>
        <section className="print-section">
          <h2 className="print-section-title">Fecha de Entrega</h2>
          <p className="print-value print-value-bold">
            {ot?.fechaSalida ? formatDateTime(ot.fechaSalida) : "Pendiente"}
          </p>
        </section>
      </div>

      {/* Detail of what was actually done, with prices — the approved quotation */}
      {cotizacion ? (
        <>
          <section className="print-section">
            <h2 className="print-section-title">Servicios Realizados</h2>
            {servicios.length > 0 ? (
              <table className="print-table">
                <thead>
                  <tr>
                    <th className="print-col-narrow">#</th>
                    <th className="print-col-code">Código</th>
                    <th>Descripción</th>
                    <th className="print-col-number">Cantidad</th>
                    <th className="print-col-number">Precio Unit.</th>
                    <th className="print-col-number">Subtotal</th>
                  </tr>
                </thead>
                <tbody>
                  {servicios.map((l: any, i: number) => (
                    <tr key={l.id || i}>
                      <td className="print-col-narrow">{i + 1}</td>
                      <td className="print-col-code print-mono">{l.plu}</td>
                      <td>{l.descripcion}</td>
                      <td className="print-col-number">{Number(l.cantidad || 0).toLocaleString()}</td>
                      <td className="print-col-number">{formatCurrency(Number(l.precioUnitario || 0))}</td>
                      <td className="print-col-number">{formatCurrency(Number(l.total || 0))}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            ) : (
              <p className="print-empty">No hay servicios registrados en la cotización.</p>
            )}
          </section>

          <section className="print-section">
            <h2 className="print-section-title">Repuestos Utilizados</h2>
            {repuestos.length > 0 ? (
              <table className="print-table">
                <thead>
                  <tr>
                    <th className="print-col-narrow">#</th>
                    <th className="print-col-code">Código</th>
                    <th>Descripción</th>
                    <th className="print-col-number">Cantidad</th>
                    <th className="print-col-number">Precio Unit.</th>
                    <th className="print-col-number">Subtotal</th>
                  </tr>
                </thead>
                <tbody>
                  {repuestos.map((l: any, i: number) => (
                    <tr key={l.id || i}>
                      <td className="print-col-narrow">{i + 1}</td>
                      <td className="print-col-code print-mono">{l.plu}</td>
                      <td>{l.descripcion}</td>
                      <td className="print-col-number">{Number(l.cantidad || 0).toLocaleString()}</td>
                      <td className="print-col-number">{formatCurrency(Number(l.precioUnitario || 0))}</td>
                      <td className="print-col-number">{formatCurrency(Number(l.total || 0))}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            ) : (
              <p className="print-empty">No hay repuestos registrados en la cotización.</p>
            )}
          </section>

          <section className="print-section">
            <h2 className="print-section-title">Resumen de Cotización</h2>
            <table className="print-info-table">
              <tbody>
                <tr>
                  <td className="print-label">Cotización</td>
                  <td className="print-value">{cotizacion.numeroCotizacion || "-"}</td>
                </tr>
                <tr>
                  <td className="print-label">Subtotal</td>
                  <td className="print-value">{formatCurrency(Number(cotizacion.subtotal || 0))}</td>
                </tr>
                <tr>
                  <td className="print-label">IVA</td>
                  <td className="print-value">{formatCurrency(Number(cotizacion.iva || 0))}</td>
                </tr>
                <tr>
                  <td className="print-label">Total</td>
                  <td className="print-value print-value-bold">{formatCurrency(Number(cotizacion.total || 0))}</td>
                </tr>
              </tbody>
            </table>
          </section>
        </>
      ) : (
        <section className="print-section">
          <h2 className="print-section-title">Trabajo Realizado</h2>
          <p className="print-empty">No hay una cotización registrada en esta orden.</p>
        </section>
      )}

      {/* Internal observations */}
      {ot?.observaciones ? (
        <section className="print-section">
          <h2 className="print-section-title">Observaciones Internas</h2>
          <p className="print-text-block">{ot.observaciones}</p>
        </section>
      ) : null}

      <div className="print-divider" />

      {/* Signature */}
      <div className="print-signatures">
        <div className="print-signature-block">
          {firma?.firmaCliente ? (
            <img src={firma.firmaCliente} alt="Firma del cliente" className="print-signature-img" />
          ) : (
            <div className="print-signature-line" />
          )}
          <p className="print-signature-label">
            {firma?.nombreFirmaCliente || "Recibí conforme (Cliente)"}
          </p>
        </div>
      </div>

      <footer className="print-footer">
        <p>
          Comprobante de entrega {ot?.numeroOt || ""} —{" "}
          {ot?.fechaSalida ? formatDateTime(ot.fechaSalida) : formatDateTime(new Date())}
        </p>
        <p className="print-legal">
          El cliente confirma haber recibido el vehículo conforme a lo indicado en este comprobante.
        </p>
      </footer>
    </div>
  );
}