/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * TalkList — Browse and view all conference talks [components/TalkList.jsx]
 * TalkDetail — View talk details and submit ratings [components/TalkDetail.jsx]
 * AddTalk — Form to add new talks (admin) [components/AddTalk.jsx]
 * Leaderboard — Aggregated ratings overview [components/Leaderboard.jsx]
 * @end-component-map */

import { useState, useEffect, useCallback, useMemo } from 'react';
import { useCollection, usePresence } from '@deplixo/sdk';
import { TalkList } from './components/TalkList.jsx';
import { TalkDetail } from './components/TalkDetail.jsx';
import { AddTalk } from './components/AddTalk.jsx';
import { Leaderboard } from './components/Leaderboard.jsx';

function App() {
  const [activeTab, setActiveTab] = useState('talks');
  const [selectedTalkId, setSelectedTalkId] = useState(null);
  const [identityName, setIdentityName] = useState('');
  const [identityEmail, setIdentityEmail] = useState('');
  const [identityLoaded, setIdentityLoaded] = useState(false);

  const { items: identityItems, add: addIdentity, update: updateIdentity } = useCollection('rater-identities', { personal: true });

  useEffect(() => {
    if (!identityItems || identityItems.length === 0) {
      if (!identityLoaded) return;
      return;
    }

    const primary = identityItems[0];
    setIdentityName(primary?.name || '');
    setIdentityEmail(primary?.email || '');
  }, [identityItems, identityLoaded]);

  useEffect(() => {
    if (!identityLoaded) {
      setIdentityLoaded(true);
      return;
    }

    const existing = identityItems && identityItems.length > 0 ? identityItems[0] : null;
    const nextIdentity = {
      name: identityName.trim(),
      email: identityEmail.trim().toLowerCase(),
      updatedAt: new Date().toISOString(),
    };

    if (existing?.id) {
      updateIdentity(existing.id, nextIdentity);
    } else if (nextIdentity.name || nextIdentity.email) {
      addIdentity({
        ...nextIdentity,
        createdAt: new Date().toISOString(),
      });
    }
  }, [identityName, identityEmail, identityLoaded, identityItems, addIdentity, updateIdentity]);

  const presenceData = useMemo(() => ({
    name: identityName.trim() || 'Anonymous attendee',
    email: identityEmail.trim().toLowerCase() || '',
    activeTab,
    selectedTalkId,
    lastSeenAt: Date.now(),
  }), [identityName, identityEmail, activeTab, selectedTalkId]);

  const handlePresenceUpdate = useCallback(() => {
    // Presence is managed by the SDK; this callback keeps the hook mounted and
    // allows periodic heartbeats by updating the payload via React state.
  }, []);

  const { users: presentUsers, update: updatePresence } = usePresence(presenceData);

  useEffect(() => {
    updatePresence(presenceData);
  }, [presenceData, updatePresence]);

  useEffect(() => {
    const heartbeat = setInterval(() => {
      updatePresence({
        ...presenceData,
        lastSeenAt: Date.now(),
        heartbeatAt: new Date().toISOString(),
      });
      handlePresenceUpdate();
    }, 15000);

    return () => clearInterval(heartbeat);
  }, [presenceData, updatePresence, handlePresenceUpdate]);

  const tabs = [
    { id: 'talks', label: '📋 Talks', icon: '📋' },
    { id: 'leaderboard', label: '🏆 Rankings', icon: '🏆' },
    { id: 'add', label: '➕ Add Talk', icon: '➕' },
  ];

  const handleSelectTalk = (talkId) => {
    setSelectedTalkId(talkId);
    setActiveTab('detail');
  };

  const handleBack = () => {
    setSelectedTalkId(null);
    setActiveTab('talks');
  };

  const handleTalkAdded = () => {
    setActiveTab('talks');
  };

  const currentRater = {
    name: identityName,
    email: identityEmail,
  };

  const hasIdentity = Boolean(identityName.trim() || identityEmail.trim());
  const attendeeCount = presentUsers?.length || 0;
  const attendeeNames = (presentUsers || [])
    .map((user) => user?.name || user?.email || 'Anonymous attendee')
    .filter(Boolean)
    .slice(0, 5);

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-content">
          <div className="header-topline">
            <div>
              <h1 className="app-title">🎤 TalkRate</h1>
              <p className="app-subtitle">Conference Talk Ratings</p>
            </div>
            <div className="presence-badge" aria-live="polite">
              <span className="presence-dot" />
              <span>{attendeeCount} attending</span>
            </div>
          </div>
          <div className="presence-panel">
            <div className="presence-panel-label">Live attendees</div>
            <div className="presence-attendees">
              {attendeeNames.length > 0 ? attendeeNames.map((name) => (
                <span key={name} className="presence-chip">{name}</span>
              )) : (
                <span className="presence-empty">No active attendees yet</span>
              )}
            </div>
          </div>
        </div>
      </header>

      <section className="rater-panel">
        <div className="rater-panel-header">
          <div>
            <h2 className="rater-panel-title">Your rater identity</h2>
            <p className="rater-panel-hint">Use a name or email so each person can rate a talk only once.</p>
          </div>
          {hasIdentity ? (
            <span className="rater-status active">Active</span>
          ) : (
            <span className="rater-status missing">Not set</span>
          )}
        </div>
        <div className="rater-form">
          <label className="rater-field">
            <span>Name</span>
            <input
              className="rater-input"
              type="text"
              value={identityName}
              onChange={(e) => setIdentityName(e.target.value)}
              placeholder="Jane Doe"
            />
          </label>
          <label className="rater-field">
            <span>Email</span>
            <input
              className="rater-input"
              type="email"
              value={identityEmail}
              onChange={(e) => setIdentityEmail(e.target.value)}
              placeholder="jane@company.com"
            />
          </label>
        </div>
      </section>

      {activeTab !== 'detail' && (
        <nav className="tab-bar">
          {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="app-main">
        {activeTab === 'talks' && (
          <TalkList onSelectTalk={handleSelectTalk} currentRater={currentRater} />
        )}
        {activeTab === 'detail' && (
          <TalkDetail
            talkId={selectedTalkId}
            onBack={handleBack}
            currentRater={currentRater}
          />
        )}
        {activeTab === 'leaderboard' && (
          <Leaderboard onSelectTalk={handleSelectTalk} currentRater={currentRater} />
        )}
        {activeTab === 'add' && <AddTalk onTalkAdded={handleTalkAdded} />}
      </main>
    </div>
  );
}

export default App;

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