"use client";

import React from 'react';
import type { BoletaData } from './BoletaPDF';

interface BoletaImpresionProps {
  boleta: BoletaData;
}

const BoletaImpresion: React.FC<BoletaImpresionProps> = ({ boleta }) => {
  const formatMoney = (valor: number) => {
    return new Intl.NumberFormat('es-CL', { 
      style: 'currency', 
      currency: 'CLP',
      minimumFractionDigits: 0
    }).format(valor);
  };

  const formatDate = (fecha: string) => {
    return new Date(fecha).toLocaleDateString('es-CL');
  };

  return (
    <>
      {/* Estilos específicos para impresión */}
      <style jsx>{`
        @media print {
          body * {
            visibility: hidden;
          }
          .print-area, .print-area * {
            visibility: visible;
          }
          .print-area {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
          }
          .no-print {
            display: none !important;
          }
          .print-watermark {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.03;
            pointer-events: none;
          }
        }
      `}</style>

      <div className="print-area bg-white" style={{ minHeight: '297mm', width: '210mm' }}>
        {/* Marca de agua para impresión */}
        <div className="print-watermark">
          <div className="flex flex-col justify-evenly h-full">
            {[...Array(6)].map((_, rowIndex) => (
              <div key={rowIndex} className="flex justify-evenly w-full">
                {[...Array(3)].map((_, colIndex) => (
                  <div 
                    key={colIndex} 
                    className="text-6xl font-bold text-gray-300 transform -rotate-45 select-none"
                    style={{ fontFamily: 'Arial, sans-serif' }}
                  >
                    MiAPR
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>

        {/* Contenido de la boleta */}
        <div className="relative z-10 p-4">
          {/* Encabezado APR */}
          <div className="text-center mb-4 pb-2 border-b-2 border-black">
            <h1 className="text-xl font-bold">{boleta.datos_apr.nombre_servicio}</h1>
            <p className="text-sm">RUT: {boleta.datos_apr.rut_servicio}</p>
            <p className="text-sm">{boleta.datos_apr.direccion_servicio}</p>
            <p className="text-sm">{boleta.datos_apr.comuna_servicio}</p>
            <p className="text-sm">Teléfono: {boleta.datos_apr.telefono_oficina}</p>
          </div>

          {/* Información de la boleta */}
          <div className="grid grid-cols-2 gap-4 mb-4 p-2 border border-black">
            <div><strong>N° Boleta:</strong> {boleta.num_boleta}</div>
            <div><strong>Período:</strong> {boleta.datos_lectura.mes_facturacion}</div>
            <div><strong>Fecha Vencimiento:</strong> {formatDate(boleta.totales.fecha_vencimiento)}</div>
            <div><strong>Sector:</strong> {boleta.datos_cliente.sector}</div>
          </div>

          {/* Datos del cliente */}
          <div className="mb-4 p-2 border border-black">
            <h3 className="font-bold text-center bg-gray-100 p-1 mb-2">DATOS DEL CLIENTE</h3>
            <div className="grid grid-cols-2 gap-2 text-sm">
              <div><strong>Nombre:</strong> {boleta.datos_cliente.nombre_cliente}</div>
              <div><strong>RUT:</strong> {boleta.datos_cliente.rut_cliente}</div>
              <div className="col-span-2"><strong>Dirección:</strong> {boleta.datos_cliente.direccion_cliente}</div>
            </div>
          </div>

          {/* Información de lectura */}
          <div className="mb-4 p-2 border border-black">
            <h3 className="font-bold text-center bg-gray-100 p-1 mb-2">INFORMACIÓN DE LECTURA</h3>
            <div className="grid grid-cols-3 gap-2 text-sm">
              <div><strong>Lectura Anterior:</strong> {boleta.datos_lectura.lectura_anterior} m³</div>
              <div><strong>Lectura Actual:</strong> {boleta.datos_lectura.lectura_actual} m³</div>
              <div><strong>Consumo:</strong> {boleta.datos_lectura.consumo_m3} m³</div>
              <div><strong>Fecha Lectura:</strong> {formatDate(boleta.datos_lectura.fecha_toma_lectura)}</div>
              <div><strong>N° Medidor:</strong> {boleta.datos_lectura.numero_medidor}</div>
            </div>
          </div>

          {/* Detalle de consumo */}
          <div className="mb-4 p-2 border border-black">
            <h3 className="font-bold text-center bg-gray-100 p-1 mb-2">DETALLE DE CONSUMO</h3>
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-gray-50">
                  <th className="border border-black p-1 text-left">Concepto</th>
                  <th className="border border-black p-1 text-center">m³</th>
                  <th className="border border-black p-1 text-right">Valor</th>
                </tr>
              </thead>
              <tbody>
                {boleta.detalle_consumo.tramo_base > 0 && (
                  <tr>
                    <td className="border border-black p-1">Consumo Base (0-10 m³)</td>
                    <td className="border border-black p-1 text-center">{boleta.detalle_consumo.tramo_base}</td>
                    <td className="border border-black p-1 text-right">{formatMoney(boleta.detalle_consumo.valor_base)}</td>
                  </tr>
                )}
                {boleta.detalle_consumo.tramo1 > 0 && (
                  <tr>
                    <td className="border border-black p-1">Tramo 1 (11-20 m³)</td>
                    <td className="border border-black p-1 text-center">{boleta.detalle_consumo.tramo1}</td>
                    <td className="border border-black p-1 text-right">{formatMoney(boleta.detalle_consumo.valor_tramo1)}</td>
                  </tr>
                )}
                {boleta.detalle_consumo.tramo2 > 0 && (
                  <tr>
                    <td className="border border-black p-1">Tramo 2 (21-50 m³)</td>
                    <td className="border border-black p-1 text-center">{boleta.detalle_consumo.tramo2}</td>
                    <td className="border border-black p-1 text-right">{formatMoney(boleta.detalle_consumo.valor_tramo2)}</td>
                  </tr>
                )}
                {boleta.detalle_consumo.tramo3 > 0 && (
                  <tr>
                    <td className="border border-black p-1">Tramo 3 (&gt;50 m³)</td>
                    <td className="border border-black p-1 text-center">{boleta.detalle_consumo.tramo3}</td>
                    <td className="border border-black p-1 text-right">{formatMoney(boleta.detalle_consumo.valor_tramo3)}</td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>

          {/* Otros cargos */}
          <div className="mb-4 p-2 border border-black">
            <h3 className="font-bold text-center bg-gray-100 p-1 mb-2">OTROS CARGOS</h3>
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-gray-50">
                  <th className="border border-black p-1 text-left">Concepto</th>
                  <th className="border border-black p-1 text-right">Valor</th>
                </tr>
              </thead>
              <tbody>
                {boleta.cargos.cargo_fijo > 0 && (
                  <tr>
                    <td className="border border-black p-1">Cargo Fijo</td>
                    <td className="border border-black p-1 text-right">{formatMoney(boleta.cargos.cargo_fijo)}</td>
                  </tr>
                )}
                {boleta.cargos.alcantarillado > 0 && (
                  <tr>
                    <td className="border border-black p-1">Alcantarillado</td>
                    <td className="border border-black p-1 text-right">{formatMoney(boleta.cargos.alcantarillado)}</td>
                  </tr>
                )}
                {boleta.cargos.cuota_mortuoria > 0 && (
                  <tr>
                    <td className="border border-black p-1">Cuota Mortuoria</td>
                    <td className="border border-black p-1 text-right">{formatMoney(boleta.cargos.cuota_mortuoria)}</td>
                  </tr>
                )}
                {boleta.cargos.donaciones > 0 && (
                  <tr>
                    <td className="border border-black p-1">Donaciones</td>
                    <td className="border border-black p-1 text-right">{formatMoney(boleta.cargos.donaciones)}</td>
                  </tr>
                )}
                {boleta.cargos.multas_atraso > 0 && (
                  <tr>
                    <td className="border border-black p-1">Multas por Atraso</td>
                    <td className="border border-black p-1 text-right">{formatMoney(boleta.cargos.multas_atraso)}</td>
                  </tr>
                )}
                {boleta.cargos.subsidio > 0 && (
                  <tr>
                    <td className="border border-black p-1">Subsidio Aplicado</td>
                    <td className="border border-black p-1 text-right">-{formatMoney(boleta.cargos.subsidio)}</td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>

          {/* Totales */}
          <div className="mb-4 p-3 border-2 border-black bg-gray-50">
            <div className="space-y-1 text-sm">
              <div className="flex justify-between">
                <span className="font-bold">Total Mes Actual:</span>
                <span>{formatMoney(boleta.totales.total_mes_actual)}</span>
              </div>
              <div className="flex justify-between">
                <span className="font-bold">Saldo Anterior:</span>
                <span>{formatMoney(boleta.totales.saldo_anterior)}</span>
              </div>
              <div className="flex justify-between text-lg font-bold border-t border-black pt-1">
                <span>TOTAL A PAGAR:</span>
                <span>{formatMoney(boleta.totales.total_boleta)}</span>
              </div>
            </div>
          </div>

          {/* Información adicional */}
          <div className="text-center text-xs border-t border-black pt-2">
            <p><strong>Representante Legal:</strong> {boleta.datos_apr.representante_legal}</p>
            <p><strong>Teléfono:</strong> {boleta.datos_apr.telefono_representante}</p>
            <p><strong>Horario de Atención:</strong> Lunes a Viernes de 09:00 a 17:00 hrs</p>
            <p className="mt-1 font-bold">¡Gracias por su pago oportuno!</p>
          </div>
        </div>
      </div>
    </>
  );
};

export default BoletaImpresion;