// library.jsx — Library / home screen
// Grid of concept cards, search, filter, quick-add field.

const { useEffect: _le, useState: _ls, useMemo: _lm, useRef: _lr } = React;

const PAGE_SIZE = 12;

function _updatedRank(v) {
  if (v === "moments ago") return Infinity;
  if (!v || v === "recently") return 0;
  return new Date(v).getTime() || 0;
}

function Library({ concepts, onOpen, onCreate, onDelete, onOpenSolar, onOpenGraph }) {
  const [query, setQuery] = _ls("");
  const [filter, setFilter] = _ls("all"); // all | filled | unfilled
  const [draft, setDraft] = _ls("");
  const [page, setPage] = _ls(0);

  const filtered = _lm(() => {
    let list = [...concepts].sort((a, b) => _updatedRank(b.updated) - _updatedRank(a.updated));
    if (query.trim()) {
      const q = query.toLowerCase();
      list = list.filter(c =>
        c.title.toLowerCase().includes(q)
        || c.category.toLowerCase().includes(q)
        || (c.essences || []).some(e => e.body.toLowerCase().includes(q))
      );
    }
    if (filter === "filled") list = list.filter(c => window.fillCount(c) === 5);
    if (filter === "unfilled") list = list.filter(c => window.fillCount(c) < 5);
    return list;
  }, [concepts, query, filter]);

  const totalPages = Math.ceil(filtered.length / PAGE_SIZE);
  const paged = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);

  _le(() => { setPage(0); }, [query, filter]);

  const totalFilled = concepts.filter(c => window.fillCount(c) === 5).length;

  function submitDraft(e) {
    e.preventDefault();
    if (!draft.trim()) return;
    onCreate(draft.trim());
    setDraft("");
  }

  return (
    <div className="page" data-screen-label="Library">
      <div className="lib-grid" style={{
        display: "grid",
        gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
        columnGap: 16,
        rowGap: 16,
        alignItems: "start",
      }}>

        {/* Hero text — cols 1–2, row 1 */}
        <div className="lib-hero" style={{ gridColumn: "1 / 3", gridRow: 1 }}>
          <div className="tag-flat" style={{ marginBottom: 14 }}>Your library · {concepts.length} concepts · {totalFilled} complete</div>
          <h1 className="concept-title lib-hero-title" style={{ fontSize: 56, margin: "0 0 14px" }}>
            What do you want to <em style={{ fontStyle: "italic", color: "var(--c-nucleus)" }}>understand</em> today?
          </h1>
          <p style={{ color: "var(--fg-2)", fontSize: 15, margin: 0, lineHeight: 1.55 }}>
            A concept becomes yours when you can describe what it&#8217;s made of, how it works, what it felt like in your hand, and what stays when all of that is gone.
          </p>
        </div>

        {/* Graph panel — cols 3–4, rows 1–3 */}
        <div className="lib-graph" style={{
          gridColumn: "3 / 5", gridRow: "1 / 4",
          alignSelf: "stretch", position: "relative",
          borderRadius: 12, overflow: "hidden",
          border: "1px solid var(--border-soft)",
          background: "var(--bg-sunk)",
        }}>
          <window.GraphPanel
            concepts={concepts}
            onOpen={(id) => onOpen(id, "edit")}
            onOpenGraph={onOpenGraph}
          />
          <button
            onClick={onOpenGraph}
            className="btn ghost tiny"
            style={{ position: "absolute", top: 10, right: 10, zIndex: 10, background: "var(--bg-elev)", border: "1px solid var(--border-soft)" }}
            title="Open full graph"
          >
            {window.Icons.Graph(13)} expand
          </button>
        </div>

        {/* Quick-add form — cols 1–2, row 2 */}
        <form className="surface lib-quickadd" onSubmit={submitDraft} style={{
          gridColumn: "1 / 3", gridRow: 2,
          display: "flex", alignItems: "center", gap: 10,
          padding: "10px 14px",
        }}>
          <span style={{ color: "var(--fg-3)", display: "flex", alignItems: "center" }}>{window.Icons.Plus(15)}</span>
          <input
            value={draft}
            onChange={e => setDraft(e.target.value)}
            placeholder="Add a concept — single word or phrase"
            style={{ flex: 1, fontSize: 15, fontFamily: "var(--font-serif)", lineHeight: 1 }}
          />
          <span className="tag-flat" style={{ opacity: draft.trim() ? .9 : 0, transition: "opacity 160ms" }}>
            <span className="kbd">↵</span> create
          </span>
        </form>

        {/* Search — col 1, row 3 */}
        <div className="lib-search" style={{ gridColumn: "1 / 2", gridRow: 3 }}>
          <div className="field" style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 12px" }}>
            <span style={{ color: "var(--fg-3)", display: "flex", alignItems: "center" }}>{window.Icons.Search(14)}</span>
            <input
              value={query}
              onChange={e => setQuery(e.target.value)}
              placeholder="Search by name, category, or essence…"
              style={{ fontSize: 13, width: "100%" }}
            />
          </div>
        </div>

        {/* Filters — col 2, row 3 */}
        <div className="lib-filters" style={{ gridColumn: "2 / 3", gridRow: 3, display: "flex", alignItems: "center" }}>
          <div style={{ display: "flex", gap: 4, background: "var(--bg-sunk)", padding: 3, borderRadius: 9, border: "1px solid var(--border-soft)" }}>
            {[
              ["all", "All", concepts.length],
              ["filled", "Complete", concepts.filter(c => window.fillCount(c) === 5).length],
              ["unfilled", "In progress", concepts.filter(c => window.fillCount(c) < 5).length],
            ].map(([k, label, n]) => (
              <button key={k} onClick={() => setFilter(k)} className="btn tiny" style={{
                border: 0,
                background: filter === k ? "var(--bg-elev)" : "transparent",
                boxShadow: filter === k ? "0 1px 2px rgba(0,0,0,.05)" : "none",
                color: filter === k ? "var(--fg)" : "var(--fg-3)",
              }}>
                {label} <span style={{ color: "var(--fg-3)", marginLeft: 4 }}>{n}</span>
              </button>
            ))}
          </div>
        </div>

        {/* Cards — auto-placed from row 4, 4 per row */}
        {paged.map((c, i) => <ConceptCard key={c.id} c={c} onOpen={() => onOpen(c.id, "edit")} delay={i * 18} />)}
        {filtered.length === 0 && (
          <div style={{ gridColumn: "1 / -1", padding: "60px 0", textAlign: "center", color: "var(--fg-3)", fontFamily: "var(--font-serif)", fontSize: 22, fontStyle: "italic" }}>
            Nothing here yet. The empty page is also a thought.
          </div>
        )}

        {/* Pagination */}
        {totalPages > 1 && (
          <div style={{ gridColumn: "1 / -1", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, paddingTop: 8, paddingBottom: 8 }}>
            <button className="btn ghost tiny" onClick={() => setPage(p => p - 1)} disabled={page === 0}
              style={{ opacity: page === 0 ? 0.3 : 1 }}>
              {window.Icons.ArrowL(13)}
            </button>
            {Array.from({ length: totalPages }, (_, i) => (
              <button key={i} className="btn tiny" onClick={() => setPage(i)} style={{
                border: 0, minWidth: 28,
                background: i === page ? "var(--bg-elev)" : "transparent",
                boxShadow: i === page ? "0 1px 2px rgba(0,0,0,.05)" : "none",
                color: i === page ? "var(--fg)" : "var(--fg-3)",
                fontFamily: "var(--font-mono)", fontSize: 11,
              }}>{i + 1}</button>
            ))}
            <button className="btn ghost tiny" onClick={() => setPage(p => p + 1)} disabled={page === totalPages - 1}
              style={{ opacity: page === totalPages - 1 ? 0.3 : 1, transform: "rotate(180deg)" }}>
              {window.Icons.ArrowL(13)}
            </button>
          </div>
        )}

      </div>
    </div>
  );
}

function ConceptCard({ c, onOpen, onDelete, delay }) {
  const essence = (c.essences || [])[0]?.body || "";
  const f = window.fillCount(c);
  const isComplete = f === 5;
  const [hov, setHov] = _ls(false);
  const [confirm, setConfirm] = _ls(false);
  const confirmTimer = _lr(null);

  function handleDelete(e) {
    e.stopPropagation();
    if (!confirm) {
      setConfirm(true);
      clearTimeout(confirmTimer.current);
      confirmTimer.current = setTimeout(() => setConfirm(false), 2500);
    } else {
      clearTimeout(confirmTimer.current);
      onDelete();
    }
  }

  return (
    <button
      onClick={onOpen}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => { setHov(false); setConfirm(false); clearTimeout(confirmTimer.current); }}
      className="surface surface-hover fade-up"
      style={{
        textAlign: "left",
        padding: 20,
        cursor: "pointer",
        display: "flex", flexDirection: "column", gap: 12,
        minHeight: 200,
        animationDelay: delay + "ms",
        font: "inherit", color: "inherit",
        position: "relative",
      }}
    >
      {onDelete && (hov || confirm) && (
        <button
          onClick={handleDelete}
          style={{
            position: "absolute", top: 10, right: 10,
            background: confirm ? "var(--c-essence)" : "var(--bg-sunk)",
            border: "1px solid " + (confirm ? "var(--c-essence)" : "var(--border-soft)"),
            borderRadius: 6,
            padding: "3px 8px",
            fontSize: 11, fontFamily: "var(--font-mono)", letterSpacing: ".04em",
            color: confirm ? "#fff" : "var(--fg-3)",
            cursor: "pointer",
            transition: "all 150ms",
          }}
        >
          {confirm ? "confirm?" : "delete"}
        </button>
      )}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
        <div>
          <div className="tag-flat" style={{ marginBottom: 6 }}>{c.category}</div>
          <h3 className="concept-title" style={{ fontSize: 30, margin: 0, lineHeight: 1.05 }}>{c.title}</h3>
        </div>
        <window.Dots concept={c} />
      </div>

      <div style={{ flex: 1, color: "var(--fg-2)", fontSize: 13.5, lineHeight: 1.55 }}>
        {essence
          ? <span style={{ fontFamily: "var(--font-serif)", fontSize: 16.5, fontStyle: "italic", color: "var(--fg)" }}>
              &ldquo;{essence}&rdquo;
            </span>
          : <span style={{ color: "var(--fg-3)", fontStyle: "italic" }}>
              {c.perspectives?.length
                ? `${c.perspectives.length} ${c.perspectives.length === 1 ? "perspective" : "perspectives"}, no essence yet`
                : "Awaiting first thought…"}
            </span>
        }
      </div>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", color: "var(--fg-3)", fontSize: 11.5, fontFamily: "var(--font-mono)", letterSpacing: ".06em" }}>
        <span>{c.updated}</span>
        <span style={{ color: isComplete ? "var(--c-nucleus)" : "var(--fg-3)" }}>
          {isComplete ? "complete" : `${f}/5`}
        </span>
      </div>
    </button>
  );
}

Object.assign(window, { Library });