// Savvie · inbox screen
// Grouped by category — all 10 categories rendered as drop targets.
// Drag a row to a category to move. Drag to the bottom panel to spin up a new category.

function Inbox({
  items, layout, density, annotations,
  onOpenItem, onExecute, onArchive, onOpenSave,
  onReorg, reorgBusy,
  onDropToCategory, onDropToNewCategory,
  extraCategories = [],
}) {
  const { categoryCounts, CATEGORIES } = window.SAVVIE_DATA;
  const [filterCat, setFilterCat] = useState(null); // null = all
  const [filterDecay, setFilterDecay] = useState(null); // null | 'fresh' | 'aging' | 'stale'
  const [selected, setSelected] = useState(new Set());
  const [selectMode, setSelectMode] = useState(false);

  // Filter items
  let filtered = items;
  if (filterCat) filtered = filtered.filter(i => i.category === filterCat);
  if (filterDecay) filtered = filtered.filter(i => i.decay === filterDecay);

  // Group items by category
  const byCat = {};
  filtered.forEach(item => {
    if (!byCat[item.category]) byCat[item.category] = [];
    byCat[item.category].push(item);
  });
  Object.values(byCat).forEach(arr => arr.sort((a, b) => b.daysOld - a.daysOld));

  // Merge built-in + user-created categories
  const allCats = [
    ...[...categoryCounts].sort((a, b) => a.order - b.order),
    ...extraCategories,
  ];

  // Categories with items first, then empty
  const withItems = allCats.filter(c => byCat[c.id]?.length > 0);
  const withoutItems = allCats.filter(c => !byCat[c.id] || byCat[c.id].length === 0);
  const sections = filterCat
    ? allCats.filter(c => c.id === filterCat)
    : [...withItems, ...withoutItems];

  // Live category list for filter pills
  const liveCats = allCats.filter(c => items.some(i => i.category === c.id));

  const toggleSelect = (id) => {
    setSelected(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  };

  const selectAll = () => {
    setSelected(new Set(filtered.map(i => i.id)));
  };

  const clearSelection = () => {
    setSelected(new Set());
    setSelectMode(false);
  };

  const doneSelected = () => {
    selected.forEach(id => {
      const item = items.find(i => i.id === id);
      if (item) onArchive(item);
    });
    clearSelection();
  };

  return (
    <div data-screen-label="inbox">
      <div className="sv-header">
        <div>
          <div className="sv-eyebrow">{items.length} saves · {withItems.length} live categories</div>
          <h1 className="sv-h1">your <em>saves,</em><br/>run now.</h1>
          {annotations && (
            <div className="sv-header-annotation">
              save anything. claude pulls it.
              <br/>
              <span style={{ marginLeft: 38 }}>↘</span>
            </div>
          )}
        </div>
        <button className="sv-save-btn" onClick={onOpenSave}>
          <span className="plus">+</span> save
        </button>
      </div>

      <div className="sv-toolbar">
        <div style={{
          fontFamily: 'var(--vz-mono)',
          fontSize: 11,
          letterSpacing: '0.1em',
          textTransform: 'uppercase',
          color: 'var(--vz-ink-60)',
        }}>
          grouped by category · drag to recategorize
        </div>
        <button
          className={`sv-reorg-btn ${reorgBusy ? 'busy' : ''}`}
          onClick={onReorg}
          disabled={reorgBusy}
          title="ask claude to re-grade & reshuffle"
        >
          <span className="glyph">⟲</span> re-org
        </button>
        <div className="sv-toolbar-spacer" />
        <div className="sv-layout-toggle">
          <button
            className={layout === 'rows' ? 'active' : ''}
            onClick={() => window.dispatchEvent(new CustomEvent('sv-set-layout', { detail: 'rows' }))}
          >rows</button>
          <button
            className={layout === 'grid' ? 'active' : ''}
            onClick={() => window.dispatchEvent(new CustomEvent('sv-set-layout', { detail: 'grid' }))}
          >grid</button>
        </div>
      </div>

      {/* Filter bar */}
      <div className="sv-filter-bar">
        <button
          className={`sv-filter-pill ${!filterCat && !filterDecay ? 'active' : ''}`}
          onClick={() => { setFilterCat(null); setFilterDecay(null); }}
        >all ({items.length})</button>
        {liveCats.map(c => (
          <button
            key={c.id}
            className={`sv-filter-pill ${filterCat === c.id ? 'active' : ''}`}
            onClick={() => setFilterCat(filterCat === c.id ? null : c.id)}
          >
            <span style={{ marginRight: 3 }}>{c.emoji}</span>
            {c.label} ({items.filter(i => i.category === c.id).length})
          </button>
        ))}
        <span className="sv-filter-sep">·</span>
        {['fresh', 'aging', 'stale'].map(d => {
          const ct = items.filter(i => i.decay === d).length;
          if (ct === 0) return null;
          return (
            <button
              key={d}
              className={`sv-filter-pill decay-${d} ${filterDecay === d ? 'active' : ''}`}
              onClick={() => setFilterDecay(filterDecay === d ? null : d)}
            >{d} ({ct})</button>
          );
        })}
        <span className="sv-filter-sep">·</span>
        <button
          className={`sv-filter-pill ${selectMode ? 'active' : ''}`}
          onClick={() => { setSelectMode(!selectMode); if (selectMode) clearSelection(); }}
        >{selectMode ? 'cancel' : 'select'}</button>
      </div>

      {/* Bulk action bar (when selecting) */}
      {selectMode && (
        <div className="sv-bulk-bar">
          <button className="sv-bulk-action" onClick={selectAll}>select all ({filtered.length})</button>
          <button className="sv-bulk-action" onClick={clearSelection}>clear</button>
          {selected.size > 0 && (
            <button className="sv-bulk-action done" onClick={doneSelected}>
              done ({selected.size}) ✓
            </button>
          )}
          <span style={{ fontFamily: 'var(--vz-mono)', fontSize: 10, color: 'var(--vz-ink-40)', marginLeft: 'auto' }}>
            {selected.size} selected
          </span>
        </div>
      )}

      {sections.map(cat => (
        <CategoryGroup
          key={cat.id}
          cat={cat}
          items={byCat[cat.id] || []}
          layout={layout}
          density={density}
          onOpenItem={onOpenItem}
          onExecute={onExecute}
          onArchive={onArchive}
          onDropToCategory={onDropToCategory}
          selectMode={selectMode}
          selected={selected}
          onToggleSelect={toggleSelect}
        />
      ))}

      <NewCategoryDropZone onDropToNewCategory={onDropToNewCategory} />
    </div>
  );
}

function CategoryGroup({ cat, items, layout, density, onOpenItem, onExecute, onArchive, onDropToCategory, selectMode, selected, onToggleSelect }) {
  const [hot, setHot] = useState(false);
  const isEmpty = items.length === 0;
  return (
    <section
      className={`sv-cat-group ${cat.id} ${hot ? 'drop-hot' : ''} ${isEmpty ? 'empty' : ''}`}
      data-screen-label={`category · ${cat.id}`}
      onDragOver={(e) => {
        if (e.dataTransfer.types.includes('application/x-savvie-item') || e.dataTransfer.types.includes('text/plain')) {
          e.preventDefault();
          e.dataTransfer.dropEffect = 'move';
          if (!hot) setHot(true);
        }
      }}
      onDragLeave={() => setHot(false)}
      onDrop={(e) => {
        e.preventDefault();
        setHot(false);
        const itemId = e.dataTransfer.getData('text/plain');
        if (itemId) onDropToCategory(itemId, cat.id);
      }}
    >
      <header className="sv-cat-head">
        <span className="cat-glyph">{cat.emoji}</span>
        <h2>{cat.label}</h2>
        <span className="count">
          {isEmpty ? 'empty' : `${items.length} ${items.length === 1 ? 'save' : 'saves'}`}
        </span>
        {hot && <span className="drop-hint">drop here →</span>}
      </header>

      {isEmpty ? (
        <div className="sv-cat-empty">
          <span>drop a save here · or save one in this category</span>
        </div>
      ) : layout === 'rows' ? (
        <div className="sv-items">
          {items.map(item => (
            <div key={item.id} style={{ display: 'flex', alignItems: 'center', gap: 0 }}>
              {selectMode && (
                <button
                  onClick={(e) => { e.stopPropagation(); onToggleSelect(item.id); }}
                  style={{
                    width: 28, height: 28, borderRadius: 8,
                    border: selected.has(item.id) ? '2px solid var(--vz-orange)' : '1.5px solid var(--vz-ink-15)',
                    background: selected.has(item.id) ? 'var(--vz-orange)' : 'transparent',
                    cursor: 'pointer', flexShrink: 0, display: 'flex',
                    alignItems: 'center', justifyContent: 'center',
                    marginRight: 6, marginLeft: 4,
                    fontSize: 13, color: 'white', fontWeight: 700,
                    transition: 'all 0.15s ease',
                  }}
                >{selected.has(item.id) ? '✓' : ''}</button>
              )}
              <div style={{ flex: 1, minWidth: 0 }}>
                <ItemRow
                  item={item}
                  compact={density === 'compact'}
                  onClick={selectMode ? () => onToggleSelect(item.id) : onOpenItem}
                  onArchive={onArchive}
                />
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="sv-grid">
          {items.map(item => (
            <ItemCard key={item.id} item={item} onClick={selectMode ? () => onToggleSelect(item.id) : onOpenItem} />
          ))}
        </div>
      )}
    </section>
  );
}

function NewCategoryDropZone({ onDropToNewCategory }) {
  const [hot, setHot] = useState(false);
  return (
    <div
      className={`sv-new-cat-drop ${hot ? 'drop-hot' : ''}`}
      onDragOver={(e) => {
        if (e.dataTransfer.types.includes('application/x-savvie-item') || e.dataTransfer.types.includes('text/plain')) {
          e.preventDefault();
          e.dataTransfer.dropEffect = 'move';
          if (!hot) setHot(true);
        }
      }}
      onDragLeave={() => setHot(false)}
      onDrop={(e) => {
        e.preventDefault();
        setHot(false);
        const itemId = e.dataTransfer.getData('text/plain');
        if (itemId) onDropToNewCategory(itemId);
      }}
    >
      <span className="big-plus">+</span>
      <div className="copy">
        <div className="line">
          {hot ? "spin up a new category" : "drag a save here · make a new category"}
        </div>
        <div className="hint">claude names it based on what you dropped</div>
      </div>
    </div>
  );
}

window.Inbox = Inbox;