// Home screen — landing page with topic search + suggestions

const { CATEGORIES: H_CATS } = window.KS_DATA;

function Home({ articles, onOpenAndGenerate, onOpen, onNewCustom }) {
  const [query, setQuery] = useState('');
  const [open, setOpen] = useState(false);
  const [highlight, setHighlight] = useState(0);
  const [picked, setPicked] = useState(null);
  const wrapRef = useRef(null);
  const inputRef = useRef(null);

  // All "new" topics, ranked by creative count
  const newTopics = useMemo(() => {
    return articles
      .filter(a => a.status === 'new')
      .sort((a, b) => (b.creative_count || 0) - (a.creative_count || 0));
  }, [articles]);

  const matches = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return newTopics;
    return newTopics.filter(a => a.title.toLowerCase().includes(q));
  }, [query, newTopics]);

  // Top "new" topics by creative count (cards row)
  const topNew = useMemo(() => newTopics.slice(0, 6), [newTopics]);

  useEffect(() => {
    const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);

  const onPick = (a) => {
    setPicked(a);
    setQuery('');
    setOpen(false);
  };
  const onGenerate = () => {
    if (picked) onOpenAndGenerate(picked.id);
  };
  const onClear = () => {
    setPicked(null);
    setQuery('');
    setTimeout(() => inputRef.current?.focus(), 0);
  };

  const onKey = (e) => {
    if (!open) return;
    if (e.key === 'ArrowDown') { e.preventDefault(); setHighlight(h => (h + 1) % matches.length); }
    else if (e.key === 'ArrowUp') { e.preventDefault(); setHighlight(h => (h - 1 + matches.length) % matches.length); }
    else if (e.key === 'Enter') { e.preventDefault(); if (matches[highlight]) onPick(matches[highlight]); }
    else if (e.key === 'Escape') { setOpen(false); }
  };

  const catLabelFor = (id) => H_CATS.find(c => c.id === id)?.label || id;

  return (
    <div className="main-inner home-inner">
      <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 backlog — Kidden Studio drafts a 6-step article with image prompts, ready for review.
        </div>

        <div className="hero-prompt-row">
          <div className="topic-search-wrap" ref={wrapRef}>
            {picked ? (
              <button
                className="topic-picked"
                onClick={() => { setPicked(null); setOpen(true); }}
                title="Click to change topic"
              >
                <span className="tp-title">{picked.title}</span>
                <span className="tp-meta">
                  <CategoryTag id={picked.category} />
                  <span className="tp-ads">{picked.creative_count} ads</span>
                </span>
                <span className="tp-clear" onClick={(e) => { e.stopPropagation(); onClear(); }}>
                  <Icon name="x" size={13} />
                </span>
              </button>
            ) : (
              <button
                className={"topic-select-trigger" + (open ? ' open' : '')}
                onClick={() => { setOpen(o => !o); setTimeout(() => inputRef.current?.focus(), 0); }}
              >
                <span className="tst-placeholder">Choose a topic from your backlog ({newTopics.length})</span>
                <Icon name="chev-down" size={13} />
              </button>
            )}
            {open && !picked && (
              <div className="topic-search-menu">
                <div className="topic-search-input-row">
                  <input
                    ref={inputRef}
                    className="topic-search-input"
                    placeholder="Filter topics…"
                    value={query}
                    onChange={e => { setQuery(e.target.value); setHighlight(0); }}
                    onKeyDown={onKey}
                    autoFocus
                  />
                  {query && (
                    <button className="tsi-clear" onClick={() => setQuery('')}>
                      <Icon name="x" size={12} />
                    </button>
                  )}
                </div>
                <div className="topic-search-list">
                  {matches.length === 0 ? (
                    <div className="topic-search-empty">No topic matches "{query}".</div>
                  ) : matches.map((a, i) => (
                    <div
                      key={a.id}
                      className={"topic-search-item" + (i === highlight ? ' active' : '')}
                      onMouseEnter={() => setHighlight(i)}
                      onMouseDown={() => onPick(a)}
                    >
                      <div className="ts-row">
                        <span className="ts-title">{a.title}</span>
                        <span className="ts-count">
                          <span className="ts-count-num">{a.creative_count}</span>
                          <span className="ts-count-label">ads</span>
                        </span>
                      </div>
                      <div className="ts-meta">
                        <CategoryTag id={a.category} />
                        <span className="ts-meta-text">{a.reading_time} read</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
          <button
            className="hero-prompt-btn"
            disabled={!picked}
            onClick={onGenerate}
          >
            <Icon name="sparkle" size={13} /> Generate
          </button>
        </div>

        <div className="hero-helper">
          <span>Or </span>
          <button className="link-btn" onClick={onNewCustom}>create a custom topic</button>
          <span> · {newTopics.length} topics waiting in your backlog</span>
        </div>
      </div>

      <div className="home-section-head">
        <div>
          <div className="home-section-title">Top untouched topics</div>
          <div className="home-section-sub">Highest ad-creative count — these are what parents are actually clicking on.</div>
        </div>
      </div>

      <div className="home-cards">
        {topNew.length === 0 ? (
          <div className="home-empty">All topics generated. 🎉</div>
        ) : topNew.map(a => (
          <button key={a.id} className="home-card" onClick={() => onOpen(a.id)}>
            <div className="hc-top">
              <CategoryTag id={a.category} />
              <span className="hc-count">
                <span className="hc-count-num">{a.creative_count}</span>
                <span className="hc-count-label">ads</span>
              </span>
            </div>
            <div className="hc-title">{a.title}</div>
            <div className="hc-foot">
              <span className="hc-meta">{a.reading_time} read · {catLabelFor(a.category)}</span>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

window.Home = Home;