"use client"

import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Printer } from "lucide-react"

interface TramiteData {
  nombre: string
  formaJuridica: string
  organismo: string
  jurisdiccion: string
  ultimaInteraccion: string
  createdAt: string
  documentacion: string
  requiereCertificaciones: boolean
  certificacionesDetalle: string
  pasoAPaso: string
  costos: Array<{
    descripcion: string
    monto: string
    moneda: string
    observacion: string
  }>
  comentariosInternos: string
  linkGuia: string
  dondeSeRealiza: string
}

interface Adjunto {
  titulo: string
  tipo: string
}

interface TramitePrintViewProps {
  tramite: TramiteData
  adjuntos: Adjunto[]
  cooperativaNombre?: string
  cooperativaLogo?: string
  onPrint?: () => void
}

export function TramitePrintView({
  tramite,
  adjuntos,
  cooperativaNombre = "Cooperativa de Contadores",
  cooperativaLogo,
  onPrint,
}: TramitePrintViewProps) {
  const handlePrint = () => {
    if (onPrint) {
      onPrint()
    }
    window.print()
  }

  return (
    <div className="min-h-screen bg-background">
      {/* Botón de impresión - solo visible en pantalla */}
      <div className="print:hidden sticky top-0 z-50 border-b border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/60">
        <div className="mx-auto max-w-4xl px-6 py-4">
          <div className="flex items-center justify-between">
            <h2 className="text-lg font-semibold text-foreground">Vista de Impresión</h2>
            <Button onClick={handlePrint} className="gap-2">
              <Printer className="h-4 w-4" />
              Imprimir / Exportar PDF
            </Button>
          </div>
        </div>
      </div>

      {/* Contenido imprimible */}
      <div className="print-container mx-auto max-w-4xl px-6 py-8 print:px-0 print:py-0">
        <div className="print-page relative bg-white text-black">
          {/* Marca de agua */}
          <div className="watermark">
            <div className="watermark-content">
              {cooperativaLogo && <img src={cooperativaLogo || "/placeholder.svg"} alt="" className="watermark-logo" />}
              <span className="watermark-text">{cooperativaNombre}</span>
            </div>
          </div>

          {/* Encabezado */}
          <div className="print-header">
            <div className="mb-6 border-b-2 border-gray-300 pb-4">
              <h1 className="mb-4 text-2xl font-bold text-gray-900">{tramite.nombre}</h1>
              <div className="flex flex-wrap gap-2">
                <Badge variant="secondary" className="bg-gray-100 text-gray-800 border-gray-300">
                  Forma Jurídica: {tramite.formaJuridica}
                </Badge>
                <Badge variant="secondary" className="bg-gray-100 text-gray-800 border-gray-300">
                  Organismo: {tramite.organismo}
                </Badge>
                <Badge variant="secondary" className="bg-gray-100 text-gray-800 border-gray-300">
                  Jurisdicción: {tramite.jurisdiccion}
                </Badge>
                <Badge variant="outline" className="border-gray-400 text-gray-700">
                  Última interacción: {new Date(tramite.ultimaInteraccion).toLocaleDateString("es-AR")}
                </Badge>
              </div>
            </div>
          </div>

          {/* Cuerpo del documento */}
          <div className="print-body space-y-6">
            {/* Información General */}
            <section className="print-section">
              <h2 className="section-title">Información General</h2>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <div>
                    <strong className="text-gray-600">Fecha de Creación:</strong>
                    {tramite.createdAt
                      ? new Date(tramite.createdAt).toLocaleDateString("es-AR", {
                        year: "numeric",
                        month: "2-digit",
                        day: "2-digit",
                      })
                      : "No especificada"}
                  </div>
                </div>
                <div>
                  <p className="field-label">Dónde se realiza</p>
                  <p className="field-value">{tramite.dondeSeRealiza}</p>
                </div>
              </div>
              {tramite.linkGuia && (
                <div className="mt-4">
                  <p className="field-label">Guía Oficial</p>
                  <p className="field-value break-all text-blue-600">{tramite.linkGuia}</p>
                </div>
              )}
            </section>

            {/* Documentación y Requisitos */}
            <section className="print-section">
              <h2 className="section-title">Documentación y Requisitos</h2>
              <div className="field-content" dangerouslySetInnerHTML={{ __html: tramite.documentacion }} />
            </section>

            {/* Certificaciones Externas */}
            {tramite.requiereCertificaciones && (
              <section className="print-section">
                <h2 className="section-title">⚠️ Certificaciones Externas Requeridas</h2>
                <div className="field-content">{tramite.certificacionesDetalle}</div>
              </section>
            )}

            {/* Paso a Paso */}
            <section className="print-section">
              <h2 className="section-title">Procedimiento Paso a Paso</h2>
              <div className="field-content" dangerouslySetInnerHTML={{ __html: tramite.pasoAPaso }} />
            </section>

            {/* Costos */}
            {tramite.costos.length > 0 && (
              <section className="print-section">
                <h2 className="section-title">Costos Asociados</h2>
                <table className="cost-table">
                  <thead>
                    <tr>
                      <th>Descripción</th>
                      <th>Monto</th>
                      <th>Observaciones</th>
                    </tr>
                  </thead>
                  <tbody>
                    {tramite.costos.map((costo, index) => (
                      <tr key={index}>
                        <td>{costo.descripcion}</td>
                        <td className="whitespace-nowrap font-semibold">
                          {costo.moneda} ${Number(costo.monto).toLocaleString("es-AR")}
                        </td>
                        <td className="text-sm text-gray-600">{costo.observacion || "-"}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </section>
            )}

            {/* Adjuntos */}
            {adjuntos.length > 0 && (
              <section className="print-section">
                <h2 className="section-title">Archivos Adjuntos</h2>
                <table className="attachments-table">
                  <thead>
                    <tr>
                      <th>Tipo</th>
                      <th>Nombre del Archivo</th>
                    </tr>
                  </thead>
                  <tbody>
                    {adjuntos.map((adjunto, index) => (
                      <tr key={index}>
                        <td>
                          <Badge variant="secondary" className="bg-gray-100 text-gray-800 border-gray-300 text-xs">
                            {adjunto.tipo}
                          </Badge>
                        </td>
                        <td>{adjunto.titulo}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </section>
            )}

            {/* Comentarios Internos */}
            {tramite.comentariosInternos && (
              <section className="print-section">
                <h2 className="section-title">Comentarios Internos</h2>
                <div className="field-content bg-gray-50 p-4 rounded border border-gray-200">
                  {tramite.comentariosInternos}
                </div>
              </section>
            )}
          </div>

          {/* Footer con paginación */}
          <div className="print-footer">
            <div className="flex items-center justify-between text-xs text-gray-500">
              <span>{cooperativaNombre}</span>
              <span>
                Página <span className="page-number"></span> de <span className="page-total"></span>
              </span>
              <span>{new Date().toLocaleDateString("es-AR")}</span>
            </div>
          </div>
        </div>
      </div>

      {/* Estilos de impresión */}
      <style jsx global>{`
        @media print {
          @page {
            size: A4;
            margin: 2cm 1.5cm;
          }

          body {
            print-color-adjust: exact;
            -webkit-print-color-adjust: exact;
          }

          .print-container {
            max-width: 100%;
            padding: 0;
            margin: 0;
          }

          .print-page {
            position: relative;
            background: white;
            color: black;
            page-break-after: always;
          }

          .print-page:last-child {
            page-break-after: auto;
          }

          /* Marca de agua */
          .watermark {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
            opacity: 0.08;
            z-index: 0;
            pointer-events: none;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .watermark-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
          }

          .watermark-logo {
            width: 200px;
            height: auto;
          }

          .watermark-text {
            font-size: 3rem;
            font-weight: bold;
            color: #000;
            white-space: nowrap;
          }

          /* Contenido */
          .print-header,
          .print-body {
            position: relative;
            z-index: 1;
          }

          .print-section {
            page-break-inside: avoid;
            margin-bottom: 1.5rem;
          }

          .section-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 0.75rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #e5e7eb;
          }

          .field-label {
            font-size: 0.75rem;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.25rem;
          }

          .field-value {
            font-size: 0.875rem;
            color: #111827;
          }

          .field-content {
            font-size: 0.875rem;
            line-height: 1.6;
            color: #374151;
          }

          .field-content img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 1rem 0;
          }

          /* Tablas */
          .cost-table,
          .attachments-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 0.5rem;
            font-size: 0.875rem;
          }

          .cost-table th,
          .attachments-table th {
            background-color: #f3f4f6;
            padding: 0.5rem;
            text-align: left;
            font-weight: 600;
            border: 1px solid #d1d5db;
          }

          .cost-table td,
          .attachments-table td {
            padding: 0.5rem;
            border: 1px solid #e5e7eb;
          }

          .cost-table tbody tr:nth-child(even),
          .attachments-table tbody tr:nth-child(even) {
            background-color: #f9fafb;
          }

          /* Footer */
          .print-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 0.5rem 0;
            border-top: 1px solid #e5e7eb;
            background: white;
          }

          /* Paginación automática */
          .page-number::after {
            content: counter(page);
          }

          .page-total::after {
            content: counter(pages);
          }
        }

        /* Estilos en pantalla */
        @media screen {
          .print-page {
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-bottom: 2rem;
          }

          .watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
            opacity: 0.05;
            z-index: 0;
            pointer-events: none;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .watermark-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
          }

          .watermark-logo {
            width: 200px;
            height: auto;
          }

          .watermark-text {
            font-size: 3rem;
            font-weight: bold;
            color: #000;
            white-space: nowrap;
          }

          .print-header,
          .print-body {
            position: relative;
            z-index: 1;
          }

          .print-section {
            margin-bottom: 1.5rem;
          }

          .section-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 0.75rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #e5e7eb;
          }

          .field-label {
            font-size: 0.75rem;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.25rem;
          }

          .field-value {
            font-size: 0.875rem;
            color: #111827;
          }

          .field-content {
            font-size: 0.875rem;
            line-height: 1.6;
            color: #374151;
          }

          .field-content img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 1rem 0;
          }

          .cost-table,
          .attachments-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 0.5rem;
            font-size: 0.875rem;
          }

          .cost-table th,
          .attachments-table th {
            background-color: #f3f4f6;
            padding: 0.5rem;
            text-align: left;
            font-weight: 600;
            border: 1px solid #d1d5db;
          }

          .cost-table td,
          .attachments-table td {
            padding: 0.5rem;
            border: 1px solid #e5e7eb;
          }

          .cost-table tbody tr:nth-child(even),
          .attachments-table tbody tr:nth-child(even) {
            background-color: #f9fafb;
          }

          .print-footer {
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid #e5e7eb;
          }
        }
      `}</style>
    </div>
  )
}