import { useState, useMemo, useEffect, useCallback } from 'react';
import { DebateSetup } from './components/DebateSetup.jsx';
import { SpeakingOrder } from './components/SpeakingOrder.jsx';
import { Scoring } from './components/Scoring.jsx';
import { Scoreboard } from './components/Scoreboard.jsx';
import { useCollection, useBroadcast, usePresence } from '@deplixo/sdk';

function App() {
  const [activeTab, setActiveTab] = useState('setup');
  const [judgeInput, setJudgeInput] = useState('');
  const [scoreSyncTick, setScoreSyncTick] = useState(0);

  const { items: judgeSessions, add: addJudgeSession, update: updateJudgeSession } = useCollection('judge-sessions', { personal: true });

  const handleScoreUpdate = useCallback(() => {
    setScoreSyncTick((prev) => prev + 1);
  }, []);

  const { send: broadcastScoreUpdate } = useBroadcast('score-update', handleScoreUpdate);

  const syncScoreboards = useCallback((payload = {}) => {
    broadcastScoreUpdate({
      type: 'score-changed',
      updatedAt: Date.now(),
      ...payload,
    });
    setScoreSyncTick((prev) => prev + 1);
  }, [broadcastScoreUpdate]);

  useEffect(() => {
    if (judgeSessions?.length) {
      const latest = judgeSessions[judgeSessions.length - 1];
      if (latest?.judgeId) {
        setJudgeInput(latest.judgeId);
      }
    }
  }, [judgeSessions]);

  const judgeIdentity = useMemo(() => {
    const value = judgeInput.trim();
    return value || 'Anonymous Judge';
  }, [judgeInput]);

  const { users: audienceUsers, update: updateAudiencePresence } = usePresence({
    role: 'audience',
    name: judgeIdentity,
    activeTab,
  });

  useEffect(() => {
    updateAudiencePresence({
      role: 'audience',
      name: judgeIdentity,
      activeTab,
      updatedAt: Date.now(),
    });
  }, [activeTab, judgeIdentity, updateAudiencePresence]);

  const audienceCount = audienceUsers?.length || 0;

  const saveJudgeIdentity = () => {
    const trimmed = judgeInput.trim();
    if (!trimmed) return;

    const existing = judgeSessions?.[0];
    if (existing?.id) {
      updateJudgeSession(existing.id, { judgeId: trimmed, updatedAt: Date.now() });
    } else {
      addJudgeSession({ judgeId: trimmed, createdAt: Date.now(), updatedAt: Date.now() });
    }
  };

  const tabs = [
    { id: 'setup', label: '⚙️ Setup', icon: '⚙️' },
    { id: 'speaking', label: '🎤 Speaking', icon: '🎤' },
    { id: 'scoring', label: '📝 Scoring', icon: '📝' },
    { id: 'scoreboard', label: '🏆 Scoreboard', icon: '🏆' },
  ];

  return (
    <div className="app-container">
      <header className="app-header">
        <h1 className="app-title">Debate Arena</h1>
        <p className="app-subtitle">Structured Debate Tool</p>
      </header>

      <section className="judge-identity-bar card">
        <div className="judge-identity-copy">
          <h2 className="section-title">Judge Identity</h2>
          <p className="timer-info">Enter a judge name or ID to persist it for this session and attribute score changes correctly.</p>
        </div>
        <div className="input-row judge-identity-row">
          <input
            className="input-field"
            value={judgeInput}
            onChange={(e) => setJudgeInput(e.target.value)}
            onBlur={saveJudgeIdentity}
            onKeyDown={(e) => {
              if (e.key === 'Enter') saveJudgeIdentity();
            }}
            placeholder="Judge name or ID"
          />
          <button className="btn btn-primary" onClick={saveJudgeIdentity}>
            Save Judge
          </button>
        </div>
        <div className="judge-identity-status">
          Active judge: <strong>{judgeIdentity}</strong>
        </div>
      </section>

      <section className="audience-presence-bar card">
        <div className="audience-presence-copy">
          <h2 className="section-title">Live Audience</h2>
          <p className="timer-info">Connected viewers are tracked in real time as they join or leave the session.</p>
        </div>
        <div className="audience-count-pill" aria-live="polite">
          <span className="audience-count-number">{audienceCount}</span>
          <span className="audience-count-label">viewers connected</span>
        </div>
      </section>

      <nav className="tab-nav">
        {tabs.map(tab => (
          <button
            key={tab.id}
            className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.id)}
          >
            <span className="tab-icon">{tab.icon}</span>
            <span className="tab-label">{tab.label.split(' ').slice(1).join(' ')}</span>
          </button>
        ))}
      </nav>
      <main className="main-content">
        {activeTab === 'setup' && <DebateSetup />}
        {activeTab === 'speaking' && <SpeakingOrder />}
        {activeTab === 'scoring' && <Scoring judgeIdentity={judgeIdentity} onScoreChange={syncScoreboards} />}
        {activeTab === 'scoreboard' && <Scoreboard judgeIdentity={judgeIdentity} refreshToken={scoreSyncTick} />}
      </main>
    </div>
  );
}

export default App;

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