'use client';

import { AnimatedNumber } from '@/components/ui/AnimatedNumber';
import { Bar, Delta } from '@/components/ui/primitives';
import { fmt, fmtDelta } from '@/lib/format';
import { useDegraded, useLive } from '@/lib/live';
import { pressureColor } from '@/lib/pressure';
import type { Component, GlobalPressure } from '@/lib/types';

/** Component rows (desktop: dense table · phone: swipeable scroll-snap chips). */
export function ComponentRows({ initial }: { initial: GlobalPressure | null }) {
  const live = useLive((s) => s.global);
  const updates = useLive((s) => s.updates);
  const { degraded } = useDegraded();
  const comps: Component[] = (live ?? initial)?.components ?? [];
  if (!comps.length) return <p className="text-xs text-ink-3">Components unavailable.</p>;
  const dim = degraded ? 'opacity-50 saturate-50' : '';

  return (
    <div className={dim}>
      {/* phone: chips */}
      <ul className="snap-row -mx-3 px-3 md:hidden" aria-label="Components">
        {comps.map((c) => (
          <li key={c.id} className="snap-item panel w-[150px] p-3">
            <div className="flex items-baseline justify-between">
              <span className="text-[12px] text-ink">{c.label}</span>
              <span className="num text-[10px] text-ink-3">w {fmt(c.weight, 2)}</span>
            </div>
            <div className="num mt-1 text-[28px] leading-none" style={{ color: pressureColor(c.score) }}>
              <AnimatedNumber value={c.score} duration={updates ? 600 : 0} />
            </div>
            <Bar value={c.score} className="mt-2" />
            <div className="mt-1.5 flex justify-between text-[11px]">
              <Delta value={c.delta_1h} trend={c.trend} />
              <span className="num text-ink-2">{fmtDelta(c.contribution)} pts</span>
            </div>
          </li>
        ))}
      </ul>
      {/* desktop: table */}
      <table className="tbl hidden w-full table-fixed md:table">
        <thead>
          <tr>
            <th className="w-[44%]">Component · main driver</th>
            <th className="r w-[13%]">Score</th>
            <th className="w-[15%]"></th>
            <th className="r w-[14%]">Δ1h</th>
            <th className="r w-[14%]">Contrib.</th>
          </tr>
        </thead>
        <tbody>
          {comps.map((c) => (
            <tr key={c.id} className="align-top">
              <td className="whitespace-normal">
                <div className="flex items-baseline gap-2">
                  <span className="text-ink">{c.label}</span>
                  <span className="num text-[10.5px] text-ink-3">w {fmt(c.weight, 2)} · conf {Math.round(c.confidence * 100)} %</span>
                </div>
                {c.drivers[0] && (
                  <div className="mt-0.5 text-[11.5px] leading-snug text-ink-2" title={c.drivers.map((d) => `${fmtDelta(d.points)} ${d.label}`).join('\n')}>
                    <span className="num text-ink">{fmtDelta(c.drivers[0].points)}</span> {c.drivers[0].label}
                  </div>
                )}
              </td>
              <td className="num r text-[16px]" style={{ color: pressureColor(c.score) }}>
                <AnimatedNumber value={c.score} duration={updates ? 600 : 0} />
              </td>
              <td className="pt-3">
                <Bar value={c.score} />
              </td>
              <td className="r">
                <Delta value={c.delta_1h} trend={c.trend} />
              </td>
              <td className="num r">{fmtDelta(c.contribution)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}