/* eslint-disable */
// SOW form (admin offer creation, manager onboard-a-worker, re-engagement edits).
// Renders one input per Dropbox Sign template merge field.
// Surfaces avg_text_length overflow warnings.

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

// One field rendered as a labeled, bordered text area or input
function MergeFieldInput({ field, value, onChange }) {
  const max = field.numLines * field.numCharsPerLine;
  const len = (value || "").length;
  const overflow = len > max;
  const nearOverflow = !overflow && len > max * 0.85;

  const isMulti = field.numLines > 1;
  const label = snakeToTitle(field.name);

  const inputStyle = {
    width: "100%",
    border: `2px solid ${overflow ? "var(--red-60)" : "var(--neutral-100)"}`,
    borderRadius: 6,
    background: field.system ? "var(--neutral-20)" : "var(--neutral-10)",
    padding: "10px 12px",
    fontFamily: "var(--font-body)",
    fontSize: 14,
    color: "var(--neutral-100)",
    resize: "vertical",
    minHeight: isMulti ? field.numLines * 22 + 20 : "auto",
    boxShadow: overflow ? "none" : "var(--shadow-btn-sm)",
    outline: "none",
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
        <label style={{ fontSize: 13, fontWeight: 600, color: "var(--neutral-100)", display: "flex", alignItems: "center", gap: 6 }}>
          {label}
          {field.system && <Badge color="neutral">Auto-filled</Badge>}
          {!field.system && field.name === "end_date" && <Badge color="purple">Drives expiration</Badge>}
        </label>
        <div style={{ fontSize: 11, color: overflow ? "var(--red-80)" : nearOverflow ? "var(--yellow-100)" : "var(--neutral-60)", fontVariantNumeric: "tabular-nums", fontWeight: 600 }}>
          {len} / {max} chars
        </div>
      </div>
      {isMulti ? (
        <textarea
          rows={field.numLines}
          value={value ?? ""}
          onChange={e => onChange(e.target.value)}
          disabled={field.system}
          style={inputStyle}
        />
      ) : (
        <input
          type={field.type === "date" ? "text" : "text"}
          value={value ?? ""}
          onChange={e => onChange(e.target.value)}
          disabled={field.system}
          style={inputStyle}
        />
      )}
      {field.hint && <div style={{ fontSize: 11, color: "var(--neutral-60)" }}>{field.hint}</div>}
      {overflow && (
        <div style={{ fontSize: 12, color: "var(--red-80)", display: "flex", alignItems: "center", gap: 6, fontWeight: 600 }}>
          <Icon name="alert-triangle" size={14} />
          Text exceeds the template's box dimensions. Dropbox Sign will auto-shrink — review the rendered PDF.
        </div>
      )}
    </div>
  );
}

// The full SOW form. `mode` = "offer" | "onboard" | "reengage"
function SOWForm({ worker, mode, fields, initialValues, onSubmit, onCancel, submitLabel }) {
  const [values, setValues] = useState(initialValues);
  const [endDate, setEndDate] = useState(initialValues.end_date || "");
  const [openEnded, setOpenEnded] = useState(!initialValues.end_date);

  const set = (name, v) => setValues(prev => ({ ...prev, [name]: v }));

  const totalChars = useMemo(() => Object.entries(values).reduce((s, [k, v]) => s + (v || "").length, 0), [values]);
  const visibleFields = useMemo(() => mode === "reengage" ? fields.filter(f => f.name !== "project_name" && f.name !== "end_date") : fields, [fields, mode]);

  const overflows = useMemo(() => visibleFields.filter(f => {
    const max = f.numLines * f.numCharsPerLine;
    return (values[f.name] || "").length > max;
  }), [values, visibleFields]);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
      {mode === "reengage" && (
        <Callout tone="purple" icon="refresh" title="You're issuing a new SOW for this worker">
          The previous SOW will be marked superseded and remain in the worker's history.
          A fresh signing request will be sent.
        </Callout>
      )}

      <Card padding={0} shadow="sm" style={{ overflow: "hidden" }}>
        <div style={{ padding: "16px 20px", borderBottom: "2px solid var(--neutral-100)", background: "var(--neutral-20)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <div style={{ fontFamily: "var(--font-headline)", fontSize: 16, fontWeight: 700 }}>Statement of Work - 2026</div>
            <div style={{ fontSize: 12, color: "var(--neutral-70)", marginTop: 2 }}>
              Fields fetched from <code style={{ background: "var(--neutral-10)", padding: "1px 6px", borderRadius: 4 }}>{worker.sow.template}</code>
            </div>
          </div>
          {overflows.length ? <Badge color="red">{`${overflows.length} overflow`}</Badge> : null}
        </div>

        <div style={{ padding: 20, display: "grid", gap: 16 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            {visibleFields.filter(f => f.numLines === 1).map(f => (
              <MergeFieldInput key={f.name} field={f} value={values[f.name]} onChange={v => set(f.name, v)} />
            ))}
          </div>
          {visibleFields.filter(f => f.numLines > 1).map(f => (
            <MergeFieldInput key={f.name} field={f} value={values[f.name]} onChange={v => set(f.name, v)} />
          ))}
        </div>

        <div style={{ padding: "16px 20px", borderTop: "2px solid var(--neutral-100)", background: "var(--neutral-20)" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
            <div>
              <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 4 }}>Expiration</div>
              <div style={{ fontSize: 12, color: "var(--neutral-70)" }}>
                Leave open-ended for ongoing assignments.
              </div>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <label style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13, fontWeight: 600 }}>
                <input type="checkbox" checked={openEnded} onChange={e => setOpenEnded(e.target.checked)} />
                Open-ended (no end date)
              </label>
              <input
                type="date"
                value={openEnded ? "" : endDate}
                onChange={e => setEndDate(e.target.value)}
                disabled={openEnded}
                style={{
                  border: "2px solid var(--neutral-100)", borderRadius: 6,
                  padding: "8px 12px", fontFamily: "var(--font-body)", fontSize: 14,
                  background: openEnded ? "var(--neutral-20)" : "var(--neutral-10)",
                  width: 180, boxShadow: "var(--shadow-btn-sm)",
                  outline: "none",
                }}
              />
            </div>
          </div>
        </div>
      </Card>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: 12, color: "var(--neutral-60)" }}>
          Total: {totalChars.toLocaleString()} characters across {fields.length} fields
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          {onCancel && <Button color="secondary" size="md" onClick={onCancel}>Cancel</Button>}
          <Button color="primary-green" size="md" iconStart="check" onClick={() => onSubmit({ values, endDate, openEnded })}>
            {submitLabel || "Save & continue"}
          </Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SOWForm, MergeFieldInput });

})();