// ActionMinutes — generation, error recovery, delivery, minutes review
const { useState: useStateG, useEffect: useEffectG, useRef: useRefG } = React;

const FEEDBACK_FLAGS = ["Too short", "Too long", "Wrong format", "Missed items", "Names misspelled", "Vote counts off"];

/* ---------- Processing / job status ---------- */
function ProcessingPage({ name, navigate, appState, setAppState }) {
  const genId = appState.generationId || (window.location.pathname.split("/").pop());
  const [gen, setGen] = useStateG(null);
  const [error, setError] = useStateG(null);
  const pollRef = useRefG(null);

  useEffectG(() => {
    if (!genId) { setError("No generation ID found."); return; }
    let cancelled = false;

    const poll = async () => {
      try {
        const data = await AM_API.generations.get(genId);
        if (cancelled) return;
        setGen(data);
        if (data.status === "Complete") {
          setAppState((s) => ({ ...s, generationId: genId }));
          setTimeout(() => navigate("/minutes/" + genId), 600);
        } else if (data.status === "FailedHard") {
          // stop polling
        } else if (data.status === "FailedRecoverable") {
          // stop polling, show recovery UI
        } else {
          pollRef.current = setTimeout(poll, 3000);
        }
      } catch (err) {
        if (!cancelled) setError(err.message || "Failed to load job status.");
      }
    };
    poll();
    return () => { cancelled = true; clearTimeout(pollRef.current); };
  }, [genId]);

  if (error) {
    return (
      <div className="am-appmain narrow" style={{ maxWidth: 640 }}>
        <div className="pi-card" style={{ padding: "30px 34px" }}>
          <div style={{ color: "#F1416C", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 17 }}>Error loading job</div>
          <p style={{ color: "var(--fg-2)", fontSize: 14 }}>{error}</p>
          <button className="pi-btn pi-btn-primary" onClick={() => navigate("/home")}>Go to dashboard</button>
        </div>
      </div>
    );
  }

  if (!gen) {
    return (
      <div className="am-appmain narrow" style={{ maxWidth: 640, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 320 }}>
        <span className="am-spin" style={{ width: 32, height: 32, borderColor: "rgba(3,149,255,0.2)", borderTopColor: "var(--pi-blue)", display: "inline-block" }}></span>
      </div>
    );
  }

  if (gen.status === "FailedRecoverable") {
    return <ErrorPage name={name} navigate={navigate} gen={gen} appState={appState} setAppState={setAppState} />;
  }

  if (gen.status === "FailedHard") {
    return (
      <div className="am-appmain narrow" style={{ maxWidth: 680 }}>
        <div className="pi-card" style={{ padding: "24px 28px", borderColor: "#F1416C" }}>
          <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
            <span className="pi-feed-icon" style={{ background: "#FCE3EB", color: "#F1416C", width: 36, height: 36 }}><AMIcon name="triangle-alert" size={17} /></span>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 17 }}>Generation failed</div>
              <p style={{ fontSize: 13.5, color: "var(--fg-2)", margin: "6px 0 0", lineHeight: 1.55 }}>
                {gen.errorMessage || "Something went wrong and we could not recover. Your credit has been returned."}
              </p>
              <div style={{ marginTop: 12 }}>
                <button className="pi-btn pi-btn-primary" onClick={() => navigate("/home")}>Go to dashboard</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  const stages = gen.stages || [];
  const percent = gen.percent || 0;
  const meetingTitle = gen.meetingTitle || (appState.boardName ? appState.boardName + " Meeting" : "Meeting");

  return (
    <div className="am-appmain narrow" style={{ maxWidth: 640 }}>
      <div className="pi-card" style={{ padding: "30px 34px" }}>
        <span className="pi-eyebrow">Generating draft minutes</span>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, margin: "8px 0 4px" }}>
          {meetingTitle}
        </h2>
        <p style={{ fontSize: 13, color: "var(--fg-3)", margin: "0 0 20px" }}>Usually ready in under 20 minutes.</p>

        {percent > 0 && (
          <div style={{ marginBottom: 16, background: "var(--pi-gray-200)", borderRadius: 999, overflow: "hidden", height: 6 }}>
            <div style={{ width: percent + "%", background: "var(--pi-blue)", height: "100%", transition: "width 800ms var(--ease-out)", borderRadius: 999 }}></div>
          </div>
        )}

        <div className="am-stages">
          {stages.map((s, i) => {
            const cls = s.state === "done" ? "done" : s.state === "active" ? "active" : s.state === "failed" ? "failed" : "";
            return (
              <div className={"am-stage " + cls} key={s.key || i}>
                <span className="st">
                  {s.state === "failed" ? <AMIcon name="x" size={13} strokeWidth={3} />
                    : s.state === "done" ? <AMIcon name="check" size={13} strokeWidth={3} />
                    : s.state === "active" ? <span className="am-spin" style={{ borderColor: "rgba(3,149,255,0.25)", borderTopColor: "var(--pi-blue)" }}></span>
                    : <span style={{ fontSize: 11, fontFamily: "var(--font-display)", fontWeight: 700 }}>{i + 1}</span>}
                </span>
                <span>
                  <div className="tt">{s.title}</div>
                  {s.detail && (s.state === "done" || s.state === "active" || s.state === "failed") && (
                    <div className="ss">{s.detail}</div>
                  )}
                </span>
              </div>
            );
          })}
          {stages.length === 0 && (
            <div className="am-stage active">
              <span className="st"><span className="am-spin" style={{ borderColor: "rgba(3,149,255,0.25)", borderTopColor: "var(--pi-blue)" }}></span></span>
              <span><div className="tt">{gen.stage || "Processing…"}</div></span>
            </div>
          )}
        </div>

        <div style={{ borderTop: "1px dotted var(--border-1)", marginTop: 18, paddingTop: 16, display: "flex", alignItems: "center", gap: 12 }}>
          <AMIcon name="mail" size={14} color="var(--pi-blue)" />
          <span style={{ fontSize: 12.5, color: "var(--fg-2)" }}>
            You don't need to wait here — we'll email you the moment your draft is ready.
          </span>
        </div>
      </div>
    </div>
  );
}

/* ---------- Error + recovery ---------- */
function ErrorPage({ name, navigate, gen, appState, setAppState }) {
  const [url, setUrl] = useStateG("");
  const [loading, setLoading] = useStateG(false);
  const [retryError, setRetryError] = useStateG(null);
  const boardId = appState.boardId;
  const meetingDraftId = gen && gen.meetingDraftId;

  const handleRetry = async () => {
    if (!url || !meetingDraftId || loading) return;
    setLoading(true);
    setRetryError(null);
    try {
      // Update video slot with new URL
      await AM_API.equation.putSlot(meetingDraftId, "video", "url", url, url);
      // Then trigger a new generation
      const res = await AM_API.generations.create(meetingDraftId);
      setAppState((s) => ({ ...s, generationId: res.generationId }));
      navigate("/jobs/" + res.generationId);
    } catch (err) {
      setRetryError(err.message || "Retry failed.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="am-appmain narrow" style={{ maxWidth: 680 }}>
      <div className="pi-card" style={{ padding: "24px 28px", borderColor: "#F1416C", marginBottom: 18 }}>
        <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
          <span className="pi-feed-icon" style={{ background: "#FCE3EB", color: "#F1416C", width: 36, height: 36 }}><AMIcon name="triangle-alert" size={17} /></span>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 17 }}>We hit a snag with the recording</div>
            <p style={{ fontSize: 13.5, color: "var(--fg-2)", margin: "6px 0 0", lineHeight: 1.55 }}>
              {gen && gen.errorMessage ? gen.errorMessage : "The video link couldn't be processed — it may be private, region-locked, or still uploading. Your agenda and template are safe and ready."}
            </p>
            <div style={{ display: "flex", gap: 8, marginTop: 12, alignItems: "center", flexWrap: "wrap" }}>
              <span className="pi-badge pi-badge-success"><AMIcon name="rotate-ccw" size={11} /> Credit returned automatically</span>
            </div>
          </div>
        </div>
      </div>

      <div className="pi-card" style={{ padding: "24px 28px" }}>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16, margin: "0 0 12px" }}>Try again with a different link</h3>
        <p style={{ fontSize: 13.5, color: "var(--fg-2)", margin: "0 0 16px", lineHeight: 1.55 }}>
          If you have another link to the recording (or can upload a file), paste it below and we'll pick up right where we left off.
        </p>
        <div className="pi-field" style={{ marginBottom: 16 }}>
          <input
            type="text" placeholder="https://…" value={url}
            onChange={(e) => setUrl(e.target.value)}
            style={{ fontFamily: "var(--font-mono)", fontSize: 12.5 }}
          />
        </div>
        {retryError && (
          <div className="am-domain-note warn" style={{ marginBottom: 12 }}>
            <span className="ico"><AMIcon name="triangle-alert" size={15} /></span>
            <span>{retryError}</span>
          </div>
        )}
        <div style={{ display: "flex", gap: 8 }}>
          <button className="pi-btn pi-btn-primary" onClick={handleRetry} disabled={!url || loading}>
            <AMIcon name="rotate-ccw" size={14} /> {loading ? "Retrying…" : "Try again with this link"}
          </button>
          <button className="pi-btn pi-btn-ghost" onClick={() => navigate("/home")}>Go to dashboard</button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Minutes review ---------- */
function MinutesPage({ name, navigate, appState, isStaff }) {
  const genId = appState.generationId || (window.location.pathname.split("/").pop());
  const [gen, setGen] = useStateG(null);
  const [error, setError] = useStateG(null);
  const [stars, setStars] = useStateG(0);
  const [flags, setFlags] = useStateG([]);
  const [note, setNote] = useStateG("");
  const [sent, setSent] = useStateG(false);
  const [toast, setToast] = useStateG(null);

  useEffectG(() => {
    if (!genId) { setError("No generation ID."); return; }
    AM_API.generations.get(genId).then(setGen).catch((err) => setError(err.message));
  }, [genId]);

  const submitFeedback = async () => {
    if (!stars) return;
    try {
      await AM_API.generations.feedback(genId, stars, flags, note);
      setSent(true);
      setToast("Thanks — your feedback goes straight to the team that drafts these.");
      setTimeout(() => setToast(null), 3200);
    } catch (err) {
      setToast("Could not send feedback: " + err.message);
      setTimeout(() => setToast(null), 3200);
    }
  };

  const handleDownload = () => {
    window.location.href = AM_API.generations.download(genId);
  };

  if (error) {
    return (
      <div className="am-appmain" style={{ maxWidth: 1100 }}>
        <div className="am-domain-note warn">
          <span className="ico"><AMIcon name="triangle-alert" size={15} /></span>
          <span>{error}</span>
        </div>
        <button className="pi-btn pi-btn-primary" style={{ marginTop: 16 }} onClick={() => navigate("/home")}>Go to dashboard</button>
      </div>
    );
  }

  if (!gen) {
    return (
      <div className="am-appmain" style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: 400 }}>
        <span className="am-spin" style={{ width: 32, height: 32, borderColor: "rgba(3,149,255,0.2)", borderTopColor: "var(--pi-blue)", display: "inline-block" }}></span>
      </div>
    );
  }

  const meetingTitle = gen.meetingTitle || (appState.boardName ? appState.boardName + " Meeting" : "Meeting");
  const credits = appState.credits || { used: 0, total: 3, remaining: 3, resetsOn: "next month" };

  return (
    <div className="am-appmain" style={{ maxWidth: 1100 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18, gap: 14, flexWrap: "wrap" }}>
        <div>
          <span className="pi-eyebrow">Draft minutes · ready for your review</span>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, margin: "6px 0 0" }}>{meetingTitle}</h2>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="pi-btn pi-btn-outline" onClick={handleDownload}><AMIcon name="download" size={14} /> Word</button>
          <button className="pi-btn pi-btn-primary" onClick={() => navigate("/home")}>Go to your dashboard <AMIcon name="arrow-right" size={14} /></button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.55fr 1fr", gap: 20, alignItems: "start" }}>
        <div style={{ position: "relative" }}>
          <span className="pi-badge pi-badge-warning am-doc-badge">DRAFT — not yet approved</span>
          <div className="am-doc">
            {gen.draftHtml ? (
              <div dangerouslySetInnerHTML={{ __html: gen.draftHtml }} />
            ) : (
              <div style={{ color: "var(--fg-3)", textAlign: "center", padding: 40 }}>
                <AMIcon name="file-text" size={32} strokeWidth={1.5} />
                <p>Draft content not available.</p>
              </div>
            )}
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 14, position: "sticky", top: 80 }}>
          {!isStaff && (
            <div className="pi-card" style={{ padding: "20px 22px" }}>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15, margin: "0 0 4px" }}>How close did we get?</h3>
              <p style={{ fontSize: 12.5, color: "var(--fg-3)", margin: "0 0 12px" }}>Your feedback tunes the next draft for your board.</p>
              {!sent ? (
                <React.Fragment>
                  <div className="am-stars" style={{ marginBottom: 14 }}>
                    {[1, 2, 3, 4, 5].map((i) => (
                      <button key={i} className={"am-star" + (i <= stars ? " on" : "")} onClick={() => setStars(i)} aria-label={i + " star" + (i !== 1 ? "s" : "")}>
                        <AMIcon name="star" size={22} strokeWidth={i <= stars ? 0 : 2} style={i <= stars ? { fill: "currentColor" } : null} />
                      </button>
                    ))}
                  </div>
                  <div className="am-flags" style={{ marginBottom: 14 }}>
                    {FEEDBACK_FLAGS.map((f) => (
                      <button key={f} className={"am-flag" + (flags.includes(f) ? " on" : "")}
                        onClick={() => setFlags(flags.includes(f) ? flags.filter((x) => x !== f) : [...flags, f])}>{f}</button>
                    ))}
                  </div>
                  <div className="pi-field" style={{ marginBottom: 12 }}>
                    <textarea rows={2} placeholder="Anything specific we missed?" value={note} onChange={(e) => setNote(e.target.value)}></textarea>
                  </div>
                  <button
                    className="pi-btn pi-btn-primary"
                    style={{ width: "100%", justifyContent: "center", opacity: stars ? 1 : 0.45, pointerEvents: stars ? "auto" : "none" }}
                    onClick={submitFeedback}
                  >
                    Send feedback
                  </button>
                </React.Fragment>
              ) : (
                <div className="am-q-done"><AMIcon name="circle-check" size={16} color="#07AFAA" /> Feedback sent — thank you.</div>
              )}
            </div>
          )}

          <div className="pi-card" style={{ padding: "20px 22px", background: "var(--pi-blue-light)", border: "none" }}>
            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 14.5, margin: "0 0 6px" }}>Want a second set of eyes?</h3>
            <p style={{ fontSize: 12.5, color: "var(--fg-2)", margin: "0 0 12px", lineHeight: 1.55 }}>
              Book 15 minutes with a minutes specialist. We'll ask one question: <em>what do good minutes look like to you?</em> — and tune your template to match.
            </p>
            <button className="pi-btn pi-btn-primary" style={{ background: "#fff", color: "var(--pi-blue)" }}>Book a review call</button>
          </div>

          <div className="pi-card" style={{ padding: "14px 18px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10 }}>
            <span style={{ fontSize: 12.5, color: "var(--fg-2)" }}>1 credit used for this draft</span>
            <CreditsPill used={credits.used} allowance={credits.total} resetLabel={credits.resetsOn || "next month"} />
          </div>

          {gen.generationSeconds && (
            <div style={{ fontSize: 11.5, color: "var(--fg-3)", textAlign: "right" }}>
              Generated in {Math.round(gen.generationSeconds / 60)} min {gen.generationSeconds % 60}s
            </div>
          )}
        </div>
      </div>
      {toast && <Toast icon="check">{toast}</Toast>}
    </div>
  );
}

Object.assign(window, { ProcessingPage, ErrorPage, MinutesPage });