'use client';

import { useEffect, useState } from 'react';

/**
 * PlayerStreaks (Session 60, night2/C) — a player's ACTIVE streaks + form
 * heat on the dossier page. FREE layer (the picture), rendered through the
 * lens (the interpreted read), beside the paid intelligence blocks.
 * Self-hides when the player has no active streaks.
 */

interface StreakRow {
  type: string;
  currentStreak: number;
  description: string;
  lens?: { read?: string | null; difficulty?: string | null };
}

export default function PlayerStreaks({ player, sport }: { player: string; sport: string }) {
  const [rows, setRows] = useState<StreakRow[] | null>(null);

  useEffect(() => {
    let active = true;
    fetch(`/api/streaks/${encodeURIComponent(sport)}?player=${encodeURIComponent(player)}`)
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => { if (active && data) setRows(Array.isArray(data.streaks) ? data.streaks : []); })
      .catch(() => { /* self-hide */ });
    return () => { active = false; };
  }, [player, sport]);

  if (!rows || rows.length === 0) return null;

  return (
    <div style={{ background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 10, padding: 16, marginBottom: 14 }}>
      <div className="mono" style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: '#ff8b7a', marginBottom: 10 }}>
        🔥 ACTIVE STREAKS
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {rows.slice(0, 5).map((s) => (
          <div key={s.type} style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
            <span className="mono" style={{ flexShrink: 0, fontSize: 12, fontWeight: 800, color: '#ffb0a4' }}>{s.currentStreak}G</span>
            <span className="mono" style={{ fontSize: 12.5, color: 'var(--text-0)' }}>{s.lens?.read || s.description}</span>
          </div>
        ))}
      </div>
    </div>
  );
}
