"use client";

import { useFlagsConfiguracion } from "@/hooks/use-flags-configuracion";
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 flags = useFlagsConfiguracion();
  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>

      {flags.usaCosasTrae ? (
        <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>
      ) : null}

      {flags.usaDanos ? (
        <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>
      ) : null}

      {flags.usaFotos ? (
        <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>
      ) : null}

      {/* 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}

      {flags.usaFirmaCliente || flags.usaFirmaRecepcion ? (
        <>
          <div className="print-divider" />

          {/* Signatures */}
          <div className="print-signatures">
            {flags.usaFirmaCliente ? (
            <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>
            ) : null}
            {flags.usaFirmaRecepcion ? (
            <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>
            ) : null}
          </div>
        </>
      ) : null}

      {/* 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>
  );
}