// Library screen — manage base resumes + recent tailorings

const { useState: useStateLib, useEffect: useEffectLib, useRef: useRefLib } = React;

function useUserMasters() {
  const { enabled, user } = (window.useForgeAuth && window.useForgeAuth()) || { enabled: false, user: null };
  const [rows, setRows] = useStateLib([]);
  const [tick, setTick] = useStateLib(0);
  useEffectLib(() => {
    if (!enabled || !user) { setRows([]); return; }
    let cancelled = false;
    window.ForgeDB.listMasters()
      .then((d) => { if (!cancelled) setRows(d); })
      .catch((e) => console.error("[forge] listMasters:", e));
    return () => { cancelled = true; };
  }, [enabled, user?.id, tick]);
  return { enabled, user, rows, reload: () => setTick((n) => n + 1) };
}

function useSavedVersions() {
  const { enabled, user } = (window.useForgeAuth && window.useForgeAuth()) || { enabled: false, user: null };
  const [rows, setRows] = useStateLib([]);
  const [loading, setLoading] = useStateLib(false);
  useEffectLib(() => {
    if (!enabled || !user) { setRows([]); return; }
    let cancelled = false;
    setLoading(true);
    window.ForgeDB.listVersions()
      .then((data) => { if (!cancelled) setRows(data); })
      .catch((e) => { if (!cancelled) console.error("[forge] listVersions:", e); })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [enabled, user?.id]);
  return { enabled, user, rows, loading };
}

function LibraryScreen({ onStartTailor, onOpenResume, onOpenVersion, template }) {
  const saved = useSavedVersions();
  const userMasters = useUserMasters();
  // Prime the masters cache so opening a saved version resolves its master.
  useEffectLib(() => { window.ForgeMasters && window.ForgeMasters.listAllMasters(); }, [userMasters.rows.length]);
  const fileRef = useRefLib(null);
  const [uploading, setUploading] = useStateLib(false);
  const [uploadErr, setUploadErr] = useStateLib(null);

  const onUploadClick = () => {
    setUploadErr(null);
    if (!userMasters.user) {
      setUploadErr("Sign in first to save uploaded resumes to your account.");
      return;
    }
    fileRef.current && fileRef.current.click();
  };

  const onFileChosen = async (e) => {
    const file = e.target.files && e.target.files[0];
    e.target.value = "";
    if (!file) return;
    setUploading(true); setUploadErr(null);
    try {
      await window.ForgeMasters.uploadMaster(file);
      userMasters.reload();
    } catch (err) {
      setUploadErr(err.message || String(err));
    } finally {
      setUploading(false);
    }
  };

  return (
    <div style={{ padding: "56px 80px 120px", maxWidth: 1280, margin: "0 auto" }}>
      {/* Editorial header */}
      <div style={{ marginBottom: 56, display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 32 }}>
        <div style={{ maxWidth: 640 }}>
          <Eyebrow style={{ marginBottom: 16 }}>Volume 01 · Spring 2026</Eyebrow>
          <h1
            style={{
              fontFamily: "Newsreader, serif",
              fontWeight: 400,
              fontSize: 56,
              lineHeight: 1.05,
              letterSpacing: "-0.025em",
              color: "var(--ink)",
              margin: 0,
            }}
          >
            Your resume,{" "}
            <em style={{ color: "var(--accent)", fontStyle: "italic" }}>
              shaped for the room.
            </em>
          </h1>
          <p
            style={{
              fontFamily: "Newsreader, serif",
              fontSize: 17,
              lineHeight: 1.55,
              color: "var(--muted)",
              marginTop: 18,
              maxWidth: 520,
            }}
          >
            Three base resumes. Paste a job description and ResumeForge tailors each line — you approve every change before it ships to PDF.
          </p>
        </div>
        <Button variant="accent" icon={Icon.plus} onClick={() => onStartTailor(userMasters.rows[0]?.id)}>
          New tailoring
        </Button>
      </div>

      {/* Your uploaded masters */}
      {userMasters.rows.length > 0 && (
        <div style={{ marginBottom: 56 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 24 }}>
            <Eyebrow>Your resumes · {userMasters.rows.length}</Eyebrow>
            <Button variant="quiet" icon={Icon.plus} onClick={onUploadClick} disabled={uploading}>
              {uploading ? "Parsing…" : "Upload resume"}
            </Button>
          </div>
          <Rule style={{ marginBottom: 28 }} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {userMasters.rows.map((m, idx) => (
              <ResumeCard
                key={m.id}
                resume={{ ...m.content, id: m.id, label: m.label, versions: 0 }}
                index={idx}
                onOpen={() => onOpenResume(m.id)}
                onTailor={() => onStartTailor(m.id)}
              />
            ))}
          </div>
        </div>
      )}

      {/* Sample / bundled resumes */}
      <div style={{ marginBottom: 72 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 24 }}>
          <Eyebrow>{userMasters.rows.length > 0 ? "Sample resumes" : "Base resumes"} · {window.RESUMES.length}</Eyebrow>
          <Button variant="quiet" icon={Icon.plus} onClick={onUploadClick} disabled={uploading}>
            {uploading ? "Parsing…" : "Upload resume"}
          </Button>
        </div>
        {uploadErr && (
          <div style={{ marginBottom: 14, color: "#E08A6B", fontSize: 13 }}>{uploadErr}</div>
        )}
        <input
          ref={fileRef}
          type="file"
          accept=".pdf,.docx,.txt,.md,application/pdf,text/plain"
          onChange={onFileChosen}
          style={{ display: "none" }}
        />
        <Rule style={{ marginBottom: 28 }} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {window.RESUMES.map((r, idx) => (
            <ResumeCard key={r.id} resume={r} index={idx} onOpen={() => onOpenResume(r.id)} onTailor={() => onStartTailor(r.id)} />
          ))}
        </div>
      </div>

      {/* Your saved versions (live, signed-in only) */}
      {saved.user && (
        <div style={{ marginBottom: 56 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 24 }}>
            <Eyebrow>Your saved versions</Eyebrow>
            <Eyebrow style={{ color: "var(--muted)" }}>
              {saved.loading ? "loading…" : `${saved.rows.length} total`}
            </Eyebrow>
          </div>
          <Rule style={{ marginBottom: 0 }} />
          {saved.rows.length === 0 && !saved.loading && (
            <div style={{ padding: "22px 4px", color: "var(--muted)", fontSize: 14 }}>
              No tailored versions yet. Start one from a base resume above.
            </div>
          )}
          {saved.rows.map((v) => (
            <SavedVersionRow key={v.id} row={v} onOpen={() => onOpenVersion && onOpenVersion(v)} />
          ))}
        </div>
      )}

      {/* Recent tailorings (mock) */}
      <div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 24 }}>
          <Eyebrow>Recent tailorings · sample</Eyebrow>
          <Eyebrow style={{ color: "var(--muted)" }}>{window.RECENT_TAILORINGS.length} this month</Eyebrow>
        </div>
        <Rule style={{ marginBottom: 0 }} />
        <div>
          {window.RECENT_TAILORINGS.map((t) => (
            <TailoringRow key={t.id} item={t} />
          ))}
        </div>
      </div>
    </div>
  );
}

function SavedVersionRow({ row, onOpen }) {
  const master = (window.RESUMES || []).find((r) => r.id === row.master_id);
  const date = new Date(row.created_at).toLocaleDateString(undefined, {
    month: "short", day: "numeric", year: "numeric",
  });
  const [hover, setHover] = useStateLib(false);
  return (
    <div
      onClick={onOpen}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "grid",
        gridTemplateColumns: "1.6fr 1fr 0.8fr 0.8fr",
        gap: 16,
        padding: "16px 8px",
        borderBottom: "1px solid var(--border)",
        alignItems: "center",
        fontSize: 14,
        cursor: onOpen ? "pointer" : "default",
        background: hover && onOpen ? "var(--paper-2)" : "transparent",
        transition: "background 120ms",
        margin: "0 -8px",
        borderRadius: 4,
      }}
    >
      <div style={{ color: "var(--ink)", fontWeight: 500 }}>
        {row.label || row.target_company || "Untitled tailoring"}
        {row.target_role && (
          <span style={{ color: "var(--muted)", fontWeight: 400 }}> · {row.target_role}</span>
        )}
      </div>
      <div style={{ color: "var(--muted)" }}>
        from <span style={{ color: "var(--ink)" }}>{master ? master.label : row.master_id}</span>
      </div>
      <div style={{ color: "var(--muted)", fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.08em" }}>
        {row.accepted_count}/{row.total_count} kept
      </div>
      <div style={{ color: "var(--muted)", fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.08em", textAlign: "right" }}>
        {date}
      </div>
    </div>
  );
}

function ResumeCard({ resume, index, onOpen, onTailor }) {
  const [hover, setHover] = useStateLib(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={onOpen}
      style={{
        background: "var(--paper)",
        border: "1px solid var(--border)",
        borderRadius: 8,
        padding: 28,
        cursor: "pointer",
        transition: "all 180ms ease",
        transform: hover ? "translateY(-2px)" : "translateY(0)",
        boxShadow: hover ? "0 12px 30px -18px rgba(27,24,20,0.25)" : "0 1px 0 rgba(27,24,20,0.02)",
        position: "relative",
        overflow: "hidden",
        minHeight: 280,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
        <Eyebrow>№ {String(index + 1).padStart(2, "0")}</Eyebrow>
        <Pill>{resume.versions} versions</Pill>
      </div>
      <div style={{ flex: 1 }}>
        <div
          style={{
            fontFamily: "Newsreader, serif",
            fontSize: 26,
            fontWeight: 400,
            lineHeight: 1.15,
            color: "var(--ink)",
            letterSpacing: "-0.02em",
            marginBottom: 10,
          }}
        >
          {resume.label}
        </div>
        <p
          style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 13,
            lineHeight: 1.55,
            color: "var(--muted)",
            margin: 0,
            display: "-webkit-box",
            WebkitLineClamp: 3,
            WebkitBoxOrient: "vertical",
            overflow: "hidden",
          }}
        >
          {resume.summary}
        </p>
      </div>
      <Rule style={{ margin: "24px 0 16px" }} />
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <Eyebrow style={{ fontSize: 9 }}>Updated · {resume.updated}</Eyebrow>
        <div
          style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 12,
            color: hover ? "var(--accent)" : "var(--muted)",
            fontWeight: 500,
            display: "flex",
            alignItems: "center",
            gap: 6,
            transition: "color 120ms",
          }}
        >
          Open {Icon.arrow}
        </div>
      </div>
    </div>
  );
}

function TailoringRow({ item }) {
  const [hover, setHover] = useStateLib(false);
  return (
    <>
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          display: "grid",
          gridTemplateColumns: "50px 1.8fr 1.2fr 0.8fr 110px",
          alignItems: "center",
          padding: "20px 4px",
          cursor: "pointer",
          gap: 24,
          transition: "background 100ms",
          background: hover ? "var(--paper-2)" : "transparent",
          marginLeft: -8,
          marginRight: -8,
          paddingLeft: 12,
          paddingRight: 12,
          borderRadius: 4,
        }}
      >
        <Eyebrow style={{ fontSize: 9 }}>{item.id.toUpperCase()}</Eyebrow>
        <div>
          <div
            style={{
              fontFamily: "Newsreader, serif",
              fontSize: 19,
              fontWeight: 400,
              color: "var(--ink)",
              letterSpacing: "-0.015em",
              marginBottom: 3,
            }}
          >
            {item.title}
          </div>
          <div style={{ fontFamily: "Inter, sans-serif", fontSize: 13, color: "var(--muted)" }}>{item.company}</div>
        </div>
        <div style={{ fontFamily: "Inter, sans-serif", fontSize: 13, color: "var(--muted)" }}>
          From <span style={{ color: "var(--ink)" }}>{item.base}</span>
        </div>
        <Pill tone={item.status === "Exported" ? "success" : "warn"}>{item.status}</Pill>
        <Eyebrow style={{ fontSize: 9, textAlign: "right" }}>{item.date}</Eyebrow>
      </div>
      <Rule />
    </>
  );
}

Object.assign(window, { LibraryScreen });