// DEPLOY_CONFIG: {"triggers": [{"name": "send_league_summary_on_game_end", "on": "game.end", "actions": [{"type": "email", "to": "league-admins@deplixo.app", "subject": "League Summary: Game Ended", "body": "A game has ended. Please use the stored game history and standings to compile and review the latest league summary."}]}]}
import { useEffect, useMemo, useRef, useState } from 'react';
import { useBroadcast, useCollection, useIdentity, usePresence, useReactions, playSound, share } from '@deplixo/sdk';
import { AdminPanel } from './components/AdminPanel.jsx';
import { Scoreboard } from './components/Scoreboard.jsx';
import { PlayByPlay } from './components/PlayByPlay.jsx';

// PROGRESS:sc_001:complete:Setting up the live scoreboard shell
function App() {
  const { user, loading } = useIdentity();
  const [role, setRole] = useState('viewer');
  const [activeTab, setActiveTab] = useState('scoreboard');
  const [shareStatus, setShareStatus] = useState('');
  const lastScoringEventRef = useRef(null);
  const lastProcessedGameRef = useRef(null);

  const { items: historyItems, add: addGameHistory, loading: historyLoading } = useCollection('game_history');
  const { items: standingsItems, add: addStanding, update: updateStanding, loading: standingsLoading } = useCollection('season_standings');

  const presenceUserData = {
    id: user?.id || user?.name || 'anonymous',
    name: user?.name || 'Guest',
    role,
  };
  const { users } = usePresence(presenceUserData);

  const viewerCount = (users || []).filter((presenceUser) => presenceUser?.role !== 'admin').length;
  const displayRole = role === 'admin' ? 'Admin' : 'Viewer';

  const getScoreboardShareUrl = () => {
    if (typeof window === 'undefined') return '';
    const url = new URL(window.location.href);
    url.searchParams.set('tab', 'scoreboard');
    url.hash = 'scoreboard';
    return url.toString();
  };

  const handleShareScoreboard = async () => {
    const shareUrl = getScoreboardShareUrl();
    if (!shareUrl) return;

    const shareData = {
      title: 'League Live Scoreboard',
      text: 'Check out the current League Live scoreboard.',
      url: shareUrl,
    };

    try {
      if (navigator?.share) {
        await navigator.share(shareData);
        setShareStatus('Shared');
        return;
      }

      if (navigator?.clipboard?.writeText) {
        await navigator.clipboard.writeText(shareUrl);
        setShareStatus('Link copied');
        return;
      }

      setShareStatus('Sharing unavailable');
    } catch (error) {
      try {
        if (navigator?.clipboard?.writeText) {
          await navigator.clipboard.writeText(shareUrl);
          setShareStatus('Link copied');
          return;
        }
      } catch (clipboardError) {
        setShareStatus('Share failed');
      }
    } finally {
      window.setTimeout(() => setShareStatus(''), 2500);
    }
  };

  const handleScoreEvent = useMemo(() => {
    return async (event = {}) => {
      const eventType = String(event?.type || event?.eventType || event?.kind || '').toLowerCase();
      const pointsValue = Number(event?.points ?? event?.delta ?? event?.scoreChange ?? 0);
      const isRelevantScoreEvent =
        eventType.includes('goal') ||
        eventType.includes('score') ||
        eventType.includes('points') ||
        eventType.includes('point') ||
        pointsValue > 0;

      if (!isRelevantScoreEvent) return;

      const eventKey = event?.id || `${event?.gameId || 'game'}:${event?.teamId || 'team'}:${event?.timestamp || event?.createdAt || Date.now()}`;
      if (lastScoringEventRef.current === eventKey) return;
      lastScoringEventRef.current = eventKey;

      playSound(pointsValue >= 3 ? '@success' : '@ding');

      const gameId = event?.gameId || event?.matchId || 'current-game';
      const seasonId = event?.seasonId || event?.season || 'current-season';
      const teamId = event?.teamId || event?.team || 'team';
      const opponentId = event?.opponentId || event?.opponent || null;
      const teamName = event?.teamName || event?.team || 'Team';
      const opponentName = event?.opponentName || event?.opponent || 'Opponent';
      const won = Boolean(event?.winner || event?.result === 'win' || event?.outcome === 'win');
      const lost = Boolean(event?.loser || event?.result === 'loss' || event?.outcome === 'loss');
      const tied = Boolean(event?.result === 'tie' || event?.outcome === 'tie' || event?.draw);
      const result = won ? 'win' : lost ? 'loss' : tied ? 'tie' : 'scored';
      const gameRecordId = event?.historyId || event?.recordId || eventKey;

      if (lastProcessedGameRef.current !== gameRecordId) {
        lastProcessedGameRef.current = gameRecordId;

        const gameHistoryRecord = {
          id: gameRecordId,
          gameId,
          seasonId,
          teamId,
          teamName,
          opponentId,
          opponentName,
          points: pointsValue,
          result,
          eventType,
          timestamp: event?.timestamp || event?.createdAt || new Date().toISOString(),
          source: event?.source || 'broadcast',
        };

        await addGameHistory(gameHistoryRecord);

        const existingStanding = (standingsItems || []).find(
          (item) => item?.seasonId === seasonId && item?.teamId === teamId
        );
        const nextPlayed = Number(existingStanding?.played || 0) + 1;
        const nextWins = Number(existingStanding?.wins || 0) + (won ? 1 : 0);
        const nextLosses = Number(existingStanding?.losses || 0) + (lost ? 1 : 0);
        const nextTies = Number(existingStanding?.ties || 0) + (tied ? 1 : 0);
        const nextPointsFor = Number(existingStanding?.pointsFor || 0) + pointsValue;
        const nextPointsAgainst = Number(existingStanding?.pointsAgainst || 0) + Number(event?.opponentPoints || 0);
        const nextDiff = nextPointsFor - nextPointsAgainst;
        const nextStandPoints = nextWins * 3 + nextTies;

        const standingPayload = {
          seasonId,
          teamId,
          teamName,
          played: nextPlayed,
          wins: nextWins,
          losses: nextLosses,
          ties: nextTies,
          pointsFor: nextPointsFor,
          pointsAgainst: nextPointsAgainst,
          pointDiff: nextDiff,
          standingsPoints: nextStandPoints,
          lastGameAt: gameHistoryRecord.timestamp,
        };

        if (existingStanding?.id) {
          await updateStanding(existingStanding.id, standingPayload);
        } else {
          await addStanding(standingPayload);
        }
      }
    };
  }, [addGameHistory, addStanding, standingsItems, updateStanding]);

  useBroadcast('score:update', handleScoreEvent);
  useBroadcast('game:score:update', handleScoreEvent);
  useBroadcast('goal:scored', handleScoreEvent);
  useBroadcast('play:created', async (event = {}) => {
    const eventType = String(event?.type || event?.eventType || event?.kind || '').toLowerCase();
    const pointsValue = Number(event?.points ?? event?.delta ?? event?.scoreChange ?? 0);
    const isScoringPlay =
      eventType.includes('goal') ||
      eventType.includes('score') ||
      eventType.includes('points') ||
      pointsValue > 0;

    if (!isScoringPlay) return;

    const eventKey = event?.id || `${event?.gameId || 'game'}:${event?.teamId || 'team'}:${event?.timestamp || event?.createdAt || Date.now()}`;
    if (lastScoringEventRef.current === eventKey) return;
    lastScoringEventRef.current = eventKey;

    playSound(pointsValue >= 3 ? '@success' : '@ding');

    const gameId = event?.gameId || event?.matchId || 'current-game';
    const seasonId = event?.seasonId || event?.season || 'current-season';
    const teamId = event?.teamId || event?.team || 'team';
    const opponentId = event?.opponentId || event?.opponent || null;
    const teamName = event?.teamName || event?.team || 'Team';
    const opponentName = event?.opponentName || event?.opponent || 'Opponent';
    const won = Boolean(event?.winner || event?.result === 'win' || event?.outcome === 'win');
    const lost = Boolean(event?.loser || event?.result === 'loss' || event?.outcome === 'loss');
    const tied = Boolean(event?.result === 'tie' || event?.outcome === 'tie' || event?.draw);
    const result = won ? 'win' : lost ? 'loss' : tied ? 'tie' : 'scored';
    const gameRecordId = event?.historyId || event?.recordId || eventKey;

    if (lastProcessedGameRef.current !== gameRecordId) {
      lastProcessedGameRef.current = gameRecordId;

      const gameHistoryRecord = {
        id: gameRecordId,
        gameId,
        seasonId,
        teamId,
        teamName,
        opponentId,
        opponentName,
        points: pointsValue,
        result,
        eventType,
        timestamp: event?.timestamp || event?.createdAt || new Date().toISOString(),
        source: event?.source || 'broadcast',
      };

      await addGameHistory(gameHistoryRecord);

      const existingStanding = (standingsItems || []).find(
        (item) => item?.seasonId === seasonId && item?.teamId === teamId
      );
      const nextPlayed = Number(existingStanding?.played || 0) + 1;
      const nextWins = Number(existingStanding?.wins || 0) + (won ? 1 : 0);
      const nextLosses = Number(existingStanding?.losses || 0) + (lost ? 1 : 0);
      const nextTies = Number(existingStanding?.ties || 0) + (tied ? 1 : 0);
      const nextPointsFor = Number(existingStanding?.pointsFor || 0) + pointsValue;
      const nextPointsAgainst = Number(existingStanding?.pointsAgainst || 0) + Number(event?.opponentPoints || 0);
      const nextDiff = nextPointsFor - nextPointsAgainst;
      const nextStandPoints = nextWins * 3 + nextTies;

      const standingPayload = {
        seasonId,
        teamId,
        teamName,
        played: nextPlayed,
        wins: nextWins,
        losses: nextLosses,
        ties: nextTies,
        pointsFor: nextPointsFor,
        pointsAgainst: nextPointsAgainst,
        pointDiff: nextDiff,
        standingsPoints: nextStandPoints,
        lastGameAt: gameHistoryRecord.timestamp,
      };

      if (existingStanding?.id) {
        await updateStanding(existingStanding.id, standingPayload);
      } else {
        await addStanding(standingPayload);
      }
    }
  });

  if (loading || historyLoading || standingsLoading) {
    return (
      <div className="loading-screen">
        <div className="loading-pulse"></div>
        <p>Loading scoreboard…</p>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-left">
          <span className="logo-icon">🏆</span>
          <h1 className="app-title">League Live</h1>
        </div>
        <div className="header-right">
          <span className={`user-badge role-${role}`}>
            {user?.name || 'Guest'} · {displayRole}
          </span>
          <button
            className={`role-toggle ${role === 'admin' ? 'active' : ''}`}
            onClick={() => setRole(role === 'admin' ? 'viewer' : 'admin')}
          >
            {role === 'admin' ? '📋 Admin' : '👁️ Viewer'}
          </button>
        </div>
      </header>

      {role === 'admin' ? (
        <AdminPanel />
      ) : (
        <>
          <section className="viewer-presence-bar card">
            <div className="presence-identity">
              <span className="identity-badge">{user?.name || 'Guest'}</span>
              <div className="presence-count">
                <span className="presence-dot"></span>
                <span className="presence-number">{viewerCount}</span>
                <span className="presence-text">{viewerCount === 1 ? 'viewer' : 'viewers'} online</span>
              </div>
            </div>
            <div className="presence-actions">
              {shareStatus ? <span className="share-status">{shareStatus}</span> : null}
              <button className="share-scoreboard-btn" onClick={handleShareScoreboard}>
                Share scoreboard
              </button>
            </div>
          </section>
          <nav className="tab-nav">
            {[
              { id: 'scoreboard', label: '🏟️ Scoreboard' },
              { id: 'plays', label: '📝 Play-by-Play' },
              { id: 'history', label: '📚 Game History' },
              { id: 'standings', label: '📊 Standings' },
              { id: 'charts', label: '📈 Charts' },
            ].map((tab) => (
              <button
                key={tab.id}
                className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`}
                onClick={() => setActiveTab(tab.id)}
              >
                {tab.label}
              </button>
            ))}
          </nav>
          <main className="main-content">
            {activeTab === 'scoreboard' && <Scoreboard viewerCount={viewerCount} />}
            {activeTab === 'plays' && <PlayByPlay />}
            {activeTab === 'history' && <GameHistoryList />}
            {activeTab === 'standings' && <SeasonStandings />}
            {activeTab === 'charts' && <SeasonPerformanceCharts />}
          </main>
        </>
      )}
    </div>
  );
}

function ReactionBar({ targetId }) {
  const { counts, userReactions, toggle, loading } = useReactions(targetId);
  const emojis = ['👍', '❤️', '🎉', '🔥', '👀'];

  if (loading) return null;

  return (
    <div className="reaction-bar">
      {emojis.map((emoji) => {
        const count = counts?.[emoji] || 0;
        const isActive = Boolean(userReactions?.includes?.(emoji));

        return (
          <button
            key={emoji}
            className={`reaction-btn ${isActive ? 'active' : ''} ${count > 0 ? 'has-count' : ''}`}
            onClick={() => toggle(emoji)}
            aria-pressed={isActive}
            title={`React with ${emoji}`}
          >
            <span className="reaction-emoji">{emoji}</span>
            <span className="reaction-count">{count > 0 ? count : ''}</span>
          </button>
        );
      })}
    </div>
  );
}

const PLAY_REACTIONS = {
  ReactionBar,
};


function GameHistoryList() {
  const { items, loading } = useCollection('game_history');

  if (loading) {
    return (
      <section className="card data-panel">
        <h2>Game History</h2>
        <p>Loading historical results…</p>
      </section>
    );
  }

  const sortedItems = [...(items || [])].sort((a, b) => new Date(b?.timestamp || 0) - new Date(a?.timestamp || 0));

  return (
    <section className="card data-panel">
      <h2>Game History</h2>
      {sortedItems.length === 0 ? (
        <p>No historical game records yet.</p>
      ) : (
        <div className="data-list">
          {sortedItems.map((entry) => (
            <article key={entry?.id || `${entry?.gameId}-${entry?.timestamp}`} className="data-row">
              <div className="data-row-main">
                <strong>{entry?.teamName || 'Team'}</strong>
                <span className="muted-text">
                  vs {entry?.opponentName || 'Opponent'} · {entry?.result || 'recorded'}
                </span>
              </div>
              <div className="data-row-meta">
                <span>{Number(entry?.points || 0)} pts</span>
                <span>{entry?.timestamp ? new Date(entry.timestamp).toLocaleString() : 'Unknown time'}</span>
              </div>
            </article>
          ))}
        </div>
      )}
    </section>
  );
}


function SeasonStandings() {
  const { items, loading } = useCollection('season_standings');

  if (loading) {
    return (
      <section className="card data-panel">
        <h2>Season Standings</h2>
        <p>Loading standings…</p>
      </section>
    );
  }

  const sortedItems = [...(items || [])].sort((a, b) => {
    const pointsDiff = Number(b?.standingsPoints || 0) - Number(a?.standingsPoints || 0);
    if (pointsDiff !== 0) return pointsDiff;
    return Number(b?.pointDiff || 0) - Number(a?.pointDiff || 0);
  });

  return (
    <section className="card data-panel">
      <h2>Season Standings</h2>
      {sortedItems.length === 0 ? (
        <p>No standings recorded yet.</p>
      ) : (
        <div className="standings-table">
          <div className="standings-header">
            <span>Team</span>
            <span>W</span>
            <span>L</span>
            <span>T</span>
            <span>PF</span>
            <span>PA</span>
            <span>Diff</span>
            <span>Pts</span>
          </div>
          {sortedItems.map((team) => (
            <div key={team?.id || `${team?.seasonId}-${team?.teamId}`} className="standings-row">
              <span className="standings-team">{team?.teamName || 'Team'}</span>
              <span>{Number(team?.wins || 0)}</span>
              <span>{Number(team?.losses || 0)}</span>
              <span>{Number(team?.ties || 0)}</span>
              <span>{Number(team?.pointsFor || 0)}</span>
              <span>{Number(team?.pointsAgainst || 0)}</span>
              <span>{Number(team?.pointDiff || 0)}</span>
              <span className="standings-points">{Number(team?.standingsPoints || 0)}</span>
            </div>
          ))}
        </div>
      )}
    </section>
  );
}


function SeasonPerformanceCharts() {
  const { items: standingsItems, loading: standingsLoading } = useCollection('season_standings');
  const { items: historyItems, loading: historyLoading } = useCollection('game_history');

  if (standingsLoading || historyLoading) {
    return (
      <section className="card data-panel charts-panel">
        <h2>Season Performance</h2>
        <p>Loading charts…</p>
      </section>
    );
  }

  const teamsMap = new Map();

  (standingsItems || []).forEach((team) => {
    const key = team?.teamId || team?.id || team?.teamName;
    if (!key) return;
    teamsMap.set(key, {
      teamId: team?.teamId || key,
      teamName: team?.teamName || 'Team',
      seasonId: team?.seasonId || 'current-season',
      wins: Number(team?.wins || 0),
      losses: Number(team?.losses || 0),
      ties: Number(team?.ties || 0),
      pointsFor: Number(team?.pointsFor || 0),
      played: Number(team?.played || 0),
    });
  });

  (historyItems || []).forEach((entry) => {
    const key = entry?.teamId || entry?.teamName;
    if (!key) return;
    const existing = teamsMap.get(key) || {
      teamId: key,
      teamName: entry?.teamName || 'Team',
      seasonId: entry?.seasonId || 'current-season',
      wins: 0,
      losses: 0,
      ties: 0,
      pointsFor: 0,
      played: 0,
    };

    existing.teamName = existing.teamName || entry?.teamName || 'Team';
    existing.pointsFor += Number(entry?.points || 0);
    existing.played += 1;

    const result = String(entry?.result || '').toLowerCase();
    if (result === 'win') existing.wins += 1;
    else if (result === 'loss') existing.losses += 1;
    else if (result === 'tie' || result === 'draw') existing.ties += 1;

    teamsMap.set(key, existing);
  });

  const chartTeams = Array.from(teamsMap.values()).filter((team) => team?.teamName);
  const sortedByPoints = [...chartTeams].sort((a, b) => {
    const aPpg = a.played > 0 ? a.pointsFor / a.played : 0;
    const bPpg = b.played > 0 ? b.pointsFor / b.played : 0;
    return bPpg - aPpg;
  });

  const sortedByRecord = [...chartTeams].sort((a, b) => {
    const aTotal = a.wins + a.losses + a.ties;
    const bTotal = b.wins + b.losses + b.ties;
    const aWinRate = aTotal > 0 ? (a.wins / aTotal) : 0;
    const bWinRate = bTotal > 0 ? (b.wins / bTotal) : 0;
    return bWinRate - aWinRate;
  });

  const ppgLabels = sortedByPoints.map((team) => team.teamName);
  const ppgData = sortedByPoints.map((team) => Number(((team.played > 0 ? team.pointsFor / team.played : 0).toFixed(2))));
  const winLabels = sortedByRecord.map((team) => team.teamName);
  const winsData = sortedByRecord.map((team) => Number(team.wins || 0));
  const lossesData = sortedByRecord.map((team) => Number(team.losses || 0));

  return (
    <section className="card data-panel charts-panel">
      <div className="section-header charts-header">
        <h2>Season Performance</h2>
        <span className="charts-subtitle">Points per game and win/loss record</span>
      </div>

      {chartTeams.length === 0 ? (
        <p>No season data available yet.</p>
      ) : (
        <div className="charts-grid">
          <article className="chart-card">
            <h3>Points per Game</h3>
            <SeasonBarChart
              labels={ppgLabels}
              values={ppgData}
              valueSuffix=" pts"
              barClassName="chart-bar-primary"
              emptyLabel="No points data"
            />
          </article>

          <article className="chart-card">
            <h3>Win / Loss Record</h3>
            <SeasonStackedRecordChart
              labels={winLabels}
              wins={winsData}
              losses={lossesData}
              emptyLabel="No record data"
            />
          </article>
        </div>
      )}
    </section>
  );
}


function SeasonBarChart({ labels = [], values = [], valueSuffix = '', barClassName = '', emptyLabel = 'No data available' }) {
  const maxValue = Math.max(0, ...values.map((value) => Number(value || 0)));

  if (!labels.length || !values.length) {
    return <p className="chart-empty">{emptyLabel}</p>;
  }

  return (
    <div className="chart-vertical">
      {labels.map((label, index) => {
        const value = Number(values[index] || 0);
        const height = maxValue > 0 ? Math.max(8, (value / maxValue) * 100) : 8;

        return (
          <div key={`${label}-${index}`} className="chart-bar-group">
            <div className="chart-bar-track">
              <div
                className={`chart-bar-fill ${barClassName}`}
                aria-hidden="true"
                style={{ height: `${height}%` }}
              ></div>
            </div>
            <span className="chart-bar-value">{value.toFixed(2)}{valueSuffix}</span>
            <span className="chart-bar-label">{label}</span>
          </div>
        );
      })}
    </div>
  );
}


function SeasonStackedRecordChart({ labels = [], wins = [], losses = [], emptyLabel = 'No data available' }) {
  const maxTotal = Math.max(0, ...labels.map((_, index) => Number(wins[index] || 0) + Number(losses[index] || 0)));

  if (!labels.length) {
    return <p className="chart-empty">{emptyLabel}</p>;
  }

  return (
    <div className="chart-record-list">
      {labels.map((label, index) => {
        const winValue = Number(wins[index] || 0);
        const lossValue = Number(losses[index] || 0);
        const total = winValue + lossValue;
        const winWidth = maxTotal > 0 ? (winValue / maxTotal) * 100 : 0;
        const lossWidth = maxTotal > 0 ? (lossValue / maxTotal) * 100 : 0;

        return (
          <div key={`${label}-${index}`} className="chart-record-row">
            <div className="chart-record-topline">
              <span className="chart-record-team">{label}</span>
              <span className="chart-record-meta">{winValue}-{lossValue}{total > 0 ? ` (${total})` : ''}</span>
            </div>
            <div className="chart-record-bar">
              <div className="chart-record-win" style={{ width: `${winWidth}%` }}></div>
              <div className="chart-record-loss" style={{ width: `${lossWidth}%` }}></div>
            </div>
            <div className="chart-record-legend">
              <span className="chart-legend-win">Wins {winValue}</span>
              <span className="chart-legend-loss">Losses {lossValue}</span>
            </div>
          </div>
        );
      })}
    </div>
  );
}

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