/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * HuntSetup — Organizer creates/manages scavenger hunt items [components/HuntSetup.jsx]
 * PlayerView — Players check off found items [components/PlayerView.jsx]
 * Leaderboard — Rankings and scores [components/Leaderboard.jsx]
 * @end-component-map */

import { useEffect, useMemo, useState } from 'react';
import { useIdentity, playSound } from '@deplixo/sdk';
import { HuntSetup } from './components/HuntSetup.jsx';
import { PlayerView } from './components/PlayerView.jsx';
import { Leaderboard } from './components/Leaderboard.jsx';

function App() {
  const { user, loading } = useIdentity();
  const [role, setRole] = useState(null);
  const [activeTab, setActiveTab] = useState('play');
  const [huntInvite, setHuntInvite] = useState(null);
  const [copyState, setCopyState] = useState('idle');

  const normalizedInvite = useMemo(() => {
    if (!huntInvite) return null;
    return String(huntInvite).trim();
  }, [huntInvite]);

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const inviteFromUrl = params.get('hunt') || params.get('invite') || params.get('context');
    if (inviteFromUrl) {
      setHuntInvite(inviteFromUrl);
      setRole('player');
      setActiveTab('play');
    }
  }, []);

  useEffect(() => {
    if (!copyState || copyState === 'idle') return;
    const timer = window.setTimeout(() => setCopyState('idle'), 2200);
    return () => window.clearTimeout(timer);
  }, [copyState]);

  const inviteUrl = useMemo(() => {
    if (typeof window === 'undefined') return '';
    const url = new URL(window.location.href);
    url.searchParams.set('hunt', normalizedInvite || `hunt-${user?.id || 'shared'}`);
    url.searchParams.set('role', 'player');
    return url.toString();
  }, [normalizedInvite, user]);

  const inviteText = useMemo(() => {
    const shareLabel = normalizedInvite ? `Join my scavenger hunt (${normalizedInvite})` : 'Join my scavenger hunt';
    return `${shareLabel}: ${inviteUrl}`;
  }, [normalizedInvite, inviteUrl]);

  const handleCreateInvite = async () => {
    const base = normalizedInvite || `hunt-${user?.id || 'shared'}`;
    const shareToken = `invite-${base}-${Date.now().toString(36)}`;
    const url = new URL(window.location.href);
    url.searchParams.set('hunt', shareToken);
    url.searchParams.set('role', 'player');
    setHuntInvite(shareToken);
    setRole('organizer');
    setActiveTab('setup');
    playSound('@ding');
    return url.toString();
  };

  const handleCopyInvite = async () => {
    const inviteLink = await handleCreateInvite();
    const text = `Join my scavenger hunt: ${inviteLink}`;
    try {
      await navigator.clipboard.writeText(text);
      setCopyState('copied');
      playSound('@success');
    } catch {
      setCopyState('error');
      playSound('@error');
    }
  };

  if (loading) {
    return (
      <div className="loading-screen">
        <div className="loading-pulse"></div>
        <p>Loading Scavenger Hunt...</p>
      </div>
    );
  }

  if (!role) {
    return (
      <div className="role-select-screen">
        <div className="role-select-card">
          <span className="role-icon">🔍</span>
          <h1>Scavenger Hunt</h1>
          <p className="role-subtitle">Welcome, {user.name}! Choose your role to get started.</p>
          <div className="role-buttons">
            <button className="role-btn organizer-btn" onClick={() => setRole('organizer')}>
              <span className="role-btn-icon">📋</span>
              <span className="role-btn-label">Organizer</span>
              <span className="role-btn-desc">Create & manage the hunt</span>
            </button>
            <button className="role-btn player-btn" onClick={() => setRole('player')}>
              <span className="role-btn-icon">🏃</span>
              <span className="role-btn-label">Player</span>
              <span className="role-btn-desc">Find items & compete</span>
            </button>
          </div>
        </div>
      </div>
    );
  }

  const tabs = role === 'organizer'
    ? [{ id: 'setup', label: '📋 Hunt Setup' }, { id: 'leaderboard', label: '🏆 Leaderboard' }]
    : [{ id: 'play', label: '🔍 Find Items' }, { id: 'leaderboard', label: '🏆 Leaderboard' }];

  const defaultTab = role === 'organizer' ? 'setup' : 'play';
  if (!tabs.find(t => t.id === activeTab)) setActiveTab(defaultTab);

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-left">
          <span className="header-logo">🔍</span>
          <h1>Scavenger Hunt</h1>
        </div>
        <div className="header-right">
          <span className="user-badge">{user.name}</span>
          <button className="switch-role-btn" onClick={() => { setRole(null); setActiveTab('play'); }}>Switch Role</button>
        </div>
      </header>
      <nav className="tab-nav">
        {tabs.map(tab => (
          <button key={tab.id} className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`} onClick={() => setActiveTab(tab.id)}>
            {tab.label}
          </button>
        ))}
      </nav>
      <main className="app-main">
        {role === 'organizer' && (
          <section className="hunt-invite-panel">
            <div className="hunt-invite-header">
              <div>
                <h2>Invite Players</h2>
                <p>Generate a shareable hunt link or copy an invitation message to send to players.</p>
              </div>
              <span className="hunt-invite-pill">{normalizedInvite ? 'Active invite' : 'Ready to share'}</span>
            </div>
            <div className="hunt-invite-linkbox">
              <label>Shareable link</label>
              <div className="hunt-invite-row">
                <input readOnly value={inviteUrl} aria-label="Shareable hunt link" />
                <button className="btn-secondary" onClick={handleCreateInvite}>Generate Link</button>
                <button className="btn-primary" onClick={handleCopyInvite}>Copy Invite</button>
              </div>
              <p className="hunt-invite-helper">{inviteText}</p>
              {copyState === 'copied' && <p className="hunt-invite-status success">Invite copied to clipboard.</p>}
              {copyState === 'error' && <p className="hunt-invite-status error">Could not copy automatically. Please copy the link manually.</p>}
            </div>
          </section>
        )}
        {activeTab === 'setup' && <HuntSetup />}
        {activeTab === 'play' && <PlayerView user={user} huntContext={huntInvite} />}
        {activeTab === 'leaderboard' && <Leaderboard currentUser={user} />}
      </main>
    </div>
  );
}

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