// Workspace — the post-login landing.
//
// Shows a single CTA to start a new negotiation, plus a list of saved cases.
// Cases are stored server-side through /api/cases. Full case payloads are
// encrypted at rest; the workspace list only loads summaries.

async function caseRequest(path = "", options = {}) {
  // In Clerk mode, authenticate with a session bearer token; in custom mode
  // getToken() returns null and the HttpOnly session cookie carries auth.
  const token = window.Auth?.getToken ? await window.Auth.getToken().catch(() => null) : null;
  const resp = await fetch(`/api/cases${path}`, {
    credentials: "same-origin",
    ...options,
    headers: {
      "content-type": "application/json",
      ...(token ? { Authorization: `Bearer ${token}` } : {}),
      ...(options.headers || {}),
    },
  });
  const data = await resp.json().catch(() => ({}));
  if (!resp.ok || data.error) throw new Error(data.error || "Case storage failed.");
  return data;
}

async function listCases() {
  const data = await caseRequest("");
  return data.cases || [];
}
async function getCase(id) {
  const data = await caseRequest(`?id=${encodeURIComponent(id)}`);
  return data.case || null;
}
async function saveCase(c) {
  const data = await caseRequest("", {
    method: "POST",
    body: JSON.stringify({ action: "save", case: c }),
  });
  return data.case;
}
async function clearCases() {
  const data = await caseRequest("", {
    method: "POST",
    body: JSON.stringify({ action: "clear" }),
  });
  return data.deleted || 0;
}
function newCaseId() {
  return "case-" + Math.random().toString(36).slice(2, 10) + "-" + Date.now().toString(36);
}

window.Workspace = { listCases, getCase, saveCase, clearCases, newCaseId };

const { useState: useStateWS, useRef: useRefWS, useEffect: useEffectWS } = React;

function formatBytes(n) {
  if (!n) return "";
  if (n < 1024) return `${n} B`;
  if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
}

function NewCaseModal({ onConfirm, onClose }) {
  const [stage, setStage] = useStateWS("idle"); // idle | extracting | ready | error
  const [error, setError] = useStateWS(null);
  const [briefing, setBriefing] = useStateWS(null);
  const [dragOver, setDragOver] = useStateWS(false);
  const fileInputRef = useRefWS(null);

  async function handleFile(file) {
    if (!file) return;
    setError(null);
    setBriefing(null);
    setStage("extracting");
    const result = await window.PdfIntake.extractText(file);
    if (!result.ok) {
      setError(result.error);
      setStage("error");
      return;
    }
    setBriefing(result);
    setStage("ready");
  }

  function onFilePick(e) {
    const file = e.target.files?.[0];
    if (file) handleFile(file);
    e.target.value = "";
  }

  function onDrop(e) {
    e.preventDefault();
    setDragOver(false);
    const file = e.dataTransfer.files?.[0];
    if (file) handleFile(file);
  }

  function startWithBriefing() {
    if (!briefing) return;
    onConfirm({ briefing });
  }

  function startSkip() {
    onConfirm({ briefing: null });
  }

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">
          <Icon name="x" size={18}/>
        </button>
        <div className="kicker">New negotiation</div>
        <h2 className="display-sm modal-title">Any supporting documents you'd like to share?</h2>
        <p className="lede modal-lede">
          Attach a meeting note, supplier letter, RFP, or call-briefing transcript. The coach will
          read it before your session begins.
        </p>

        <div
          className={`dropzone ${dragOver ? "is-dragover" : ""} ${stage === "ready" ? "is-ready" : ""} ${stage === "error" ? "is-error" : ""}`}
          onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
          onDragLeave={() => setDragOver(false)}
          onDrop={onDrop}
          onClick={() => stage === "extracting" ? null : fileInputRef.current?.click()}
        >
          <input
            ref={fileInputRef}
            type="file"
            accept="application/pdf"
            style={{ display: "none" }}
            onChange={onFilePick}
          />

          {stage === "idle" && (
            <>
              <div className="dropzone-mark"><Icon name="upload" size={24}/></div>
              <div className="dropzone-title">Drag a PDF here, or click to choose a file</div>
              <div className="dropzone-sub">PDF only · up to 100 pages · stays in your browser</div>
            </>
          )}

          {stage === "extracting" && (
            <>
              <div className="dropzone-spinner"><span/><span/><span/></div>
              <div className="dropzone-title">Reading your document — in your browser…</div>
              <div className="dropzone-sub">The file never leaves your device.</div>
            </>
          )}

          {stage === "ready" && briefing && (
            <>
              <div className="dropzone-mark"><Icon name="file-text" size={24}/></div>
              <div className="dropzone-title">{briefing.fileName}</div>
              <div className="dropzone-sub">
                {briefing.pageCount} pages · {formatBytes(briefing.sizeBytes)} · {briefing.text.length.toLocaleString()} chars extracted
              </div>
              {briefing.softWarn && (
                <div className="dropzone-warn">Large briefing — your first session will take a little longer to prepare.</div>
              )}
              {briefing.truncated && (
                <div className="dropzone-warn">Briefing was truncated to fit. Trim the source PDF for a cleaner pass.</div>
              )}
              <div className="dropzone-action-row">
                <button className="link-btn" onClick={(e) => { e.stopPropagation(); fileInputRef.current?.click(); }}>Choose a different file</button>
              </div>
            </>
          )}

          {stage === "error" && (
            <>
              <div className="dropzone-mark dropzone-mark-err"><Icon name="alert-triangle" size={22}/></div>
              <div className="dropzone-title">{error}</div>
              <div className="dropzone-action-row">
                <button className="link-btn" onClick={(e) => { e.stopPropagation(); fileInputRef.current?.click(); }}>Try a different file</button>
              </div>
            </>
          )}
        </div>

        <div className="modal-privacy">
          Your original file is not stored. We extract text only to prepare your coaching session.
        </div>

        <div className="modal-actions">
          <button className="btn-ghost" onClick={startSkip}>Skip — I'll explain by chat</button>
          <button
            className="btn-primary"
            disabled={stage !== "ready"}
            onClick={startWithBriefing}
          >
            <IconText name="arrow-right" after>Start case</IconText>
          </button>
        </div>
      </div>
    </div>
  );
}

window.NewCaseModal = NewCaseModal;

function WorkspaceScreen({ user, onNewCase, onOpenCase, onOpenSettings, onSignOut, byoKeyStatus, creditStatus }) {
  const [cases, setCases] = useStateWS([]);
  const [caseStatus, setCaseStatus] = useStateWS("loading"); // loading | ready | error | opening
  const [caseError, setCaseError] = useStateWS(null);
  const [modalOpen, setModalOpen] = useStateWS(false);

  useEffectWS(() => {
    let alive = true;
    setCaseStatus("loading");
    listCases()
      .then((items) => {
        if (!alive) return;
        setCases(items);
        setCaseStatus("ready");
      })
      .catch((err) => {
        if (!alive) return;
        setCaseError(err.message || "Couldn't load saved cases.");
        setCaseStatus("error");
      });
    return () => { alive = false; };
  }, []);

  function openModal() { setModalOpen(true); }
  function closeModal() { setModalOpen(false); }
  function handleConfirm(payload) {
    setModalOpen(false);
    onNewCase(payload);
  }
  async function handleOpenCase(summary) {
    setCaseStatus("opening");
    setCaseError(null);
    try {
      const full = await getCase(summary.id);
      onOpenCase(full || summary);
    } catch (err) {
      setCaseError(err.message || "Couldn't open that case.");
      setCaseStatus("error");
    }
  }

  return (
    <div className="screen workspace-screen">
      <AppTopBar
        user={user}
        active="workspace"
        onNewCase={openModal}
        onOpenSettings={onOpenSettings}
        onSignOut={onSignOut}
        byoKeyStatus={byoKeyStatus}
        creditStatus={creditStatus}
      />

      <main className="workspace-main">
        <div className="workspace-hero">
          <div className="kicker">Procurement workspace</div>
          <h1 className="display">Hello {((user.fullName || "there").split(" ")[0]) || "there"} — what are we preparing today?</h1>
          <p className="lede">
            Start a new negotiation and build a complete action plan in about ten minutes.
          </p>

          <div className="workspace-cta-row">
            <button className="btn-primary btn-xl" onClick={openModal}>
              <IconText name="plus">Start a new negotiation</IconText>
            </button>
            <button className="btn-ghost btn-xl" onClick={onOpenSettings}>
              <IconText name="settings">Settings</IconText>
            </button>
          </div>
        </div>

        {modalOpen && <NewCaseModal onConfirm={handleConfirm} onClose={closeModal}/>}

        <section className="workspace-cases">
          <div className="workspace-cases-head">
            <h2 className="display-sm">Your cases</h2>
            <div className="muted">{caseStatus === "loading" ? "Loading…" : `${cases.length} saved`}</div>
          </div>

          {caseStatus === "error" ? (
            <div className="workspace-empty">
              <div className="workspace-empty-mark"><Icon name="alert-triangle" size={28}/></div>
              <div>
                <div className="workspace-empty-title">Couldn't load cases.</div>
                <div className="workspace-empty-sub">{caseError}</div>
              </div>
            </div>
          ) : cases.length === 0 ? (
            <div className="workspace-empty">
              <div className="workspace-empty-mark"><Icon name="briefcase-business" size={30}/></div>
              <div>
                <div className="workspace-empty-title">{caseStatus === "loading" ? "Loading cases…" : "No cases yet."}</div>
                <div className="workspace-empty-sub">
                  {caseStatus === "loading" ? "Checking your encrypted workspace." : "Completed plans will show up here, ready to reopen or print."}
                </div>
              </div>
            </div>
          ) : (
            <ul className="workspace-case-list">
              {cases.map(c => (
                <li key={c.id} className="workspace-case-row" onClick={() => handleOpenCase(c)}>
                  <div className="workspace-case-l">
                    <div className="workspace-case-title">{c.title || "Untitled negotiation"}</div>
                    <div className="workspace-case-meta">
                      {c.archetypeLabel || "Procurement"} · {c.phase === "plan" ? "Plan ready" : "In discovery"}
                    </div>
                  </div>
                  <div className="workspace-case-r">
                    <div className="workspace-case-date">{c.date || "—"}</div>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </section>

      </main>
    </div>
  );
}

window.WorkspaceScreen = WorkspaceScreen;