// Resume detail — version history + management

const { useState: useStateDetail, useMemo: useMemoDetail } = React;

function ResumeDetailScreen({ resumeId, onBack, onStartTailor, template }) {
  const resume = window.RESUMES.find((r) => r.id === resumeId) || window.RESUMES[0];
  const versions = window.RESUME_VERSIONS[resume.id] || [];
  const latest = versions[0];
  const base = versions[versions.length - 1];

  const [selectedN, setSelectedN] = useStateDetail(latest ? latest.n : null);
  const [compareMode, setCompareMode] = useStateDetail(false);
  const [compareN, setCompareN] = useStateDetail(versions[1] ? versions[1].n : null);
  const [filter, setFilter] = useStateDetail("all"); // all | exported | draft

  const filtered = useMemoDetail(() => {
    if (filter === "all") return versions;
    if (filter === "exported") return versions.filter((v) => v.status === "Exported" || v.status === "Base");
    if (filter === "draft") return versions.filter((v) => v.status === "Draft");
    return versions;
  }, [filter, versions]);

  const selected = versions.find((v) => v.n === selectedN) || latest;
  const compare = versions.find((v) => v.n === compareN);

  return (
    <div style={{ display: "flex", height: "calc(100vh - 73px)" }}>
      {/* Left: version list */}
      <div
        style={{
          width: 480,
          flexShrink: 0,
          borderRight: "1px solid var(--border)",
          background: "var(--paper)",
          overflowY: "auto",
        }}
      >
        <div style={{ padding: "32px 36px 24px", borderBottom: "1px solid var(--border)" }}>
          <button
            onClick={onBack}
            style={{
              background: "transparent",
              border: "none",
              color: "var(--muted)",
              fontFamily: "Inter, sans-serif",
              fontSize: 12,
              cursor: "pointer",
              padding: 0,
              marginBottom: 18,
              display: "flex",
              alignItems: "center",
              gap: 4,
            }}
          >
            ← Library
          </button>
          <Eyebrow style={{ marginBottom: 8 }}>Base resume</Eyebrow>
          <div
            style={{
              fontFamily: "Newsreader, serif",
              fontSize: 32,
              fontWeight: 400,
              letterSpacing: "-0.025em",
              color: "var(--ink)",
              lineHeight: 1.1,
              marginBottom: 6,
            }}
          >
            {resume.label}
          </div>
          <div style={{ fontFamily: "Inter, sans-serif", fontSize: 13, color: "var(--muted)" }}>
            {versions.length} versions · last updated {latest && latest.date}
          </div>

          <div style={{ display: "flex", gap: 8, marginTop: 18 }}>
            <Button variant="accent" icon={Icon.plus} onClick={() => onStartTailor(resume.id)}>
              Tailor from base
            </Button>
            <Button
              variant={compareMode ? "primary" : "ghost"}
              onClick={() => setCompareMode((m) => !m)}
            >
              {compareMode ? "Done comparing" : "Compare"}
            </Button>
          </div>
        </div>

        {/* Filters */}
        <div
          style={{
            display: "flex",
            gap: 4,
            padding: "16px 36px",
            borderBottom: "1px solid var(--border)",
            background: "var(--paper-2)",
          }}
        >
          {[
            { k: "all", l: `All · ${versions.length}` },
            { k: "exported", l: "Exported" },
            { k: "draft", l: "Drafts" },
          ].map((f) => (
            <button
              key={f.k}
              onClick={() => setFilter(f.k)}
              style={{
                padding: "4px 10px",
                background: filter === f.k ? "var(--paper)" : "transparent",
                border: `1px solid ${filter === f.k ? "var(--border)" : "transparent"}`,
                borderRadius: 4,
                fontFamily: "Inter, sans-serif",
                fontSize: 12,
                color: filter === f.k ? "var(--ink)" : "var(--muted)",
                cursor: "pointer",
              }}
            >
              {f.l}
            </button>
          ))}
        </div>

        {/* Version timeline */}
        <div style={{ padding: "8px 0 80px" }}>
          {filtered.map((v, i) => (
            <VersionRow
              key={v.n}
              version={v}
              isLast={i === filtered.length - 1}
              isLatest={v.n === latest.n}
              isSelected={selectedN === v.n}
              isCompare={compareMode && compareN === v.n}
              compareMode={compareMode}
              onClick={() => {
                if (compareMode && v.n !== selectedN) {
                  setCompareN(v.n);
                } else {
                  setSelectedN(v.n);
                }
              }}
            />
          ))}
        </div>
      </div>

      {/* Right: detail / compare panel */}
      <div style={{ flex: 1, overflowY: "auto", background: "var(--paper-2)" }}>
        {compareMode && compare ? (
          <CompareView a={selected} b={compare} resume={resume} onStartTailor={onStartTailor} />
        ) : (
          <DetailView version={selected} resume={resume} onStartTailor={onStartTailor} template={template} />
        )}
      </div>
    </div>
  );
}

function VersionRow({ version, isLast, isLatest, isSelected, isCompare, compareMode, onClick }) {
  const v = version;
  const isBase = v.status === "Base";
  return (
    <div
      onClick={onClick}
      style={{
        position: "relative",
        padding: "16px 36px",
        cursor: "pointer",
        background: isSelected
          ? "color-mix(in oklab, var(--accent) 8%, transparent)"
          : isCompare
          ? "color-mix(in oklab, var(--ink) 5%, transparent)"
          : "transparent",
        borderLeft: `3px solid ${
          isSelected ? "var(--accent)" : isCompare ? "var(--ink)" : "transparent"
        }`,
        transition: "background 120ms",
      }}
    >
      {/* Timeline rail */}
      <div
        style={{
          position: "absolute",
          left: 50,
          top: 0,
          bottom: isLast ? "50%" : 0,
          width: 1,
          background: "var(--border)",
        }}
      />
      <div style={{ display: "flex", gap: 16 }}>
        {/* Dot + version number */}
        <div style={{ width: 28, flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "center", paddingTop: 2 }}>
          <div
            style={{
              width: 22,
              height: 22,
              borderRadius: 999,
              background: isBase ? "var(--paper)" : isLatest ? "var(--accent)" : "var(--paper)",
              border: `2px solid ${isLatest ? "var(--accent)" : isBase ? "var(--ink)" : "var(--border)"}`,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 9,
              fontWeight: 600,
              color: isLatest ? "#14180A" : "var(--ink)",
              position: "relative",
              zIndex: 1,
            }}
          >
            v{v.n}
          </div>
        </div>

        {/* Content */}
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12, marginBottom: 4 }}>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div
                style={{
                  fontFamily: "Newsreader, serif",
                  fontSize: 17,
                  fontWeight: 400,
                  letterSpacing: "-0.015em",
                  color: "var(--ink)",
                  lineHeight: 1.2,
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                }}
              >
                {v.name}
              </div>
              <div
                style={{
                  fontFamily: "Inter, sans-serif",
                  fontSize: 11,
                  color: "var(--muted)",
                  marginTop: 2,
                  letterSpacing: "0.01em",
                }}
              >
                {v.angle}
              </div>
            </div>
            {!isBase ? (
              <Pill tone="accent" style={{ flexShrink: 0 }}>
                {isLatest ? "Latest" : `v${v.n}`}
              </Pill>
            ) : (
              <Pill style={{ flexShrink: 0 }}>Base</Pill>
            )}
          </div>

          <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 8 }}>
            <Eyebrow style={{ fontSize: 9 }}>{v.date}</Eyebrow>
            <div style={{ width: 3, height: 3, borderRadius: 999, background: "var(--border)" }} />
            {!isBase ? (
              <>
                <Eyebrow style={{ fontSize: 9 }}>
                  {v.accepted}/{v.total} suggestions kept
                </Eyebrow>
                {v.status === "Draft" && (
                  <>
                    <div style={{ width: 3, height: 3, borderRadius: 999, background: "var(--border)" }} />
                    <Pill tone="warn" style={{ fontSize: 9 }}>Draft</Pill>
                  </>
                )}
              </>
            ) : (
              <Eyebrow style={{ fontSize: 9 }}>Master copy</Eyebrow>
            )}
          </div>

          {/* Keyword chips */}
          {v.keywords && v.keywords.length > 0 && (
            <div style={{ display: "flex", flexWrap: "wrap", gap: 4, marginTop: 10 }}>
              {v.keywords.slice(0, 4).map((k) => (
                <span
                  key={k}
                  style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 9,
                    padding: "2px 6px",
                    background: "var(--paper-2)",
                    color: "var(--muted)",
                    borderRadius: 3,
                    letterSpacing: "0.02em",
                    border: "1px solid var(--border)",
                  }}
                >
                  {k}
                </span>
              ))}
              {v.keywords.length > 4 && (
                <span
                  style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 9,
                    padding: "2px 6px",
                    color: "var(--muted)",
                  }}
                >
                  +{v.keywords.length - 4}
                </span>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function DetailView({ version, resume, onStartTailor, template }) {
  const v = version;
  const isBase = v.status === "Base";
  return (
    <div style={{ padding: "40px 56px 80px", maxWidth: 900, margin: "0 auto" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 28, gap: 24 }}>
        <div style={{ flex: 1 }}>
          <Eyebrow style={{ marginBottom: 8 }}>
            Version v{v.n} {isBase && "· base"}
          </Eyebrow>
          <h2
            style={{
              fontFamily: "Newsreader, serif",
              fontSize: 32,
              fontWeight: 400,
              letterSpacing: "-0.025em",
              color: "var(--ink)",
              margin: "0 0 8px",
              lineHeight: 1.1,
            }}
          >
            {v.name}
          </h2>
          <div style={{ fontFamily: "Inter, sans-serif", fontSize: 13, color: "var(--muted)" }}>
            Saved {v.date}
            {!isBase && ` · ${v.accepted}/${v.total} suggestions kept`}
          </div>
        </div>
        <Pill tone={isBase ? "default" : "accent"}>{isBase ? "Base" : v.status}</Pill>
      </div>

      {/* "Best for" callout */}
      <div
        style={{
          padding: "20px 24px",
          background: "var(--paper)",
          border: "1px solid var(--border)",
          borderRadius: 8,
          marginBottom: 24,
          display: "flex",
          gap: 18,
          alignItems: "flex-start",
        }}
      >
        <div
          style={{
            width: 28,
            height: 28,
            borderRadius: 999,
            background: "color-mix(in oklab, var(--accent) 14%, transparent)",
            color: "var(--accent)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexShrink: 0,
          }}
        >
          {Icon.sparkle}
        </div>
        <div style={{ flex: 1 }}>
          <Eyebrow style={{ marginBottom: 6 }}>Reuse this version for</Eyebrow>
          <div
            style={{
              fontFamily: "Newsreader, serif",
              fontSize: 18,
              color: "var(--ink)",
              lineHeight: 1.4,
              fontStyle: "italic",
            }}
          >
            &ldquo;{v.bestFor}&rdquo;
          </div>
        </div>
      </div>

      {/* Summary */}
      <div style={{ marginBottom: 24 }}>
        <Eyebrow style={{ marginBottom: 10 }}>What changed</Eyebrow>
        <p
          style={{
            fontFamily: "Newsreader, serif",
            fontSize: 17,
            lineHeight: 1.55,
            color: "var(--ink)",
            margin: 0,
            maxWidth: 640,
          }}
        >
          {v.summary}
        </p>
      </div>

      {/* Keywords */}
      {v.keywords.length > 0 && (
        <div style={{ marginBottom: 32 }}>
          <Eyebrow style={{ marginBottom: 10 }}>Emphasized keywords · {v.keywords.length}</Eyebrow>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            {v.keywords.map((k) => (
              <span
                key={k}
                style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 11,
                  padding: "5px 10px",
                  background: "color-mix(in oklab, var(--accent) 10%, transparent)",
                  color: "var(--accent)",
                  borderRadius: 4,
                  letterSpacing: "0.02em",
                  fontWeight: 500,
                }}
              >
                {k}
              </span>
            ))}
          </div>
        </div>
      )}

      {/* Actions */}
      <Rule style={{ marginBottom: 24 }} />
      <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
        <Button variant="accent" icon={Icon.sparkle} onClick={() => onStartTailor(resume.id, v.n)}>
          Tailor from v{v.n}
        </Button>
        {!isBase && (
          <>
            <Button variant="primary" icon={Icon.download}>
              Re-export PDF
            </Button>
            <Button variant="ghost">Duplicate</Button>
            <Button variant="ghost">Rename</Button>
            <Button variant="quiet" style={{ marginLeft: "auto" }}>
              Delete
            </Button>
          </>
        )}
      </div>

      {/* Reuse hint */}
      <div
        style={{
          marginTop: 32,
          padding: "16px 20px",
          background: "var(--paper)",
          border: "1px dashed var(--border)",
          borderRadius: 6,
          display: "flex",
          gap: 12,
          alignItems: "flex-start",
        }}
      >
        <div style={{ fontFamily: "Inter, sans-serif", fontSize: 12, color: "var(--muted)", lineHeight: 1.55 }}>
          <strong style={{ color: "var(--ink)" }}>Tailor from v{v.n}</strong> uses this version&rsquo;s
          accepted edits as the new starting point — useful when the next job is similar to{" "}
          <strong style={{ color: "var(--ink)" }}>{v.company || "your base"}</strong>. Use{" "}
          <strong style={{ color: "var(--ink)" }}>Tailor from base</strong> when starting fresh.
        </div>
      </div>
    </div>
  );
}

function CompareView({ a, b, resume, onStartTailor }) {
  const Col = ({ v, accent }) => (
    <div
      style={{
        flex: 1,
        padding: "32px 32px 40px",
        borderRight: accent ? "1px solid var(--border)" : "none",
        background: "var(--paper)",
        minHeight: "100%",
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
        <div
          style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 8,
            padding: "4px 10px",
            background: accent ? "color-mix(in oklab, var(--accent) 14%, transparent)" : "var(--paper-2)",
            border: `1px solid ${accent ? "var(--accent)" : "var(--border)"}`,
            borderRadius: 999,
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 11,
            fontWeight: 500,
            color: accent ? "var(--accent)" : "var(--muted)",
          }}
        >
          v{v.n}
        </div>
        <Eyebrow style={{ fontSize: 9 }}>
          {v.status === "Base" ? "Master copy" : `${v.accepted}/${v.total} kept`}
        </Eyebrow>
      </div>
      <h3
        style={{
          fontFamily: "Newsreader, serif",
          fontSize: 22,
          fontWeight: 400,
          letterSpacing: "-0.02em",
          color: "var(--ink)",
          margin: "0 0 4px",
          lineHeight: 1.2,
        }}
      >
        {v.name}
      </h3>
      <Eyebrow style={{ marginBottom: 18 }}>
        {v.date} · {v.angle}
      </Eyebrow>

      <Eyebrow style={{ marginBottom: 8 }}>Best for</Eyebrow>
      <p
        style={{
          fontFamily: "Newsreader, serif",
          fontSize: 15,
          lineHeight: 1.55,
          color: "var(--ink)",
          margin: "0 0 18px",
          fontStyle: "italic",
        }}
      >
        &ldquo;{v.bestFor}&rdquo;
      </p>

      <Eyebrow style={{ marginBottom: 8 }}>What changed</Eyebrow>
      <p
        style={{
          fontFamily: "Inter, sans-serif",
          fontSize: 13,
          lineHeight: 1.6,
          color: "var(--ink)",
          margin: "0 0 18px",
        }}
      >
        {v.summary}
      </p>

      <Eyebrow style={{ marginBottom: 8 }}>Keywords</Eyebrow>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 5, marginBottom: 22 }}>
        {v.keywords.map((k) => (
          <span
            key={k}
            style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10,
              padding: "3px 8px",
              background: "var(--paper-2)",
              color: "var(--ink)",
              borderRadius: 3,
              border: "1px solid var(--border)",
            }}
          >
            {k}
          </span>
        ))}
      </div>

      <Button variant={accent ? "accent" : "ghost"} icon={Icon.sparkle} onClick={() => onStartTailor(resume.id, v.n)}>
        Tailor from v{v.n}
      </Button>
    </div>
  );

  // Compute keyword overlap
  const setA = new Set(a.keywords);
  const setB = new Set(b.keywords);
  const shared = [...setA].filter((k) => setB.has(k));
  const onlyA = [...setA].filter((k) => !setB.has(k));
  const onlyB = [...setB].filter((k) => !setA.has(k));

  return (
    <div>
      <div style={{ padding: "24px 32px", borderBottom: "1px solid var(--border)", background: "var(--paper-2)" }}>
        <Eyebrow style={{ marginBottom: 6 }}>Compare</Eyebrow>
        <div style={{ fontFamily: "Newsreader, serif", fontSize: 22, color: "var(--ink)", letterSpacing: "-0.02em" }}>
          v{a.n} <span style={{ color: "var(--muted)" }}>vs</span> v{b.n}
        </div>
      </div>
      <div style={{ display: "flex" }}>
        <Col v={a} accent />
        <Col v={b} accent={false} />
      </div>

      {/* Keyword diff */}
      <div style={{ padding: "32px 32px 60px" }}>
        <Eyebrow style={{ marginBottom: 14 }}>Keyword diff</Eyebrow>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          <KeywordSet label={`Only in v${a.n}`} keywords={onlyA} tone="accent" />
          <KeywordSet label="Shared" keywords={shared} tone="default" />
          <KeywordSet label={`Only in v${b.n}`} keywords={onlyB} tone="default" />
        </div>
      </div>
    </div>
  );
}

function KeywordSet({ label, keywords, tone }) {
  return (
    <div
      style={{
        padding: 16,
        background: "var(--paper)",
        border: "1px solid var(--border)",
        borderRadius: 6,
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
        <Eyebrow>{label}</Eyebrow>
        <Eyebrow style={{ fontSize: 9 }}>{keywords.length}</Eyebrow>
      </div>
      {keywords.length === 0 ? (
        <div style={{ fontFamily: "Inter, sans-serif", fontSize: 12, color: "var(--muted)", fontStyle: "italic" }}>
          (none)
        </div>
      ) : (
        <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
          {keywords.map((k) => (
            <span
              key={k}
              style={{
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 10,
                padding: "3px 8px",
                background:
                  tone === "accent"
                    ? "color-mix(in oklab, var(--accent) 12%, transparent)"
                    : "var(--paper-2)",
                color: tone === "accent" ? "var(--accent)" : "var(--ink)",
                borderRadius: 3,
                border: `1px solid ${tone === "accent" ? "color-mix(in oklab, var(--accent) 30%, transparent)" : "var(--border)"}`,
              }}
            >
              {k}
            </span>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ResumeDetailScreen });