'use client';

import { AlertTriangle } from 'lucide-react';
import { Panel } from '@/components/ui/panel';
import type { NormalizationMetadata } from '@/lib/types';
import { cn } from '@/lib/utils';

type NormalizationSummaryProps = {
  normalization: NormalizationMetadata;
};

function SummaryCard(props: {
  label: string;
  value: string;
  tone?: 'default' | 'warning';
}) {
  return (
    <div
      className={cn(
        'data-surface px-3 py-3',
        props.tone === 'warning' && 'border-[#7f6250] bg-[linear-gradient(180deg,rgba(80,58,41,0.92),rgba(38,27,21,0.78))]'
      )}
    >
      <p className="panel-heading text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{props.label}</p>
      <p className="mt-1 text-sm font-semibold text-[color:var(--terminal-bright)]">{props.value}</p>
    </div>
  );
}

export function NormalizationSummary({ normalization }: NormalizationSummaryProps) {
  const hasMaterialUnmapped = normalization.materialUnmappedRowCount > 0;
  const hasWarnings = normalization.warnings.length > 0;

  return (
    <Panel
      title="Normalization Summary"
      subtitle="Pack, parser, and residual mapping health for the compact statement surface."
      variant="surface"
    >
      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-8">
        <SummaryCard label="Pack" value={normalization.fiscalPack ?? 'unknown'} />
        <SummaryCard label="Regime" value={normalization.regime} />
        <SummaryCard label="Parser" value={`${normalization.parserEngine} ${normalization.parserVersion}`} />
        <SummaryCard label="Surface Rows" value={String(normalization.surfaceRowCount)} />
        <SummaryCard label="Detail Rows" value={String(normalization.detailRowCount)} />
        <SummaryCard label="KPI Rows" value={String(normalization.kpiRowCount)} />
        <SummaryCard label="Unmapped Rows" value={String(normalization.unmappedRowCount)} />
        <SummaryCard
          label="Material Unmapped"
          value={String(normalization.materialUnmappedRowCount)}
          tone={hasMaterialUnmapped ? 'warning' : 'default'}
        />
      </div>
      {hasWarnings ? (
        <div className="mt-3 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-3">
          <p className="panel-heading text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
            Parser Warnings
          </p>
          <div className="mt-2 flex flex-wrap gap-2">
            {normalization.warnings.map((warning) => (
              <span
                key={warning}
                className="rounded-full border border-[color:var(--line-weak)] bg-[rgba(88,102,122,0.16)] px-3 py-1 text-xs text-[color:var(--terminal-bright)]"
              >
                {warning}
              </span>
            ))}
          </div>
        </div>
      ) : null}
      {hasMaterialUnmapped ? (
        <div className="mt-3 flex items-start gap-2 rounded-xl border border-[#7f6250] bg-[rgba(91,66,46,0.18)] px-3 py-3 text-sm text-[#f5d5c0]">
          <AlertTriangle className="mt-0.5 size-4 shrink-0" />
          <p>Material unmapped rows were detected for this filing set. Use the inspector and detail rows before relying on cross-company comparisons.</p>
        </div>
      ) : null}
    </Panel>
  );
}
