/* global React, ReactDOM */
// Personal kill log — your own cargo kills across NA / EU / AU.
// Auth required; logged-out visitors see a sign-in CTA.

const { useState, useEffect, useCallback } = React;
const REGIONS = ['NA', 'EU', 'AU'];

function fmtClock(ms) {
  const d = new Date(ms);
  let h = d.getHours();
  const m = d.getMinutes();
  const isPM = h >= 12;
  h = h % 12; if (h === 0) h = 12;
  return `${h}:${String(m).padStart(2, '0')}${isPM ? 'p' : 'a'}`;
}

function fmtDate(ms) {
  const d = new Date(ms);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
}

function fmtAgo(ms, now) {
  const diff = Math.max(0, now - ms);
  const m = Math.floor(diff / 60000);
  if (m < 1) return 'just now';
  if (m < 60) return `${m}m ago`;
  const h = Math.floor(m / 60);
  if (h < 24) return `${h}h ${m % 60}m ago`;
  const d = Math.floor(h / 24);
  return `${d}d ago`;
}

function App() {
  const [me, setMe] = useState(null);
  const [region, setRegion] = useState(() => {
    const r = new URLSearchParams(location.search).get('region');
    return REGIONS.includes(r) ? r : 'NA';
  });
  const [kills, setKills] = useState([]);
  const [now, setNow] = useState(Date.now());
  const [err, setErr] = useState(null);

  useEffect(() => {
    fetch('/api/me', { credentials: 'same-origin' })
      .then(r => (r.ok ? r.json() : Promise.reject()))
      .then(setMe, () => setMe(false));
  }, []);

  const refresh = useCallback(async () => {
    if (!me) return;
    try {
      const res = await fetch(`/api/kills/${region}?limit=300`, { credentials: 'same-origin' });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'http_error');
      setKills(data.kills);
      setErr(null);
    } catch (e) { setErr(e.message); }
  }, [region, me]);

  useEffect(() => { refresh(); }, [refresh]);

  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  useEffect(() => {
    if (!me) return;
    const es = new EventSource(`/api/regions/${region}/stream`);
    const onChange = () => refresh();
    es.addEventListener('change', onChange);
    return () => { es.removeEventListener('change', onChange); es.close(); };
  }, [region, refresh, me]);

  useEffect(() => {
    const url = new URL(location.href);
    url.searchParams.set('region', region);
    history.replaceState(null, '', url);
  }, [region]);

  return (
    <div className="app">
      <header className="hdr">
        <div className="hdr-left">
          <div className="logo">
            <svg viewBox="0 0 24 24" width="28" height="28" aria-hidden="true">
              <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth="1.5" opacity="0.4" />
              <path d="M6 14l4-4 3 3 5-6" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <div className="hdr-titleblock">
            <span className="hdr-prefix">YOUR</span>
            <h1>KILL<span className="hdr-watch">LOG</span></h1>
          </div>
        </div>
        <div className="hdr-center" />
        <div className="hdr-right">
          <div className="hdr-actions">
            <a className="btn btn-ghost" href="/">← Watch</a>
            <div className="region-select" role="radiogroup" aria-label="Region">
              {REGIONS.map(r => (
                <button key={r} role="radio" aria-checked={region === r}
                        className={`region-opt ${region === r ? 'active' : ''}`}
                        onClick={() => setRegion(r)}>{r}</button>
              ))}
            </div>
          </div>
        </div>
      </header>

      {err && <div className="err-banner mono">{err}</div>}

      {me === null && <div className="hist-empty">Loading…</div>}

      {me === false && (
        <div className="kill-intro">
          <p style={{ marginBottom: 12 }}>Sign in with Steam to see <strong>your</strong> cargo kills on the {region} server.</p>
          <a className="btn btn-steam" href="/auth/steam">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
              <path d="M12 0C5.4 0 0 5.4 0 12c0 5.4 3.5 9.9 8.4 11.4l3-4.3c-.6.1-1.2.2-1.8.2-1 0-2-.3-2.9-.7L9 16c.4 1 1.4 1.6 2.4 1.6 1.5 0 2.7-1.2 2.7-2.7 0-.5-.1-1-.4-1.4l5-3.4c.2.4.3.9.3 1.4 0 1.6-1.3 2.9-2.9 2.9-.6 0-1.1-.2-1.6-.5l-3 4.2c.4.1.7.2 1.1.2 3.7 0 6.6-3 6.6-6.6 0-.9-.2-1.8-.5-2.6L24 6.7C23.4 2.9 18.1 0 12 0z"/>
            </svg>
            Sign in with Steam
          </a>
        </div>
      )}

      {me && (
        <>
          <div className="kill-intro mono">
            Every cargo kill <strong>you</strong> have logged on the <strong>{region}</strong> server.
            Soft-deleted entries stay visible to you as a personal record.
          </div>
          <div className="killlog">
            <div className="killlog-head mono">
              <span>When</span>
              <span>World</span>
              <span>Status</span>
            </div>
            {kills.length === 0 && <div className="hist-empty">No kills logged yet on {region}. Click the skull on a world to log one.</div>}
            {kills.map(k => (
              <div key={k.id} className={`killlog-row killlog-row-personal ${k.deletedAt ? 'killlog-deleted' : ''}`}>
                <span className="killlog-when">
                  <span className="mono killlog-date">{fmtDate(k.at)} {fmtClock(k.at)}</span>
                  <span className="killlog-ago muted mono">{fmtAgo(k.at, now)}</span>
                </span>
                <span className="killlog-world">{k.world}</span>
                <span className="killlog-status mono">
                  {k.deletedAt ? <span className="hist-tag">deleted</span> : <span className="dot dot-overdue" />}
                </span>
              </div>
            ))}
          </div>
        </>
      )}

      <footer className="ftr">
        <span className="mono">deepsea-watch · personal kill log · region {region}</span>
      </footer>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);