frontend/components/Reports.tsx

import { useState } from "react";
import { Language, translations } from "../lib/translations";

type Props = {
  reportMarkdown: string;
  lang: Language;
};

export default function Reports({ reportMarkdown, lang }: Props) {
  const t = translations[lang];
  const [message, setMessage] = useState("");

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(reportMarkdown);
      setMessage(lang === 'es' ? "Reporte copiado al portapapeles." : "Report copied to clipboard.");
    } catch {
      setMessage(lang === 'es' ? "No se pudo copiar el reporte." : "Unable to copy report.");
    }
    window.setTimeout(() => setMessage(""), 2000);
  };

  return (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-700">
      <div className="glass-card rounded-[2rem] p-8 border border-white/10 flex flex-col gap-6 md:flex-row md:items-center md:justify-between relative overflow-hidden">
        <div className="absolute top-0 right-0 w-32 h-32 bg-cyan/10 blur-[60px]" />
        <div>
          <h2 className="text-2xl font-bold text-white mb-2">{lang === 'es' ? 'Reporte de Inteligencia Ejecutiva' : 'Executive Intelligence Report'}</h2>
          <p className="text-slate-500 text-sm">{lang === 'es' ? 'Resumen Markdown exportable para tomadores de decisiones y revisión legal.' : 'Exportable Markdown summary for decision makers and legal review.'}</p>
        </div>
        <button
          type="button"
          onClick={handleCopy}
          disabled={!reportMarkdown}
          className="rounded-2xl premium-gradient px-8 py-4 font-black text-xs uppercase tracking-widest text-white shadow-xl shadow-purple-500/20 transition hover:scale-105 active:scale-95 disabled:opacity-30"
        >
          {lang === 'es' ? 'Copiar Reporte' : 'Copy Report'} 📋
        </button>
      </div>

      <div className="glass-card rounded-[2.5rem] border border-white/5 bg-slate-950/40 p-10 text-slate-300 min-h-[500px] shadow-2xl">
        {reportMarkdown ? (
          <div className="prose prose-invert max-w-none">
            <pre className="whitespace-pre-wrap break-words text-slate-100 font-mono text-[13px] leading-relaxed p-6 rounded-2xl bg-black/20 border border-white/5">
              {reportMarkdown}
            </pre>
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center h-full text-slate-500 py-20">
            <div className="text-4xl mb-4 opacity-20">📋</div>
            <p className="text-sm font-medium tracking-tight">{lang === 'es' ? 'Completa un análisis agéntico para compilar el reporte final.' : 'Complete an agentic analysis to compile the final report.'}</p>
          </div>
        )}
      </div>
      {message && (
        <div className="fixed bottom-8 right-8 rounded-2xl bg-cyan px-6 py-3 text-sm font-semibold text-slate-950 shadow-xl transition-all animate-bounce">
          {message}
        </div>
      )}
    </div>
  );
}