/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * StoryView — Full story display with author attribution [components/StoryView.jsx]
 * AddParagraph — Form to add new paragraphs [components/AddParagraph.jsx]
 * StoryStats — Word count and reading time [components/StoryStats.jsx]
 * StoryHeader — Title and story metadata [components/StoryHeader.jsx]
 * @end-component-map */

import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import { useAuth, useCollection, useReactions, usePresence, useBroadcast, useAI, generatePDF } from '@deplixo/sdk';
import { StoryHeader } from './components/StoryHeader.jsx';
import { StoryView } from './components/StoryView.jsx';
import { AddParagraph } from './components/AddParagraph.jsx';
import { StoryStats } from './components/StoryStats.jsx';

function ReactionBar({ targetId, onReact }) {
  const { counts, toggle, loading } = useReactions(targetId);
  const emojis = ['👍', '❤️', '🎉', '🔥', '👀'];

  const handleToggle = emoji => {
    toggle(emoji);
    if (onReact) onReact({ targetId, emoji });
  };

  if (loading) return null;

  return (
    <div className="reaction-bar">
      {emojis.map(emoji => (
        <button
          key={emoji}
          className="reaction-btn"
          onClick={() => handleToggle(emoji)}
          type="button"
          aria-label={`React with ${emoji}`}
          title={`React with ${emoji}`}
        >
          <span className="reaction-emoji">{emoji}</span>
          {counts[emoji] ? <span className="reaction-count">{counts[emoji]}</span> : null}
        </button>
      ))}
    </div>
  );
}

function PresencePanel({ users }) {
  const activeUsers = Array.isArray(users) ? users : [];

  return (
    <section className="presence-panel" aria-label="People currently working on the story">
      <div className="presence-header">
        <div>
          <h2 className="presence-title">Working on this story</h2>
          <p className="presence-subtitle">Live presence updates as people join and leave</p>
        </div>
        <span className="presence-count">{activeUsers.length} active</span>
      </div>

      {activeUsers.length === 0 ? (
        <div className="presence-empty">No one is active right now.</div>
      ) : (
        <div className="presence-users">
          {activeUsers.map((member, index) => {
            const name = member?.name || member?.user?.name || member?.displayName || 'Anonymous';
            const avatar = member?.avatar || member?.user?.avatar || member?.photoURL || '';
            const status = member?.status || 'Editing';

            return (
              <div key={member?.id || `${name}-${index}`} className="presence-user">
                {avatar ? (
                  <img className="presence-avatar" src={avatar} alt={name} />
                ) : (
                  <div className="presence-avatar presence-avatar-fallback">{name.charAt(0).toUpperCase()}</div>
                )}
                <div className="presence-user-meta">
                  <span className="presence-user-name">{name}</span>
                  <span className="presence-user-status">{status}</span>
                </div>
                <span className="presence-dot" aria-hidden="true" />
              </div>
            );
          })}
        </div>
      )}
    </section>
  );
}

function CliffhangerAssistant({ paragraphs, activeTab, onSelectSuggestion }) {
  const { generate, loading, error } = useAI();
  const [analysis, setAnalysis] = useState(null);
  const [selectedSuggestion, setSelectedSuggestion] = useState('');
  const [appliedSuggestion, setAppliedSuggestion] = useState('');

  const storyText = (paragraphs || [])
    .map(item => item?.value?.text || item?.value?.content || '')
    .filter(Boolean)
    .join('\n\n')
    .trim();

  useEffect(() => {
    let cancelled = false;

    const detectCliffhanger = async () => {
      if (!storyText || activeTab === 'write') {
        setAnalysis(null);
        setSelectedSuggestion('');
        setAppliedSuggestion('');
        return;
      }

      try {
        const response = await generate({
          system:
            'You analyze a collaborative story and detect whether the latest paragraph ends on a cliffhanger. If it does, return JSON with keys cliffhanger (boolean), reason (string), and suggestions (array of exactly 3 short next-direction suggestions). Suggestions should be concise and actionable for the next writer. If it is not a cliffhanger, return cliffhanger false, reason, and an empty suggestions array.',
          user: `Story so far:\n\n${storyText}\n\nAnalyze the ending and determine whether the story currently reaches a cliffhanger.`,
          json: true,
        });

        if (!cancelled) {
          setAnalysis(response || null);
        }
      } catch (err) {
        if (!cancelled) {
          setAnalysis(null);
        }
      }
    };

    detectCliffhanger();

    return () => {
      cancelled = true;
    };
  }, [storyText, activeTab, generate]);

  if (activeTab !== 'story' && activeTab !== 'write') return null;

  const suggestions = Array.isArray(analysis?.suggestions) ? analysis.suggestions.slice(0, 3) : [];
  const isCliffhanger = Boolean(analysis?.cliffhanger) && suggestions.length > 0;

  const handleChoose = suggestion => {
    setSelectedSuggestion(suggestion);
    setAppliedSuggestion(suggestion);
    if (onSelectSuggestion) onSelectSuggestion(suggestion);
  };

  if (!isCliffhanger) {
    return (
      <section className="story-cliffhanger-panel" aria-live="polite">
        <div className="story-cliffhanger-header">
          <h2 className="story-cliffhanger-title">AI story assistant</h2>
          <span className="story-cliffhanger-badge">Monitoring ending</span>
        </div>
        <p className="story-cliffhanger-text">
          {loading ? 'Checking the latest story beat for a possible cliffhanger…' : analysis?.reason || 'The assistant will surface next-step ideas when the story ends on a suspenseful beat.'}
        </p>
        {error ? <p className="story-cliffhanger-error">AI assistant unavailable right now.</p> : null}
      </section>
    );
  }

  return (
    <section className="story-cliffhanger-panel story-cliffhanger-active" aria-live="polite">
      <div className="story-cliffhanger-header">
        <h2 className="story-cliffhanger-title">Cliffhanger detected</h2>
        <span className="story-cliffhanger-badge">3 next directions</span>
      </div>
      <p className="story-cliffhanger-text">
        {analysis?.reason || 'The story currently ends in a suspenseful place. Pick a direction to guide the next paragraph.'}
      </p>

      <div className="story-cliffhanger-suggestions">
        {suggestions.map((suggestion, index) => (
          <button
            key={`${suggestion}-${index}`}
            type="button"
            className={`story-cliffhanger-option ${selectedSuggestion === suggestion ? 'active' : ''}`}
            onClick={() => handleChoose(suggestion)}
          >
            <span className="story-cliffhanger-option-index">{index + 1}</span>
            <span className="story-cliffhanger-option-text">{suggestion}</span>
          </button>
        ))}
      </div>

      {appliedSuggestion ? (
        <div className="story-cliffhanger-applied">
          <strong>Chosen direction:</strong> {appliedSuggestion}
        </div>
      ) : null}
    </section>
  );
}

function ShareStoryPanel({ title, paragraphs, shareUrl, onCopy }) {
  const [copyState, setCopyState] = useState('idle');
  const storyText = useMemo(
    () =>
      (paragraphs || [])
        .map(item => item?.value?.text || item?.value?.content || '')
        .filter(Boolean)
        .join('\n\n')
        .trim(),
    [paragraphs]
  );

  const encodedTitle = encodeURIComponent(title || 'Untitled Story');
  const encodedUrl = encodeURIComponent(shareUrl);
  const encodedBody = encodeURIComponent(`I thought you might enjoy this story: ${title || 'Untitled Story'}\n\n${shareUrl}`);
  const canShareNative = typeof navigator !== 'undefined' && typeof navigator.share === 'function';

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl);
      setCopyState('copied');
      if (onCopy) onCopy(shareUrl);
      window.setTimeout(() => setCopyState('idle'), 2000);
    } catch (err) {
      setCopyState('error');
      window.setTimeout(() => setCopyState('idle'), 2500);
    }
  };

  const handleNativeShare = async () => {
    if (!canShareNative) return;
    try {
      await navigator.share({
        title: title || 'Untitled Story',
        text: 'Check out this published story',
        url: shareUrl,
      });
    } catch (err) {
      // ignore canceled shares
    }
  };

  return (
    <section className="story-share-panel" aria-label="Share published story">
      <div className="story-share-header">
        <div>
          <h2 className="story-share-title">Share this story</h2>
          <p className="story-share-text">Copy the link or send it through social apps and email.</p>
        </div>
        {canShareNative ? (
          <button className="story-share-native" type="button" onClick={handleNativeShare}>
            Share
          </button>
        ) : null}
      </div>

      <div className="story-share-link-row">
        <input className="story-share-link" type="text" readOnly value={shareUrl} aria-label="Share link" />
        <button className="submit-btn story-share-copy" type="button" onClick={handleCopy}>
          {copyState === 'copied' ? 'Copied!' : copyState === 'error' ? 'Copy failed' : 'Copy link'}
        </button>
      </div>

      <div className="story-share-targets">
        <a className="story-share-target" href={`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`} target="_blank" rel="noreferrer">Facebook</a>
        <a className="story-share-target" href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(title || 'Untitled Story')}&url=${encodedUrl}`} target="_blank" rel="noreferrer">X</a>
        <a className="story-share-target" href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`} target="_blank" rel="noreferrer">LinkedIn</a>
        <a className="story-share-target" href={`mailto:?subject=${encodedTitle}&body=${encodedBody}`}>Email</a>
        <a className="story-share-target" href={`sms:?&body=${encodedBody}`}>SMS</a>
        <a className="story-share-target" href={`https://wa.me/?text=${encodedBody}`} target="_blank" rel="noreferrer">WhatsApp</a>
      </div>

      {storyText ? (
        <p className="story-share-note">
          Published story is ready to share. Readers will land on the story page and can copy the same link.
        </p>
      ) : null}
    </section>
  );
}

function StoryBookletPdf({ title, meta, paragraphs, triggerRef, onExportComplete }) {
  const bookletRef = useRef(null);

  const storyTitle = title || 'Untitled Story';
  const orderedParagraphs = useMemo(
    () => [...(paragraphs || [])].sort((a, b) => (a.value.order || 0) - (b.value.order || 0)),
    [paragraphs]
  );

  const authorCounts = useMemo(() => {
    const counts = new Map();
    orderedParagraphs.forEach(item => {
      const name = item?.value?.authorName || item?.value?.author || item?.value?.userName || 'Anonymous';
      counts.set(name, (counts.get(name) || 0) + 1);
    });
    return Array.from(counts.entries())
      .map(([name, count]) => ({ name, count }))
      .sort((a, b) => b.count - a.count || a.name.localeCompare(b.name));
  }, [orderedParagraphs]);

  const wordCount = useMemo(() => {
    return orderedParagraphs.reduce((total, item) => {
      const text = item?.value?.text || item?.value?.content || '';
      return total + text.trim().split(/\s+/).filter(Boolean).length;
    }, 0);
  }, [orderedParagraphs]);

  const readingTime = Math.max(1, Math.ceil(wordCount / 200));

  useEffect(() => {
    if (!triggerRef?.current) return;

    const handleExport = async () => {
      if (!bookletRef.current) return;
      await generatePDF(bookletRef.current, {
        filename: `${storyTitle.replace(/[^a-z0-9]+/gi, '-').replace(/^-+|-+$/g, '') || 'story'}-booklet.pdf`,
        margin: 10,
      });
      if (onExportComplete) onExportComplete();
    };

    const button = triggerRef.current;
    button.addEventListener('click', handleExport);
    return () => button.removeEventListener('click', handleExport);
  }, [triggerRef, storyTitle, onExportComplete]);

  return (
    <div ref={bookletRef} className="pdf-booklet-export" aria-hidden="true">
      <section className="pdf-cover-page pdf-page">
        <div className="pdf-cover-kicker">Collaborative Story Booklet</div>
        <h1 className="pdf-cover-title">{storyTitle}</h1>
        <p className="pdf-cover-subtitle">
          A shared story by {authorCounts.length} contributor{authorCounts.length === 1 ? '' : 's'}
        </p>
        <div className="pdf-cover-meta">
          <div>
            <span className="pdf-meta-label">Total words</span>
            <span className="pdf-meta-value">{wordCount}</span>
          </div>
          <div>
            <span className="pdf-meta-label">Reading time</span>
            <span className="pdf-meta-value">~{readingTime} min</span>
          </div>
          <div>
            <span className="pdf-meta-label">Paragraphs</span>
            <span className="pdf-meta-value">{orderedParagraphs.length}</span>
          </div>
        </div>
        <div className="pdf-cover-footer">Generated from Deplixo</div>
      </section>

      <section className="pdf-page pdf-summary-page">
        <h2 className="pdf-page-title">Contributors</h2>
        <div className="pdf-contributor-list">
          {authorCounts.length === 0 ? (
            <p className="pdf-muted">No contributors yet.</p>
          ) : (
            authorCounts.map((item, index) => (
              <div key={`${item.name}-${index}`} className="pdf-contributor-item">
                <span>{item.name}</span>
                <span>{item.count} paragraph{item.count === 1 ? '' : 's'}</span>
              </div>
            ))
          )}
        </div>
        <div className="pdf-summary-note">
          This booklet presents the story in reading order with page breaks between paragraphs when needed.
        </div>
      </section>

      {orderedParagraphs.map((item, index) => {
        const text = item?.value?.text || item?.value?.content || '';
        const author = item?.value?.authorName || item?.value?.author || item?.value?.userName || 'Anonymous';
        const timestamp = item?.value?.createdAt || item?.value?.updatedAt || item?.createdAt || item?.updatedAt || '';

        return (
          <section key={item?.id || index} className="pdf-page pdf-story-page">
            <div className="pdf-page-header">
              <span>Story page {index + 1}</span>
              <span>{storyTitle}</span>
            </div>
            <article className="pdf-story-article">
              <div className="pdf-paragraph-number">Paragraph {index + 1}</div>
              <p className="pdf-paragraph-text">{text}</p>
            </article>
            <div className="pdf-page-footer">
              <span>{author}</span>
              <span>{timestamp ? new Date(timestamp).toLocaleString() : ''}</span>
            </div>
          </section>
        );
      })}
    </div>
  );
}

function App() {
  const { user, loading, login, logout } = useAuth();
  const { items: paragraphs, loading: dataLoading, add } = useCollection('story_paragraphs', { personal: false });
  const { items: storyMeta, add: addMeta, update: updateMeta, loading: metaLoading } = useCollection('story_meta', { personal: false });
  const [activeTab, setActiveTab] = useState('story');
  const [chosenCliffhangerSuggestion, setChosenCliffhangerSuggestion] = useState('');
  const [exportingPdf, setExportingPdf] = useState(false);
  const exportButtonRef = useRef(null);
  const { users: presenceUsers, update: updatePresence } = usePresence(
    user ? { id: user.id, name: user.name, avatar: user.avatar } : null
  );

  const handleStoryBroadcast = useCallback(() => {}, []);
  const handleReactionBroadcast = useCallback(() => {}, []);
  const handlePresenceBroadcast = useCallback(() => {}, []);

  useBroadcast('story:paragraph-added', handleStoryBroadcast);
  useBroadcast('story:reaction', handleReactionBroadcast);
  useBroadcast('story:presence', handlePresenceBroadcast);

  useEffect(() => {
    if (user) {
      updatePresence({
        id: user.id,
        name: user.name,
        avatar: user.avatar,
        status: activeTab === 'write' ? 'Writing' : 'Reading',
      });
    }
  }, [user, activeTab, updatePresence]);

  if (loading || dataLoading || metaLoading) {
    return (
      <div className="loading-screen">
        <div className="loading-quill">✒️</div>
        <p className="loading-text">Opening the storybook…</p>
      </div>
    );
  }

  const sorted = [...paragraphs].sort((a, b) => (a.value.order || 0) - (b.value.order || 0));
  const storyTitle = storyMeta.length > 0 ? storyMeta[0].value.title : null;
  const canContribute = Boolean(user);
  const publishedStory = Boolean(storyTitle && sorted.length > 0);
  const shareUrl = typeof window !== 'undefined' ? window.location.href : '';

  const handleWriteClick = () => {
    if (!canContribute) {
      login();
      return;
    }
    setActiveTab('write');
  };

  const handleTabChange = tab => {
    setActiveTab(tab);
    if (user) {
      const nextPresence = {
        id: user.id,
        name: user.name,
        avatar: user.avatar,
        status: tab === 'write' ? 'Writing' : tab === 'stats' ? 'Reviewing stats' : 'Reading',
      };
      updatePresence(nextPresence);
    }
  };

  const handleLogout = async () => {
    await logout();
  };

  const handleAddedParagraph = () => {
    handleStoryBroadcast({ type: 'paragraph-added' });
    handleTabChange('story');
  };

  const handleReaction = payload => {
    handleReactionBroadcast({ type: 'reaction', ...payload });
  };

  const handleSelectSuggestion = suggestion => {
    setChosenCliffhangerSuggestion(suggestion);
    handleTabChange('write');
  };

  const suggestedWritePrompt = chosenCliffhangerSuggestion
    ? `Continue the story by following this direction: ${chosenCliffhangerSuggestion}`
    : '';

  const handlePdfExportClick = async () => {
    if (!exportButtonRef.current) return;
    setExportingPdf(true);
    try {
      exportButtonRef.current.click();
    } finally {
      setExportingPdf(false);
    }
  };

  return (
    <div className="app-shell">
      <StoryHeader
        title={storyTitle}
        meta={storyMeta}
        addMeta={addMeta}
        updateMeta={updateMeta}
        paragraphCount={sorted.length}
      />

      <header className="auth-bar">
        <div className="auth-status">
          {user ? (
            <>
              <img className="auth-avatar" src={user.avatar} alt={user.name} />
              <span className="auth-welcome">Signed in as {user.name}</span>
            </>
          ) : (
            <span className="auth-welcome">Sign in with Google to contribute</span>
          )}
        </div>
        <div className="auth-actions">
          {user ? (
            <button className="auth-btn auth-btn-secondary" onClick={handleLogout}>Sign Out</button>
          ) : (
            <button className="auth-btn auth-btn-primary" onClick={() => login()}>Sign in with Google</button>
          )}
        </div>
      </header>

      <PresencePanel users={presenceUsers} />

      <CliffhangerAssistant paragraphs={sorted} activeTab={activeTab} onSelectSuggestion={handleSelectSuggestion} />

      {publishedStory ? <ShareStoryPanel title={storyTitle} paragraphs={sorted} shareUrl={shareUrl} /> : null}

      <nav className="tab-bar">
        <button className={`tab-btn ${activeTab === 'story' ? 'active' : ''}`} onClick={() => handleTabChange('story')}>
          📖 Story
        </button>
        <button className={`tab-btn ${activeTab === 'write' ? 'active' : ''}`} onClick={handleWriteClick}>
          ✍️ Write
        </button>
        <button className={`tab-btn ${activeTab === 'stats' ? 'active' : ''}`} onClick={() => handleTabChange('stats')}>
          📊 Stats
        </button>
      </nav>

      <main className="main-content">
        {activeTab === 'story' && (
          <div className="story-scroll">
            <div className="story-body">
              {sorted.length === 0 ? (
                <div className="empty-story">
                  <div className="empty-illustration">📖</div>
                  <h2 className="empty-title">Your story starts here</h2>
                  <p className="empty-desc">Be the first to add a paragraph, then react to each section as the story grows.</p>
                </div>
              ) : (
                <StoryView paragraphs={sorted} renderReactionBar={targetId => <ReactionBar targetId={targetId} onReact={handleReaction} />} />
              )}

              {sorted.length > 0 ? (
                <div className="story-end-marker">
                  <div className="end-flourish">✦ ✦ ✦</div>
                  <p className="end-text">End of current chapter</p>
                </div>
              ) : null}
            </div>
          </div>
        )}
        {activeTab === 'write' && (
          canContribute ? (
            <AddParagraph paragraphs={sorted} add={add} user={user} onAdded={handleAddedParagraph} suggestedPrompt={suggestedWritePrompt} />
          ) : (
            <div className="empty-story contributor-gate">
              <div className="empty-illustration">🔐</div>
              <h2 className="empty-title">Sign in to write</h2>
              <p className="empty-desc">
                Google OAuth is required for contributor actions like adding new paragraphs.
                Sign in to join the story and share your voice.
              </p>
              <button className="submit-btn" onClick={() => login()}>
                Sign in with Google
              </button>
            </div>
          )
        )}
        {activeTab === 'stats' && <StoryStats paragraphs={sorted} />}

        <section className="story-export-panel" aria-label="Export story booklet">
          <div className="story-export-copy">
            <h2 className="story-export-title">Download booklet PDF</h2>
            <p className="story-export-text">Export the finished story with a cover page and paginated story content.</p>
          </div>
          <button
            ref={exportButtonRef}
            className="submit-btn story-export-btn"
            type="button"
            onClick={handlePdfExportClick}
            disabled={sorted.length === 0 || exportingPdf}
          >
            {exportingPdf ? 'Preparing PDF…' : 'Export PDF booklet'}
          </button>
        </section>
      </main>

      <div className="pdf-export-stage">
        <StoryBookletPdf
          title={storyTitle}
          meta={storyMeta}
          paragraphs={sorted}
          triggerRef={exportButtonRef}
          onExportComplete={() => setExportingPdf(false)}
        />
      </div>
    </div>
  );
}

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