// New Tailoring screen — paste JD + pick base resume

const { useState: useStateTailor, useRef: useRefTailor, useEffect: useEffectTailor } = React;

function TailorScreen({ onAnalyze, onBack, initialResumeId }) {
  const [jd, setJd] = useStateTailor(window.SAMPLE_JD);
  const [allMasters, setAllMasters] = useStateTailor(() =>
    (window.RESUMES || []).map((r) => ({ id: r.id, label: r.label, content: r, bundled: true }))
  );
  const [selectedResume, setSelectedResume] = useStateTailor(initialResumeId || "pm");
  const [analyzing, setAnalyzing] = useStateTailor(false);
  const [analyzingStep, setAnalyzingStep] = useStateTailor(0);
  const [tailorError, setTailorError] = useStateTailor(null);

  useEffectTailor(() => {
    let cancelled = false;
    if (window.ForgeMasters) {
      window.ForgeMasters.listAllMasters().then((list) => {
        if (!cancelled) setAllMasters(list);
      });
    }
    return () => { cancelled = true; };
  }, []);

  const wordCount = jd.trim().split(/\s+/).filter(Boolean).length;
  const canAnalyze = wordCount > 30;
  const [liveProvider, setLiveProvider] = useStateTailor(null);
  const [liveModel, setLiveModel] = useStateTailor(null);

  useEffectTailor(() => {
    let cancelled = false;
    if (window.ForgeAPI) {
      Promise.all([
        window.ForgeAPI.activeProvider?.(),
        window.ForgeAPI.activeModel?.(),
      ]).then(([p, m]) => {
        if (cancelled) return;
        setLiveProvider(p);
        setLiveModel(m);
      }).catch(() => {});
    }
    return () => { cancelled = true; };
  }, []);

  const liveMode = Boolean(liveProvider);
  const defaultLabel = {
    claude: "Claude Sonnet 4.6",
    gemini: "Gemini 2.5 Pro",
    grok: "Grok 4",
  }[liveProvider] || "Claude";
  const providerLabel = liveModel || defaultLabel;

  useEffectTailor(() => {
    if (!analyzing) return;
    let cancelled = false;
    const steps = liveMode
      ? [
          "Parsing job description",
          `Sending to ${providerLabel}`,
          "Drafting suggestions",
          "Finalizing",
        ]
      : [
          "Parsing job description",
          "Matching against base resume",
          "Extracting required keywords",
          "Drafting suggestions",
        ];

    let i = 0;
    const tick = setInterval(() => {
      i = Math.min(i + 1, steps.length - 1);
      if (!cancelled) setAnalyzingStep(i);
    }, 600);

    (async () => {
      try {
        const suggestions = await window.ForgeAPI.tailor({
          resumeId: selectedResume,
          jd,
        });
        if (cancelled) return;
        window.SUGGESTIONS = suggestions;
        clearInterval(tick);
        setAnalyzingStep(steps.length - 1);
        setTimeout(() => {
          if (!cancelled) onAnalyze({ jd, resumeId: selectedResume });
        }, 300);
      } catch (e) {
        if (cancelled) return;
        clearInterval(tick);
        setTailorError(e.message || String(e));
        setAnalyzing(false);
      }
    })();

    return () => {
      cancelled = true;
      clearInterval(tick);
    };
  }, [analyzing]);

  return (
    <div style={{ padding: "40px 80px 120px", maxWidth: 1280, margin: "0 auto" }}>
      <div style={{ marginBottom: 40 }}>
        <StepIndicator step="tailor" />
      </div>

      <div style={{ marginBottom: 48 }}>
        <h1
          style={{
            fontFamily: "Newsreader, serif",
            fontSize: 42,
            fontWeight: 400,
            letterSpacing: "-0.025em",
            color: "var(--ink)",
            margin: 0,
            lineHeight: 1.1,
          }}
        >
          Paste the job description.
        </h1>
        <p
          style={{
            fontFamily: "Newsreader, serif",
            fontSize: 16,
            color: "var(--muted)",
            marginTop: 12,
            maxWidth: 520,
            lineHeight: 1.5,
          }}
        >
          Pick which base resume to tailor from. We&rsquo;ll draft section-by-section suggestions for you to review.
        </p>
        <div style={{ marginTop: 14, display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
          <span
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 6,
              padding: "5px 10px",
              borderRadius: 999,
              border: "1px solid var(--border)",
              fontFamily: "JetBrains Mono, monospace",
              fontSize: 10,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              color: liveMode ? "var(--accent)" : "var(--muted)",
              background: liveMode ? "rgba(205,236,79,0.08)" : "transparent",
            }}
          >
            <span style={{ width: 6, height: 6, borderRadius: 999, background: liveMode ? "var(--accent)" : "var(--muted)" }} />
            {liveMode ? `Live · ${providerLabel}` : "Demo · mock suggestions"}
          </span>
          {tailorError && (
            <span style={{ fontSize: 12, color: "#E08A6B" }}>
              {tailorError}
            </span>
          )}
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 32 }}>
        {/* JD textarea */}
        <div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
            <Eyebrow>Job description</Eyebrow>
            <Eyebrow style={{ fontSize: 9 }}>
              {wordCount} {wordCount === 1 ? "word" : "words"}
              {!canAnalyze && wordCount > 0 && " · need ≥30"}
            </Eyebrow>
          </div>
          <div
            style={{
              background: "var(--paper)",
              border: "1px solid var(--border)",
              borderRadius: 8,
              padding: 0,
              position: "relative",
              overflow: "hidden",
            }}
          >
            <textarea
              value={jd}
              onChange={(e) => setJd(e.target.value)}
              disabled={analyzing}
              placeholder="Paste the full job posting here — role, responsibilities, requirements…"
              style={{
                width: "100%",
                minHeight: 420,
                padding: "24px 28px",
                border: "none",
                outline: "none",
                resize: "vertical",
                fontFamily: "Newsreader, serif",
                fontSize: 15,
                lineHeight: 1.65,
                color: "var(--ink)",
                background: "transparent",
                boxSizing: "border-box",
              }}
            />
            <div
              style={{
                padding: "12px 20px",
                borderTop: "1px solid var(--border)",
                background: "var(--paper-2)",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                fontSize: 11,
                fontFamily: "'JetBrains Mono', monospace",
                color: "var(--muted)",
                letterSpacing: "0.05em",
              }}
            >
              <span>Or paste a URL · drag a screenshot</span>
              <span>{Math.max(0, 5000 - jd.length)} chars left</span>
            </div>
          </div>
        </div>

        {/* Resume picker + actions */}
        <div>
          <Eyebrow style={{ marginBottom: 12 }}>Base resume</Eyebrow>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {allMasters.map((m) => {
              const r = { ...m.content, id: m.id, label: m.label };
              const active = selectedResume === m.id;
              return (
                <button
                  key={m.id}
                  onClick={() => setSelectedResume(m.id)}
                  disabled={analyzing}
                  style={{
                    textAlign: "left",
                    padding: "16px 18px",
                    background: active ? "var(--paper)" : "transparent",
                    border: `1px solid ${active ? "var(--ink)" : "var(--border)"}`,
                    borderRadius: 8,
                    cursor: "pointer",
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    transition: "all 120ms",
                  }}
                >
                  <div>
                    <div
                      style={{
                        fontFamily: "Newsreader, serif",
                        fontSize: 18,
                        color: "var(--ink)",
                        letterSpacing: "-0.015em",
                        marginBottom: 2,
                      }}
                    >
                      {r.label}
                    </div>
                    <div style={{ fontFamily: "Inter, sans-serif", fontSize: 12, color: "var(--muted)" }}>
                      {r.versions} versions · {r.updated}
                    </div>
                  </div>
                  <div
                    style={{
                      width: 16,
                      height: 16,
                      borderRadius: 999,
                      border: `1.5px solid ${active ? "var(--ink)" : "var(--border)"}`,
                      background: active ? "var(--ink)" : "transparent",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      color: "var(--paper)",
                    }}
                  >
                    {active && <div style={{ width: 6, height: 6, background: "var(--paper)", borderRadius: 999 }} />}
                  </div>
                </button>
              );
            })}
          </div>

          <Rule style={{ margin: "32px 0 24px" }} />

          {!analyzing ? (
            <div style={{ display: "flex", gap: 12 }}>
              <Button variant="ghost" onClick={onBack}>
                Cancel
              </Button>
              <Button
                variant="accent"
                icon={Icon.sparkle}
                disabled={!canAnalyze}
                onClick={() => {
                  setAnalyzing(true);
                  setAnalyzingStep(0);
                }}
                style={{ flex: 1, justifyContent: "center" }}
              >
                Analyze &amp; draft
              </Button>
            </div>
          ) : (
            <AnalyzingPanel step={analyzingStep} />
          )}

          <div
            style={{
              marginTop: 28,
              padding: 16,
              background: "var(--paper-2)",
              borderRadius: 6,
              border: "1px dashed var(--border)",
            }}
          >
            <Eyebrow style={{ marginBottom: 8 }}>Using model</Eyebrow>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <div style={{ fontFamily: "Inter, sans-serif", fontSize: 13, color: "var(--ink)" }}>
                Gemini 2.5 Pro
              </div>
              <button
                style={{
                  fontFamily: "Inter, sans-serif",
                  fontSize: 12,
                  color: "var(--muted)",
                  background: "none",
                  border: "none",
                  cursor: "pointer",
                  textDecoration: "underline",
                  textDecorationColor: "var(--border)",
                  textUnderlineOffset: 3,
                }}
              >
                Change in settings
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function AnalyzingPanel({ step }) {
  const steps = [
    "Parsing job description",
    "Matching against base resume",
    "Extracting required keywords",
    "Drafting suggestions",
  ];
  return (
    <div
      style={{
        padding: "20px 18px",
        border: "1px solid var(--border)",
        borderRadius: 8,
        background: "var(--paper)",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
        <div
          style={{
            width: 12,
            height: 12,
            borderRadius: 999,
            border: "2px solid var(--accent)",
            borderTopColor: "transparent",
            animation: "spin 0.8s linear infinite",
          }}
        />
        <Eyebrow style={{ color: "var(--accent)" }}>Working…</Eyebrow>
      </div>
      {steps.map((s, i) => {
        const done = i < step;
        const active = i === step;
        return (
          <div
            key={s}
            style={{
              display: "flex",
              alignItems: "center",
              gap: 10,
              padding: "6px 0",
              opacity: done || active ? 1 : 0.35,
              transition: "opacity 300ms",
            }}
          >
            <div
              style={{
                width: 14,
                height: 14,
                borderRadius: 999,
                background: done ? "var(--accent)" : active ? "transparent" : "transparent",
                border: `1.5px solid ${done || active ? "var(--accent)" : "var(--border)"}`,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "#14180A",
                flexShrink: 0,
              }}
            >
              {done && (
                <svg width="8" height="8" viewBox="0 0 10 10" fill="none">
                  <path d="M2 5l2 2 4-5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
                </svg>
              )}
            </div>
            <div style={{ fontFamily: "Inter, sans-serif", fontSize: 13, color: "var(--ink)" }}>{s}</div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { TailorScreen });