/* Home screen — topic catalog */

function HomeScreen({ onOpenTopic, user, onLogout }) {
  const [q, setQ] = useState("");
  const topics = window.TOPICS;
  const totalMins = window.TOPICS_TOTAL_MINUTES;
  const fmt = window.formatMinutes;

  const filtered = useMemo(() => {
    const needle = q.trim().toLowerCase();
    if (!needle) return topics;
    return topics.filter((t) =>
      t.title.toLowerCase().includes(needle) ||
      t.description.toLowerCase().includes(needle) ||
      t.tags.some((tag) => tag.includes(needle))
    );
  }, [q, topics]);

  const filteredMins = useMemo(
    () => filtered.reduce((s, t) => s + (t.estMinutes || 0), 0),
    [filtered]
  );

  return (
    <div data-screen-label="Home">
      <TopBar
        user={user}
        onLogout={onLogout}
        onNavHome={() => onOpenTopic(null)}
        crumbs={[{ label: "Assignments" }]}
      />

      <div className="container">
        <div className="home-header">
          <div className="topic-meta-row">
            <span className="badge badge-accent">Assessment</span>
            <span>·</span>
            <span>{topics.length} assignments</span>
            <span>·</span>
            <span>Open-book — focus on technique, not memory</span>
          </div>
          <h1 className="h1">UI test automation exercises</h1>
          <p className="subtle" style={{ fontSize: 15, maxWidth: 640 }}>
            Each assignment isolates one common UI automation challenge. Read the
            scenario, write your automated test against the playground component,
            and verify your assertion passes.
          </p>
        </div>

        <div className="home-toolbar">
          <div className="search-input">
            <Icon.Search />
            <input
              className="input"
              data-testid="topic-search"
              placeholder="Filter assignments…"
              value={q}
              onChange={(e) => setQ(e.target.value)}
            />
          </div>
          <span className="subtle" style={{ fontSize: 13, marginLeft: "auto" }} data-testid="topic-count">
            {filtered.length} of {topics.length}
          </span>
        </div>

        {filtered.length === 0 ? (
          <div className="empty" data-testid="empty-results">
            No assignments match "{q}".
          </div>
        ) : (
          <div className="topics-grid" data-testid="topics-grid">
            {filtered.map((t, i) => (
              <button
                key={t.id}
                className="topic-card"
                data-testid={`topic-card-${t.id}`}
                onClick={() => onOpenTopic(t.id)}
              >
                <div className="topic-card-head">
                  <span className="topic-card-num">{String(topics.indexOf(t) + 1).padStart(2, "0")}</span>
                  <Icon.ArrowRight style={{ color: "var(--fg-faint)" }} />
                </div>
                <div className="topic-card-title">{t.title}</div>
                <div className="topic-card-desc">{t.description}</div>
                <div className="topic-card-foot">
                  {t.tags.slice(0, 3).map((tag) => (
                    <span key={tag} className="badge badge-mono">{tag}</span>
                  ))}
                </div>
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

window.HomeScreen = HomeScreen;