'use client';

import Link from 'next/link';
import { useEffect, useState } from 'react';
import { Bar } from '@/components/ui/primitives';
import { fmt, fmtDelta, fmtInt } from '@/lib/format';
import { COMPONENT_LABEL, pressureColor } from '@/lib/pressure';
import { Time } from '@/lib/time';
import type { Explain, GlobalPressure } from '@/lib/types';

function scopeHref(scopeType: string, scopeId: string | null): string | null {
  if (!scopeId) return null;
  if (scopeType === 'region') return `/internet/${scopeId}`;
  if (scopeType === 'country') return `/country/${scopeId.toLowerCase()}`;
  if (scopeType === 'asn') return `/asn/${scopeId}`;
  if (scopeType === 'service') return `/service/${scopeId}`;
  if (scopeType === 'bgp') return '/bgp';
  return null;
}

/** "Why is Global Pressure 42.7?" — explain rows, then components → signals from /api/v1/explain. */
export function ExplainPanel({ global, onClose }: { global: GlobalPressure; onClose: () => void }) {
  const [deep, setDeep] = useState<Explain | null>(null);
  const [err, setErr] = useState<string | null>(null);
  const [openComp, setOpenComp] = useState<string | null>(null);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    fetch('/api/v1/explain')
      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(String(r.status)))))
      .then((d: Explain) => setDeep(d))
      .catch(() => setErr('Deep explanation unavailable'));
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [onClose]);

  return (
    <div className="fixed inset-0 z-[90] flex justify-end bg-bg/70" onClick={onClose} role="presentation">
      <aside role="dialog" aria-modal="true" aria-labelledby="explain-title" className="flex h-full w-full max-w-[640px] flex-col border-l border-line bg-panel" onClick={(e) => e.stopPropagation()}>
        <header className="flex items-start justify-between gap-4 border-b border-line px-5 py-4">
          <div>
            <p className="label">Explain</p>
            <h2 id="explain-title" className="mt-1 text-[17px] font-medium">
              Why is Global Pressure <span className="num" style={{ color: pressureColor(global.level) }}>{fmt(global.pressure)}</span>?
            </h2>
            <p className="mt-1 text-[11.5px] text-ink-2">
              Engine cycle <Time ts={global.ts} style="time" className="num" /> · confidence {Math.round(global.confidence * 100)} %
            </p>
          </div>
          <button type="button" onClick={onClose} className="rounded-[3px] border border-line px-2 py-1 text-xs text-ink-2 hover:text-ink" aria-label="Close">
            esc
          </button>
        </header>

        <div className="flex-1 overflow-y-auto px-5 py-4">
          <p className="label mb-2">Contributions</p>
          <ul className="divide-y divide-line">
            {global.explain.map((row, i) => {
              const href = scopeHref(row.scope_type, row.scope_id);
              return (
                <li key={i} className="flex items-baseline gap-3 py-2 text-[13px]">
                  <span className="num w-14 shrink-0 text-right" style={{ color: row.points >= 0 ? pressureColor(Math.min(100, 30 + row.points * 3)) : 'var(--p-calm)' }}>
                    {fmtDelta(row.points)}
                  </span>
                  <span className="flex-1 text-ink">{row.text.replace(/^[+−-]\s?[\d.]+\s?(points?)?\s?(from|because)?\s?/i, (m) => (m.trim().endsWith('because') ? 'Because ' : ''))}</span>
                  <span className="label shrink-0">{COMPONENT_LABEL[row.component] ?? row.component}</span>
                  {href && (
                    <Link href={href} className="shrink-0 text-xs text-accent hover:underline" onClick={onClose}>
                      open →
                    </Link>
                  )}
                </li>
              );
            })}
          </ul>

          <p className="label mb-2 mt-6">Components → signals</p>
          {err && <p className="text-xs text-warn">{err}</p>}
          {!deep && !err && <p className="text-xs text-ink-3">Loading signal breakdown…</p>}
          {deep && (
            <ul className="divide-y divide-line">
              {deep.components.map((c) => {
                const isOpen = openComp === c.id;
                return (
                  <li key={c.id}>
                    <button type="button" onClick={() => setOpenComp(isOpen ? null : c.id)} className="grid w-full grid-cols-[1fr_auto_auto_auto] items-center gap-3 py-2 text-left text-[13px]" aria-expanded={isOpen}>
                      <span className="text-ink">
                        <span className="mr-2 inline-block w-3 text-ink-3">{isOpen ? '−' : '+'}</span>
                        {COMPONENT_LABEL[c.id] ?? c.id}
                      </span>
                      <span className="num text-right" style={{ color: pressureColor(c.score) }}>
                        {fmt(c.score)}
                      </span>
                      <span className="num text-right text-ink-3">× {fmt(c.weight, 2)}</span>
                      <span className="num w-12 text-right text-ink">{fmtDelta(c.contribution)}</span>
                    </button>
                    {isOpen && (
                      <table className="tbl mb-3">
                        <thead>
                          <tr>
                            <th>Signal</th>
                            <th>Scope</th>
                            <th className="r">Current</th>
                            <th className="r">Median</th>
                            <th className="r">MAD</th>
                            <th className="r">z</th>
                            <th className="r">n</th>
                            <th className="r">Stress</th>
                            <th className="r">Pts</th>
                          </tr>
                        </thead>
                        <tbody>
                          {c.signals.map((s) => (
                            <tr key={`${s.signal_id}-${s.scope_id}`}>
                              <td className="max-w-[200px] truncate text-ink" title={s.label}>
                                {s.label}
                              </td>
                              <td className="text-ink-2">{s.scope_id ? `${s.scope_type}:${s.scope_id}` : s.scope_type}</td>
                              <td className="num r">{fmt(s.current, s.current < 1 ? 3 : 1)}</td>
                              <td className="num r text-ink-2">{fmt(s.baseline_median, s.baseline_median < 1 ? 3 : 1)}</td>
                              <td className="num r text-ink-2">{fmt(s.mad, s.mad < 1 ? 3 : 1)}</td>
                              <td className="num r" style={{ color: Math.abs(s.robust_z) >= 3 ? 'var(--p-high)' : 'var(--ink)' }}>
                                {fmt(s.robust_z)}
                              </td>
                              <td className="num r text-ink-2">{fmtInt(s.samples)}</td>
                              <td className="r">
                                <Bar value={s.stress * 100} className="inline-block w-10 align-middle" />
                              </td>
                              <td className="num r">{fmtDelta(s.contribution)}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    )}
                  </li>
                );
              })}
            </ul>
          )}
          {deep?.notes?.length ? (
            <ul className="mt-5 space-y-1 text-[11.5px] text-ink-3">
              {deep.notes.map((n, i) => (
                <li key={i}>· {n}</li>
              ))}
            </ul>
          ) : null}
          {deep?.excluded_probes?.length ? <p className="mt-3 text-[11.5px] text-warn">Excluded probes (self-exclusion): {deep.excluded_probes.join(', ')}</p> : null}
        </div>
        <footer className="border-t border-line px-5 py-3 text-[11.5px] text-ink-3">
          Composite observability index, not scientific truth. Weights and thresholds in{' '}
          <Link href="/methodology" className="text-accent hover:underline" onClick={onClose}>
            Methodology
          </Link>
          .
        </footer>
      </aside>
    </div>
  );
}