import { Badge, Panel, PanelBody, PanelHeader } from '@/components/ui/display'
import { getI18n } from '@/lib/i18n/server'
import { formatNumber } from '@/lib/i18n/translate'
import { cn } from '@/lib/cn'

/**
 * Failure DNA, drawn rather than quoted (§46).
 *
 * "87 % similar" is a conclusion; this is the evidence. Two signature bars, one above the
 * other, dimension by dimension — where they line up the match is real, and where they
 * diverge the reader can see exactly which part of the pattern does not hold. A single
 * percentage asks to be believed; a comparison can be argued with.
 */
export interface DnaComparison {
  feature: string
  current: number
  historical: number
  agreement: number
}

export async function DnaVisual({
  patternCode,
  patternName,
  patternNameAr,
  similarity,
  contributions,
  className,
}: {
  patternCode: string
  patternName: string
  patternNameAr: string
  similarity: number
  contributions: DnaComparison[]
  className?: string
}) {
  const { t, locale } = await getI18n()
  const ar = locale === 'ar'

  return (
    <Panel className={className}>
      <PanelHeader
        title={t('dnaVisual.title')}
        subtitle={ar ? patternNameAr : patternName}
        action={
          <Badge tone={similarity >= 75 ? 'accent' : 'muted'}>
            {formatNumber(locale, similarity, { maximumFractionDigits: 0 })}%
          </Badge>
        }
      />
      <PanelBody className="space-y-3 pt-0">
        {/* Two strips, aligned dimension by dimension. Colour marks where they agree. */}
        <div className="space-y-1.5">
          <p className="text-[10px] uppercase tracking-wide text-text-faint">{t('dnaVisual.current')}</p>
          <div className="flex gap-0.5" aria-hidden>
            {contributions.map((entry) => (
              <div
                key={`current-${entry.feature}`}
                className="h-6 flex-1 rounded-sm bg-brand"
                style={{ opacity: 0.25 + entry.current * 0.75 }}
              />
            ))}
          </div>
          <div className="flex gap-0.5" aria-hidden>
            {contributions.map((entry) => (
              <div
                key={`historical-${entry.feature}`}
                className={cn(
                  'h-6 flex-1 rounded-sm',
                  entry.agreement >= 0.8 ? 'bg-brand' : entry.agreement >= 0.55 ? 'bg-watch' : 'bg-critical',
                )}
                style={{ opacity: 0.25 + entry.historical * 0.75 }}
              />
            ))}
          </div>
          <p className="text-[10px] uppercase tracking-wide text-text-faint">
            {t('dnaVisual.historical')} · {patternCode}
          </p>
        </div>

        <table className="w-full text-[11px]">
          <thead>
            <tr className="border-b border-border text-[10px] uppercase tracking-wide text-text-faint">
              <th className="py-1.5 text-start font-medium">{t('dna.dimensions')}</th>
              <th className="py-1.5 text-end font-medium">{t('dnaVisual.current')}</th>
              <th className="py-1.5 text-end font-medium">{t('dnaVisual.historical')}</th>
              <th className="py-1.5 text-end font-medium">{t('dnaVisual.similarity')}</th>
            </tr>
          </thead>
          <tbody>
            {contributions.map((entry) => (
              <tr key={entry.feature} className="border-b border-border/40 last:border-0">
                <td className="py-1.5 text-text-muted">{t(`dnaFeature.${entry.feature}`)}</td>
                <td className="tnum py-1.5 text-end text-text">
                  {formatNumber(locale, entry.current * 100, { maximumFractionDigits: 0 })}
                </td>
                <td className="tnum py-1.5 text-end text-text-muted">
                  {formatNumber(locale, entry.historical * 100, { maximumFractionDigits: 0 })}
                </td>
                <td
                  className={cn(
                    'tnum py-1.5 text-end font-medium',
                    entry.agreement >= 0.8 ? 'text-normal' : entry.agreement >= 0.55 ? 'text-watch' : 'text-critical',
                  )}
                >
                  {formatNumber(locale, entry.agreement * 100, { maximumFractionDigits: 0 })}%
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </PanelBody>
    </Panel>
  )
}