import { useIdentity, usePresence, useReactions, useCollection } from '@deplixo/sdk';
/* @component-map
 * App — Main container, role switching, tab navigation [app.jsx]
 * QueueDisplay — Full queue list with reorder/skip/remove [components/QueueDisplay.jsx]
 * CurrentSinger — Current singer spotlight with timer [components/CurrentSinger.jsx]
 * SignUpForm — Singer sign-up form [components/SignUpForm.jsx]
 * HostControls — Host controls for managing the queue [components/HostControls.jsx]
 * AudiencePresenceIndicator — Reusable audience presence and returning-singer badge for the header and tabs.
 * @end-component-map */

import { useEffect, useMemo, useRef, useState } from 'react';
import { CurrentSinger } from './components/CurrentSinger.jsx';
import { SignUpForm } from './components/SignUpForm.jsx';
import { QueueDisplay } from './components/QueueDisplay.jsx';
import { HostControls } from './components/HostControls.jsx';
import { playSound } from '@deplixo/sdk';

function normalizeYouTubeTrackInput(value = '') {
  const raw = String(value || '').trim();
  if (!raw) return '';

  const idMatch = raw.match(/^[a-zA-Z0-9_-]{11}$/);
  if (idMatch) return raw;

  try {
    const url = new URL(raw);
    if (url.hostname.includes('youtu.be')) {
      const id = url.pathname.replace('/', '').trim();
      return /^[a-zA-Z0-9_-]{11}$/.test(id) ? id : raw;
    }
    if (url.hostname.includes('youtube.com')) {
      const v = url.searchParams.get('v');
      if (v && /^[a-zA-Z0-9_-]{11}$/.test(v)) return v;
      const embedMatch = url.pathname.match(/\/embed\/([a-zA-Z0-9_-]{11})/);
      if (embedMatch) return embedMatch[1];
    }
  } catch {
    return raw;
  }

  return raw;
}

function getYouTubeEmbedUrl(value = '') {
  const normalized = normalizeYouTubeTrackInput(value);
  if (!normalized) return '';
  if (/^https?:\/\//i.test(normalized) && !/youtu(be|\.be)/i.test(normalized)) return '';
  if (/^[a-zA-Z0-9_-]{11}$/.test(normalized)) {
    return `https://www.youtube.com/embed/${normalized}`;
  }
  if (/youtu(be|\.be)/i.test(normalized)) {
    const id = normalizeYouTubeTrackInput(normalized);
    return /^[a-zA-Z0-9_-]{11}$/.test(id) ? `https://www.youtube.com/embed/${id}` : '';
  }
  return '';
}

function getYouTubeDisplayValue(value = '') {
  const normalized = normalizeYouTubeTrackInput(value);
  return normalized;
}

function YouTubeTrackEmbed({ trackValue, label = 'Backing track' }) {
  const embedUrl = useMemo(() => getYouTubeEmbedUrl(trackValue), [trackValue]);
  const displayValue = useMemo(() => getYouTubeDisplayValue(trackValue), [trackValue]);

  if (!displayValue) return null;

  return (
    <div className="youtube-track-card">
      <div className="youtube-track-header">
        <span className="youtube-track-label">{label}</span>
        <span className="youtube-track-value">{displayValue}</span>
      </div>
      {embedUrl ? (
        <div className="youtube-embed-wrap">
          <iframe
            className="youtube-embed"
            src={`${embedUrl}?rel=0&modestbranding=1`}
            title={label}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowFullScreen
          />
        </div>
      ) : (
        <div className="youtube-track-invalid">Paste a YouTube URL or 11-character video ID to embed the player.</div>
      )}
    </div>
  );
}

function ReactionSummary({ targetId, singerName, onApplause }) {
  const { counts, userReactions, loading } = useReactions(targetId);
  const emojis = ['👍', '❤️', '🎉', '🔥', '👀'];
  const applauseEmoji = '🎉';
  const lastApplauseCountRef = useRef(0);
  const applauseTriggeredRef = useRef(false);

  const totalVotes = useMemo(
    () => emojis.reduce((sum, emoji) => sum + (counts?.[emoji] || 0), 0),
    [counts]
  );

  const topReaction = useMemo(() => {
    return emojis
      .map(emoji => ({ emoji, count: counts?.[emoji] || 0 }))
      .sort((a, b) => b.count - a.count)[0];
  }, [counts]);

  useEffect(() => {
    const applauseCount = counts?.[applauseEmoji] || 0;
    const previousCount = lastApplauseCountRef.current;

    if (applauseCount > previousCount) {
      if (typeof onApplause === 'function') onApplause(applauseCount - previousCount, applauseCount);
      if (applauseTriggeredRef.current) {
        playSound('@ding');
      }
    }

    lastApplauseCountRef.current = applauseCount;
    applauseTriggeredRef.current = true;
  }, [counts, onApplause]);

  useEffect(() => {
    if (!counts) return;
    const applauseCount = counts?.[applauseEmoji] || 0;
    if (applauseCount >= 5 && applauseTriggeredRef.current) {
      playSound('@success');
    }
  }, [counts]);

  if (loading) return null;

  return (
    <div className="reaction-summary">
      <div className="reaction-summary-header">
        <span className="reaction-summary-label">Live audience votes</span>
        <span className="reaction-summary-total">{totalVotes} reactions</span>
      </div>

      <div className="reaction-summary-badges">
        {emojis.map(emoji => (
          <div key={emoji} className={`reaction-summary-chip ${userReactions?.[emoji] ? 'selected' : ''}`}>
            <span className="reaction-summary-emoji">{emoji}</span>
            <span className="reaction-summary-count">{counts?.[emoji] || 0}</span>
          </div>
        ))}
      </div>

      <div className="reaction-summary-footer">
        <span className="reaction-summary-top">
          {topReaction?.count ? `Top vote: ${topReaction.emoji} ${topReaction.count}` : 'Be the first to react!'}
        </span>
        {singerName ? <span className="reaction-summary-singer">For {singerName}</span> : null}
      </div>
    </div>
  );
}

function App() {
  const [activeTab, setActiveTab] = useState('now-playing');
  const { user: identityUser, loading: identityLoading } = useIdentity();
  const [audioUnlocked, setAudioUnlocked] = useState(false);
  const [roomLink, setRoomLink] = useState('');
  const [shareStatus, setShareStatus] = useState('');
  const lastSingerKeyRef = useRef('');
  const applauseHandledRef = useRef(false);
  const { users: audienceUsers, update: updatePresence } = usePresence(
    identityUser
      ? {
          name: identityUser.name,
          avatar: identityUser.avatar,
          status: 'audience',
        }
      : {
          name: 'Guest',
          avatar: '🎤',
          status: 'audience',
        }
  );
  const { items: singerHistoryItems, add: addSingerHistory, update: updateSingerHistory } = useCollection('singer-history', { personal: true });
  const { items: backingTrackItems, add: addBackingTrack, update: updateBackingTrack } = useCollection('backing-tracks', { personal: true });
  const { items: performanceVoteItems, add: addPerformanceVote, update: updatePerformanceVote } = useCollection('performance-votes', { personal: true });

  const tabs = [
    { id: 'now-playing', label: '🎤 Now Playing', icon: '🎤' },
    { id: 'sign-up', label: '✍️ Sign Up', icon: '✍️' },
    { id: 'queue', label: '📋 Queue', icon: '📋' },
    { id: 'leaderboard', label: '🏆 Leaderboard', icon: '🏆' },
    { id: 'host', label: '⚙️ Host', icon: '⚙️' },
  ];

  useEffect(() => {
    if (typeof window === 'undefined') return;
    setRoomLink(window.location.href);
  }, []);

  useEffect(() => {
    if (!identityLoading && identityUser && typeof updatePresence === 'function') {
      updatePresence({
        name: identityUser.name,
        avatar: identityUser.avatar,
        status: 'audience',
      });
    }
  }, [identityLoading, identityUser, updatePresence]);

  useEffect(() => {
    const unlockAudio = () => setAudioUnlocked(true);
    window.addEventListener('pointerdown', unlockAudio, { once: true });
    window.addEventListener('keydown', unlockAudio, { once: true });
    return () => {
      window.removeEventListener('pointerdown', unlockAudio);
      window.removeEventListener('keydown', unlockAudio);
    };
  }, []);

  const audienceCount = Array.isArray(audienceUsers) ? audienceUsers.length : 0;
  const currentPerformanceId = useMemo(
    () => (identityUser?.name ? `current-performance:${identityUser.name}` : 'current-performance:guest'),
    [identityUser?.name]
  );
  const currentSingerKey = currentPerformanceId;
  const currentSingerHistory = useMemo(() => {
    const singerName = identityUser?.name || '';
    if (!singerName || !Array.isArray(singerHistoryItems)) return { count: 0, item: null };
    const normalized = singerName.trim().toLowerCase();
    const item = singerHistoryItems.find(entry => (entry?.singerName || '').trim().toLowerCase() === normalized) || null;
    return {
      count: item?.performerCount || 0,
      item,
    };
  }, [singerHistoryItems, identityUser?.name]);

  const currentBackingTrack = useMemo(() => {
    if (!Array.isArray(backingTrackItems)) return null;
    return backingTrackItems.find(item => item?.status === 'current') || backingTrackItems[0] || null;
  }, [backingTrackItems]);

  const queuedBackingTracks = useMemo(() => {
    if (!Array.isArray(backingTrackItems)) return [];
    return backingTrackItems.filter(item => item?.id !== currentBackingTrack?.id);
  }, [backingTrackItems, currentBackingTrack?.id]);

  const topPerformers = useMemo(() => {
    const map = new Map();
    const votes = Array.isArray(performanceVoteItems) ? performanceVoteItems : [];

    votes.forEach(vote => {
      const performanceId = String(vote?.performanceId || vote?.targetId || vote?.id || '').trim();
      if (!performanceId) return;
      const singerName = String(vote?.singerName || vote?.name || vote?.performanceName || 'Anonymous performance').trim() || 'Anonymous performance';
      const voteCount = Number(vote?.voteCount ?? vote?.count ?? 0) || 0;
      const reactionScore = Number(vote?.reactionScore ?? vote?.score ?? voteCount) || voteCount;
      const storedTotal = Number(vote?.totalVotes ?? vote?.votes ?? 0) || 0;
      const totalVotes = Math.max(voteCount, reactionScore, storedTotal, 0);
      const lastVotedAt = vote?.lastVotedAt || vote?.updatedAt || vote?.createdAt || '';
      const entry = map.get(performanceId) || {
        performanceId,
        singerName,
        totalVotes: 0,
        lastVotedAt,
      };
      entry.singerName = singerName || entry.singerName;
      entry.totalVotes = Math.max(entry.totalVotes, totalVotes);
      if (lastVotedAt && (!entry.lastVotedAt || new Date(lastVotedAt).getTime() > new Date(entry.lastVotedAt).getTime())) {
        entry.lastVotedAt = lastVotedAt;
      }
      map.set(performanceId, entry);
    });

    return Array.from(map.values()).sort((a, b) => {
      if (b.totalVotes !== a.totalVotes) return b.totalVotes - a.totalVotes;
      return new Date(b.lastVotedAt || 0).getTime() - new Date(a.lastVotedAt || 0).getTime();
    });
  }, [performanceVoteItems]);

  useEffect(() => {
    if (!audioUnlocked) return;
    if (lastSingerKeyRef.current && lastSingerKeyRef.current !== currentSingerKey) {
      playSound('@whoosh');
    }
    lastSingerKeyRef.current = currentSingerKey;
  }, [audioUnlocked, currentSingerKey]);

  const handleApplause = useMemo(() => {
    return () => {
      if (!audioUnlocked) return;
      if (!applauseHandledRef.current) {
        playSound('@ding');
        applauseHandledRef.current = true;
      }
    };
  }, [audioUnlocked]);

  const recordPerformance = useMemo(() => {
    return async singerName => {
      const cleanName = (singerName || '').trim();
      if (!cleanName) return;

      const normalized = cleanName.toLowerCase();
      const existing = Array.isArray(singerHistoryItems)
        ? singerHistoryItems.find(entry => (entry?.singerName || '').trim().toLowerCase() === normalized)
        : null;

      if (existing?.id) {
        const nextCount = (existing.performerCount || 0) + 1;
        await updateSingerHistory(existing.id, {
          singerName: cleanName,
          performerCount: nextCount,
          lastPerformedAt: new Date().toISOString(),
        });
        return;
      }

      await addSingerHistory({
        singerName: cleanName,
        performerCount: 1,
        lastPerformedAt: new Date().toISOString(),
      });
    };
  }, [addSingerHistory, singerHistoryItems, updateSingerHistory]);

  useEffect(() => {
    const singerName = identityUser?.name || '';
    const triggerKey = `${currentSingerKey}:${singerName}`;
    if (!singerName) return;
    if (lastSingerKeyRef.current === triggerKey) return;
    lastSingerKeyRef.current = triggerKey;
    recordPerformance(singerName);
  }, [currentSingerKey, identityUser?.name, recordPerformance]);

  const upsertCurrentBackingTrack = async value => {
    const trackValue = normalizeYouTubeTrackInput(value);
    if (!trackValue) return;
    const existingCurrent = Array.isArray(backingTrackItems) ? backingTrackItems.find(item => item?.status === 'current') : null;
    if (existingCurrent?.id) {
      await updateBackingTrack(existingCurrent.id, { title: trackValue, url: trackValue, status: 'current', source: 'youtube' });
      return;
    }
    await addBackingTrack({ title: trackValue, url: trackValue, status: 'current', source: 'youtube' });
  };

  const getRoomShareUrl = () => {
    if (typeof window === 'undefined') return '';
    return window.location.href;
  };

  const copyRoomLink = async () => {
    const url = getRoomShareUrl();
    if (!url) return;
    try {
      await navigator.clipboard.writeText(url);
      setShareStatus('Room link copied');
    } catch {
      setShareStatus('Copy failed');
    }
    window.setTimeout(() => setShareStatus(''), 2200);
  };

  const shareRoomLink = async () => {
    const url = getRoomShareUrl();
    if (!url) return;
    try {
      if (navigator.share) {
        await navigator.share({
          title: 'Karaoke Night',
          text: 'Join my Karaoke Night room',
          url,
        });
        setShareStatus('Share sheet opened');
      } else {
        await copyRoomLink();
        return;
      }
    } catch {
      setShareStatus('Share cancelled');
    }
    window.setTimeout(() => setShareStatus(''), 2200);
  };

  const recordPerformanceVote = async performance => {
    if (!performance?.performanceId) return;
    const existing = Array.isArray(performanceVoteItems)
      ? performanceVoteItems.find(item => String(item?.performanceId || item?.targetId || '').trim() === performance.performanceId)
      : null;
    const nextTotal = (existing?.totalVotes || existing?.voteCount || existing?.count || performance.totalVotes || 0) + 1;
    const payload = {
      performanceId: performance.performanceId,
      singerName: performance.singerName,
      totalVotes: nextTotal,
      voteCount: nextTotal,
      count: nextTotal,
      lastVotedAt: new Date().toISOString(),
    };
    if (existing?.id) {
      await updatePerformanceVote(existing.id, payload);
      return;
    }
    await addPerformanceVote(payload);
  };

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-glow"></div>
        <h1 className="app-title">🎶 Karaoke Night</h1>
        <p className="app-subtitle">Step up to the mic!</p>

        <div className="audience-strip">
          <AudiencePresenceIndicator
            audienceCount={audienceCount}
            returningSingerName={identityUser?.name || ''}
            performerCount={currentSingerHistory.count}
          />
        </div>

        <div className="room-share-bar">
          <div className="room-share-url" title={roomLink}>
            <span className="room-share-label">Room link</span>
            <span className="room-share-value">{roomLink || 'Loading room URL...'}</span>
          </div>
          <div className="room-share-actions">
            <button className="btn btn-secondary" onClick={copyRoomLink} disabled={!roomLink}>
              Copy link
            </button>
            <button className="btn btn-primary" onClick={shareRoomLink} disabled={!roomLink}>
              Share room
            </button>
          </div>
          {shareStatus ? <div className="room-share-status">{shareStatus}</div> : null}
        </div>
      </header>

      <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 === 'now-playing' && (
          <div className="section-container">
            <CurrentSinger audienceCount={audienceCount} />
            <ReactionSummary targetId={currentPerformanceId} singerName={identityUser?.name || ''} onApplause={handleApplause} />
            <YouTubeTrackEmbed trackValue={currentBackingTrack?.url || currentBackingTrack?.youtubeUrl || currentBackingTrack?.youtubeId || currentBackingTrack?.title || ''} label="Current backing track" />
          </div>
        )}
        {activeTab === 'sign-up' && <SignUpForm audienceCount={audienceCount} returningSinger={identityUser} />}
        {activeTab === 'queue' && (
          <div className="section-container">
            <QueueDisplay audienceCount={audienceCount} />
            {queuedBackingTracks.length > 0 ? (
              <section className="backing-track-queue-section">
                <h2 className="section-label">Queued backing tracks</h2>
                <div className="backing-track-list">
                  {queuedBackingTracks.map(track => (
                    <div key={track.id} className="backing-track-item">
                      <div className="backing-track-item-info">
                        <strong>{track.title || 'Untitled track'}</strong>
                        <span>{getYouTubeDisplayValue(track.url || track.youtubeUrl || track.youtubeId || '')}</span>
                      </div>
                      <YouTubeTrackEmbed trackValue={track.url || track.youtubeUrl || track.youtubeId || ''} label="Preview" />
                    </div>
                  ))}
                </div>
              </section>
            ) : null}
          </div>
        )}
        {activeTab === 'leaderboard' && (
          <div className="section-container">
            <section className="leaderboard-card">
              <div className="queue-header-bar">
                <h2>🏆 Top-voted performances</h2>
                <p className="leaderboard-subtitle">Votes are collected per performance and sorted by total audience support.</p>
              </div>
              {topPerformers.length > 0 ? (
                <div className="leaderboard-list">
                  {topPerformers.map((performance, index) => (
                    <div key={performance.performanceId} className={`leaderboard-item leaderboard-rank-${index + 1}`}>
                      <div className="leaderboard-rank-badge">#{index + 1}</div>
                      <div className="leaderboard-info">
                        <strong className="leaderboard-name">{performance.singerName}</strong>
                        <span className="leaderboard-meta">Performance ID: {performance.performanceId}</span>
                      </div>
                      <div className="leaderboard-score">{performance.totalVotes} votes</div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="empty-state">
                  <div className="empty-emoji">🏆</div>
                  <h3>No votes yet</h3>
                  <p>React during a performance to populate the leaderboard.</p>
                </div>
              )}
            </section>
            <section className="leaderboard-vote-actions">
              <h2 className="section-label">Boost a performance</h2>
              {topPerformers[0] ? (
                <button className="btn btn-primary" onClick={() => recordPerformanceVote(topPerformers[0])}>
                  Vote for current leader
                </button>
              ) : (
                <div className="host-track-empty">Leaderboard voting appears here once performances receive votes.</div>
              )}
            </section>
          </div>
        )}
        {activeTab === 'host' && (
          <div className="section-container">
            <HostControls audienceCount={audienceCount} audienceUsers={audienceUsers} />
            <section className="backing-track-host-controls">
              <h2 className="section-label">Backing tracks</h2>
              <div className="backing-track-input-card">
                <label className="form-label" htmlFor="youtubeTrackInput">YouTube URL or ID</label>
                <input
                  id="youtubeTrackInput"
                  className="form-input"
                  type="text"
                  placeholder="Paste YouTube link or 11-character video ID"
                  onKeyDown={async e => {
                    if (e.key !== 'Enter') return;
                    await upsertCurrentBackingTrack(e.currentTarget.value);
                    e.currentTarget.value = '';
                  }}
                />
                <button
                  className="btn btn-primary"
                  onClick={async e => {
                    const input = e.currentTarget.parentElement?.querySelector('#youtubeTrackInput');
                    if (!input) return;
                    await upsertCurrentBackingTrack(input.value);
                    input.value = '';
                  }}
                >
                  Set current backing track
                </button>
              </div>
              {currentBackingTrack ? <YouTubeTrackEmbed trackValue={currentBackingTrack.url || currentBackingTrack.youtubeUrl || currentBackingTrack.youtubeId || currentBackingTrack.title || ''} label="Current backing track" /> : null}
            </section>
          </div>
        )}
      </main>

      <footer className="app-footer">
        <span>🎵 Sing your heart out 🎵</span>
      </footer>
    </div>
  );
}

function AudiencePresenceIndicator({ audienceCount = 0, returningSingerName = '', performerCount = 0 }) {
  return (
    <div className="audience-presence-indicator-wrap">
      <div className="audience-presence-indicator">
        <span className="audience-presence-dot"></span>
        <span className="audience-presence-text">Audience live</span>
      </div>
      <div className="audience-count-badge">👥 {audienceCount} watching</div>
      {returningSingerName ? (
        <div className="returning-singer-pill">Welcome back, {returningSingerName}</div>
      ) : null}
      {returningSingerName ? (
        <div className="performer-count-pill">⭐ Performed {performerCount} {performerCount === 1 ? 'time' : 'times'}</div>
      ) : null}
    </div>
  );
}

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