// Sidebar + Dashboard screen

const { CATEGORIES: DASH_CATS, STATUSES: DASH_STATUSES, STATUS_ORDER: DASH_STATUS_ORDER } = window.KS_DATA;

function Sidebar({ articles, currentNav, onNav, onNewArticle, imagesUsed, imagesQuota, styleRefCount, onSetStyleReference }) {
  const counts = {
    all:    articles.length,
    drafts: articles.filter(a => a.status === 'draft').length,
    ready:  articles.filter(a => a.status === 'ready').length,
    inprod: articles.filter(a => a.status === 'in_prod').length,
  };
  const navItem = (id, label, iconName, count) => (
    <button className={"nav-item" + (currentNav === id ? ' active' : '')} onClick={() => onNav(id)}>
      <Icon name={iconName} size={15} />
      <span>{label}</span>
      {count != null && <span className="count">{count}</span>}
    </button>
  );
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">K</div>
        <div>
          <div className="brand-name">Kidden Studio</div>
          <div className="brand-sub">Insights content tool</div>
        </div>
      </div>

      <button className="new-article-btn" onClick={onNewArticle}>
        <Icon name="plus" size={14} />
        <span>New article</span>
      </button>

      <div className="nav-section-label">Articles</div>
      {navItem('home',   'Home',         'home')}
      {navItem('all',    'All articles', 'list',         counts.all)}
      {navItem('drafts', 'Drafts',       'edit',         counts.drafts)}
      {navItem('ready',  'Ready',        'check-circle', counts.ready)}
      {navItem('inprod', 'In production','pkg',          counts.inprod)}

      <div className="nav-section-label">Workspace</div>
      {navItem('exports',  'Exports',  'download')}
      {navItem('team',     'Team',     'users')}
      {navItem('settings', 'Settings', 'gear')}

      <div className="sidebar-spacer" />

      <div className="quota-card">
        <div className="quota-row">
          <span className="quota-label">Image quota</span>
          <span className="quota-val">{imagesUsed} / {imagesQuota}</span>
        </div>
        <div className="quota-bar">
          <div className="quota-bar-fill" style={{ width: `${(imagesUsed / imagesQuota) * 100}%` }} />
        </div>
        <div className="quota-note">Gemini free tier · resets midnight PT</div>
        <button
          className="btn-sm"
          onClick={onSetStyleReference}
          style={{ marginTop: 8, width: '100%' }}
        >
          {styleRefCount > 0 ? `✓ ${styleRefCount} reference${styleRefCount > 1 ? 's' : ''} loaded` : 'Set style reference'}
        </button>
      </div>

      <div className="user-row">
        <div className="avatar">VK</div>
        <div>
          <div className="user-name">Viktoriia K.</div>
          <div className="user-role">Product designer</div>
        </div>
      </div>
    </aside>
  );
}

function relSort(a, b) {
  // status order then creative_count desc
  const ai = DASH_STATUS_ORDER.indexOf(a.status);
  const bi = DASH_STATUS_ORDER.indexOf(b.status);
  if (ai !== bi) return ai - bi;
  return (b.creative_count || 0) - (a.creative_count || 0);
}

function Dashboard({ articles, navView, onNew, onOpen, onImport, onDelete, onExport }) {
  const [statusFilter, setStatusFilter] = useState('all');
  const [catFilter, setCatFilter] = useState('all');
  const [search, setSearch] = useState('');
  const [selected, setSelected] = useState(new Set());
  const [sortKey, setSortKey] = useState('default');

  // navView pre-applies filters
  useEffect(() => {
    if (navView === 'all')          setStatusFilter('all');
    else if (navView === 'drafts')  setStatusFilter('draft');
    else if (navView === 'ready')   setStatusFilter('ready');
    else if (navView === 'inprod')  setStatusFilter('in_prod');
    setSelected(new Set());
  }, [navView]);

  const statusCounts = useMemo(() => {
    const counts = { all: articles.length };
    DASH_STATUSES.forEach(s => counts[s.id] = articles.filter(a => a.status === s.id).length);
    return counts;
  }, [articles]);

  const filtered = useMemo(() => {
    let list = [...articles];
    if (statusFilter !== 'all') list = list.filter(a => a.status === statusFilter);
    if (catFilter !== 'all')    list = list.filter(a => a.category === catFilter);
    if (search.trim())          list = list.filter(a => a.title.toLowerCase().includes(search.toLowerCase()));
    if (sortKey === 'default') list.sort(relSort);
    else if (sortKey === 'creatives') list.sort((a, b) => (b.creative_count || 0) - (a.creative_count || 0));
    else if (sortKey === 'updated') list.sort((a, b) => a.updated_at.localeCompare(b.updated_at));
    return list;
  }, [articles, statusFilter, catFilter, search, sortKey]);

  const toggleSelect = (id) => {
    setSelected(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  };
  const toggleSelectAll = () => {
    const allIds = filtered.map(a => a.id);
    const allChecked = allIds.every(id => selected.has(id));
    setSelected(allChecked ? new Set() : new Set(allIds));
  };
  const allChecked = filtered.length > 0 && filtered.every(a => selected.has(a.id));
  const someChecked = selected.size > 0 && !allChecked;

  const imagesProgress = (a) => {
    if (a.status === 'new') return { txt: '—', cls: 'none' };
    const filled = (a.thumbnail_image ? 1 : 0) + a.steps.filter(s => s.image).length;
    const total = 7;
    if (filled === total) return { txt: '✓ 7/7', cls: 'done' };
    if (filled === 0)     return { txt: '0/7',   cls: 'none' };
    return { txt: `${filled}/7`, cls: 'partial' };
  };

  const rowClass = (s) => {
    if (s === 'ready')   return 'row-ready';
    if (s === 'draft')   return 'row-draft';
    if (s === 'new')     return 'row-new';
    if (s === 'in_prod') return 'row-inprod';
    return '';
  };

  const navTitle = {
    all: 'All articles',
    drafts: 'Drafts',
    ready: 'Ready to ship',
    inprod: 'In production',
    exports: 'Exports',
    team: 'Team',
    settings: 'Settings',
  }[navView] || 'All articles';

  const navSub = {
    all:    `${articles.length} topics · ${statusCounts.ready} ready · ${statusCounts.draft} in progress`,
    drafts: `${statusCounts.draft} articles in draft`,
    ready:  `${statusCounts.ready} articles ready to export`,
    inprod: `${statusCounts.in_prod} articles deployed in the app`,
  }[navView] || '';

  if (navView === 'exports' || navView === 'team' || navView === 'settings') {
    return (
      <div className="main-inner">
        <div className="main-top">
          <div>
            <div className="page-title">{navTitle}</div>
            <div className="page-sub">Coming in v1.1.</div>
          </div>
        </div>
        <div className="empty-state" style={{ marginTop: 32 }}>
          <div className="glyph"><Icon name="sparkle" size={22} /></div>
          <h3>Not in MVP yet</h3>
          <p>This section is on the roadmap for v1.1. Use the dashboard to manage articles for now.</p>
        </div>
      </div>
    );
  }

  const suggestions = [
    { title: 'Why your 9-year-old wants a phone', cat: 'first_phone', sub: 'First phone · 12 ad creatives' },
    { title: '15 minutes before bed: the screen rule', cat: 'screen_time', sub: 'Screen time · 9 ad creatives' },
    { title: 'TikTok at 11 — yes, no, or wait?', cat: 'social_media', sub: 'Social media · 8 ad creatives' },
    { title: 'Signs of phone-related anxiety', cat: 'health_dev', sub: 'Health & dev · 6 ad creatives' },
  ];

  return (
    <div className="main-inner">
      <div className="main-top">
        <div>
          <div className="page-title">{navTitle}</div>
          <div className="page-sub">{navSub}</div>
        </div>
        <div className="main-top-actions">
          <button className="btn" onClick={onImport}>
            <Icon name="upload" size={13} /> Import CSV
          </button>
          <button className="btn" onClick={() => onExport(articles.filter(a => a.status === 'ready').map(a => a.id), true)}>
            <Icon name="download" size={13} /> Export Ready ({statusCounts.ready})
          </button>
          <button className="btn-primary btn" onClick={onNew}>
            <Icon name="plus" size={13} /> New article
          </button>
        </div>
      </div>

      {navView === 'all' && false && (
        <>
          <div className="hero-panel">
            <div className="hero-eyebrow"><span className="dot" /> AI article studio</div>
            <div className="hero-headline">
              What article do you want to <span className="grad-text">generate today?</span>
            </div>
            <div className="hero-sub">
              Pick a topic from your spreadsheet or describe one — Kidden Studio drafts a 6-step article with image prompts, ready for review.
            </div>
            <div className="hero-prompt-row">
              <input className="hero-prompt-input" placeholder="e.g. How to handle the first day without a phone…" />
              <button className="hero-prompt-btn" onClick={onNew}>
                <Icon name="sparkle" size={13} /> Generate
              </button>
            </div>
            <div className="hero-suggestions">
              {suggestions.map((s, i) => (
                <button key={i} className="hero-suggestion" onClick={onNew}>
                  <div className="sg-title"><span className="sg-cat-dot" /> {s.title}</div>
                  <div className="sg-sub">{s.sub}</div>
                </button>
              ))}
            </div>
          </div>

          <div className="stat-strip">
            <div className="stat-card sc-grad">
              <div className="sc-label">Total topics</div>
              <div className="sc-value">{articles.length}</div>
              <div className="sc-meta">across 8 categories</div>
            </div>
            <div className="stat-card sc-ready">
              <div className="sc-label">Ready to ship</div>
              <div className="sc-value">{statusCounts.ready}</div>
              <div className="sc-meta">all images filled</div>
            </div>
            <div className="stat-card sc-draft">
              <div className="sc-label">In draft</div>
              <div className="sc-value">{statusCounts.draft}</div>
              <div className="sc-meta">need review</div>
            </div>
            <div className="stat-card sc-prod">
              <div className="sc-label">In production</div>
              <div className="sc-value">{statusCounts.in_prod}</div>
              <div className="sc-meta">live in app</div>
            </div>
          </div>
        </>
      )}

      <div className="filter-bar">
        <Pill active={statusFilter === 'all'} count={statusCounts.all} onClick={() => setStatusFilter('all')}>All</Pill>
        {DASH_STATUSES.map(s => (
          <Pill key={s.id} active={statusFilter === s.id} count={statusCounts[s.id]} onClick={() => setStatusFilter(statusFilter === s.id ? 'all' : s.id)}>
            {s.label}
          </Pill>
        ))}
        <span className="filter-sep">|</span>
        <Dropdown
          value={catFilter}
          onChange={setCatFilter}
          width={150}
          options={[{ value: 'all', label: 'All categories' }, ...DASH_CATS.map(c => ({ value: c.id, label: c.label }))]}
        />
        <input className="search-input" placeholder="Search…" value={search} onChange={e => setSearch(e.target.value)} />
      </div>

      <div className="table-wrap">
        <div className="table-grid table-header">
          <span><Checkbox checked={allChecked} indeterminate={someChecked} onChange={toggleSelectAll} /></span>
          <span className="sortable" onClick={() => setSortKey('default')}>Title</span>
          <span>Category</span>
          <span className="sortable" onClick={() => setSortKey('creatives')}>Ads</span>
          <span>Imgs</span>
          <span>Status</span>
          <span className="sortable" onClick={() => setSortKey('updated')}>Updated</span>
        </div>
        {filtered.length === 0 ? (
          <div className="table-empty">No articles match your filters.</div>
        ) : filtered.map(a => {
          const ip = imagesProgress(a);
          return (
            <div key={a.id} className={"table-grid table-row " + rowClass(a.status)} onClick={() => onOpen(a.id)}>
              <span><Checkbox checked={selected.has(a.id)} onChange={() => toggleSelect(a.id)} /></span>
              <div className="row-title-cell">
                <span className="row-title">{a.title}</span>
                <span className="row-meta">{a.id} · {a.reading_time}</span>
              </div>
              <span><CategoryTag id={a.category} /></span>
              <span className="ads-count">{a.creative_count}</span>
              <span className={"imgs " + ip.cls}>{ip.txt}</span>
              <span><StatusBadge status={a.status} /></span>
              <span className="updated">{a.updated_at}</span>
            </div>
          );
        })}
      </div>

      {selected.size > 0 && (
        <div className="float-bar">
          <span className="float-bar-count">{selected.size} selected</span>
          <button className="btn-floatghost" onClick={() => onExport([...selected], false)}><Icon name="download" size={12} /> Export JSON</button>
          <button className="btn-floatfilled" onClick={() => onExport([...selected], true)}><Icon name="download" size={12} /> Export JSON + images</button>
          <span className="clear-link" onClick={() => setSelected(new Set())}>Clear</span>
        </div>
      )}
    </div>
  );
}

window.Sidebar = Sidebar;
window.Dashboard = Dashboard;