// screen-extra.jsx — Search results, multi-step Add Idea page, Notifications panel
const { useState: useExState, useMemo: useExMemo, useRef: useExRef, useEffect: useExEffect } = React;

/* ----------------------------------------------------------------
   Search results
----------------------------------------------------------------- */
function SearchResults({ query, setSearch, openIdea, openUser, votes, onVote }) {
  const Icon = window.Icon;
  const [tab, setTab] = useExState('ideas');
  const q = query.trim().toLowerCase();

  const ideaHits = useExMemo(() => !q ? [] : window.IDEAS.filter(i =>
    i.title.toLowerCase().includes(q) || i.category.toLowerCase().includes(q) || i.desc.toLowerCase().includes(q)), [q]);
  const userHits = useExMemo(() => {
    if (!q) return [];
    const seen = new Set();
    return window.IDEAS.filter(i => { const m = i.author.toLowerCase().includes(q); if (m && !seen.has(i.author)) { seen.add(i.author); return true; } return false; })
      .map(i => ({ name: i.author, role: i.role, av: i.avatar }));
  }, [q]);

  const list = tab === 'ideas' ? ideaHits : userHits;

  return (
    <div className="page fade-in">
      <div className="page-head"><div>
        <div className="page-title">Search</div>
        <div className="page-sub">{q ? <>Results for <b style={{ color: 'var(--ink-700)' }}>“{query}”</b> · {ideaHits.length + userHits.length} matches</> : 'Type to search ideas and people across IdeaMint.'}</div>
      </div></div>

      <div className="chip-row" style={{ marginBottom: 18 }}>
        <button className={`chip ${tab === 'ideas' ? 'active' : ''}`} onClick={() => setTab('ideas')}><Icon name="bulb" size={16} />Ideas <span style={{ opacity: .6 }}>{ideaHits.length}</span></button>
        <button className={`chip ${tab === 'users' ? 'active' : ''}`} onClick={() => setTab('users')}><Icon name="users" size={16} />People <span style={{ opacity: .6 }}>{userHits.length}</span></button>
      </div>

      {list.length === 0 ? (
        <div className="card" style={{ padding: 56, textAlign: 'center' }}>
          <div style={{ color: 'var(--ink-300)', display: 'grid', placeItems: 'center', marginBottom: 14 }}><Icon name="search" size={44} /></div>
          <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--ink-700)' }}>{q ? 'No matches found' : 'Start typing to search'}</div>
          <div className="muted" style={{ fontSize: 14, marginTop: 6 }}>{q ? 'Try a different keyword or check the People tab.' : 'Search by idea title, category, or owner name.'}</div>
          {q && <div style={{ marginTop: 18, display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>
            {['Technology', 'Carbon', 'AI', 'Mohamed'].map(s => <button key={s} className="chip" onClick={() => setSearch(s)}>{s}</button>)}
          </div>}
        </div>
      ) : tab === 'ideas' ? (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
          {ideaHits.map(i => (
            <div key={i.id} className="card" style={{ padding: 20, cursor: 'pointer' }} onClick={() => openIdea(i)}>
              <div className="spread" style={{ marginBottom: 10 }}><window.CatChip name={i.category} /><window.StatusBadge status={i.status} /></div>
              <div style={{ fontSize: 17, fontWeight: 800, color: 'var(--coral-500)', marginBottom: 7 }}>{i.title}</div>
              <p style={{ margin: '0 0 14px', fontSize: 13.5, color: 'var(--ink-500)', lineHeight: 1.55, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{i.desc}</p>
              <div className="spread">
                <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}><window.Avatar src={i.avatar} size={28} /><b style={{ fontSize: 13, color: 'var(--ink-700)' }}>{i.author}</b></div>
                <window.StatChips idea={i} vote={votes[i.id]} onVote={(d) => onVote(i.id, d)} />
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {userHits.map((u, idx) => (
            <div key={idx} className="card" style={{ padding: 22, textAlign: 'center', cursor: 'pointer' }} onClick={() => openUser(u)}>
              <window.Avatar src={u.av} size={72} />
              <div style={{ fontSize: 16, fontWeight: 800, color: 'var(--ink-900)', marginTop: 12 }}>{u.name}</div>
              <div className="muted" style={{ fontSize: 13, fontWeight: 600 }}>{u.role}</div>
              <button className="btn btn-outline btn-sm" style={{ marginTop: 14 }}>View profile</button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* ----------------------------------------------------------------
   Multi-step Add Idea (full page)
----------------------------------------------------------------- */
// Suggested tags per category
const SUGGESTED_TAGS = {
  Technology:  ['AI', 'automation', 'productivity', 'integration', 'data', 'cloud', 'mobile', 'analytics', 'security', 'API'],
  Business:    ['revenue', 'cost-saving', 'strategy', 'growth', 'efficiency', 'process', 'KPI', 'ROI', 'partnership', 'market'],
  Marketing:   ['branding', 'campaign', 'social-media', 'engagement', 'SEO', 'content', 'conversion', 'awareness', 'leads', 'CRM'],
  Design:      ['UX', 'UI', 'accessibility', 'design-system', 'prototype', 'usability', 'visual', 'workflow', 'user-research', 'mobile'],
  Operations:  ['logistics', 'supply-chain', 'compliance', 'workflow', 'quality', 'reporting', 'onboarding', 'SLA', 'cost', 'training'],
};
const DEFAULT_TAGS = ['innovation', 'team', 'pilot', 'research', 'improvement', 'customer', 'internal', 'cross-team', 'sustainability', 'agile'];

function AddIdeaPage({ goBack, onSubmit }) {
  const Icon = window.Icon;
  const [step, setStep] = useExState(0);
  const [form, setForm] = useExState({ title: '', cat: '', desc: '', tags: [], tagInput: '' });
  const [catOpen, setCatOpen] = useExState(false);
  const [tagOpen, setTagOpen] = useExState(false);
  const [aiState, setAiState] = useExState('idle'); // idle | thinking | done | error
  const [aiDraft, setAiDraft] = useExState('');     // streamed preview text
  const tagBoxRef = useExRef(null);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const addTag = (e) => { if (e.key === 'Enter' && form.tagInput.trim() && form.tags.length < 5) { e.preventDefault(); set('tags', [...form.tags, form.tagInput.trim()]); set('tagInput', ''); } };

  // Close tag dropdown on outside click
  useExEffect(() => {
    const handler = (e) => { if (tagBoxRef.current && !tagBoxRef.current.contains(e.target)) setTagOpen(false); };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  const suggestedTags = (SUGGESTED_TAGS[form.cat] || DEFAULT_TAGS).filter(t => !form.tags.includes(t));

  const generateWithAI = async () => {
    if (!form.title.trim()) return;
    setAiState('thinking');
    setAiDraft('');
    try {
      const result = await window.API.generateIdea(form.title, form.cat, form.desc);
      // Animate the text typing in
      const text = result.description || '';
      setAiDraft('');
      setAiState('done');
      // Typewriter effect
      let i = 0;
      const tick = () => {
        i += 3;
        setAiDraft(text.slice(0, i));
        if (i < text.length) requestAnimationFrame(tick);
        else set('desc', text);
      };
      requestAnimationFrame(tick);
      // Pre-fill suggested tags from AI if user hasn't added any
      if (result.tags?.length && form.tags.length === 0) {
        set('tags', result.tags.slice(0, 5));
      }
    } catch {
      setAiState('error');
      setTimeout(() => setAiState('idle'), 3000);
    }
  };

  const steps = ['Details', 'Media', 'Review'];
  const step0Valid = form.title.trim() && form.cat && form.desc.trim() && form.tags.length > 0;

  const next = () => setStep(s => Math.min(2, s + 1));
  const back = () => setStep(s => Math.max(0, s - 1));

  return (
    <div className="page fade-in" style={{ maxWidth: 820 }}>
      <button className="btn btn-ghost btn-sm" onClick={goBack} style={{ marginBottom: 18 }}><Icon name="close" size={16} />Discard</button>
      <div className="page-head"><div><div className="page-title">Add new idea</div><div className="page-sub">Share something worth building — it takes about a minute.</div></div></div>

      {/* stepper */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 0, marginBottom: 26 }}>
        {steps.map((s, i) => (
          <React.Fragment key={s}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 34, height: 34, borderRadius: 99, display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 14, flex: 'none',
                background: i < step ? 'var(--success)' : i === step ? 'var(--accent-600)' : 'var(--ink-100)',
                color: i <= step ? 'var(--on-accent)' : 'var(--ink-400)' }}>
                {i < step ? <Icon name="check" size={17} /> : i + 1}
              </div>
              <span style={{ fontSize: 14, fontWeight: 700, color: i === step ? 'var(--ink-900)' : 'var(--ink-400)', whiteSpace: 'nowrap' }}>{s}</span>
            </div>
            {i < steps.length - 1 && <div style={{ flex: 1, height: 2, background: i < step ? 'var(--success)' : 'var(--line)', margin: '0 14px', borderRadius: 2 }} />}
          </React.Fragment>
        ))}
      </div>

      <div className="card" style={{ padding: 28 }}>
        {step === 0 && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <PField label="General title" required>
              <input className="fld" value={form.title} onChange={e => set('title', e.target.value)} placeholder="Enter your idea's general title" />
            </PField>
            <PField label="Category" required>
              <div style={{ position: 'relative' }}>
                <button className="fld" onClick={() => setCatOpen(o => !o)} style={{ textAlign: 'left', display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: form.cat ? 'var(--ink-800)' : 'var(--ink-400)' }}>
                  {form.cat || 'Choose the category your idea relates to'}<Icon name="chevDown" size={18} />
                </button>
                {catOpen && (
                  <div style={{ position: 'absolute', top: 52, left: 0, right: 0, background: 'var(--pop-bg)', border: '1px solid var(--line)', borderRadius: 12, boxShadow: 'var(--sh-lg)', padding: 6, zIndex: 10 }}>
                    {window.CATEGORIES.map(c => (
                      <button key={c.name} onClick={() => { set('cat', c.name); setCatOpen(false); }} style={{ display: 'flex', alignItems: 'center', gap: 9, width: '100%', textAlign: 'left', padding: '10px 12px', borderRadius: 8, fontSize: 14, fontWeight: 600, color: 'var(--ink-700)' }}>
                        <span className="cat-dot" style={{ background: c.color }} />{c.name}
                      </button>
                    ))}
                  </div>
                )}
              </div>
            </PField>
            <PField label="Description" required>
              <div style={{ position: 'relative' }}>
                <textarea className="fld" rows={5}
                  value={aiState === 'done' && aiDraft ? aiDraft : form.desc}
                  onChange={e => { set('desc', e.target.value); if (aiState === 'done') setAiState('idle'); }}
                  placeholder="Enter your idea description in detail…"
                  style={{ resize: 'none', paddingBottom: 44, opacity: aiState === 'thinking' ? 0.5 : 1, transition: 'opacity .2s' }}
                />
                {/* AI generate button */}
                <div style={{ position: 'absolute', bottom: 10, left: 10, right: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <button
                    type="button"
                    onClick={generateWithAI}
                    disabled={!form.title.trim() || aiState === 'thinking'}
                    style={{
                      display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13, fontWeight: 700,
                      padding: '7px 14px', borderRadius: 99, border: 'none', cursor: form.title.trim() && aiState !== 'thinking' ? 'pointer' : 'not-allowed',
                      background: aiState === 'error' ? 'var(--danger-bg)' : aiState === 'done' ? 'var(--success-bg)' : 'linear-gradient(135deg, #6d5cf0, #0a66ff)',
                      color: aiState === 'error' ? 'var(--danger)' : aiState === 'done' ? 'var(--success)' : '#fff',
                      boxShadow: aiState === 'thinking' ? 'none' : '0 2px 8px rgba(109,92,240,.35)',
                      transition: 'all .2s',
                    }}
                  >
                    {aiState === 'thinking' ? (
                      <><span style={{ width: 14, height: 14, border: '2px solid rgba(255,255,255,.4)', borderTopColor: '#fff', borderRadius: '50%', animation: 'spin .7s linear infinite', display: 'inline-block' }} />Generating…</>
                    ) : aiState === 'done' ? (
                      <><Icon name="check" size={14} />Generated — edit freely</>
                    ) : aiState === 'error' ? (
                      <><Icon name="close" size={14} />Failed — try again</>
                    ) : (
                      <><span style={{ fontSize: 15 }}>✦</span> Generate with AI</>
                    )}
                  </button>
                  {!form.title.trim() && <span style={{ fontSize: 12, color: 'var(--ink-400)', fontStyle: 'italic' }}>Add a title first</span>}
                </div>
              </div>
            </PField>
            <PField label="Relevant tags (up to 5)" required>
              <div ref={tagBoxRef} style={{ position: 'relative' }}>
                <div className="fld" onClick={() => form.tags.length < 5 && setTagOpen(true)}
                  style={{ display: 'flex', flexWrap: 'wrap', gap: 7, height: 'auto', minHeight: 48, alignItems: 'center', padding: '8px 10px', cursor: 'text' }}>
                  {form.tags.map((t, i) => (
                    <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 700, color: 'var(--accent-700)', background: 'var(--accent-50)', padding: '5px 8px 5px 11px', borderRadius: 99 }}>
                      {t}<button onClick={(e) => { e.stopPropagation(); set('tags', form.tags.filter((_, idx) => idx !== i)); }} style={{ color: 'var(--accent-700)', display: 'grid' }}><Icon name="close" size={13} /></button>
                    </span>
                  ))}
                  {form.tags.length < 5 && (
                    <input value={form.tagInput}
                      onChange={e => set('tagInput', e.target.value)}
                      onKeyDown={addTag}
                      onFocus={() => setTagOpen(true)}
                      placeholder={form.tags.length === 0 ? 'Click or type to add tags…' : ''}
                      style={{ border: 'none', outline: 'none', flex: 1, minWidth: 120, fontSize: 14, background: 'none' }} />
                  )}
                </div>
                {/* Tag suggestions dropdown */}
                {tagOpen && suggestedTags.length > 0 && (
                  <div style={{ position: 'absolute', top: 'calc(100% + 6px)', left: 0, right: 0, background: 'var(--pop-bg)', border: '1px solid var(--line)', borderRadius: 12, boxShadow: 'var(--sh-lg)', padding: '10px 12px', zIndex: 20 }} className="fade-in">
                    <div style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--ink-400)', letterSpacing: '.05em', marginBottom: 8, textTransform: 'uppercase' }}>
                      {form.cat ? `Suggested for ${form.cat}` : 'Suggested tags'} — click to add
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      {suggestedTags.slice(0, 8).map(tag => (
                        <button key={tag} onClick={() => { if (form.tags.length < 5) set('tags', [...form.tags, tag]); }}
                          style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--accent-700)', background: 'var(--accent-50)', padding: '5px 12px', borderRadius: 99, border: '1.5px dashed var(--accent-200)', cursor: 'pointer', transition: 'all .12s' }}
                          onMouseEnter={e => { e.target.style.background = 'var(--accent-600)'; e.target.style.color = '#fff'; e.target.style.borderColor = 'transparent'; }}
                          onMouseLeave={e => { e.target.style.background = 'var(--accent-50)'; e.target.style.color = 'var(--accent-700)'; e.target.style.borderColor = 'var(--accent-200)'; }}>
                          + {tag}
                        </button>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </PField>
          </div>
        )}

        {step === 1 && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <PField label="Cover image">
              <PDrop hint="Drop a cover image or click to browse" icon="image" accept="image" onUploaded={url => set('coverImage', url)} />
            </PField>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <PField label="Additional images"><PDrop hint="Add more visuals" icon="image" small accept="image" onUploaded={url => set('extraImage', url)} /></PField>
              <PField label="Video walkthrough"><PDrop hint="Optional demo video" icon="upload" small accept="video" onUploaded={url => set('video', url)} /></PField>
            </div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', padding: 14, background: 'var(--accent-50)', borderRadius: 'var(--r)', color: 'var(--accent-700)' }}>
              <Icon name="bulb" size={20} /><span style={{ fontSize: 13.5, fontWeight: 600 }}>Ideas with a cover image get 2× more views on average. Media is optional — you can publish without it.</span>
            </div>
          </div>
        )}

        {step === 2 && (
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-400)', textTransform: 'uppercase', letterSpacing: '.05em', marginBottom: 6 }}>Preview</div>
            <div style={{ height: 170, borderRadius: 'var(--r)', background: `url(${window.HERO}) center/cover`, border: '1px solid var(--line)', marginBottom: 18 }} />
            <window.CatChip name={form.cat || 'Technology'} />
            <h2 style={{ margin: '8px 0 10px', fontSize: 23, fontWeight: 800, color: 'var(--coral-500)' }}>{form.title || 'Your idea title'}</h2>
            <p style={{ margin: '0 0 16px', fontSize: 14.5, color: 'var(--ink-600)', lineHeight: 1.65 }}>{form.desc || 'Your idea description will appear here.'}</p>
            <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap' }}>
              {(form.tags.length ? form.tags : ['idea']).map(t => <span key={t} style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--coral-600)', background: 'var(--coral-50)', padding: '6px 12px', borderRadius: 99 }}>{t}</span>)}
            </div>
            <div style={{ marginTop: 20, padding: 16, background: 'var(--success-bg)', borderRadius: 'var(--r)', display: 'flex', alignItems: 'center', gap: 11, color: 'var(--success)' }}>
              <Icon name="coins" size={22} /><span style={{ fontSize: 14, fontWeight: 700 }}>You'll earn +150 USD when this idea is published.</span>
            </div>
          </div>
        )}
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, marginTop: 20 }}>
        <button className="btn btn-ghost" onClick={step === 0 ? goBack : back}>{step === 0 ? 'Cancel' : 'Back'}</button>
        {step < 2
          ? <button className="btn btn-primary" onClick={next} disabled={step === 0 && !step0Valid} style={{ opacity: (step === 0 && !step0Valid) ? .5 : 1, cursor: (step === 0 && !step0Valid) ? 'not-allowed' : 'pointer', boxShadow: (step === 0 && !step0Valid) ? 'none' : undefined }}>Continue<Icon name="chevRight" size={17} /></button>
          : <button className="btn btn-primary" onClick={() => onSubmit({ title: form.title, description: form.desc, category: form.cat, tags: form.tags, coverImage: form.coverImage, extraImage: form.extraImage, video: form.video })}><Icon name="check" size={17} />Submit idea</button>}
      </div>
    </div>
  );
}
function PField({ label, required, children }) {
  return (<div><label style={{ display: 'block', fontSize: 13.5, fontWeight: 700, color: 'var(--ink-800)', marginBottom: 8 }}>{label} {required && <span style={{ color: 'var(--coral-500)' }}>*</span>}</label>{children}</div>);
}
function PDrop({ hint, icon, small, accept, onUploaded }) {
  const Icon = window.Icon;
  const inputRef = useExRef(null);
  const [state, setState] = useExState('idle'); // idle | uploading | done | error
  const [preview, setPreview] = useExState(null);
  const [dragging, setDragging] = useExState(false);

  const handleFile = async (file) => {
    if (!file) return;
    setState('uploading');
    // Show local preview immediately
    const isVideo = file.type.startsWith('video/');
    if (!isVideo) setPreview(URL.createObjectURL(file));
    try {
      const result = await window.API.uploadFile(file);
      if (result.url) {
        if (isVideo) setPreview(result.url);
        setState('done');
        onUploaded && onUploaded(result.url);
      } else {
        setState('error');
      }
    } catch {
      setState('error');
    }
  };

  const onDrop = (e) => {
    e.preventDefault();
    setDragging(false);
    const file = e.dataTransfer.files[0];
    if (file) handleFile(file);
  };

  const isVideo = accept === 'video';
  const acceptStr = isVideo ? 'video/mp4,video/mov,video/avi' : 'image/jpeg,image/png,image/gif,image/webp';

  return (
    <div
      onClick={() => state !== 'uploading' && inputRef.current?.click()}
      onDragOver={e => { e.preventDefault(); setDragging(true); }}
      onDragLeave={() => setDragging(false)}
      onDrop={onDrop}
      style={{
        border: `1.6px dashed ${dragging ? 'var(--accent-600)' : state === 'done' ? 'var(--success)' : state === 'error' ? 'var(--danger)' : 'var(--line-strong)'}`,
        borderRadius: 'var(--r)', padding: small ? '22px 14px' : '34px 14px',
        textAlign: 'center', cursor: state === 'uploading' ? 'wait' : 'pointer',
        transition: 'all .15s', position: 'relative', overflow: 'hidden',
        background: dragging ? 'var(--accent-50)' : state === 'done' ? 'var(--success-bg)' : 'transparent',
      }}>
      <input ref={inputRef} type="file" accept={acceptStr} style={{ display: 'none' }}
        onChange={e => handleFile(e.target.files[0])} />

      {/* Image preview */}
      {preview && !isVideo && (
        <div style={{ position: 'absolute', inset: 0, background: `url(${preview}) center/cover`, opacity: state === 'uploading' ? .5 : 1, transition: 'opacity .2s' }} />
      )}

      {/* Overlay content */}
      <div style={{ position: 'relative', zIndex: 1 }}>
        {state === 'uploading' ? (
          <>
            <div style={{ width: small ? 24 : 30, height: small ? 24 : 30, margin: '0 auto 8px', border: '3px solid var(--accent-200)', borderTopColor: 'var(--accent-600)', borderRadius: '50%', animation: 'spin .7s linear infinite' }} />
            <div style={{ fontSize: 13, color: 'var(--accent-700)', fontWeight: 600 }}>Uploading…</div>
          </>
        ) : state === 'done' ? (
          <>
            <div style={{ color: 'var(--success)', display: 'grid', placeItems: 'center', marginBottom: 6 }}><Icon name="check" size={small ? 22 : 28} /></div>
            <div style={{ fontSize: 13, color: 'var(--success)', fontWeight: 700 }}>Uploaded — click to replace</div>
          </>
        ) : state === 'error' ? (
          <>
            <div style={{ color: 'var(--danger)', display: 'grid', placeItems: 'center', marginBottom: 6 }}><Icon name="close" size={small ? 22 : 28} /></div>
            <div style={{ fontSize: 13, color: 'var(--danger)', fontWeight: 600 }}>Upload failed — click to retry</div>
          </>
        ) : (
          <>
            <div style={{ color: preview ? 'rgba(255,255,255,.9)' : 'var(--ink-400)', display: 'grid', placeItems: 'center', marginBottom: 8 }}>
              <Icon name={icon} size={small ? 24 : 30} />
            </div>
            <div style={{ fontSize: 13.5, color: preview ? 'rgba(255,255,255,.9)' : 'var(--ink-500)', fontWeight: 600 }}>{hint}</div>
            {!small && <div style={{ fontSize: 12, color: preview ? 'rgba(255,255,255,.7)' : 'var(--ink-400)', marginTop: 4 }}>PNG, JPG, GIF up to 10 MB</div>}
          </>
        )}
      </div>
    </div>
  );
}

/* ----------------------------------------------------------------
   Notifications panel (dropdown)
----------------------------------------------------------------- */
function NotificationsPanel({ open, onClose, items, onRead, onReadAll }) {
  const Icon = window.Icon;
  if (!open) return null;
  return (
    <>
      <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 60 }} />
      <div style={{ position: 'fixed', top: 70, right: 24, width: 380, maxWidth: '92vw', background: 'var(--pop-bg)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', boxShadow: 'var(--sh-lg)', zIndex: 70, overflow: 'hidden' }} className="fade-in">
        <div className="spread" style={{ padding: '16px 18px', borderBottom: '1px solid var(--line)' }}>
          <div style={{ fontSize: 16, fontWeight: 800, color: 'var(--ink-900)' }}>Notifications</div>
          <button onClick={onReadAll} style={{ fontSize: 13, fontWeight: 700, color: 'var(--accent-700)' }}>Mark all read</button>
        </div>
        <div style={{ maxHeight: 420, overflowY: 'auto' }}>
          {items.map(n => (
            <button key={n.id} onClick={() => onRead(n.id)} style={{ display: 'flex', gap: 12, width: '100%', textAlign: 'left', padding: '14px 18px', borderBottom: '1px solid var(--line)', background: n.unread ? 'var(--accent-50)' : 'transparent', transition: 'background .12s' }}>
              <div style={{ position: 'relative', flex: 'none' }}>
                <window.Avatar src={n.av} size={40} />
                <span style={{ position: 'absolute', right: -3, bottom: -3, width: 20, height: 20, borderRadius: 99, display: 'grid', placeItems: 'center', background: window.NOTIF_TINT[n.type], color: '#fff', border: '2px solid var(--surface)' }}><Icon name={window.NOTIF_ICON[n.type]} size={11} /></span>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, color: 'var(--ink-700)', lineHeight: 1.45 }}><b style={{ color: 'var(--ink-900)' }}>{n.who}</b> {n.text}</div>
                <div className="muted" style={{ fontSize: 12, marginTop: 3 }}>{n.ago} ago</div>
              </div>
              {n.unread && <span style={{ width: 8, height: 8, borderRadius: 99, background: 'var(--accent-600)', flex: 'none', marginTop: 6 }} />}
            </button>
          ))}
        </div>
      </div>
    </>
  );
}

Object.assign(window, { SearchResults, AddIdeaPage, NotificationsPanel });