import type { InterpretationSignalLike } from "@/lib/tuvi-overview-visual-helpers";
import {
  formatDriversOneLine,
  pickStrategicSignalsForBars,
  structureBindingFootnoteVi,
} from "@/lib/tuvi-overview-visual-helpers";
import {
  TUVI_VISUAL_SIGNALS_LEDE,
  TUVI_VISUAL_SIGNALS_TITLE,
  TUVI_VISUAL_SIGNALS_VALUE_CAPTION,
} from "@/lib/tuvi-overview-visual-copy.v1";

type Props = {
  readonly signals: readonly InterpretationSignalLike[];
  readonly className?: string;
};

export function TuViStrategicSignalBars({ signals, className }: Props) {
  const rows = pickStrategicSignalsForBars(signals);
  if (!rows.length) return null;

  return (
    <aside
      data-tuvi-visual="signals"
      className={`ctkp-narrative-aside-panel ctkp-tuvi-visual-panel max-w-full min-w-0 overflow-hidden print:break-inside-avoid print:max-w-full px-3 py-3 sm:px-4 ${className ?? ""}`}
      aria-label="Khí chất tín hiệu chiến lược"
    >
      <h4 className="font-ctkp-serif text-[11px] font-semibold tracking-[0.1em] text-[color:var(--ctkp-narrative-ink-strong)] sm:text-[12px]">
        {TUVI_VISUAL_SIGNALS_TITLE}
      </h4>
      <p className="mt-1.5 font-ctkp-serif text-[10px] leading-relaxed text-[color:var(--ctkp-narrative-caption)] sm:text-[11px]">
        {TUVI_VISUAL_SIGNALS_LEDE}
      </p>
      <ul className="mt-3 space-y-3">
        {rows.map((s) => {
          const v = Math.min(100, Math.max(0, Number.isFinite(s.value) ? s.value : 0));
          const driversLine = formatDriversOneLine(s.drivers, 96);
          return (
            <li key={s.key} className="min-w-0">
              <div className="flex flex-wrap items-end justify-between gap-x-2 gap-y-0.5">
                <span className="min-w-0 max-w-[85%] shrink font-ctkp-serif text-[11px] font-medium leading-snug text-[color:var(--ctkp-narrative-ink-soft)] sm:max-w-[78%]">
                  {s.label}
                </span>
                <span className="shrink-0 font-ctkp-serif text-[9px] font-medium tabular-nums tracking-wide text-[color:var(--ctkp-narrative-caption)] sm:text-[10px]">
                  {TUVI_VISUAL_SIGNALS_VALUE_CAPTION} · {v}
                </span>
              </div>
              <div
                className="mt-1.5 h-1 w-full min-w-0 max-w-full overflow-hidden rounded-sm border border-[color:rgba(148,128,98,0.42)] bg-[rgba(255,252,245,0.65)]"
                role="presentation"
              >
                <div
                  className="ctkp-tuvi-signal-bar-fill h-full max-w-full rounded-sm bg-gradient-to-r from-[#5a4a3c] to-[#9a7a52] print:bg-neutral-600 print:bg-none"
                  style={{ width: `${v}%` }}
                />
              </div>
              <p className="mt-1 break-words font-ctkp-serif text-[9px] leading-relaxed text-[color:var(--ctkp-narrative-caption)] sm:text-[10px]">
                <span>{structureBindingFootnoteVi(s.confidence)}</span>
                {driversLine ? <span> · {driversLine}</span> : null}
              </p>
            </li>
          );
        })}
      </ul>
    </aside>
  );
}