/* eslint-disable */
// Embedded Dropbox Sign iframe mock + signed PDF preview.
// Used by the worker view (W2) and the re-engagement flow (W3).

(function () {
const { Icon, Button, Badge, Card } = window;
const { snakeToTitle, Callout } = window;
const { useState } = React;

// A faked rendered SOW PDF, with merge values dropped in.
function SOWPaper({ mergeValues, signed = false }) {
  const v = mergeValues;
  return (
    <div style={{
      background: "var(--neutral-10)",
      border: "2px solid var(--neutral-100)",
      boxShadow: "var(--shadow-md)",
      width: "100%", maxWidth: 600,
      aspectRatio: "8.5 / 11",
      padding: "32px 40px",
      fontFamily: "Times, 'Times New Roman', serif",
      color: "var(--neutral-100)",
      position: "relative",
      overflow: "hidden",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", borderBottom: "1px solid var(--neutral-100)", paddingBottom: 10, marginBottom: 16 }}>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 700, letterSpacing: "0.05em", textTransform: "uppercase" }}>Anthropic, PBC</div>
          <div style={{ fontSize: 9, color: "var(--neutral-70)", marginTop: 2 }}>548 Market St · San Francisco, CA</div>
        </div>
        <div style={{ fontSize: 9, textAlign: "right", color: "var(--neutral-70)" }}>SOW #2026-{(v.worker_name || "X").split(" ").map(w => w[0]).join("")}<br/>v3 · Anthropic template</div>
      </div>

      <div style={{ textAlign: "center", marginBottom: 16 }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700, letterSpacing: "0.02em" }}>STATEMENT OF WORK</div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px 16px", fontSize: 10, marginBottom: 14 }}>
        {[
          ["Worker", v.worker_name],
          ["Project", v.project_name],
          ["Pay rate", v.pay_rate],
          ["Start date", v.start_date],
          ["End date", v.end_date || <em style={{ color: "var(--neutral-50)" }}>open-ended</em>],
        ].map(([k, val]) => (
          <div key={k}>
            <div style={{ textTransform: "uppercase", fontSize: 7, letterSpacing: "0.1em", color: "var(--neutral-70)", marginBottom: 2 }}>{k}</div>
            <div style={{ fontWeight: 600 }}>{val || <span style={{ color: "var(--neutral-50)" }}>—</span>}</div>
          </div>
        ))}
      </div>

      {[
        ["1. Project overview", v.project_overview],
        ["2. Scope of work",    v.scope_of_work],
        ["3. Deliverables",     v.deliverables],
        ["4. Acceptance criteria", v.acceptance_criteria],
      ].map(([heading, body]) => (
        <div key={heading} style={{ marginBottom: 10 }}>
          <div style={{ fontWeight: 700, fontSize: 10, marginBottom: 3 }}>{heading}</div>
          <div style={{ fontSize: 9.5, lineHeight: 1.45, color: "var(--neutral-90)", minHeight: 14 }}>
            {body || <span style={{ color: "var(--neutral-40)", fontStyle: "italic" }}>(left blank)</span>}
          </div>
        </div>
      ))}

      <div style={{ marginTop: 18, paddingTop: 10, borderTop: "1px solid var(--neutral-30)", display: "flex", gap: 24 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 7, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--neutral-70)", marginBottom: 4 }}>Worker signature</div>
          <div style={{ height: 28, borderBottom: "1px solid var(--neutral-100)", display: "flex", alignItems: "flex-end", paddingBottom: 2 }}>
            {signed && (
              <span style={{ fontFamily: "'Brush Script MT', cursive", fontSize: 18, color: "var(--purple-60)" }}>
                {v.worker_name}
              </span>
            )}
          </div>
          <div style={{ fontSize: 8, color: "var(--neutral-70)", marginTop: 3 }}>
            {signed ? "Signed via Dropbox Sign" : "Awaiting signature"}
          </div>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 7, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--neutral-70)", marginBottom: 4 }}>HireArt countersignature</div>
          <div style={{ height: 28, borderBottom: "1px solid var(--neutral-100)", display: "flex", alignItems: "flex-end", paddingBottom: 2 }}>
            {signed && (
              <span style={{ fontFamily: "'Brush Script MT', cursive", fontSize: 18, color: "var(--purple-60)" }}>
                Erica Hill
              </span>
            )}
          </div>
          <div style={{ fontSize: 8, color: "var(--neutral-70)", marginTop: 3 }}>
            HireArt — Operations
          </div>
        </div>
      </div>
    </div>
  );
}

// The Dropbox Sign embedded iframe — a frame around the rendered SOWPaper.
function DropboxSignFrame({ worker, onSigned, onClose }) {
  const [step, setStep] = useState("review"); // review -> signing -> signed
  const [scrolled, setScrolled] = useState(false);

  return (
    <div style={{
      border: "2px solid var(--neutral-100)", borderRadius: 12,
      background: "#F4F1ED",
      boxShadow: "var(--shadow-md)",
      overflow: "hidden",
      fontFamily: "var(--font-body)",
    }}>
      {/* Dropbox-Sign-style chrome — "Powered by Dropbox Sign" */}
      <div style={{ padding: "10px 16px", background: "#0061FF", color: "white", fontSize: 12, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ fontWeight: 700, letterSpacing: "0.02em" }}>📄 Dropbox Sign</div>
        <div style={{ fontSize: 11, opacity: 0.9 }}>Powered by HireArt · Signature Request #req_{worker.sow.hellosignTemplateId.slice(-4)}</div>
      </div>

      <div style={{ padding: 20, display: "flex", flexDirection: "column", alignItems: "center", gap: 16, maxHeight: 540, overflow: "auto" }}
           onScroll={e => setScrolled(e.target.scrollTop > 80)}>
        <SOWPaper mergeValues={worker.sow.mergeValues} signed={step === "signed"} />
        <div style={{ fontSize: 11, color: "var(--neutral-60)" }}>
          Page 1 of 1 — scroll to read · merge values rendered from <code>DocumentMergeContent</code>
        </div>
      </div>

      <div style={{
        borderTop: "2px solid var(--neutral-100)",
        background: "var(--neutral-10)",
        padding: "12px 16px",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12,
      }}>
        {step === "review" && (
          <>
            <div style={{ fontSize: 13, color: "var(--neutral-70)" }}>
              By signing, you agree to the terms above and consent to electronic signature.
            </div>
            <Button color="primary-green" size="md" iconStart="signature" onClick={() => setStep("signed")}>
              Sign now
            </Button>
          </>
        )}
        {step === "signed" && (
          <>
            <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--green-100)" }}>
              <Icon name="check-circle" size={18} />
              <span style={{ fontWeight: 700 }}>Signed.</span> Cert of Completion is being archived to the Content system.
            </div>
            <Button color="primary-green" size="md" iconStart="check" onClick={() => onSigned && onSigned()}>
              Done
            </Button>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { SOWPaper, DropboxSignFrame });

})();