/* flow.jsx — Review, Submitted, ApprovalQueue, ApprovalDetail, Sent, DocView (paper template). */

/* ---------- review entered data (not the template) ---------- */
function ReviewScreen({ data, session, draft, lang, onLang, nav, onSubmit }) {
  const company = data.companies.find((c) => c.id === draft.companyId);
  const user = data.users.find((u) => u.id === session.userId);
  const [creatorSigned, setCreatorSigned] = useState(false);
  const isFGR = draft.type === "FGR";

  return (
    <div className="app">
      <TopBar title={window.t(lang, "reviewTitle")} sub={draft.docNo} onBack={() => nav(isFGR ? "create-grn" : "create-opex")} lang={lang} onLang={onLang} />
      <div className="scroll stack-lg">
        <p className="lead" style={{ textWrap: "pretty" }}>{window.t(lang, "reviewHint")}</p>

        <div className="card stack">
          <div className="between"><span className="muted">{window.t(lang, "docNo")}</span><span className="mono" style={{ fontWeight: 600 }}>{draft.docNo}</span></div>
          <div className="between"><span className="muted">{window.t(lang, "companyName")}</span><span style={{ fontWeight: 600, textAlign: "right" }}>{company.name.split("·")[0].trim()}</span></div>
          <div className="between"><span className="muted">{window.t(lang, "issueDate")}</span><span className="num">{window.fmtDate(new Date().toISOString())}</span></div>
        </div>

        {/* line summary */}
        <div className="stack">
          <div className="eyebrow">{isFGR ? window.t(lang, "items") : window.t(lang, "expense")}</div>
          {(isFGR ? draft.items : draft.lines).map((x, i) => (
            <div className="row" key={i} style={{ alignItems: "flex-start" }}>
              <span className="ix" style={{ marginTop: 2 }}>{i + 1}</span>
              {isFGR && x.photo && <img src={x.photo.dataUrl} alt="" style={{ width: 44, height: 44, borderRadius: 9, objectFit: "cover" }} />}
              <div className="grow">
                <div style={{ fontWeight: 600 }}>{x.desc}</div>
                {isFGR
                  ? <div className="hint mono" style={{ marginTop: 2 }}>{x.qty} · {x.weight} {x.unit.split("/")[0].trim()} · ฿{window.fmtMoney(x.pricePerUnit)}/u</div>
                  : <div className="hint mono" style={{ marginTop: 2 }}>{x.wht && x.wht.deduct ? `WHT ${x.wht.rate}% −฿${window.fmtMoney(x.wht.amount)}` : window.t(lang, "whtNo")}</div>}
              </div>
              <div className="num" style={{ fontWeight: 600 }}>฿{window.fmtMoney(x.gross)}</div>
            </div>
          ))}
        </div>

        {/* totals */}
        <div className="card">
          {!isFGR && draft.whtTotal > 0 && (
            <React.Fragment>
              <dl className="dl" style={{ margin: 0 }}><dt>{window.t(lang, "total")}</dt><dd className="num">฿{window.fmtMoney(draft.total)}</dd></dl>
              <dl className="dl" style={{ margin: 0 }}><dt>{window.t(lang, "whtAmount")}</dt><dd className="num" style={{ color: "var(--warn)" }}>− ฿{window.fmtMoney(draft.whtTotal)}</dd></dl>
              <hr className="hr" />
            </React.Fragment>
          )}
          <dl className="dl" style={{ margin: 0, fontWeight: 700 }}>
            <dt style={{ color: "var(--text)" }}>{window.t(lang, "grandTotal")}</dt>
            <dd className="num" style={{ fontSize: 18, color: "var(--accent)" }}>฿{window.fmtMoney(isFGR ? draft.total : draft.netTotal)}</dd>
          </dl>
        </div>

        {!isFGR && (
          <div className="stack">
            <div className="eyebrow">{window.t(lang, "photos")}</div>
            <div className="photo-grid">
              {draft.sellerId && <div className="photo-slot filled"><img src={draft.sellerId.dataUrl} alt="" /><div className="meta">{window.t(lang, "sellerIdPhoto")}</div></div>}
              {draft.workPhoto && <div className="photo-slot filled"><img src={draft.workPhoto.dataUrl} alt="" /><div className="meta">{window.t(lang, "workPhoto")}</div></div>}
            </div>
          </div>
        )}
        {/* creator signature */}
        <Field label={window.t(lang, "creatorSign")} required>
          <StoredSign lang={lang} name={user.name} signature={user.signature} signed={creatorSigned} onToggle={() => setCreatorSigned((s) => !s)} />
        </Field>
      </div>

      <div className="action-bar">
        <Button onClick={() => onSubmit(draft, user.signature)} disabled={!creatorSigned} icon="send">{window.t(lang, "sendForApproval")}</Button>
        <Button variant="quiet" onClick={() => nav(isFGR ? "create-grn" : "create-opex")}>{window.t(lang, "editAgain")}</Button>
      </div>
    </div>
  );
}

/* ---------- submitted → queued for approval ---------- */
function Submitted({ data, session, route, lang, onLang, nav }) {
  const company = data.companies.find((c) => c.id === session.companyId);
  const approvers = window.eligibleApprovers(data, company, session.userId);
  return (
    <div className="app">
      <div className="scroll" style={{ display: "flex", flexDirection: "column", justifyContent: "center", textAlign: "center" }}>
        <div className="stack-lg" style={{ alignItems: "center" }}>
          <div className="tile-icon" style={{ width: 72, height: 72, borderRadius: 22, background: "rgba(251,191,36,0.1)", borderColor: "rgba(251,191,36,0.3)", color: "var(--warn)" }}>
            <Icon name="clock" size={34} />
          </div>
          <div>
            <h1 className="h1">{window.t(lang, "addedToQueue")}</h1>
            <p className="lead" style={{ marginTop: 8 }}>{route.params.docNo}</p>
          </div>
          <div className="card stack" style={{ width: "100%", textAlign: "left" }}>
            <div className="eyebrow">{window.t(lang, "awaitingApproval")}</div>
            {approvers.length === 0 && <div className="hint" style={{ color: "var(--warn)" }}><Icon name="warn" size={14} style={{ verticalAlign: "-2px" }} /> {window.t(lang, "noApproverSet")}</div>}
            {approvers.map((u) => {
              const roles = window.approverRolesFor(company, u.id, session.userId);
              const tag = roles.includes("peer") ? window.t(lang, "peer") : roles.includes("supervisor") ? window.t(lang, "supervisor") : window.t(lang, "adminFallback");
              return (
                <div key={u.id} className="row" style={{ background: "transparent", border: "none", padding: 0 }}>
                  <div className="tile-icon" style={{ width: 38, height: 38, borderRadius: 11 }}><Icon name={u.icon || "shield"} size={17} /></div>
                  <div className="grow"><div style={{ fontWeight: 600, fontSize: 14 }}>{u.name}</div><div className="hint">{u.title || u.email}</div></div>
                  <span className="badge"><i className="dot"></i>{tag}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <div className="action-bar">
        <Button onClick={() => nav("home")} icon="home">{window.t(lang, "backHome")}</Button>
      </div>
    </div>
  );
}

/* ---------- approval queue (cross-company, assignment-based, peer-reviewed) ---------- */
function ApprovalQueue({ data, session, lang, onLang, nav }) {
  const inScope = data.documents.filter((d) => session.companyIds.includes(d.companyId) && d.status === "pending");
  const pend = inScope.filter((d) => {
    const co = data.companies.find((c) => c.id === d.companyId);
    return co && window.canApprove(data, co, d, session.userId);
  });
  const mine = inScope.filter((d) => d.creatorId === session.userId);
  const coName = (id) => { const c = data.companies.find((x) => x.id === id); return c ? c.name.split("·")[0].trim() : ""; };
  function roleTag(d) {
    const co = data.companies.find((c) => c.id === d.companyId);
    const roles = window.approverRolesFor(co, session.userId, d.creatorId);
    if (roles.includes("peer")) return window.t(lang, "peer");
    if (roles.includes("supervisor")) return window.t(lang, "supervisor");
    return window.t(lang, "adminFallback");
  }
  return (
    <div className="app">
      <TopBar title={window.t(lang, "awaitingApproval")} onBack={() => nav("home")} lang={lang} onLang={onLang} />
      <div className="scroll stack">
        {pend.length === 0 && <div className="card center muted" style={{ padding: 30 }}>{window.t(lang, "noDocs")}</div>}
        {pend.map((d) => (
          <button key={d.id} className="row" style={{ textAlign: "left" }} onClick={() => nav("approval-detail", { docId: d.id })}>
            <div className="tile-icon" style={{ width: 42, height: 42, borderRadius: 12 }}><Icon name={d.type === "FGR" ? "basket" : "receipt"} size={19} /></div>
            <div className="grow">
              <div className="mono" style={{ fontSize: 13, fontWeight: 600 }}>{d.no}</div>
              <div className="hint truncate" style={{ marginTop: 2 }}>{coName(d.companyId)} · ฿{window.fmtMoney(d.total)}</div>
            </div>
            <span className="badge" style={{ flex: "0 0 auto" }}>{roleTag(d)}</span>
          </button>
        ))}
        {mine.length > 0 && (
          <div className="card" style={{ marginTop: 6, display: "flex", gap: 10, alignItems: "flex-start", borderStyle: "dashed" }}>
            <Icon name="clock" size={18} style={{ color: "var(--muted)", flex: "0 0 auto", marginTop: 1 }} />
            <div className="hint" style={{ textWrap: "pretty" }}>{mine.length}× — {window.t(lang, "peerReviewNote")}</div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------- approval detail (renders the document) ---------- */
function ApprovalDetail({ data, session, route, lang, onLang, nav, onApprove }) {
  const doc = data.documents.find((d) => d.id === route.params.docId);
  const company = data.companies.find((c) => c.id === doc.companyId);
  const me = data.users.find((u) => u.id === session.userId);
  const [signed, setSigned] = useState(false);
  const alreadyApproved = doc.status === "approved";
  const isOwn = doc.creatorId === session.userId; // peer review: can't approve your own
  const allowed = window.canApprove(data, company, doc, session.userId);

  return (
    <div className="app">
      <TopBar title={window.t(lang, "approvalTitle")} sub={doc.no}
        onBack={() => nav("approval-queue")} lang={lang} onLang={onLang}
        right={alreadyApproved ? <div style={{ marginRight: 4 }}><StatusBadge status="approved" lang={lang} /></div> : null} />
      <div className="scroll stack-lg">
        <DocPaper doc={doc} company={company} lang={lang} approverSigned={alreadyApproved} />
        {!alreadyApproved && !allowed && (
          <div className="card" style={{ borderColor: "rgba(251,191,36,0.35)", background: "rgba(251,191,36,0.06)", display: "flex", gap: 10, alignItems: "flex-start" }}>
            <Icon name="warn" size={20} style={{ color: "var(--warn)", flex: "0 0 auto", marginTop: 1 }} />
            <div className="hint" style={{ color: "var(--text-2)", textWrap: "pretty" }}>{window.t(lang, isOwn ? "peerReviewNote" : "noApproverSet")}</div>
          </div>
        )}
        {!alreadyApproved && allowed && (
          <Field label={window.t(lang, "approveConfirm")} required>
            <StoredSign lang={lang} name={me.name} signature={me.signature} signed={signed} onToggle={() => setSigned((s) => !s)} />
          </Field>
        )}
      </div>
      {!alreadyApproved && allowed && (
        <div className="action-bar">
          <div className="btn-row">
            <Button variant="danger" onClick={() => nav("approval-queue")}>{window.t(lang, "reject")}</Button>
            <Button onClick={() => onApprove(doc.id, me.signature, me.name)} disabled={!signed} icon="check">{window.t(lang, "approve")}</Button>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------- sent confirmation ---------- */
function Sent({ data, route, lang, onLang, nav }) {
  const doc = data.documents.find((d) => d.id === route.params.docId);
  const company = data.companies.find((c) => c.id === doc.companyId);
  const creator = data.users.find((u) => u.id === doc.creatorId);
  return (
    <div className="app">
      <div className="scroll" style={{ display: "flex", flexDirection: "column", justifyContent: "center", textAlign: "center" }}>
        <div className="stack-lg" style={{ alignItems: "center" }}>
          <div className="tile-icon" style={{ width: 72, height: 72, borderRadius: 22, background: "rgba(52,211,153,0.1)", borderColor: "rgba(52,211,153,0.3)", color: "var(--ok)" }}>
            <Icon name="check" size={36} stroke={2.4} />
          </div>
          <div>
            <h1 className="h1">{window.t(lang, "sentTitle")}</h1>
            <p className="lead" style={{ marginTop: 8, textWrap: "pretty" }}>{window.t(lang, "sentDesc")}</p>
          </div>
          <div className="card stack" style={{ width: "100%", textAlign: "left" }}>
            <div className="eyebrow">{window.t(lang, "emailedTo")}</div>
            <div className="row" style={{ background: "transparent", border: "none", padding: 0 }}>
              <Icon name="mail" size={18} style={{ color: "var(--muted)" }} />
              <div className="grow"><div style={{ fontWeight: 600, fontSize: 14 }} className="truncate">{creator.email}</div><div className="hint">{window.t(lang, "creatorLabel")}</div></div>
            </div>
            <div className="row" style={{ background: "transparent", border: "none", padding: 0 }}>
              <Icon name="mail" size={18} style={{ color: "var(--muted)" }} />
              <div className="grow"><div style={{ fontWeight: 600, fontSize: 14 }} className="truncate">{company.accountantEmail}</div><div className="hint">{window.t(lang, "accountantLabel")}</div></div>
            </div>
          </div>
        </div>
      </div>
      <div className="action-bar">
        <Button onClick={() => nav("doc-view", { docId: doc.id })} variant="ghost" icon="doc">{window.t(lang, "viewDocument")}</Button>
        <Button onClick={() => nav("home")} icon="home">{window.t(lang, "backHome")}</Button>
      </div>
    </div>
  );
}

/* ---------- doc view wrapper ---------- */
function DocView({ data, route, lang, onLang, nav, onResend }) {
  const doc = data.documents.find((d) => d.id === route.params.docId);
  const company = data.companies.find((c) => c.id === doc.companyId);
  const [busy, setBusy] = useState(false);
  const isApproved = doc.status === "approved";
  return (
    <div className="app">
      <TopBar title={window.t(lang, "viewDocument")} sub={doc.no} onBack={() => nav("home")} lang={lang} onLang={onLang}
        right={<StatusBadgeWrap status={doc.status} lang={lang} />} />
      <div className="scroll stack-lg">
        <DocPaper doc={doc} company={company} lang={lang} approverSigned={isApproved} />
      </div>
      {isApproved && onResend && (
        <div className="action-bar">
          <Button variant="ghost" icon="mail" disabled={busy}
            onClick={async () => { setBusy(true); try { await onResend(doc.id); } finally { setBusy(false); } }}>
            {busy ? "…" : window.t(lang, "resendEmail")}
          </Button>
        </div>
      )}
    </div>
  );
}
function StatusBadgeWrap({ status, lang }) {
  return <div style={{ marginRight: 4 }}><StatusBadge status={status} lang={lang} /></div>;
}

Object.assign(window, { ReviewScreen, Submitted, ApprovalQueue, ApprovalDetail, Sent, DocView });