'use client';

import { useState } from 'react';
import { compactNumber, fullNumber } from './scale';

export interface BarDatum {
  label: string;
  value: number;
  sublabel?: string;
  color?: string;
  href?: string;
}

/**
 * Horizontal bar chart (magnitude by category). Bars ≤ 24px thick, 4px rounded data-end, single
 * hue by default, per-mark hover tooltip, direct value label at the tip.
 */
export function BarChart({ data, currency = false, maxBars = 12, ariaLabel, className, percent = false }: { data: BarDatum[]; currency?: boolean; maxBars?: number; ariaLabel: string; className?: string; percent?: boolean }) {
  const [hover, setHover] = useState<number | null>(null);
  const rows = data.slice(0, maxBars);
  if (!rows.length) return <div className={`text-xs text-subtle ${className ?? ''}`}>No data</div>;
  const max = Math.max(...rows.map((r) => Math.abs(r.value)), 1e-9);
  const fmt = (v: number) => (percent ? `${(v * 100).toFixed(1)}%` : compactNumber(v, { currency }));
  const fmtFull = (v: number) => (percent ? `${(v * 100).toFixed(2)}%` : fullNumber(v, { currency }));
  return (
    <div className={`relative ${className ?? ''}`} role="img" aria-label={ariaLabel}>
      <ul className="space-y-1.5">
        {rows.map((r, i) => {
          const w = Math.max(2, (Math.abs(r.value) / max) * 100);
          return (
            <li key={`${r.label}-${i}`} className="grid grid-cols-[minmax(0,9rem)_1fr_auto] items-center gap-2 text-[12px]" onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)}>
              <span className="truncate text-muted" title={r.label}>
                {r.href ? (
                  <a href={r.href} className="hover:text-fg">
                    {r.label}
                  </a>
                ) : (
                  r.label
                )}
              </span>
              <span className="relative h-4">
                <span className="absolute inset-y-0 left-0 rounded-r-[4px]" style={{ width: `${w}%`, background: r.color ?? 'var(--ri-index)', opacity: hover === null || hover === i ? 1 : 0.55 }} />
              </span>
              <span className="num w-16 text-right font-medium text-fg" title={fmtFull(r.value)}>
                {fmt(r.value)}
              </span>
            </li>
          );
        })}
      </ul>
      {hover !== null && rows[hover]?.sublabel ? <div className="mt-1 text-[11px] text-subtle">{rows[hover]!.sublabel}</div> : null}
    </div>
  );
}