/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * DeckList — Browse/create/manage decks [components/DeckList.jsx]
 * CardManager — Add/edit cards within a deck [components/CardManager.jsx]
 * ReviewSession — Spaced repetition review with SM-2 [components/ReviewSession.jsx]
 * Stats — Overview statistics and progress [components/Stats.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"cron": [{"name": "daily_due_cards_email_reminder", "schedule": "0 9 * * *", "action": "event", "config": {"event_type": "check_due_cards_and_send_reminders"}}], "triggers": []}

import { useState, useMemo, useEffect } from 'react';
import { useCollection, useAuth } from 'deplixo';
import { DeckList } from './components/DeckList.jsx';
import { CardManager } from './components/CardManager.jsx';
import { ReviewSession } from './components/ReviewSession.jsx';
import { Stats } from './components/Stats.jsx';

function App() {
  const auth = typeof useAuth === 'function' ? useAuth() : {};
  const {
    user,
    loading = false,
    login = async () => {},
    logout = async () => {}
  } = auth;

  const collectionHook = typeof useCollection === 'function' ? useCollection : null;
  const decksCollection = collectionHook ? collectionHook('decks', { personal: true }) : {};
  const cardsCollection = collectionHook ? collectionHook('cards', { personal: true }) : {};

  const { items: decks = [], loading: decksLoading = false, add: addDeck = async () => {}, update: updateDeck = async () => {}, remove: removeDeck = async () => {} } = decksCollection;
  const { items: cards = [], loading: cardsLoading = false, add: addCard = async () => {}, update: updateCard = async () => {}, remove: removeCard = async () => {} } = cardsCollection;

  const [tab, setTab] = useState('decks');
  const [selectedDeck, setSelectedDeck] = useState(null);
  const [reviewDeck, setReviewDeck] = useState(null);
  const [shareDeck, setShareDeck] = useState(null);
  const [shareLink, setShareLink] = useState('');
  const [shareCopied, setShareCopied] = useState(false);
  const [importToken, setImportToken] = useState('');
  const [importPreview, setImportPreview] = useState(null);
  const [importLoading, setImportLoading] = useState(false);
  const [importError, setImportError] = useState('');
  const [shareError, setShareError] = useState('');

  const parseShareToken = (token) => {
    try {
      const raw = token.startsWith('http')
        ? new URL(token).searchParams.get('share') || new URL(token).searchParams.get('import')
        : token;
      if (!raw) return null;
      const decoded = JSON.parse(decodeURIComponent(escape(atob(raw))));
      return decoded?.deckId || null;
    } catch {
      return null;
    }
  };

  const makeShareToken = (deck) => {
    const payload = {
      deckId: deck.id,
      generatedAt: new Date().toISOString(),
      app: 'vineyard-deck-share'
    };
    return btoa(unescape(encodeURIComponent(JSON.stringify(payload))));
  };

  const userDecks = useMemo(() => {
    const userId = user?.id || user?.uid || user?.email;
    if (!userId) return [];
    return decks.filter((deck) => {
      const deckOwner = deck.userId || deck.ownerId || deck.createdBy || deck.uid || deck.email;
      return !deckOwner || deckOwner === userId;
    });
  }, [decks, user]);

  const scopedCards = useMemo(() => {
    const userId = user?.id || user?.uid || user?.email;
    if (!userId) return [];
    return cards.filter((card) => {
      const cardOwner = card.userId || card.ownerId || card.createdBy || card.uid || card.email;
      return !cardOwner || cardOwner === userId;
    });
  }, [cards, user]);

  const cardsByDeck = useMemo(() => {
    const map = new Map();
    scopedCards.forEach((card) => {
      const deckId = card.deckId;
      if (!deckId) return;
      if (!map.has(deckId)) map.set(deckId, []);
      map.get(deckId).push(card);
    });
    return map;
  }, [scopedCards]);

  useEffect(() => {
    if (!user) {
      setSelectedDeck(null);
      setReviewDeck(null);
      setShareDeck(null);
      setShareLink('');
      setImportToken('');
      setImportPreview(null);
      setTab('decks');
      return;
    }

    if (selectedDeck) {
      const refreshedDeck = userDecks.find((d) => d.id === selectedDeck.id) || null;
      setSelectedDeck(refreshedDeck);
    }

    if (reviewDeck) {
      const refreshedReviewDeck = userDecks.find((d) => d.id === reviewDeck.id) || null;
      setReviewDeck(refreshedReviewDeck);
    }

    if (shareDeck) {
      const refreshedShareDeck = userDecks.find((d) => d.id === shareDeck.id) || null;
      setShareDeck(refreshedShareDeck);
    }
  }, [user, userDecks, selectedDeck, reviewDeck, shareDeck]);

  useEffect(() => {
    if (!importToken) {
      setImportPreview(null);
      setImportError('');
      return;
    }

    const deckId = parseShareToken(importToken);
    if (!deckId) {
      setImportPreview(null);
      setImportError('Invalid share link.');
      return;
    }

    const sharedDeck = decks.find((deck) => deck.id === deckId);
    if (!sharedDeck) {
      setImportPreview(null);
      setImportError('Shared deck not found or unavailable.');
      return;
    }

    setImportPreview(sharedDeck);
    setImportError('');
  }, [importToken, decks]);

  useEffect(() => {
    const url = new URL(window.location.href);
    const share = url.searchParams.get('share');
    const importParam = url.searchParams.get('import');

    if (share) {
      setTab('decks');
      setImportToken(share);
      url.searchParams.delete('share');
      window.history.replaceState({}, '', url.toString());
    }

    if (importParam) {
      setTab('decks');
      setImportToken(importParam);
      url.searchParams.delete('import');
      window.history.replaceState({}, '', url.toString());
    }
  }, []);

  const handleSelectDeck = (deck) => {
    setSelectedDeck(deck);
    setTab('cards');
  };

  const handleStartReview = (deck) => {
    setReviewDeck(deck);
    setTab('review');
  };

  const handleBackToDecks = () => {
    setSelectedDeck(null);
    setReviewDeck(null);
    setTab('decks');
  };

  const handleLogin = async () => {
    try {
      await login('google');
    } catch (err) {
      console.error('Google sign-in failed:', err);
    }
  };

  const handleLogout = async () => {
    try {
      await logout();
    } catch (err) {
      console.error('Sign out failed:', err);
    }
  };

  const isBusy = loading || decksLoading || cardsLoading;

  const handleGenerateShareLink = async (deck) => {
    try {
      setShareError('');
      const token = makeShareToken(deck);
      const shareUrl = `${window.location.origin}${window.location.pathname}?share=${encodeURIComponent(token)}`;
      setShareDeck(deck);
      setShareLink(shareUrl);
      setShareCopied(false);
      if (navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(shareUrl);
        setShareCopied(true);
      }
    } catch (err) {
      console.error('Unable to create share link:', err);
      setShareError('Could not create a share link right now.');
    }
  };

  const handleCopyShareLink = async () => {
    try {
      if (shareLink && navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(shareLink);
        setShareCopied(true);
      }
    } catch (err) {
      console.error('Copy failed:', err);
    }
  };

  const handleImportSharedDeck = async () => {
    if (!importPreview) return;
    try {
      setImportLoading(true);
      setImportError('');

      const userId = user?.id || user?.uid || user?.email || '';
      const baseName = importPreview.name || 'Shared Deck';
      const importedDeck = await addDeck({
        name: `${baseName} (Imported)`,
        description: importPreview.description || '',
        userId,
        ownerId: userId,
        createdBy: userId,
        importedFromDeckId: importPreview.id,
        importedAt: new Date().toISOString()
      });

      const sourceCards = cardsByDeck.get(importPreview.id) || [];
      for (const card of sourceCards) {
        await addCard({
          deckId: importedDeck.id,
          front: card.front || '',
          back: card.back || '',
          userId,
          ownerId: userId,
          createdBy: userId,
          importedFromCardId: card.id,
          importedFromDeckId: importPreview.id,
          importedAt: new Date().toISOString(),
          easeFactor: card.easeFactor,
          interval: card.interval,
          repetitions: 0,
          nextReviewAt: new Date().toISOString(),
          lastReviewedAt: null,
          correctCount: 0,
          incorrectCount: 0
        });
      }

      setImportToken('');
      setImportPreview(null);
      setTab('decks');
      setSelectedDeck(importedDeck);
    } catch (err) {
      console.error('Import failed:', err);
      setImportError('Could not import this shared deck.');
    } finally {
      setImportLoading(false);
    }
  };

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-brand">
          <span className="header-icon">🍇</span>
          <div>
            <h1 className="header-title">Vineyard</h1>
            <span className="header-subtitle">Spaced Repetition</span>
          </div>
        </div>
        <div className="header-auth">
          {user ? (
            <>
              <span className="auth-user">{user.name || user.email || 'Signed in'}</span>
              <button className="btn btn-ghost btn-sm" onClick={handleLogout}>Sign out</button>
            </>
          ) : (
            <button className="btn btn-primary btn-sm" onClick={handleLogin} disabled={loading}>Sign in with Google</button>
          )}
        </div>
      </header>

      {user ? (
        <>
          <nav className="tab-nav">
            <button className={`tab-btn ${tab === 'decks' ? 'active' : ''}`} onClick={handleBackToDecks}>Decks</button>
            <button className={`tab-btn ${tab === 'cards' ? 'active' : ''}`} onClick={() => selectedDeck && setTab('cards')} disabled={!selectedDeck}>Cards</button>
            <button className={`tab-btn ${tab === 'review' ? 'active' : ''}`} onClick={() => reviewDeck && setTab('review')} disabled={!reviewDeck}>Review</button>
            <button className={`tab-btn ${tab === 'stats' ? 'active' : ''}`} onClick={() => setTab('stats')}>Stats</button>
          </nav>

          <main className="app-main">
            {isBusy && <div className="empty-state"><div className="empty-text">Loading your decks...</div></div>}
            {!isBusy && tab === 'decks' && (
              <DeckList
                onSelectDeck={handleSelectDeck}
                onStartReview={handleStartReview}
                onShareDeck={handleGenerateShareLink}
                user={user}
                decks={userDecks}
                cards={scopedCards}
                addDeck={addDeck}
                updateDeck={updateDeck}
                removeDeck={removeDeck}
              />
            )}
            {!isBusy && tab === 'cards' && selectedDeck && <CardManager deck={selectedDeck} onBack={handleBackToDecks} user={user} />}
            {!isBusy && tab === 'review' && reviewDeck && <ReviewSession deck={reviewDeck} onFinish={handleBackToDecks} user={user} />}
            {!isBusy && tab === 'stats' && <Stats user={user} decks={userDecks} cards={scopedCards} />}

            {!isBusy && tab === 'decks' && (shareLink || importPreview) && (
              <section className="share-import-panel">
                <div className="section-header">
                  <h2 className="section-title">Shared Deck</h2>
                </div>
                {shareDeck && shareLink && (
                  <div className="share-box">
                    <div className="share-title">Share link ready</div>
                    <input className="form-input share-link-input" value={shareLink} readOnly />
                    <div className="share-actions">
                      <button className="btn btn-primary btn-sm" onClick={handleCopyShareLink}>{shareCopied ? 'Copied!' : 'Copy link'}</button>
                      <button className="btn btn-ghost btn-sm" onClick={() => { setShareDeck(null); setShareLink(''); setShareCopied(false); }}>Close</button>
                    </div>
                  </div>
                )}
                {importPreview && (
                  <div className="share-box">
                    <div className="share-title">Import shared deck into your account</div>
                    <div className="share-meta">{importPreview.name} • {cardsByDeck.get(importPreview.id)?.length || 0} cards</div>
                    <p className="empty-text">This will copy the deck and its cards into your private account.</p>
                    {importError && <div className="share-error">{importError}</div>}
                    <div className="share-actions">
                      <button className="btn btn-accent btn-sm" onClick={handleImportSharedDeck} disabled={importLoading || !importPreview}>{importLoading ? 'Importing...' : 'Import deck'}</button>
                      <button className="btn btn-ghost btn-sm" onClick={() => { setImportToken(''); setImportPreview(null); setImportError(''); }}>Cancel</button>
                    </div>
                  </div>
                )}
                {shareError && <div className="share-error">{shareError}</div>}
              </section>
            )}
          </main>
        </>
      ) : (
        <main className="app-main auth-gate">
          <div className="auth-card">
            <div className="auth-icon">🔐</div>
            <h2 className="section-title">Sign in to access your decks</h2>
            <p className="empty-text">Use Google OAuth to keep your flashcards private and synced to your account.</p>
            <button className="btn btn-primary" onClick={handleLogin} disabled={loading}>Sign in with Google</button>
          </div>
        </main>
      )}
    </div>
  );
}

export default App;

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