// screen-misc.jsx — My ideas (grid/list), Favorite, Settings
const { useState: useMiscState, useEffect: useMiscEffect } = React;

function IdeaCard({ idea, votes, onVote, openIdea }) {
  return (
    <div className="card" style={{ overflow: 'hidden', cursor: 'pointer', display: 'flex', flexDirection: 'column' }} onClick={() => openIdea(idea)}>
      <div style={{ height: 150, background: `url(${window.HERO}) center/cover`, position: 'relative' }}>
        <div style={{ position: 'absolute', top: 12, left: 12 }}><window.StatusBadge status={idea.status} /></div>
      </div>
      <div style={{ padding: 18, flex: 1, display: 'flex', flexDirection: 'column' }}>
        <window.CatChip name={idea.category} />
        <div style={{ fontSize: 17, fontWeight: 800, color: 'var(--coral-500)', margin: '8px 0 6px', letterSpacing: '-.01em' }}>{idea.title}</div>
        <p style={{ margin: 0, fontSize: 13.5, color: 'var(--ink-500)', lineHeight: 1.55, flex: 1, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{idea.desc}</p>
        <div className="spread" style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--line)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}><window.Avatar src={idea.avatar} size={28} /><b style={{ fontSize: 13, color: 'var(--ink-700)' }}>{idea.author}</b></div>
          <window.StatChips idea={idea} vote={votes[idea.id]} onVote={(d) => onVote(idea.id, d)} />
        </div>
      </div>
    </div>
  );
}

function ListShell({ title, sub, ideas, votes, onVote, openIdea }) {
  const Icon = window.Icon;
  const [view, setView] = useMiscState('grid');
  return (
    <div className="page fade-in">
      <div className="page-head">
        <div><div className="page-title">{title}</div><div className="page-sub">{sub}</div></div>
        <div style={{ display: 'flex', gap: 4, background: 'var(--ink-50)', padding: 4, borderRadius: 12 }}>
          {['grid', 'list'].map(v => (
            <button key={v} onClick={() => setView(v)} style={{ width: 40, height: 36, borderRadius: 9, display: 'grid', placeItems: 'center', background: view === v ? 'var(--surface)' : 'transparent', color: view === v ? 'var(--accent-700)' : 'var(--ink-400)', boxShadow: view === v ? 'var(--sh-xs)' : 'none' }}>
              <Icon name={v === 'grid' ? 'grid' : 'filter'} size={19} />
            </button>
          ))}
        </div>
      </div>
      {view === 'grid' ? (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {ideas.map(i => <IdeaCard key={i.id} idea={i} votes={votes} onVote={onVote} openIdea={openIdea} />)}
        </div>
      ) : (
        <div className="table-card">
          <table className="tbl">
            <thead><tr><th style={{ width: 56 }}>#</th><th>Idea title</th><th>Category</th><th>Status</th><th>Statistics</th></tr></thead>
            <tbody>
              {ideas.map(i => (
                <tr key={i.id} className="clickable" onClick={() => openIdea(i)}>
                  <td className="rank tnum">#{i.rank}</td>
                  <td><span className="idea-link">{i.title}</span></td>
                  <td><window.CatChip name={i.category} /></td>
                  <td><window.StatusBadge status={i.status} /></td>
                  <td><window.StatChips idea={i} vote={votes[i.id]} onVote={(d) => onVote(i.id, d)} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

function MyIdeasScreen({ currentUser, votes, onVote, openIdea }) {
  const [ideas, setIdeas] = useMiscState([]);
  useMiscEffect(() => {
    if (!currentUser?.id) return;
    window.API.getUser(currentUser.id)
      .then(d => setIdeas((d.ideas || []).map(i => ({
        ...i, up: Number(i.up_votes ?? 0), down: Number(i.down_votes ?? 0),
        comments: Number(i.comment_count ?? 0), rank: Number(i.rank ?? i.id),
        desc: i.description || '',
      }))))
      .catch(() => setIdeas(window.IDEAS.slice(0, 6)));
  }, [currentUser?.id]);
  return <ListShell title="My ideas" sub="Every idea you've submitted, with its current review status." ideas={ideas} votes={votes} onVote={onVote} openIdea={openIdea} />;
}
function FavoriteScreen(props) {
  return <ListShell title="Favorite ideas" sub="Ideas you've bookmarked to revisit and support." ideas={window.IDEAS.filter((_, i) => i % 3 === 0)} {...props} />;
}

function SettingsScreen({ onLogout }) {
  const Icon = window.Icon;
  const [toggles, setToggles] = useMiscState({ email: true, push: false, weekly: true, mentions: true });
  const t = (k) => setToggles(s => ({ ...s, [k]: !s[k] }));
  const rows = [
    ['email', 'Email notifications', 'Get notified when your ideas receive activity'],
    ['push', 'Push notifications', 'Real-time alerts in your browser'],
    ['weekly', 'Weekly digest', 'A Monday summary of top ideas across teams'],
    ['mentions', 'Mentions & replies', 'When someone replies to your comments'],
  ];
  return (
    <div className="page fade-in">
      <div className="page-head"><div><div className="page-title">Settings</div><div className="page-sub">Control how IdeaMint keeps you in the loop.</div></div></div>
      <div className="card" style={{ padding: 8, maxWidth: 720 }}>
        {rows.map(([k, label, desc], i) => (
          <div key={k} className="spread" style={{ padding: '18px 18px', borderBottom: i < rows.length - 1 ? '1px solid var(--line)' : 'none' }}>
            <div><div style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink-900)' }}>{label}</div><div className="muted" style={{ fontSize: 13, marginTop: 3 }}>{desc}</div></div>
            <button onClick={() => t(k)} style={{ width: 48, height: 28, borderRadius: 99, background: toggles[k] ? 'var(--accent-600)' : 'var(--ink-200)', position: 'relative', transition: 'background .2s' }}>
              <span style={{ position: 'absolute', top: 3, left: toggles[k] ? 23 : 3, width: 22, height: 22, borderRadius: 99, background: '#fff', boxShadow: 'var(--sh-sm)', transition: 'left .2s' }} />
            </button>
          </div>
        ))}
      </div>
      {onLogout && (
        <div style={{ marginTop: 24, maxWidth: 720 }}>
          <button onClick={onLogout} className="btn" style={{ background: 'var(--danger-bg)', color: 'var(--danger)', border: '1px solid var(--danger)' }}>
            Sign out of IdeaMint
          </button>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { MyIdeasScreen, FavoriteScreen, SettingsScreen });