// DEPLOY_CONFIG: {"cron": [{"name": "monthly_family_milestone_summary", "schedule": "0 9 1 * *", "action": "event", "config": {"event_type": "generate_monthly_family_milestone_summary"}}], "triggers": [{"name": "send_monthly_family_milestone_summary_email", "on": "event.generate_monthly_family_milestone_summary", "actions": [{"type": "email", "to": "{{family_member_emails}}", "subject": "Monthly Milestone Summary", "body": "Hello family member,\n\nHere is your monthly milestone summary for the family.\n\n{{milestone_summary}}\n\nBest,\nDeplixo"}]}]}
import { useMemo, useRef, useState } from 'react';
import { useAuth, useCollection, generatePDF } from '@deplixo/sdk';
import { Timeline } from './components/Timeline.jsx';
import { Suggestions } from './components/Suggestions.jsx';

function App() {
  const { user, loading, login, logout } = useAuth();
  const { items: shareLinks, add: addShareLink, loading: shareLinksLoading } = useCollection('share_links', { personal: true });
  const { items: milestones = [], loading: milestonesLoading } = useCollection('milestones', { personal: true });
  const [activeTab, setActiveTab] = useState('timeline');
  const [shareLinkCopied, setShareLinkCopied] = useState(false);
  const [shareError, setShareError] = useState('');
  const [linkMode, setLinkMode] = useState(false);
  const [accessCode, setAccessCode] = useState('');
  const [shareTitle, setShareTitle] = useState('Grandparent Viewer');
  const [pdfExporting, setPdfExporting] = useState(false);
  const pdfRef = useRef(null);

  const tabs = [
    { id: 'timeline', label: '📅 Timeline', icon: '📅' },
    { id: 'suggestions', label: '💡 Suggestions', icon: '💡' }
  ];

  const currentShareLink = useMemo(() => {
    if (!shareLinks?.length) return null;
    return [...shareLinks]
      .filter(link => link && link.token)
      .sort((a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0))[0] || null;
  }, [shareLinks]);

  const printableMilestones = useMemo(() => {
    return [...(milestones || [])].sort((a, b) => new Date(b.date || b.createdAt || 0) - new Date(a.date || a.createdAt || 0));
  }, [milestones]);

  const readQueryParam = (key) => {
    try {
      return new URLSearchParams(window.location.search).get(key) || '';
    } catch {
      return '';
    }
  };

  const normalizeToken = (value) => (value || '').trim();

  const hasTimelineAccess = () => {
    const linkToken = normalizeToken(readQueryParam('share'));
    if (!linkToken) return true;
    return shareLinks?.some(link => normalizeToken(link.token) === linkToken && link.active !== false) || false;
  };

  const canCreateShareLink = () => !!user && !linkMode && !shareLinksLoading;

  const generateShareLink = async () => {
    setShareError('');
    setShareLinkCopied(false);

    try {
      const token = `${Math.random().toString(36).slice(2, 10)}${Date.now().toString(36)}`;
      const baseUrl = window.location.origin + window.location.pathname;
      const url = `${baseUrl}?share=${encodeURIComponent(token)}`;

      await addShareLink({
        token,
        url,
        title: shareTitle.trim() || 'Grandparent Viewer',
        familyName: user?.name || 'Family',
        active: true,
        createdAt: new Date().toISOString(),
        createdBy: user?.email || user?.name || 'unknown'
      });

      try {
        await navigator.clipboard.writeText(url);
        setShareLinkCopied(true);
      } catch {
        setShareLinkCopied(false);
      }
    } catch (error) {
      setShareError('Could not generate a share link right now. Please try again.');
    }
  };

  const handlePdfExport = async () => {
    if (!pdfRef.current || pdfExporting) return;
    setPdfExporting(true);
    try {
      await generatePDF(pdfRef.current, {
        filename: 'milestone-book.pdf',
        margin: 10
      });
    } finally {
      setPdfExporting(false);
    }
  };

  const renderShareAccessBanner = () => {
    const shareToken = normalizeToken(readQueryParam('share'));
    if (!shareToken) return null;

    const valid = shareLinks?.some(link => normalizeToken(link.token) === shareToken && link.active !== false);

    return (
      <section className={`share-banner ${valid ? 'share-banner-valid' : 'share-banner-invalid'}`}>
        <div className="share-banner-copy">
          <strong>{valid ? 'Shared family timeline' : 'Invalid or expired share link'}</strong>
          <p>
            {valid
              ? 'You are viewing a timeline shared by this family. You can browse the shared milestones without signing in.'
              : 'This link is not active anymore. Please ask the family for a new shared link.'}
          </p>
        </div>
        {valid ? (
          <button
            className="share-link-btn"
            onClick={() => {
              const cleanUrl = window.location.origin + window.location.pathname;
              window.history.replaceState({}, '', cleanUrl);
            }}
          >
            Exit shared view
          </button>
        ) : null}
      </section>
    );
  };

  if (loading) {
    return (
      <div className="app-container auth-screen">
        <header className="app-header">
          <div className="header-content">
            <div className="header-icon">👶</div>
            <div>
              <h1 className="header-title">Baby Milestones</h1>
              <p className="header-subtitle">Loading your family account...</p>
            </div>
          </div>
        </header>
        <main className="auth-panel">
          <div className="auth-card">
            <div className="auth-spinner" aria-hidden="true" />
            <p className="auth-text">Signing you in...</p>
          </div>
        </main>
      </div>
    );
  }

  const queryShareToken = normalizeToken(readQueryParam('share'));
  const sharedAccess = queryShareToken ? hasTimelineAccess() : false;

  if (!user && !sharedAccess && queryShareToken) {
    return (
      <div className="app-container auth-screen">
        <header className="app-header">
          <div className="header-content">
            <div className="header-icon">👶</div>
            <div>
              <h1 className="header-title">Baby Milestones</h1>
              <p className="header-subtitle">Shared timeline access</p>
            </div>
          </div>
        </header>
        <main className="auth-panel">
          <section className="auth-card">
            <div className="auth-hero">🔒</div>
            <h2 className="auth-title">This shared link is unavailable</h2>
            <p className="auth-copy">Ask the family to generate a new share link so you can view the timeline again.</p>
          </section>
        </main>
      </div>
    );
  }

  if (!user && !sharedAccess) {
    return (
      <div className="app-container auth-screen">
        <header className="app-header">
          <div className="header-content">
            <div className="header-icon">👶</div>
            <div>
              <h1 className="header-title">Baby Milestones</h1>
              <p className="header-subtitle">Cherish every first moment</p>
            </div>
          </div>
        </header>

        <main className="auth-panel">
          <section className="auth-card">
            <div className="auth-hero">✨</div>
            <h2 className="auth-title">Sign in with Google</h2>
            <p className="auth-copy">
              Create or join a shared family account so parents and caregivers can record milestones together.
            </p>
            <ul className="auth-benefits">
              <li>Shared family timeline</li>
              <li>Multiple caregivers on one account</li>
              <li>Safe Google sign-in for every family member</li>
            </ul>
            <button className="google-login-btn" onClick={() => login('google')}>
              <span className="google-icon">G</span>
              Continue with Google
            </button>
            <p className="auth-footnote">By continuing, your Google account becomes part of this family workspace.</p>
          </section>
        </main>
      </div>
    );
  }

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-content">
          <div className="header-icon">👶</div>
          <div>
            <h1 className="header-title">Baby Milestones</h1>
            <p className="header-subtitle">Cherish every first moment</p>
            <p className="family-account-line">{user ? `Signed in as ${user.name} · ${user.email}` : 'Viewing shared family timeline'}</p>
          </div>
        </div>
      </header>

      <div className="user-bar">
        <div className="user-chip">
          <span className="user-avatar">{user?.avatar ? <img src={user.avatar} alt={user.name} /> : '👤'}</span>
          <div className="user-meta">
            <span className="user-name">{user ? user.name : 'Grandparent viewer'}</span>
            <span className="user-email">{sharedAccess && !user ? 'Shared link access' : 'Family member account'}</span>
          </div>
        </div>
        <div className="timeline-share-actions">
          {user ? <button className="signout-btn" onClick={logout}>Sign Out</button> : null}
          {user ? (
            <button className="share-btn" onClick={handlePdfExport} disabled={pdfExporting || milestonesLoading}>
              {pdfExporting ? 'Preparing PDF...' : 'Download PDF'}
            </button>
          ) : null}
        </div>
      </div>

      {renderShareAccessBanner()}

      {user ? (
        <section className="share-tools-card">
          <div className="share-tools-copy">
            <h2>Share the timeline with grandparents</h2>
            <p>Create a view-only link that lets grandparents open the shared family timeline.</p>
          </div>
          <div className="share-tools-form">
            <input
              className="form-input share-title-input"
              value={shareTitle}
              onChange={(e) => setShareTitle(e.target.value)}
              placeholder="Grandparent Viewer"
              aria-label="Share link title"
            />
            <button className="share-link-btn" onClick={generateShareLink} disabled={!canCreateShareLink()}>
              Generate share link
            </button>
          </div>
          {currentShareLink ? (
            <div className="share-link-output">
              <label>Latest share link</label>
              <div className="share-link-row">
                <input className="form-input share-link-readonly" readOnly value={currentShareLink.url} />
                <button
                  className="share-copy-btn"
                  onClick={async () => {
                    try {
                      await navigator.clipboard.writeText(currentShareLink.url);
                      setShareLinkCopied(true);
                    } catch {
                      setShareLinkCopied(false);
                    }
                  }}
                >
                  Copy
                </button>
              </div>
              {shareLinkCopied ? <p className="share-success">Link copied to clipboard.</p> : null}
            </div>
          ) : null}
          {shareError ? <p className="share-error">{shareError}</p> : null}
        </section>
      ) : null}

      <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 === 'timeline' && <Timeline sharedView={sharedAccess && !user} />}
        {activeTab === 'suggestions' && user && <Suggestions />}
        {activeTab === 'suggestions' && !user ? (
          <section className="empty-state">
            <div className="empty-emoji">👪</div>
            <h2 className="empty-title">Shared view is timeline-only</h2>
            <p className="empty-text">Sign in to access milestone suggestions and manage your family workspace.</p>
          </section>
        ) : null}
      </main>

      <section ref={pdfRef} className="pdf-book-printable" aria-hidden="true">
        <div className="pdf-book-cover">
          <div className="pdf-book-cover-badge">Baby Milestones</div>
          <h1>Milestone Book</h1>
          <p>
            {user ? `Prepared for ${user.name}` : 'Shared family timeline'}
          </p>
          <p className="pdf-book-subtitle">A printable export of milestone text and photos</p>
        </div>

        <div className="pdf-book-page">
          <h2>Milestones</h2>
          {printableMilestones.length ? (
            <div className="pdf-milestone-list">
              {printableMilestones.map((milestone, index) => (
                <article className="pdf-milestone-card" key={milestone.id || `${milestone.title}-${index}`}>
                  <div className="pdf-milestone-header">
                    <div>
                      <h3>{milestone.title || 'Untitled milestone'}</h3>
                      <p>{milestone.date ? new Date(milestone.date).toLocaleDateString() : 'No date provided'}</p>
                    </div>
                    {milestone.category ? <span className="pdf-milestone-category">{milestone.category}</span> : null}
                  </div>
                  {milestone.photo ? (
                    <div className="pdf-milestone-photo">
                      <img src={milestone.photo} alt={milestone.title || 'Milestone photo'} />
                    </div>
                  ) : null}
                  {milestone.description ? <p className="pdf-milestone-description">{milestone.description}</p> : null}
                  {milestone.notes ? <p className="pdf-milestone-notes">{milestone.notes}</p> : null}
                </article>
              ))}
            </div>
          ) : (
            <p className="pdf-empty">No milestones to export yet.</p>
          )}
        </div>
      </section>
    </div>
  );
}

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