/* eslint-disable */
// Manager view — M1, M2 from spec UI inventory.
// Manager is a "client manager" inside HireArt's hireart-client-app. Scope: their team.

(function () {
const { Icon, Button, Badge, Card, Avatar } = window;
const { WORKERS, SOW_TEMPLATE_FIELDS, today, daysFromNow } = window;
const { SOWStatePill, Callout, PageHeader, SectionHeader, Stat, Pill, ExpiryRing } = window;
const { SOWForm } = window;
const { SOWPaper } = window;
const { useState } = React;

// All workers report to "Scott Marinez" in our mock.
const myTeam = WORKERS;

// Production-style shell: persistent sidebar + top bar with global search.
// Pages render in `children`. ManagerNav keeps its old API (active/onNav)
// so the orchestrator in SOW Prototype.html keeps working.
function ManagerNav({ active, onNav, breadcrumb, children }) {
  const sections = [
    {
      label: null,
      items: [{ k: "dashboard", label: "Dashboard", icon: "grid" }],
    },
    {
      label: "Hiring",
      items: [
        { k: "jobs", label: "Jobs", icon: "briefcase" },
        { k: "calendar", label: "Interview calendar", icon: "calendar" },
        { k: "onboardings", label: "Onboardings", icon: "user-plus" },
      ],
    },
    {
      label: "Finance",
      items: [
        { k: "timecards", label: "Timesheets", icon: "clock" },
        { k: "pto", label: "Paid time off", icon: "settings" },
        { k: "expenses", label: "Expenses", icon: "document" },
        { k: "payments", label: "One-time payments", icon: "credit-card" },
      ],
    },
    {
      label: "Management",
      items: [
        { k: "team", label: "Workers", icon: "user" },
        { k: "timeoff", label: "Time off calendar", icon: "calendar" },
        { k: "documents", label: "Documents", icon: "document" },
      ],
    },
    {
      label: null,
      items: [
        { k: "sows", label: "Statements of Work", icon: "document" },
        { k: "onboard", label: "Onboard a worker", icon: "user-plus" },
      ],
    },
  ];

  return (
    <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", minHeight: "100vh", background: "var(--neutral-10)", fontFamily: "var(--font-body)" }}>
      <aside style={{
        borderRight: "1px solid var(--neutral-30)",
        padding: "20px 14px",
        display: "flex", flexDirection: "column", gap: 14,
        background: "var(--neutral-10)",
        position: "sticky", top: 0, height: "100vh", overflowY: "auto",
      }}>
        <div style={{ padding: "4px 8px 12px" }}>
          <img src="assets/logos/logo-primary.svg" alt="HireArt" style={{ height: 22 }} />
        </div>
        {sections.map((sec, si) => (
          <div key={si} style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {sec.label && (
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 10px 4px", fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--neutral-70)" }}>
                <span>{sec.label}</span>
                <Icon name="chevron-up" size={12} />
              </div>
            )}
            {sec.items.map(it => {
              const isActive = active === it.k;
              return (
                <button key={it.k} onClick={() => onNav(it.k)} style={{
                  display: "flex", alignItems: "center", gap: 10,
                  padding: "10px 12px", borderRadius: 100,
                  border: isActive ? "2px solid var(--neutral-100)" : "2px solid transparent",
                  background: isActive ? "var(--neutral-10)" : "transparent",
                  boxShadow: isActive ? "var(--shadow-btn-sm)" : "none",
                  fontFamily: "var(--font-body)", fontSize: 13, fontWeight: isActive ? 700 : 500,
                  color: "var(--neutral-100)", cursor: "pointer", textAlign: "left",
                }}>
                  <Icon name={it.icon} size={16} />
                  <span>{it.label}</span>
                </button>
              );
            })}
          </div>
        ))}
      </aside>

      <div style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
        <header style={{
          borderBottom: "1px solid var(--neutral-30)",
          padding: "14px 32px",
          display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 16,
          background: "var(--neutral-10)",
        }}>
          <div style={{
            display: "flex", alignItems: "center", gap: 10,
            border: "1px solid var(--neutral-30)", borderRadius: 100,
            padding: "8px 14px", minWidth: 380,
            background: "var(--neutral-10)", color: "var(--neutral-70)",
          }}>
            <Icon name="search" size={14} />
            <span style={{ flex: 1, fontSize: 13 }}>Search your workspace…</span>
            <span style={{ background: "var(--neutral-20)", borderRadius: 6, padding: "2px 8px", fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--neutral-90)" }}>⌘K</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "4px 10px 4px 4px", border: "1px solid var(--neutral-30)", borderRadius: 100 }}>
            <Avatar name="Scott Marinez" size={28} bg="var(--blue-20)" />
            <span style={{ fontSize: 13, fontWeight: 600 }}>Scott Marinez</span>
            <Icon name="chevron-down" size={12} />
          </div>
        </header>
        <main style={{ padding: "20px 32px 60px", maxWidth: 1400, width: "100%" }}>
          {breadcrumb && (
            <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: "var(--neutral-70)", marginBottom: 18 }}>
              <Icon name="grid" size={13} />
              <span>Dashboard</span>
              <span style={{ color: "var(--neutral-50)" }}>/</span>
              <span style={{ color: "var(--neutral-100)", fontWeight: 600 }}>{breadcrumb}</span>
            </div>
          )}
          {children}
        </main>
      </div>
    </div>
  );
}

// ---------- Team SOW dashboard (M1) ----------
function ManagerTeam({ onWorker, onReengage }) {
  const expiringSoon = myTeam.filter(w => w.sow.state === "expiring");
  const expired = myTeam.filter(w => w.sow.state === "expired");

  return (
    <>
      <h1 style={{ fontFamily: "var(--font-headline)", fontSize: 32, fontWeight: 800, margin: "0 0 4px", letterSpacing: "-0.01em" }}>Statements of Work</h1>
      <p style={{ fontSize: 14, color: "var(--neutral-70)", margin: "0 0 24px" }}>Track each worker's SOW status, end date, and renewal cadence.</p>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr auto", gap: 20, alignItems: "end", marginBottom: 18 }}>
        <FilterField label="Search">
          <div style={{ display: "flex", alignItems: "center", gap: 8, border: "1px solid var(--neutral-30)", borderRadius: 6, padding: "8px 12px", background: "var(--neutral-10)" }}>
            <Icon name="search" size={14} style={{ color: "var(--neutral-70)" }} />
            <input placeholder="Name or email..." style={{ border: 0, outline: "none", background: "transparent", flex: 1, fontFamily: "var(--font-body)", fontSize: 13, color: "var(--neutral-100)" }} />
          </div>
        </FilterField>
        <FilterField label="SOW Status"><FakeSelect placeholder="Select..." /></FilterField>
        <FilterField label="Role"><FakeSelect placeholder="Select..." /></FilterField>
        <FilterField label="End date">
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <FakeDate />
            <Icon name="arrow-right" size={14} />
            <FakeDate />
          </div>
        </FilterField>
        <button style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: "10px 18px", borderRadius: 8,
          border: "2px solid var(--neutral-100)", background: "var(--neutral-10)",
          fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 700,
          cursor: "pointer", whiteSpace: "nowrap",
          boxShadow: "var(--shadow-btn-sm)",
        }}>
          <Icon name="download" size={14} />
          Download CSV
        </button>
      </div>

      <div style={{ display: "flex", gap: 12, marginBottom: 20 }}>
        <Stat label="Workers on team" value={myTeam.length} sub="W2 + 1099" />
        <Stat label="SOWs expiring" value={expiringSoon.length} sub="Within 30 days" tone="warning" />
        <Stat label="SOWs expired" value={expired.length} sub="Need a fresh SOW" tone="danger" />
        <Stat label="Pending signature" value={myTeam.filter(w => ["pending-signature","in-progress","not-started"].includes(w.sow.state)).length} sub="Worker hasn't completed yet" tone="info" />
      </div>

      {expiringSoon.length + expired.length > 0 && (
        <div style={{ marginBottom: 24 }}>
          <Callout tone="warning" icon="alert-triangle" title={`${expiringSoon.length + expired.length} ${expiringSoon.length + expired.length === 1 ? "SOW needs" : "SOWs need"} attention`}>
            Click a row to open the worker's profile, where you can request a new SOW from HireArt.
            Workers won't be blocked from working — but you should renew before the existing SOW lapses.
          </Callout>
        </div>
      )}

      <div style={{ border: "1px solid var(--neutral-30)", borderRadius: 6, background: "var(--neutral-10)", overflow: "hidden" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "var(--font-body)", fontSize: 13 }}>
          <thead>
            <tr style={{ borderBottom: "1px solid var(--neutral-30)", background: "var(--neutral-20)" }}>
              {["Worker", "Role", "Expiration cadence", "End date", "Days left", "Status", ""].map((h, idx) => (
                <th key={idx} style={{ textAlign: idx === 6 ? "right" : "left", padding: "10px 14px", fontSize: 13, fontWeight: 700, color: "var(--neutral-100)" }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {myTeam.map((w, i) => {
              const days = w.sow.validThruDate ? daysFromNow(w.sow.validThruDate) : null;
              return (
                <tr key={w.id} onClick={() => onWorker(w.id)} style={{ borderBottom: "1px solid var(--neutral-30)", cursor: "pointer", background: i % 2 ? "var(--neutral-20)" : "transparent" }}>
                  <td style={{ padding: "10px 14px", fontSize: 13 }}>
                    <button onClick={(e) => { e.stopPropagation(); onWorker(w.id); }} style={{ background: "none", border: 0, padding: 0, cursor: "pointer", color: "var(--blue-80)", fontFamily: "inherit", fontSize: 13, fontWeight: 600, textDecoration: "underline" }}>{w.name}</button>
                    <div style={{ fontSize: 11, color: "var(--neutral-70)", marginTop: 1 }}>{w.employmentType}</div>
                  </td>
                  <td style={{ padding: "10px 14px", fontSize: 13, color: "var(--neutral-100)" }}>{w.job}</td>
                  <td style={{ padding: "10px 14px", fontSize: 13, color: "var(--neutral-70)" }}>Custom Date</td>
                  <td style={{ padding: "10px 14px", fontSize: 13, fontVariantNumeric: "tabular-nums", color: "var(--neutral-100)" }}>{w.sow.validThru || <em style={{ color: "var(--neutral-50)" }}>open-ended</em>}</td>
                  <td style={{ padding: "10px 14px", fontSize: 13, fontVariantNumeric: "tabular-nums", color: days == null ? "var(--neutral-50)" : days < 0 ? "var(--red-80)" : days < 14 ? "var(--red-80)" : days < 30 ? "var(--yellow-100)" : "var(--neutral-100)", fontWeight: 600 }}>
                    {days == null ? "—" : days < 0 ? `${Math.abs(days)}d ago` : `${days}d`}
                  </td>
                  <td style={{ padding: "10px 14px" }}><SOWStatePill state={w.sow.state} /></td>
                  <td style={{ padding: "10px 14px", textAlign: "right" }}>
                    <button onClick={(e) => { e.stopPropagation(); onReengage && onReengage(w.id); }} style={{
                      background: "var(--neutral-10)", border: "1px solid var(--neutral-30)",
                      padding: "5px 12px", borderRadius: 6, fontSize: 12, fontWeight: 600,
                      cursor: "pointer", color: "var(--neutral-100)", fontFamily: "inherit",
                      display: "inline-flex", alignItems: "center", gap: 5,
                    }}>
                      <Icon name="refresh" size={11} /> Re-engage
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
}

// ---------- Worker detail for managers ----------
// Lighter than admin: managers don't see merge values verbatim, but they can see the rendered SOW
// and request a new one (which kicks the request to HireArt admins).
function ManagerWorkerView({ workerId, onBack, onRequestNew }) {
  const w = myTeam.find(x => x.id === workerId);
  if (!w) return null;
  const days = w.sow.validThruDate ? daysFromNow(w.sow.validThruDate) : null;

  return (
    <>
      <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "var(--neutral-70)", marginBottom: 12 }}>
        <button onClick={onBack} style={{ background: "none", border: 0, color: "var(--neutral-70)", cursor: "pointer", padding: 0 }}>My team</button>
        <Icon name="chevron-right" size={12} />
        <span style={{ color: "var(--neutral-100)" }}>{w.name}</span>
      </div>

      <PageHeader
        eyebrow={`${w.job} · ${w.employmentType}`}
        title={w.name}
        subtitle={`Started ${w.startDate} · ${w.payRate}`}
        actions={
          (w.sow.state === "expiring" || w.sow.state === "expired") ? (
            <Button color="primary-purple" size="md" iconStart="refresh" onClick={() => onRequestNew(w.id)}>Request new SOW</Button>
          ) : null
        }
      />

      {w.sow.state === "expiring" && days != null && (
        <div style={{ marginBottom: 24 }}>
          <Callout
            tone="warning"
            icon="alert-triangle"
            title={`${w.name}'s SOW expires in ${days} days`}
            action={<Button color="primary-purple" size="md" iconStart="refresh" onClick={() => onRequestNew(w.id)}>Request new SOW</Button>}
          >
            Heads up: the current SOW ends on {w.sow.validThru}. Request a renewal from HireArt and we'll send a fresh signing request to {w.name.split(" ")[0]}.
          </Callout>
        </div>
      )}
      {w.sow.state === "expired" && (
        <div style={{ marginBottom: 24 }}>
          <Callout tone="danger" icon="alert-circle" title={`${w.name}'s SOW expired ${Math.abs(days)} days ago`}
            action={<Button color="primary-purple" size="md" iconStart="refresh" onClick={() => onRequestNew(w.id)}>Request new SOW</Button>}>
            {w.name.split(" ")[0]} can keep working — but please renew the SOW so we have a clean record.
          </Callout>
        </div>
      )}

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 24, alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <Card>
            <SectionHeader title="Current Statement of Work" />
            <div style={{ display: "flex", alignItems: "center", gap: 16, padding: "12px 0" }}>
              {days != null && <ExpiryRing days={days} total={180} size={72} />}
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, color: "var(--neutral-70)" }}>Project</div>
                <div style={{ fontSize: 16, fontWeight: 700 }}>{w.sow.mergeValues.project_name}</div>
                <div style={{ display: "flex", gap: 16, marginTop: 6, fontSize: 12, color: "var(--neutral-70)" }}>
                  <span><strong style={{ color: "var(--neutral-100)" }}>From</strong> {w.sow.validFrom}</span>
                  <span><strong style={{ color: "var(--neutral-100)" }}>To</strong> {w.sow.validThru || <em>open-ended</em>}</span>
                </div>
              </div>
              <SOWStatePill state={w.sow.state} />
            </div>
            <div style={{ borderTop: "1px solid var(--neutral-20)", paddingTop: 14, marginTop: 6 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: "var(--neutral-80)", marginBottom: 8 }}>Project overview</div>
              <div style={{ fontSize: 13, color: "var(--neutral-90)", lineHeight: 1.5 }}>{w.sow.mergeValues.project_overview || <em>(none)</em>}</div>
            </div>
          </Card>

          <Card>
            <SectionHeader title="SOW history" />
            {w.sow.history.map((h, i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: i < w.sow.history.length - 1 ? "1px solid var(--neutral-20)" : "none", fontSize: 13 }}>
                <div>
                  <div style={{ fontWeight: 600 }}>{h.signedAt ? `Signed ${h.signedAt}` : "Pending signature"}</div>
                  <div style={{ fontSize: 11, color: "var(--neutral-70)" }}>End date {h.endDate || "open-ended"}</div>
                </div>
                <Badge color={h.status === "active" ? "green" : h.status === "expired" ? "red" : h.status === "pending-signature" ? "blue" : "neutral"}>{h.status}</Badge>
              </div>
            ))}
          </Card>
        </div>

        <div style={{ position: "sticky", top: 24, display: "flex", flexDirection: "column", gap: 16 }}>
          <SectionHeader title="Signed SOW" />
          <SOWPaper mergeValues={w.sow.mergeValues} signed={!!w.sow.signedAt} />
        </div>
      </div>
    </>
  );
}

// ---------- Onboard a worker (M2) ----------
function ManagerOnboardView({ onSent }) {
  const [step, setStep] = useState(1);
  const [worker, setWorker] = useState({ name: "", email: "", job: "Software Engineer", payRate: "$92/hr", startDate: "May 18, 2026" });

  const stub = {
    sow: {
      template: "Anthropic — SOW v3",
      hellosignTemplateId: "tpl_4f3a",
      mergeValues: {
        worker_name: worker.name || "(worker)", project_name: "", start_date: worker.startDate, end_date: "",
        pay_rate: worker.payRate, project_overview: "", scope_of_work: "", deliverables: "", acceptance_criteria: "",
      },
    }
  };
  const [merge, setMerge] = useState(stub.sow.mergeValues);

  return (
    <>
      <PageHeader
        eyebrow="Onboard a worker"
        title="Bring someone new onto the team"
        subtitle="Tell us who, give us the SOW details, and HireArt will run the rest of the onboarding."
      />

      <div style={{ display: "flex", gap: 0, marginBottom: 24, border: "2px solid var(--neutral-100)", borderRadius: 100, overflow: "hidden", maxWidth: 600, background: "var(--neutral-10)", boxShadow: "var(--shadow-sm)" }}>
        {[
          { n: 1, label: "Worker info" },
          { n: 2, label: "Statement of Work" },
          { n: 3, label: "Submit to HireArt" },
        ].map((s, i, arr) => (
          <div key={s.n} style={{
            flex: 1, padding: "10px 16px", display: "flex", alignItems: "center", gap: 8,
            background: step === s.n ? "var(--green-60)" : step > s.n ? "var(--green-20)" : "var(--neutral-10)",
            borderRight: i < arr.length - 1 ? "2px solid var(--neutral-100)" : "none",
            fontSize: 13, fontWeight: step === s.n ? 700 : 500,
          }}>
            <div style={{ width: 22, height: 22, borderRadius: 100, border: "2px solid var(--neutral-100)", background: step >= s.n ? "var(--neutral-100)" : "var(--neutral-10)", color: step >= s.n ? "var(--neutral-10)" : "var(--neutral-100)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700 }}>
              {step > s.n ? "✓" : s.n}
            </div>
            <span>{s.label}</span>
          </div>
        ))}
      </div>

      {step === 1 && (
        <Card>
          <SectionHeader title="Worker basics" hint="HireArt will use this to send the offer email." />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <Field2 label="Worker name" placeholder="e.g. Maya Chen" value={worker.name} onChange={v => setWorker({ ...worker, name: v })} />
            <Field2 label="Email"       placeholder="maya.chen@example.com" value={worker.email} onChange={v => setWorker({ ...worker, email: v })} />
            <Field2 label="Job title"   value={worker.job} onChange={v => setWorker({ ...worker, job: v })} />
            <Field2 label="Pay rate"    value={worker.payRate} onChange={v => setWorker({ ...worker, payRate: v })} />
            <Field2 label="Start date"  value={worker.startDate} onChange={v => setWorker({ ...worker, startDate: v })} />
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 20 }}>
            <Button color="primary-green" size="md" iconEnd="arrow-right" onClick={() => setStep(2)}>Continue to SOW</Button>
          </div>
        </Card>
      )}

      {step === 2 && (
        <SOWForm
          worker={stub}
          mode="onboard"
          fields={SOW_TEMPLATE_FIELDS}
          initialValues={merge}
          onSubmit={({ values }) => { setMerge(values); setStep(3); }}
          onCancel={() => setStep(1)}
          submitLabel="Continue to review"
        />
      )}

      {step === 3 && (
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 24, alignItems: "start" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <Card>
              <SectionHeader title="Submission summary" />
              <Row k="Worker" v={`${worker.name} · ${worker.email}`} />
              <Row k="Role" v={`${worker.job}`} />
              <Row k="Pay" v={worker.payRate} />
              <Row k="Start" v={worker.startDate} />
              <Row k="Project" v={merge.project_name} />
              <Row k="End date" v={merge.end_date || "open-ended"} />
            </Card>
            <Callout tone="info" icon="info" title="HireArt admins will review before sending">
              The HireArt operations team gets a notification, vets the submission, and then sends the offer to {worker.name || "your new hire"}.
              You'll get an email when they've signed.
            </Callout>
            <div style={{ display: "flex", justifyContent: "space-between" }}>
              <Button color="secondary" size="md" onClick={() => setStep(2)} iconStart="arrow-left">Back to SOW</Button>
              <Button color="primary-green" size="md" iconStart="send" onClick={onSent}>Submit to HireArt</Button>
            </div>
          </div>
          <div style={{ position: "sticky", top: 24 }}>
            <SectionHeader title="SOW preview" />
            <SOWPaper mergeValues={{ ...merge, worker_name: worker.name || "(worker name)" }} signed={false} />
          </div>
        </div>
      )}
    </>
  );
}

function FilterField({ label, children }) {
  return (
    <div>
      <div style={{ fontSize: 13, fontWeight: 700, color: "var(--neutral-100)", marginBottom: 8 }}>{label}</div>
      {children}
    </div>
  );
}
function FakeSelect({ placeholder }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", border: "1px solid var(--neutral-30)", borderRadius: 6, padding: "8px 12px", background: "var(--neutral-10)", fontSize: 13, color: "var(--neutral-70)" }}>
      <span>{placeholder}</span>
      <Icon name="chevron-down" size={12} />
    </div>
  );
}
function FakeDate() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, border: "1px solid var(--neutral-30)", borderRadius: 6, padding: "8px 12px", background: "var(--neutral-10)", flex: 1, color: "var(--neutral-70)", fontSize: 13 }}>
      <Icon name="calendar" size={13} />
      <span style={{ flex: 1 }}>&nbsp;</span>
    </div>
  );
}

function Field2({ label, value, onChange, placeholder }) {
  return (
    <div>
      <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 6 }}>{label}</div>
      <input
        type="text"
        value={value}
        onChange={e => onChange(e.target.value)}
        placeholder={placeholder}
        style={{
          width: "100%",
          border: "2px solid var(--neutral-100)", borderRadius: 6,
          padding: "10px 12px", fontFamily: "var(--font-body)", fontSize: 14,
          background: "var(--neutral-10)", boxShadow: "var(--shadow-btn-sm)",
          outline: "none",
        }}
      />
    </div>
  );
}

function Row({ k, v }) {
  return (
    <div style={{ display: "flex", padding: "10px 0", borderBottom: "1px solid var(--neutral-20)", fontSize: 13 }}>
      <div style={{ width: 120, color: "var(--neutral-70)", fontWeight: 600 }}>{k}</div>
      <div style={{ flex: 1, color: "var(--neutral-100)" }}>{v}</div>
    </div>
  );
}

// ---------- Request-new-SOW dialog ----------
function ManagerRequestDialog({ workerId, onClose, onConfirm }) {
  const w = myTeam.find(x => x.id === workerId);
  if (!w) return null;
  const [reason, setReason] = useState("Project extending — need a fresh SOW with an updated end date.");
  const [newEnd, setNewEnd] = useState(w.sow.validThru ? "Nov 4, 2026" : "");
  const [keepProject, setKeepProject] = useState(true);

  return (
    <div style={{ position: "fixed", inset: 0, background: "rgba(20,20,20,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 100, padding: 24 }}>
      <div style={{ background: "var(--neutral-10)", border: "2px solid var(--neutral-100)", borderRadius: 12, boxShadow: "var(--shadow-lg)", width: 560, maxWidth: "100%" }}>
        <div style={{ padding: "16px 20px", borderBottom: "2px solid var(--neutral-100)", display: "flex", alignItems: "center", justifyContent: "space-between", background: "var(--purple-20)" }}>
          <div>
            <div style={{ fontFamily: "var(--font-headline)", fontSize: 18, fontWeight: 700 }}>Request new SOW for {w.name}</div>
            <div style={{ fontSize: 12, color: "var(--neutral-70)", marginTop: 2 }}>HireArt admin will draft and send.</div>
          </div>
          <button onClick={onClose} style={{ background: "none", border: 0, cursor: "pointer", padding: 4 }}><Icon name="x" size={20} /></button>
        </div>
        <div style={{ padding: 20, display: "flex", flexDirection: "column", gap: 16 }}>
          <Field2 label="New end date" value={newEnd} onChange={setNewEnd} placeholder="Leave empty for open-ended" />
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 6 }}>Reason for renewal</div>
            <textarea value={reason} onChange={e => setReason(e.target.value)} rows={3} style={{
              width: "100%",
              border: "2px solid var(--neutral-100)", borderRadius: 6,
              padding: "10px 12px", fontFamily: "var(--font-body)", fontSize: 14,
              background: "var(--neutral-10)", boxShadow: "var(--shadow-btn-sm)",
              outline: "none", resize: "vertical",
            }} />
          </div>
          <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, padding: "10px 12px", border: "2px solid var(--neutral-100)", borderRadius: 6, background: "var(--neutral-10)" }}>
            <input type="checkbox" checked={keepProject} onChange={e => setKeepProject(e.target.checked)} />
            Keep the same project, scope, and deliverables — just push the end date.
          </label>
        </div>
        <div style={{ padding: "12px 20px", borderTop: "2px solid var(--neutral-100)", display: "flex", justifyContent: "flex-end", gap: 8, background: "var(--bg-2)" }}>
          <Button color="secondary" size="md" onClick={onClose}>Cancel</Button>
          <Button color="primary-green" size="md" iconStart="send" onClick={onConfirm}>Send request to HireArt</Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ManagerNav, ManagerTeam, ManagerWorkerView, ManagerOnboardView, ManagerRequestDialog });

})();
