'use client';

import { formatDateTime } from '@/lib/utils';
import { normalizePrintAssetUrl } from '@/lib/print';

interface OrdenInternaPrintProps {
  ot: any;
  cotizacion: any;
  companyName?: string;
}

export default function OrdenInternaPrint({ ot, cotizacion, companyName }: OrdenInternaPrintProps) {
  const vehiculo = ot?.vehiculo || {};
  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">Orden Interna de Trabajo</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>
          <p className="print-date">Placa: {vehiculo.placa || '-'}</p>
          <p className="print-date">Técnico: {ot?.mecanico?.nombre || 'Sin asignar'}</p>
        </div>
      </header>

      <div className="print-divider" />

      {/* Vehicle info */}
      <section className="print-section">
        <h2 className="print-section-title">Vehículo</h2>
        <div className="print-grid-4">
          <div><span className="print-label">Placa</span><br /><strong>{vehiculo.placa || '-'}</strong></div>
          <div><span className="print-label">Marca</span><br /><strong>{vehiculo.marca || '-'}</strong></div>
          <div><span className="print-label">Modelo</span><br /><strong>{vehiculo.modelo || '-'}</strong></div>
          <div><span className="print-label">Año</span><br /><strong>{vehiculo.anio || '-'}</strong></div>
        </div>
        <div className="print-grid-4" style={{ marginTop: '8px' }}>
          <div><span className="print-label">Color</span><br /><strong>{vehiculo.color || '-'}</strong></div>
          <div><span className="print-label">Km</span><br /><strong>{Number(ot?.km || 0).toLocaleString()}</strong></div>
          <div><span className="print-label">Gasolina</span><br /><strong>{ot?.nivelGasolina || 0}%</strong></div>
          <div><span className="print-label">Estado OT</span><br /><strong>{ot?.estado || '-'}</strong></div>
        </div>
      </section>

      {/* Requirement */}
      <section className="print-section">
        <h2 className="print-section-title">Requerimiento del Cliente</h2>
        <p className="print-text-block">{ot?.requerimientoCliente || 'Sin requerimiento registrado.'}</p>
      </section>

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

      {/* Services to perform */}
      <section className="print-section">
        <h2 className="print-section-title">Servicios a Realizar</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-check">Realizado</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-check">☐</td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <p className="print-empty">No hay servicios registrados en la cotización.</p>
        )}
      </section>

      {/* Parts needed */}
      <section className="print-section">
        <h2 className="print-section-title">Repuestos Sugeridos</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-check">Entregado</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-check">☐</td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <p className="print-empty">No hay repuestos registrados en la cotización.</p>
        )}
      </section>

      {/* Checklist */}
      <section className="print-section">
        <h2 className="print-section-title">Checklist Operativo</h2>
        <table className="print-table">
          <tbody>
            {[
              'Verificar requerimiento del cliente',
              'Revisar nivel de aceite y fluidos',
              'Inspección visual de la unidad',
              'Confirmar repuestos disponibles',
              'Realizar servicios indicados',
              'Prueba de funcionamiento',
              'Limpieza del área de trabajo',
              'Notificar al cliente al finalizar',
            ].map((item, i) => (
              <tr key={i}>
                <td className="print-col-check">☐</td>
                <td>{item}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>

      {/* Tech assignment */}
      <section className="print-section">
        <h2 className="print-section-title">Técnico Asignado</h2>
        <p className="print-text-block">
          {ot?.mecanico?.nombre || 'Sin técnico asignado.'}
          {ot?.mecanico?.especialidad ? ` | ${ot.mecanico.especialidad}` : ''}
        </p>
      </section>

      <div className="print-divider" />

      {/* Signatures */}
      <div className="print-signatures">
        <div className="print-signature-block">
          <div className="print-signature-line" />
          <p className="print-signature-label">Asesor de Servicio</p>
        </div>
        <div className="print-signature-block">
          <div className="print-signature-line" />
          <p className="print-signature-label">Técnico Responsable</p>
        </div>
      </div>

      {/* Footer */}
      <footer className="print-footer">
        <p>Orden interna - {ot?.numeroOt} - {formatDateTime(new Date())}</p>
        <p className="print-legal">Documento interno. No entregar al cliente.</p>
      </footer>
    </div>
  );
}