"use client";

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

interface RecepcionPrintProps {
  ot: any;
  cliente: any;
  inventario: string[];
  companyName?: string;
}

export default function RecepcionPrint({
  ot,
  cliente,
  inventario,
  companyName,
}: RecepcionPrintProps) {
  const vehiculo = ot?.vehiculo || {};
  const danos = ot?.danos || [];
  const fotos = ot?.fotos || [];
  const firma = ot?.firma;
  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">Hoja de Recepción de Vehículo</p>
        </div>
        <div className="print-header-right">
          <div className="print-badge">{ot?.numeroOt || "Sin número"}</div>
          <p className="print-date">
            Fecha: {ot?.fechaEntrada ? formatDateTime(ot.fechaEntrada) : "-"}
          </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}
              {cliente?.celular ? (
                <tr>
                  <td className="print-label">Celular</td>
                  <td className="print-value">{cliente.celular}</td>
                </tr>
              ) : null}
              {cliente?.email ? (
                <tr>
                  <td className="print-label">Correo</td>
                  <td className="print-value">{cliente.email}</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">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</td>
                <td className="print-value">{vehiculo.marca || "-"}</td>
              </tr>
              <tr>
                <td className="print-label">Modelo</td>
                <td className="print-value">{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">Color</td>
                <td className="print-value">{vehiculo.color || "-"}</td>
              </tr>
              {vehiculo.motor ? (
                <tr>
                  <td className="print-label">Serie motor</td>
                  <td className="print-value">{vehiculo.motor}</td>
                </tr>
              ) : null}
              {vehiculo.cilindraje ? (
                <tr>
                  <td className="print-label">C.C.</td>
                  <td className="print-value">{vehiculo.cilindraje}</td>
                </tr>
              ) : null}
            </tbody>
          </table>
        </section>
      </div>

      {/* KM + Fuel */}
      <div className="print-grid-2">
        <section className="print-section">
          <h2 className="print-section-title">Kilometraje</h2>
          <p className="print-big-value">
            {Number(ot?.km || 0).toLocaleString()} km
          </p>
        </section>
        <section className="print-section">
          <h2 className="print-section-title">Nivel de Gasolina</h2>
          <div className="print-fuel-bar">
            <div
              className="print-fuel-fill"
              style={{
                width: `${Math.min(100, Number(ot?.nivelGasolina || 0))}%`,
              }}
            />
          </div>
          <p className="print-fuel-label">{ot?.nivelGasolina || 0}%</p>
        </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 Salida</h2>
          <p className="print-value">
            {ot?.fechaSalida ? formatDateTime(ot.fechaSalida) : "Pendiente"}
          </p>
        </section>
      </div>

      {/* Requirement */}
      {ot?.requerimientoCliente ? (
        <section className="print-section">
          <h2 className="print-section-title">Requerimiento del Cliente</h2>
          <p className="print-text-block">{ot.requerimientoCliente}</p>
        </section>
      ) : null}

      {/* Observations */}
      <section className="print-section">
        <h2 className="print-section-title">Observaciones</h2>
        {ot?.observaciones ? (
          <p className="print-text-block">{ot.observaciones}</p>
        ) : (
          <p className="print-empty">Sin observaciones adicionales.</p>
        )}
      </section>

      {/* Accessories */}
      <section className="print-section">
        <h2 className="print-section-title">Accesorios Recibidos</h2>
        {inventario.length > 0 ? (
          <div className="print-tag-list">
            {inventario.map((item, i) => (
              <span key={i} className="print-tag">
                {item}
              </span>
            ))}
          </div>
        ) : (
          <p className="print-empty">No se registraron accesorios.</p>
        )}
      </section>

      {/* Damages */}
      <section className="print-section">
        <h2 className="print-section-title">Daños o Golpes Registrados</h2>
        {danos.length > 0 ? (
          <table className="print-table">
            <thead>
              <tr>
                <th>#</th>
                <th>Zona</th>
                <th>Tipo</th>
                <th>Descripción</th>
              </tr>
            </thead>
            <tbody>
              {danos.map((dano: any, i: number) => (
                <tr key={dano.id || i}>
                  <td>{i + 1}</td>
                  <td>{dano.zona || "-"}</td>
                  <td>{dano.tipoDano?.nombre || dano.tipoDanoId || "-"}</td>
                  <td>{dano.descripcion || "-"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <p className="print-empty">No se registraron daños.</p>
        )}
      </section>

      {/* Photos summary */}
      <section className="print-section">
        <h2 className="print-section-title">Evidencias Fotográficas</h2>
        {fotos.length > 0 ? (
          <p className="print-value">
            Se registraron {fotos.length} fotografía(s) en el sistema digital.
          </p>
        ) : (
          <p className="print-empty">
            Sin evidencias fotográficas registradas.
          </p>
        )}
      </section>

      {/* Quotation summary if exists */}
      {ot?.cotizaciones?.[0] && Number(ot.cotizaciones[0].total || 0) > 0 ? (
        <section className="print-section">
          <h2 className="print-section-title">Cotización Asociada</h2>
          <p className="print-value">
            {ot.cotizaciones[0].numeroCotizacion || "Cuenta abierta"} - Total:{" "}
            {formatCurrency(Number(ot.cotizaciones[0].total || 0))} - Estado:{" "}
            {ot.cotizaciones[0].estado || "borrador"}
          </p>
        </section>
      ) : null}

      <div className="print-divider" />

      {/* Signatures */}
      <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 || "Firma del Cliente"}
          </p>
        </div>
        <div className="print-signature-block">
          {firma?.firmaRecepcion ? (
            <img
              src={firma.firmaRecepcion}
              alt="Firma de recepción"
              className="print-signature-img"
            />
          ) : (
            <div className="print-signature-line" />
          )}
          <p className="print-signature-label">
            {firma?.nombreFirmaRecepcion || "Firma del Asesor / Recepción"}
          </p>
        </div>
      </div>

      {/* Footer */}
      <footer className="print-footer">
        <p>
          Documento generado el {formatDateTime(new Date())} - {ot?.numeroOt}
        </p>
        <p className="print-legal">
          Este documento es un comprobante de recepción del vehículo. Los
          trabajos se realizarán previa autorización del cliente.
        </p>
      </footer>
    </div>
  );
}