import { ArrowLeft, Download, FileText, Loader2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { formatSimulationTimestamp } from '@/lib/format'
import type { Process } from '@/domain/types'

interface ReportHeaderProps {
  process: Process
  simulatedAt: number
  onBack: () => void
  onExportPdf: () => void
  onExportCsv: () => void
  isExportingPdf?: boolean
  isExportingCsv?: boolean
}

export function ReportHeader({
  process, simulatedAt, onBack,
  onExportPdf, onExportCsv,
  isExportingPdf = false, isExportingCsv = false,
}: ReportHeaderProps) {
  const { date, time } = formatSimulationTimestamp(simulatedAt)

  return (
    <div className="flex items-start justify-between gap-6 mb-8">
      <div className="min-w-0">
        <button
          onClick={onBack}
          className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-slate-600 transition-colors mb-3"
        >
          <ArrowLeft className="h-3.5 w-3.5" />
          Volver a editar
        </button>
        <h1 className="text-3xl font-bold text-slate-900 leading-tight">{process.name}</h1>
        <p className="text-sm text-slate-400 mt-1.5">
          {process.clientName && <><span className="text-slate-600">{process.clientName}</span> · </>}
          Simulado el {date} a las {time} · Moneda: <span className="font-medium">{process.currency}</span>
        </p>
      </div>

      <div className="flex items-center gap-2 shrink-0 pt-9">
        <Button
          variant="outline"
          size="sm"
          onClick={onExportCsv}
          disabled={isExportingCsv || isExportingPdf}
          className="gap-1.5 min-w-[120px]"
        >
          {isExportingCsv
            ? <><Loader2 className="h-4 w-4 animate-spin" />Generando CSV…</>
            : <><FileText className="h-4 w-4" />Exportar CSV</>
          }
        </Button>
        <Button
          size="sm"
          onClick={onExportPdf}
          disabled={isExportingPdf || isExportingCsv}
          className="gap-1.5 min-w-[120px]"
        >
          {isExportingPdf
            ? <><Loader2 className="h-4 w-4 animate-spin" />Generando PDF…</>
            : <><Download className="h-4 w-4" />Exportar PDF</>
          }
        </Button>
      </div>
    </div>
  )
}
