import React from "react"
import { Leaf } from "lucide-react"

export function RecetaDocumento({ receta }: { receta: any }) {
  if (!receta) return null

  return (
    <div className="bg-card shadow-md print:shadow-none border border-border print:border-0 rounded-lg overflow-hidden shrink-0" style={{ width: '100%', fontFamily: 'Arial, Helvetica, sans-serif', letterSpacing: 'normal' }}>
      {/* Encabezado minimalista */}
      <div className="bg-gradient-to-r from-emerald-50 to-lime-50 border-b-2 border-emerald-600 p-6 print:p-4">
        <div className="flex justify-between items-start">
          <div className="flex items-center">
            <img src="/logo_transparent.png" alt="AgroRecetas" className="h-14 w-auto object-contain" />
          </div>
          <div className="text-right">
            <p className="text-xs text-muted-foreground uppercase tracking-wide mb-1">N° de Receta</p>
            <p className="text-lg font-bold text-emerald-800">{receta.numero}</p>
            <p className="text-xs text-muted-foreground mt-1">Fecha: {receta.fecha}</p>
          </div>
        </div>
      </div>

      <div className="p-6 print:p-4 border-b border-border">
        <h2 className="text-sm font-bold text-foreground/80 uppercase tracking-wider mb-4 pb-2 border-b border-border">
          Datos Principales
        </h2>
        <div className="grid grid-cols-2 gap-x-8 gap-y-3">
          <div className="flex">
            <span className="text-sm text-muted-foreground w-40">Productor:</span>
            <span className="text-sm font-semibold text-foreground">{receta.productor?.nombre || '—'}</span>
          </div>
          <div className="flex">
            <span className="text-sm text-muted-foreground w-40">Establecimiento:</span>
            <span className="text-sm font-semibold text-foreground">{receta.establecimiento?.nombre || '—'}</span>
          </div>
          <div className="flex">
            <span className="text-sm text-muted-foreground w-40">Fecha:</span>
            <span className="text-sm font-semibold text-foreground">{receta.fecha}</span>
          </div>
          <div className="flex">
            <span className="text-sm text-muted-foreground w-40">Superficie Aplicable:</span>
            <span className="text-sm font-semibold text-foreground">{receta.superficie} ha</span>
          </div>
          <div className="flex">
            <span className="text-sm text-muted-foreground w-40">Prestador:</span>
            <span className="text-sm font-semibold text-foreground">{receta.prestador?.nombre || '—'}</span>
          </div>
          <div className="flex col-span-2">
            <span className="text-sm text-muted-foreground w-40">Observación general:</span>
            <span className="text-sm text-foreground">{receta.observaciones || '—'}</span>
          </div>
        </div>
      </div>

      <div className="border-b border-border">
        {(() => {
          // Check if it's the new format: all items share the same labor
          const isNewFormat = receta.items && receta.items.length > 0 &&
            receta.items.every((it: any) => it.labor === receta.items[0].labor);

          if (isNewFormat) {
            const labor = receta.items[0].labor;
            const rinde = receta.items[0].rinde;
            const momento_dia = receta.items[0].momento_dia;
            const productos = receta.items[0].productos || [];
            const lotesText = receta.items.map((it: any) => `${it.lote?.nombre} (${it.lote?.superficie} ha)`).join(", ");
            const cultivosText = Array.from(new Set(receta.items.map((it: any) => it.cultivo?.nombre))).join(", ");

            return (
              <div className="p-6 print:p-4">
                <h3 className="text-sm font-bold text-emerald-800 uppercase tracking-wider mb-3">
                  Labor a Aplicar: {labor} {labor === 'Cosecha' && rinde ? `(${rinde} qq/ha)` : ''}
                </h3>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-2 mb-4 bg-muted/10 p-3 rounded-md">
                  <div className="flex">
                    <span className="text-sm text-muted-foreground w-24">Lotes:</span>
                    <span className="text-sm font-semibold">{lotesText}</span>
                  </div>
                  <div className="flex">
                    <span className="text-sm text-muted-foreground w-24">Cultivo:</span>
                    <span className="text-sm font-semibold">{cultivosText}</span>
                  </div>
                  <div className="flex">
                    <span className="text-sm text-muted-foreground w-24">Momento:</span>
                    <span className="text-sm font-semibold">{momento_dia || '—'}</span>
                  </div>
                </div>

                {productos && productos.length > 0 ? (
                  <div className="overflow-x-auto">
                    <table className="w-full border-collapse">
                      <thead>
                        <tr className="bg-muted/50 border-y border-border">
                          <th className="px-4 py-2 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wide">
                            Producto
                          </th>
                          <th className="px-4 py-2 text-center text-xs font-semibold text-muted-foreground uppercase tracking-wide whitespace-nowrap">
                            Dosis
                          </th>
                          <th className="px-4 py-2 text-right text-xs font-semibold text-muted-foreground uppercase tracking-wide whitespace-nowrap">
                            Cantidad total
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        {productos.map((producto: any, pIndex: number) => (
                          <tr key={pIndex} className="border-b border-border last:border-0 hover:bg-muted/20">
                            <td className="px-4 py-2 text-sm text-foreground">{producto.nombre_producto}</td>
                            <td className="px-4 py-2 text-sm text-center text-foreground whitespace-nowrap">
                              {Number(producto.dosis)} {producto.unidad}
                            </td>
                            <td className="px-4 py-2 text-sm text-right font-medium text-foreground whitespace-nowrap">
                              {Number(producto.cantidad_total).toFixed(3)} {producto.unidad.split("/")[0]}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                ) : (
                  <p className="text-sm text-muted-foreground italic">Sin productos asociados (Labor de {labor})</p>
                )}
              </div>
            );
          }

          // Legacy format (multiple different labors)
          return receta.items?.map((item: any, itemIndex: number) => (
            <div key={itemIndex} className={`p-6 print:p-4 ${itemIndex > 0 ? 'border-t border-border' : ''}`}>
              <h3 className="text-sm font-bold text-emerald-800 uppercase tracking-wider mb-3">
                Labor #{itemIndex + 1}: {item.labor} {item.labor === 'Cosecha' && item.rinde ? `(${item.rinde} qq/ha)` : ''}
              </h3>

              <div className="grid grid-cols-2 gap-x-8 gap-y-2 mb-4 bg-muted/10 p-3 rounded-md">
                <div className="flex">
                  <span className="text-sm text-muted-foreground w-24">Lote:</span>
                  <span className="text-sm font-semibold">{item.lote?.nombre} ({item.lote?.superficie} ha)</span>
                </div>
                <div className="flex">
                  <span className="text-sm text-muted-foreground w-24">Cultivo:</span>
                  <span className="text-sm font-semibold">{item.cultivo?.nombre}</span>
                </div>
                <div className="flex">
                  <span className="text-sm text-muted-foreground w-24">Momento:</span>
                  <span className="text-sm font-semibold">{item.momento_dia || '—'}</span>
                </div>
              </div>

              {item.productos && item.productos.length > 0 ? (
                <div className="overflow-x-auto">
                  <table className="w-full border-collapse">
                    <thead>
                      <tr className="bg-muted/50 border-y border-border">
                        <th className="px-4 py-2 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wide">
                          Producto
                        </th>
                        <th className="px-4 py-2 text-center text-xs font-semibold text-muted-foreground uppercase tracking-wide whitespace-nowrap">
                          Dosis
                        </th>
                        <th className="px-4 py-2 text-right text-xs font-semibold text-muted-foreground uppercase tracking-wide whitespace-nowrap">
                          Cantidad total
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {item.productos.map((producto: any, pIndex: number) => (
                        <tr key={pIndex} className="border-b border-border last:border-0 hover:bg-muted/20">
                          <td className="px-4 py-2 text-sm text-foreground">{producto.nombre_producto}</td>
                          <td className="px-4 py-2 text-sm text-center text-foreground whitespace-nowrap">
                            {Number(producto.dosis)} {producto.unidad}
                          </td>
                          <td className="px-4 py-2 text-sm text-right font-medium text-foreground whitespace-nowrap">
                            {Number(producto.cantidad_total).toFixed(3)} {producto.unidad.split("/")[0]}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              ) : (
                <p className="text-sm text-muted-foreground italic">Sin productos asociados (Labor de {item.labor})</p>
              )}
            </div>
          ));
        })()}
      </div>

      <div className="p-6 print:p-4 border-b border-border bg-muted/20">
        <h2 className="text-sm font-bold text-foreground/80 uppercase tracking-wider mb-3 pb-2 border-b border-border">
          Condiciones de Aplicación
        </h2>
        <div className="grid grid-cols-2 gap-x-8 gap-y-2.5">
          <div className="flex">
            <span className="text-sm text-muted-foreground w-40">Caudal:</span>
            <span className="text-sm font-semibold text-foreground">{receta.caudal || '—'} litros/ha</span>
          </div>
          <div className="flex">
            <span className="text-sm text-muted-foreground w-40">Viento:</span>
            <span className="text-sm text-foreground">{receta.viento_direccion || '—'}</span>
          </div>
          <div className="flex">
            <span className="text-sm text-muted-foreground w-40">Intensidad:</span>
            <span className="text-sm text-foreground">{receta.viento_intensidad || '—'}</span>
          </div>
          <div className="flex">
            <span className="text-sm text-muted-foreground w-40">Boquillas:</span>
            <span className="text-sm text-foreground">{receta.pastillas || '—'}</span>
          </div>
        </div>
      </div>

      <div className="p-6 print:p-4">
        <div className="mt-8 pt-6 border-t-2 border-border">
          <div className="flex justify-end">
            <div className="text-center">
              <div className="mb-8">
                <p className="text-2xl font-bold text-emerald-800" style={{ fontFamily: "cursive" }}>
                  {receta.ingeniero_responsable}
                </p>
              </div>
              <div className="border-t border-muted-foreground/30 pt-3 min-w-[280px]">
                <p className="text-sm font-semibold text-foreground">{receta.ingeniero_responsable}</p>
                <p className="text-xs text-muted-foreground mt-1">{receta.matricula}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}