import { useState } from "react";
import { useI18n } from "../../i18n/I18nContext";
import { METER_META, type UsageMeter } from "../../lib/usageMeter";

export type MeterBarRow = {
  meter: UsageMeter;
  credits: number;
  count: number;
  soft_cap: number;
};

type Props = {
  rows: MeterBarRow[];
  unlimited?: boolean;
};

/**
 * 分項用量：條長＝相對自己上限；hover 才露出點數。
 */
export function UsageMeterBars({ rows, unlimited = false }: Props) {
  const { t } = useI18n();
  const [active, setActive] = useState<UsageMeter | null>(null);
  const ordered = rows
    .slice()
    .sort((a, b) => METER_META[a.meter].order - METER_META[b.meter].order);

  return (
    <ul className="hb-usage-mbars" onMouseLeave={() => setActive(null)}>
      {ordered.map((row) => {
        const label = t(`usage.meter.${row.meter}`);
        const pct =
          row.soft_cap > 0
            ? Math.min(100, Math.round((row.count / row.soft_cap) * 100))
            : 0;
        const on = active === row.meter;
        const over = row.soft_cap > 0 && row.count > row.soft_cap;
        return (
          <li key={row.meter}>
            <button
              type="button"
              className={`hb-usage-mbar${on ? " is-on" : ""}${over ? " is-over" : ""}`}
              onMouseEnter={() => setActive(row.meter)}
              onFocus={() => setActive(row.meter)}
              aria-label={t("usage.meter.barAria", {
                label,
                count: row.count,
                credits: row.credits,
                cap: row.soft_cap,
              })}
            >
              <span className="hb-usage-mbar__label">{label}</span>
              <span className="hb-usage-mbar__track" aria-hidden>
                <span
                  className="hb-usage-mbar__fill"
                  style={{ width: `${Math.max(pct, row.count > 0 ? 3 : 0)}%` }}
                />
              </span>
              <span className="hb-usage-mbar__val">
                <strong>{row.count}</strong>
                <span className="text-muted">/{row.soft_cap}</span>
                {on ? <span className="hb-usage-mbar__pts">{row.credits}pt</span> : null}
                {unlimited && over ? <span className="hb-usage-mbar__inf">∞</span> : null}
              </span>
            </button>
          </li>
        );
      })}
    </ul>
  );
}