// User Dashboard — full-screen workspace for signed-in users.
// Sections: Overview · Favorites · Recent · Subscription · API Keys · Settings.

window.UserDashboard = function UserDashboard({ user, role, entitlements, pricing, favorites, toggleFav, recent, onOpenTool, onClose }) {
  const [section, setSection] = React.useState('overview');
  const meta = user.user_metadata || {};
  const avatar = meta.avatar_url || meta.picture;
  const display = meta.username || meta.display_name || meta.full_name || meta.name || user.email || 'Account';

  // Data
  const [usage, setUsage] = React.useState([]);     // { tool_id, happened_at }
  const [usageStats, setUsageStats] = React.useState({ totalEvents: 0, uniqueTools: 0 });
  const [topTools, setTopTools] = React.useState([]); // { tool_id, events, last_used }
  const [keys, setKeys] = React.useState([]);
  const [profile, setProfile] = React.useState({ display_name: '', bio: '' });
  const [newKey, setNewKey] = React.useState('');

  const sb = window.getSupabase?.();

  React.useEffect(() => {
    if (!sb) return;
    // Usage last 30d
    const since = new Date(Date.now() - 30 * 86400_000).toISOString();
    sb.from('tool_usage').select('tool_id, happened_at').gte('happened_at', since)
      .order('happened_at', { ascending: false }).limit(200).then(({ data }) => {
        if (!Array.isArray(data)) return;
        setUsage(data);
        setUsageStats({ totalEvents: data.length, uniqueTools: new Set(data.map((r) => r.tool_id)).size });
      });
    // Per-tool breakdown (90 days)
    sb.rpc('my_tool_stats', { p_days: 90 }).then(({ data }) => setTopTools(data || []));
    // API keys
    sb.from('api_keys').select('id, label, created_at, last_used_at').order('created_at', { ascending: false })
      .then(({ data }) => setKeys(data || []));
    // Profile
    sb.from('profiles').select('display_name, bio').eq('user_id', user.id).maybeSingle()
      .then(({ data }) => { if (data) setProfile(data); });
  }, [user.id, section]);

  const favTools = [...favorites].map((id) => window.TOOLS.find((t) => t.id === id)).filter(Boolean);
  const recentTools = recent.map((id) => window.TOOLS.find((t) => t.id === id)).filter(Boolean);
  const allSaves = window.MMSaves?.useAllSaves?.() || {};
  const savesEntries = Object.entries(allSaves)
    .map(([toolId, list]) => ({ toolId, list, tool: window.TOOLS.find((t) => t.id === toolId) }))
    .filter((g) => g.tool && Array.isArray(g.list) && g.list.length > 0);
  const savesTotal = savesEntries.reduce((s, g) => s + g.list.length, 0);

  const isLocked = (t) => {
    if (!pricing) return false;
    const p = pricing[t.id];
    if (!p || !p.active || p.tier === 'free') return false;
    return !entitlements.includes(p.tier);
  };

  // ---------- Sections ----------
  const renderOverview = () => (
    <>
      <div className="dash-hero">
        <div>
          <div className="dash-greeting">Welcome back, {display.split(' ')[0]}.</div>
          <p className="dash-sub">Your MiniMagics workspace — favorites, activity, and account in one place.</p>
        </div>
        {avatar && <img src={avatar} alt="" className="dash-avatar-lg" />}
      </div>

      <div className="dash-kpis">
        <KPI label="Favorites"   value={favTools.length} icon="sparkle" />
        <KPI label="Saved calcs" value={savesTotal} icon="check" />
        <KPI label="Tools used (30d)" value={usageStats.uniqueTools} icon="grid" />
        <KPI label="Events (30d)" value={usageStats.totalEvents} icon="bolt" />
        <KPI label="Entitlements" value={entitlements.length ? entitlements.map((t) => t.toUpperCase()).join(' · ') : 'Free'} icon="lock" />
      </div>

      <div className="dash-row">
        <div className="dash-card">
          <div className="dash-card-head"><h3>Favorites</h3><button className="dash-linkbtn" onClick={() => setSection('favorites')}>See all →</button></div>
          {favTools.length === 0
            ? <div className="dash-empty">Star tools from the home page to pin them here.</div>
            : <div className="dash-mini-grid">{favTools.slice(0, 6).map((t) => <MiniToolCard key={t.id} tool={t} onClick={() => onOpenTool(t)} locked={isLocked(t)} />)}</div>}
        </div>
        <div className="dash-card">
          <div className="dash-card-head"><h3>Recent</h3><button className="dash-linkbtn" onClick={() => setSection('recent')}>See all →</button></div>
          {recentTools.length === 0
            ? <div className="dash-empty">Nothing yet — open a tool to start your history.</div>
            : <div className="dash-mini-grid">{recentTools.map((t) => <MiniToolCard key={t.id} tool={t} onClick={() => onOpenTool(t)} locked={isLocked(t)} />)}</div>}
        </div>
      </div>

      {topTools.length > 0 && (
        <div className="dash-card" style={{ marginTop: 14 }}>
          <div className="dash-card-head">
            <h3>Your top tools · last 90 days</h3>
            <span className="cmp-meta">{topTools.reduce((s, r) => s + Number(r.events), 0)} events total</span>
          </div>
          <div className="admin-bars">
            {topTools.slice(0, 10).map((r) => {
              const t = window.TOOLS.find((x) => x.id === r.tool_id);
              if (!t) return null;
              const cat = window.CATEGORIES.find((c) => c.id === t.cat);
              const max = Number(topTools[0].events) || 1;
              const pct = Math.round((Number(r.events) / max) * 100);
              return (
                <div key={r.tool_id} className="admin-bar-row" onClick={() => onOpenTool(t)} style={{ cursor: 'pointer' }}>
                  <div className="admin-bar-label" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div className="admin-tool-icon" style={{ background: cat.soft, color: cat.tint, width: 22, height: 22, borderRadius: 6 }}>
                      <window.Icon name={t.icon} size={12} />
                    </div>
                    {t.name}
                  </div>
                  <div className="admin-bar-track">
                    <div className="admin-bar-fill" style={{ width: pct + '%', background: `linear-gradient(90deg, ${cat.tint}, ${cat.tint}cc)` }} />
                  </div>
                  <div className="admin-bar-v">{r.events} <span className="cmp-meta">· last {new Date(r.last_used).toLocaleDateString()}</span></div>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </>
  );

  const renderFavorites = () => (
    <>
      <h2 className="dash-h2">Your favorites</h2>
      <p className="dash-sub">{favTools.length} starred tool{favTools.length === 1 ? '' : 's'} · click the sparkle to remove.</p>
      {favTools.length === 0 ? (
        <div className="dash-empty-lg">Nothing starred yet. Find tools on the home page and tap the sparkle.</div>
      ) : (
        <div className="dash-grid">
          {favTools.map((t) => (
            <FullToolCard key={t.id} tool={t} onClick={() => onOpenTool(t)} onUnstar={() => toggleFav(t.id)} locked={isLocked(t)} />
          ))}
        </div>
      )}
    </>
  );

  const renderRecent = () => (
    <>
      <h2 className="dash-h2">Recently used</h2>
      <p className="dash-sub">Tools from the past 30 days, newest first.</p>
      {usage.length === 0 ? (
        <div className="dash-empty-lg">No activity yet. Open a tool to start tracking.</div>
      ) : (
        <div className="dash-table">
          {usage.map((row, i) => {
            const t = window.TOOLS.find((x) => x.id === row.tool_id);
            if (!t) return null;
            const cat = window.CATEGORIES.find((c) => c.id === t.cat);
            return (
              <div className="dash-row-item" key={i} onClick={() => onOpenTool(t)}>
                <div className="dash-row-icon" style={{ background: cat.soft, color: cat.tint }}>
                  <window.Icon name={t.icon} size={16} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="dash-row-title">{t.name}</div>
                  <div className="dash-row-sub">{cat.name}</div>
                </div>
                <div className="cmp-meta">{new Date(row.happened_at).toLocaleString()}</div>
              </div>
            );
          })}
        </div>
      )}
    </>
  );

  const renderSubscription = () => {
    const tier = entitlements.includes('premium') ? 'premium' : 'free';
    const label = tier === 'premium' ? 'Premium' : 'Free';
    return (
      <>
        <h2 className="dash-h2">Subscription</h2>
        <div className="dash-sub-card">
          <div className={`dash-tier-chip dash-tier-${tier}`}>{label.toUpperCase()}</div>
          <h3 style={{ marginTop: 14 }}>You're on the {label} tier</h3>
          <p className="cmp-meta">
            {tier === 'free'
              ? 'Unlock Premium tools by upgrading. Payment flow is coming soon; an admin can grant access for now.'
              : 'Premium unlocks every paid tool — including AI-heavy ones like Remove Background, Face Recognition and Upscale.'}
          </p>
          {tier !== 'premium' && (
            <button className="btn btn-primary" disabled style={{ marginTop: 14 }}>
              <window.Icon name="bolt" size={14} /> Upgrade (coming soon)
            </button>
          )}
        </div>

        <h3 className="dash-h3" style={{ marginTop: 28 }}>What's included</h3>
        <div className="dash-tiers">
          {['free', 'premium'].map((t) => (
            <div key={t} className={`dash-tier-box ${tier === t ? 'dash-tier-box-on' : ''}`}>
              <div className={`dash-tier-chip dash-tier-${t}`}>{t.toUpperCase()}</div>
              <ul>
                {t === 'free' && <>
                  <li>All free tools (40+)</li>
                  <li>Batch mode · Before/After slider</li>
                  <li>Favorites + saved calculations sync</li>
                </>}
                {t === 'premium' && <>
                  <li>Everything in Free</li>
                  <li>All featured + AI tools (Merge PDF, HEIC→JPG, Remove BG, Face Recognition, Upscale…)</li>
                  <li>Priority API quota · higher batch size limits</li>
                </>}
              </ul>
            </div>
          ))}
        </div>
      </>
    );
  };

  const createKey = async () => {
    if (!sb) return;
    const { data, error } = await sb.rpc('create_api_key', { p_label: 'Dashboard · ' + new Date().toISOString().slice(0, 10) });
    if (error) return alert(error.message);
    setNewKey(data);
    const { data: rows } = await sb.from('api_keys').select('id, label, created_at, last_used_at').order('created_at', { ascending: false });
    setKeys(rows || []);
  };
  const revokeKey = async (id) => {
    if (!sb || !confirm('Revoke this key?')) return;
    await sb.from('api_keys').delete().eq('id', id);
    setKeys((prev) => prev.filter((k) => k.id !== id));
  };

  const renderKeys = () => (
    <>
      <h2 className="dash-h2">API Keys</h2>
      <p className="dash-sub">Use keys in scripts and servers. Raw value is shown once; we store only the SHA-256.</p>
      <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
        <button className="btn btn-primary" onClick={createKey}><window.Icon name="sparkle" size={14} /> Create new key</button>
      </div>
      {newKey && (
        <div className="dash-keybox">
          <div className="cmp-meta" style={{ marginBottom: 6 }}>Copy this key NOW — it won't be shown again.</div>
          <code className="user-menu-key">{newKey}</code>
          <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
            <button className="btn btn-secondary" onClick={() => navigator.clipboard.writeText(newKey)}><window.Icon name="doc" size={14} /> Copy</button>
            <button className="btn btn-secondary" onClick={() => setNewKey('')}>Done</button>
          </div>
        </div>
      )}
      {keys.length === 0 ? (
        <div className="dash-empty-lg">No keys yet.</div>
      ) : (
        <div className="dash-table">
          {keys.map((k) => (
            <div key={k.id} className="dash-row-item">
              <div className="dash-row-icon" style={{ background: 'var(--id-brand-blue-soft)', color: 'var(--id-brand-blue)' }}>
                <window.Icon name="lock" size={14} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="dash-row-title">{k.label || '(no label)'}</div>
                <div className="dash-row-sub">
                  Created {new Date(k.created_at).toLocaleDateString()}
                  {k.last_used_at ? ' · last used ' + new Date(k.last_used_at).toLocaleDateString() : ' · never used'}
                </div>
              </div>
              <button className="btn btn-secondary" onClick={() => revokeKey(k.id)}>Revoke</button>
            </div>
          ))}
        </div>
      )}
    </>
  );

  const saveProfile = async () => {
    if (!sb) return;
    await sb.from('profiles').upsert({ user_id: user.id, ...profile, updated_at: new Date().toISOString() });
    alert('Saved');
  };

  const renderSaved = () => (
    <>
      <h2 className="dash-h2">Saved calculations</h2>
      <p className="dash-sub">
        Pace-calculator runs and other quick computations you saved. {savesTotal} entr{savesTotal === 1 ? 'y' : 'ies'} ·
        synced to this account.
      </p>
      {savesEntries.length === 0 ? (
        <div className="dash-empty-lg">
          Nothing saved yet. Open a sports tool (e.g. <a href="#/sports" onClick={(e) => { e.preventDefault(); onClose(); window.mmNavigate('sports'); }}>Pace Calculator</a>), run it, then tap "Save calculation".
        </div>
      ) : (
        <div className="dash-saves-groups">
          {savesEntries.map((g) => {
            const cat = window.CATEGORIES.find((c) => c.id === g.tool.cat) || window.CATEGORIES[0];
            return (
              <div key={g.toolId} className="dash-card dash-saves-group">
                <div className="dash-card-head">
                  <h3 style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span className="dash-row-icon" style={{ background: cat.soft, color: cat.tint, width: 28, height: 28 }}>
                      <window.Icon name={g.tool.icon} size={14} />
                    </span>
                    {g.tool.name}
                    <span className="cmp-meta" style={{ fontWeight: 500 }}>· {g.list.length} save{g.list.length === 1 ? '' : 's'}</span>
                  </h3>
                  <button className="dash-linkbtn" onClick={() => { onClose(); onOpenTool(g.tool); }}>
                    Open tool →
                  </button>
                </div>
                <div className="dash-saves-list">
                  {g.list.map((s) => (
                    <div key={s.id} className="dash-save-row">
                      <div className="dash-save-main">
                        <div className="dash-save-label">{s.label || 'Untitled'}</div>
                        <div className="dash-save-summary">{s.data?.summary || ''}</div>
                      </div>
                      <div className="dash-save-time cmp-meta">
                        {new Date(s.ts).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })}
                      </div>
                      <div className="dash-save-actions">
                        <button className="filter-pill" title="Re-open in tool with these values"
                                onClick={() => {
                                  window.MMSavesPreload = window.MMSavesPreload || {};
                                  window.MMSavesPreload[g.toolId] = s.data;
                                  onClose();
                                  onOpenTool(g.tool);
                                }}>
                          <window.Icon name="upload" size={12} style={{ transform: 'rotate(180deg)' }} /> Load
                        </button>
                        <button className="icon-btn" title="Delete"
                                onClick={() => window.MMSaves.remove(g.toolId, s.id)}>
                          <window.Icon name="x" size={14} />
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </>
  );

  // Privacy / ad preferences — synced with MMConsent via event listener.
  const [adConsent, setAdConsent] = React.useState(() => window.MMConsent?.has('advertising') || false);
  const [analyticsConsent, setAnalyticsConsent] = React.useState(() => window.MMConsent?.has('analytics') || false);
  const [errorsConsent, setErrorsConsent] = React.useState(() => window.MMConsent?.has('errors') || false);

  React.useEffect(() => {
    const sync = () => {
      setAdConsent(window.MMConsent?.has('advertising') || false);
      setAnalyticsConsent(window.MMConsent?.has('analytics') || false);
      setErrorsConsent(window.MMConsent?.has('errors') || false);
    };
    window.addEventListener('mm-consent-changed', sync);
    return () => window.removeEventListener('mm-consent-changed', sync);
  }, []);

  const updateConsent = (patch) => {
    const next = {
      analytics: patch.analytics !== undefined ? patch.analytics : analyticsConsent,
      errors: patch.errors !== undefined ? patch.errors : errorsConsent,
      advertising: patch.advertising !== undefined ? patch.advertising : adConsent,
    };
    window.MMConsent?.set(next);
  };

  const renderSettings = () => (
    <>
      <h2 className="dash-h2">Account settings</h2>
      <div className="dash-form">
        <div className="mini-field">
          <label className="mini-label">Display name</label>
          <input className="mini-input" value={profile.display_name || ''}
                 onChange={(e) => setProfile({ ...profile, display_name: e.target.value })}
                 placeholder={display} />
        </div>
        <div className="mini-field">
          <label className="mini-label">Bio</label>
          <textarea className="mini-input mini-textarea" rows={3} value={profile.bio || ''}
                    onChange={(e) => setProfile({ ...profile, bio: e.target.value })}
                    placeholder="A short description — shown on shared pages (coming soon)." />
        </div>
        <div className="mini-field">
          <label className="mini-label">Email (from Google)</label>
          <input className="mini-input" value={user.email || ''} disabled />
        </div>
        <button className="btn btn-primary" onClick={saveProfile}>Save</button>
      </div>

      <h3 className="dash-h3" style={{ marginTop: 28 }}>Privacy &amp; ad preferences</h3>
      <p className="dash-sub" style={{ marginBottom: 14 }}>
        Control which optional features are active. Changes take effect immediately.
      </p>
      <div className="dash-sub-card">
        <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', padding: '8px 0', borderBottom: '1px solid var(--id-border)' }}>
          <input type="checkbox" checked={adConsent}
                 onChange={(e) => updateConsent({ advertising: e.target.checked })} />
          <div>
            <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--id-text)' }}>
              Show ads
              <span style={{
                marginLeft: 8, fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
                padding: '2px 6px', borderRadius: 4,
                background: adConsent ? 'rgba(16,128,90,0.1)' : 'var(--id-surface-alt)',
                color: adConsent ? '#10805a' : 'var(--id-text-muted)',
              }}>{adConsent ? 'ON' : 'OFF'}</span>
            </div>
            <div className="cmp-meta">Google AdSense personalised ads. Turning this off removes all ads from MiniMagics.</div>
          </div>
        </label>
        <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', padding: '8px 0', borderBottom: '1px solid var(--id-border)' }}>
          <input type="checkbox" checked={analyticsConsent}
                 onChange={(e) => updateConsent({ analytics: e.target.checked })} />
          <div>
            <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--id-text)' }}>
              Analytics
              <span style={{
                marginLeft: 8, fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
                padding: '2px 6px', borderRadius: 4,
                background: analyticsConsent ? 'rgba(16,128,90,0.1)' : 'var(--id-surface-alt)',
                color: analyticsConsent ? '#10805a' : 'var(--id-text-muted)',
              }}>{analyticsConsent ? 'ON' : 'OFF'}</span>
            </div>
            <div className="cmp-meta">Anonymous tool usage events to help us improve MiniMagics.</div>
          </div>
        </label>
        <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', padding: '8px 0' }}>
          <input type="checkbox" checked={errorsConsent}
                 onChange={(e) => updateConsent({ errors: e.target.checked })} />
          <div>
            <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--id-text)' }}>
              Error reports
              <span style={{
                marginLeft: 8, fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
                padding: '2px 6px', borderRadius: 4,
                background: errorsConsent ? 'rgba(16,128,90,0.1)' : 'var(--id-surface-alt)',
                color: errorsConsent ? '#10805a' : 'var(--id-text-muted)',
              }}>{errorsConsent ? 'ON' : 'OFF'}</span>
            </div>
            <div className="cmp-meta">Crash logs so we can fix bugs faster.</div>
          </div>
        </label>
      </div>
    </>
  );

  // API Keys section is currently disabled — re-enable by adding back the
  // `keys: { title: 'API Keys', ..., render: renderKeys }` entry below.
  const section_map = {
    overview: { title: 'Overview', icon: 'grid', render: renderOverview },
    favorites: { title: 'Favorites', icon: 'sparkle', render: renderFavorites },
    saved: { title: 'Saved', icon: 'check', render: renderSaved },
    recent: { title: 'Recent', icon: 'rotate', render: renderRecent },
    subscription: { title: 'Subscription', icon: 'bolt', render: renderSubscription },
    settings: { title: 'Settings', icon: 'edit', render: renderSettings },
  };

  return (
    <div className="dash-shell">
      <aside className="dash-side">
        <button className="dash-back" onClick={onClose} title="Back to MiniMagics">
          <window.Icon name="arrow" size={14} style={{ transform: 'rotate(180deg)' }} />
          <span>MiniMagics</span>
        </button>
        <div className="dash-side-head">
          {avatar && <img src={avatar} alt="" className="dash-avatar-sm" />}
          <div style={{ minWidth: 0 }}>
            <div className="dash-side-name">{display}</div>
            <div className="dash-side-email">{user.email}</div>
          </div>
        </div>
        <nav className="dash-nav">
          {Object.entries(section_map).map(([key, s]) => (
            <button key={key} className={`dash-nav-item ${section === key ? 'on' : ''}`}
                    onClick={() => setSection(key)}>
              <window.Icon name={s.icon} size={14} />
              <span>{s.title}</span>
            </button>
          ))}
        </nav>
        {role === 'admin' && (
          <button className="dash-nav-item dash-admin-link" onClick={() => window.mmNavigate('admin')}>
            <window.Icon name="bolt" size={14} />
            <span>Admin Panel</span>
            <span className="dash-nav-badge">ADMIN</span>
          </button>
        )}
      </aside>

      <main className="dash-main">
        {section_map[section].render()}
      </main>
    </div>
  );
};

// ---------- small presentational helpers ----------
function KPI({ label, value, icon }) {
  return (
    <div className="dash-kpi">
      <div className="dash-kpi-icon"><window.Icon name={icon} size={14} /></div>
      <div>
        <div className="dash-kpi-value">{value}</div>
        <div className="dash-kpi-label">{label}</div>
      </div>
    </div>
  );
}

function MiniToolCard({ tool, onClick, locked }) {
  const cat = window.CATEGORIES.find((c) => c.id === tool.cat);
  return (
    <button className="dash-mini-card" onClick={onClick}>
      <div className="dash-mini-icon" style={{ background: cat.soft, color: cat.tint }}>
        <window.Icon name={tool.icon} size={16} />
      </div>
      <div className="dash-mini-body">
        <div className="dash-mini-name">{tool.name} {locked && <window.Icon name="lock" size={10} />}</div>
        <div className="dash-mini-cat">{cat.name}</div>
      </div>
    </button>
  );
}

function FullToolCard({ tool, onClick, onUnstar, locked }) {
  const cat = window.CATEGORIES.find((c) => c.id === tool.cat);
  return (
    <div className="dash-full-card" onClick={onClick}>
      <button className="dash-full-star" onClick={(e) => { e.stopPropagation(); onUnstar(); }} title="Unstar">
        <window.Icon name="sparkle" size={14} strokeWidth={2.2} />
      </button>
      <div className="dash-full-icon" style={{ background: cat.soft, color: cat.tint }}>
        <window.Icon name={tool.icon} size={20} />
      </div>
      <div className="dash-full-name">
        {tool.name} {locked && <window.Icon name="lock" size={12} />}
      </div>
      <div className="dash-full-desc">{tool.desc}</div>
    </div>
  );
}