import Link from 'next/link';
import type { ReactNode } from 'react';
import { cn } from '@/lib/format';

export interface ExplainerRow {
  /** component name, e.g. "Sales per month" */
  label: ReactNode;
  /** the asset's actual input, or null when RareIndex does not have it (rendered "not available") */
  value: ReactNode | null;
  /** weight in the formula, e.g. "40 %" */
  weight?: ReactNode;
  /** how the input maps to 0–1, e.g. "30 / month → 1" */
  note?: ReactNode;
}

/**
 * §204 "Explain every score": a native <details> (no client JS) that opens the components of a score
 * with the asset's real inputs and links to the matching Methodology section. Inputs RareIndex does
 * not store are shown as "not available" — a component is never filled with a guessed value.
 */
export function ScoreExplainer({ summary, title, anchor, formula, rows, footnote, className }: { summary?: ReactNode; title: ReactNode; anchor: string; formula?: ReactNode; rows: ExplainerRow[]; footnote?: ReactNode; className?: string }) {
  return (
    <details className={cn('group text-[11px]', className)}>
      <summary className="inline-flex cursor-pointer list-none items-center gap-1 text-subtle underline-offset-2 hover:text-fg hover:underline [&::-webkit-details-marker]:hidden">
        <span aria-hidden className="inline-block transition-transform group-open:rotate-90">▸</span>
        {summary ?? 'How is this computed?'}
      </summary>
      <div className="mt-2 rounded-sm border border-border bg-sunken p-2.5">
        <div className="flex items-baseline justify-between gap-2">
          <p className="font-semibold text-fg">{title}</p>
          <Link href={`/methodology#${anchor}`} className="shrink-0 text-subtle hover:text-fg hover:underline">
            Methodology →
          </Link>
        </div>
        {formula ? <p className="mono-num mt-1 text-[10.5px] leading-snug text-muted">{formula}</p> : null}
        <table className="mt-2 w-full border-collapse">
          <thead>
            <tr className="text-left text-[10px] uppercase tracking-wider text-subtle">
              <th className="py-0.5 pr-2 font-medium">Component</th>
              <th className="py-0.5 pr-2 text-right font-medium">This asset</th>
              {rows.some((r) => r.weight !== undefined) ? <th className="py-0.5 pr-2 text-right font-medium">Weight</th> : null}
              {rows.some((r) => r.note !== undefined) ? <th className="py-0.5 font-medium">Scale</th> : null}
            </tr>
          </thead>
          <tbody className="divide-y divide-border">
            {rows.map((r, i) => (
              <tr key={i}>
                <td className="py-1 pr-2 text-muted">{r.label}</td>
                <td className="num py-1 pr-2 text-right text-fg">{r.value === null || r.value === undefined ? <span className="text-subtle">not available</span> : r.value}</td>
                {rows.some((x) => x.weight !== undefined) ? <td className="num py-1 pr-2 text-right text-muted">{r.weight ?? ''}</td> : null}
                {rows.some((x) => x.note !== undefined) ? <td className="py-1 text-subtle">{r.note ?? ''}</td> : null}
              </tr>
            ))}
          </tbody>
        </table>
        {footnote ? <p className="mt-2 leading-snug text-subtle">{footnote}</p> : null}
      </div>
    </details>
  );
}