/* shared/Field.jsx — config-driven field renderer + inline validation.
   Used by Stage 1 (from tenant config) and Stage 2 steps.
   Globals: React, Portal. Exposes: Field, Icon, useField helpers. */
/* eslint-disable */
const { useState } = React;

/* tiny inline icon set (no external dep) */
function Icon({ name, size = 18, stroke = 1.6, className }) {
  const s = { width: size, height: size, fill: "none", stroke: "currentColor",
    strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    arrow: <path d="M5 12h14M13 6l6 6-6 6" />,
    check: <path d="M20 6L9 17l-5-5" />,
    alert: <g><circle cx="12" cy="12" r="10" /><path d="M12 8v4M12 16h.01" /></g>,
    lock: <g><rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></g>,
    bank: <g><path d="M3 10l9-6 9 6" /><path d="M5 10v8M19 10v8M9 10v8M15 10v8M3 21h18" /></g>,
    upload: <g><path d="M12 16V4M7 9l5-5 5 5" /><path d="M5 20h14" /></g>,
    file: <g><path d="M14 3v5h5" /><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /></g>,
    pen: <path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" />,
    plus: <path d="M12 5v14M5 12h14" />,
    x: <path d="M18 6L6 18M6 6l12 12" />,
    shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />,
    clock: <g><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></g>,
  };
  return <svg viewBox="0 0 24 24" style={s} className={className} aria-hidden="true">{paths[name] || null}</svg>;
}

function Field(props) {
  // props: name, label, type, required, value, error, touched, help,
  //        options, placeholder, autocomplete, inputmode, maxLength,
  //        onChange(name,val), onBlur(name), onFocus(name), showOk
  const { name, label, type = "text", required, value, error, touched,
    help, options, placeholder, autocomplete, inputmode, maxLength,
    onChange, onBlur, onFocus, showOk } = props;

  const showErr = touched && error;
  const showGood = showOk && touched && !error && value;
  const cls = Portal.cx("field-input", showErr && "error", showGood && "ok");

  const alreadyOptional = /optional/i.test(label || "");
  const labelEl = type !== "checkbox" && (
    <label htmlFor={name}>
      {label}
      {required ? <span className="req">*</span> : (!alreadyOptional && <span className="opt">optional</span>)}
    </label>
  );

  let control;
  if (type === "select") {
    control = (
      <select id={name} name={name} className={Portal.cx("field-select", showErr && "error")}
        value={value || ""} onChange={(e) => onChange(name, e.target.value)}
        onBlur={() => onBlur && onBlur(name)} onFocus={() => onFocus && onFocus(name)}>
        <option value="" disabled>Select…</option>
        {(options || []).map((o) => <option key={o.v} value={o.v}>{o.l}</option>)}
      </select>
    );
  } else if (type === "textarea") {
    control = (
      <textarea id={name} name={name} className={Portal.cx("field-textarea", showErr && "error")}
        value={value || ""} placeholder={placeholder} maxLength={maxLength}
        onChange={(e) => onChange(name, e.target.value)}
        onBlur={() => onBlur && onBlur(name)} onFocus={() => onFocus && onFocus(name)} />
    );
  } else if (type === "checkbox") {
    return (
      <div className="field">
        <label className="field-check">
          <input type="checkbox" name={name} checked={!!value}
            onChange={(e) => onChange(name, e.target.checked)} />
          <span className="ct">{label}</span>
        </label>
        {help && <div className="help">{help}</div>}
      </div>
    );
  } else {
    control = (
      <input id={name} name={name} type={type === "tel" ? "tel" : type} className={cls}
        value={value || ""} placeholder={placeholder} autoComplete={autocomplete}
        inputMode={inputmode} maxLength={maxLength}
        onChange={(e) => onChange(name, e.target.value)}
        onBlur={() => onBlur && onBlur(name)} onFocus={() => onFocus && onFocus(name)} />
    );
  }

  return (
    <div className="field">
      {labelEl}
      {control}
      {showErr && <div className="field-err"><Icon name="alert" size={13} /> {error}</div>}
      {showGood && !help && <div className="field-err field-ok-mark"><Icon name="check" size={13} /> Looks good</div>}
      {help && !showErr && <div className="help">{help}</div>}
    </div>
  );
}