"use client";

import type { SummaryTheme, IndustryClassification, AuditMethodology } from "@/lib/audit/types";

interface Props {
  narrative: string;
  summaryThemes?: SummaryTheme[];
  industryFramework?: IndustryClassification;
  methodology?: AuditMethodology;
}

function splitParagraphs(text: string): string[] {
  return text.split(/\n\n+/).map((p) => p.trim()).filter(Boolean);
}

export function ExecutiveSummaryCard({ narrative, summaryThemes, industryFramework, methodology }: Props) {
  const paras = splitParagraphs(narrative);

  return (
    <div id="audit-executive-summary" className="bg-white rounded-2xl border border-slate-200 p-6 sm:p-8">
      <div className="flex items-center justify-between gap-4 mb-5 flex-wrap">
        <h2 className="text-[11px] font-semibold uppercase tracking-widest text-slate-400">
          Executive Summary
        </h2>
        {industryFramework && (
          <div className="flex flex-wrap gap-1.5">
            <span className="text-[11px] font-medium text-indigo-700 bg-indigo-50 border border-indigo-200 px-2.5 py-1 rounded-full">
              {industryFramework.industry}
            </span>
            {industryFramework.relevantFrameworks.slice(0, 2).map((f) => (
              <span key={f} className="text-[11px] font-medium text-slate-600 bg-slate-100 px-2.5 py-1 rounded-full">
                {f}
              </span>
            ))}
          </div>
        )}
      </div>

      <div className="space-y-4 text-[15px] text-slate-700 leading-[1.7]">
        {paras.map((p, i) => {
          if (i === 0) {
            const firstDot = p.search(/[.!?]/);
            const hook = firstDot >= 0 ? p.slice(0, firstDot + 1) : p;
            const rest = firstDot >= 0 ? p.slice(firstDot + 1) : "";
            return (
              <p key={i}>
                <strong className="font-semibold text-slate-900">{hook}</strong>
                {rest}
              </p>
            );
          }
          return <p key={i}>{p}</p>;
        })}
      </div>

      {industryFramework?.audienceFraming && (
        <div className="mt-5 p-3.5 bg-slate-50 border border-slate-200 rounded-xl">
          <p className="text-[10px] font-semibold uppercase tracking-widest text-slate-400 mb-1">Audience Framing</p>
          <p className="text-sm text-slate-600 leading-relaxed">{industryFramework.audienceFraming}</p>
        </div>
      )}

      {summaryThemes && summaryThemes.length > 0 && (
        <div className="mt-6">
          <p className="text-[10px] font-semibold uppercase tracking-widest text-slate-400 mb-3">
            Cross-Cutting Themes
          </p>
          <div className="space-y-3">
            {summaryThemes.map((t, i) => (
              <div
                key={i}
                className="border border-slate-200 border-l-[3px] border-l-indigo-500 rounded-r-xl rounded-l-sm bg-slate-50/60 p-3.5"
              >
                <p className="text-sm font-semibold text-slate-900 mb-1">{t.theme}</p>
                <p className="text-sm text-slate-600 leading-relaxed">{t.observation}</p>
              </div>
            ))}
          </div>
        </div>
      )}

      {methodology && methodology.factors.length > 0 && (
        <details className="mt-6 group">
          <summary className="cursor-pointer text-[11px] font-medium text-slate-400 hover:text-slate-700 transition-colors list-none flex items-center gap-1.5">
            <span className="inline-block transition-transform group-open:rotate-90">▶</span>
            Evaluation methodology ({methodology.factors.length} factors)
          </summary>
          <div className="mt-3 space-y-2">
            {methodology.factors.map((f, i) => (
              <div key={i} className="grid grid-cols-[1fr_2fr] gap-3 py-1.5 border-b border-slate-100 last:border-0">
                <span className="text-xs font-medium text-slate-700">{f.factor}</span>
                <span className="text-xs text-slate-500">{f.lookedAt}</span>
              </div>
            ))}
          </div>
        </details>
      )}
    </div>
  );
}
