// Form section components for Cumarex vendor self-assessment.
// All copy is read from window.I18N[lang]; presentation is shared.

const { useState, useEffect, useMemo, useRef, useCallback } = React;

// ── Primitive field ────────────────────────────────────────────────────────
function Field({ label, hint, required, children, span = 6, className = "" }) {
  return (
    <label className={`field span-${span} ${className}`}>
      <span className="field-label">
        {label}
        {required && <em className="req" aria-label="required">*</em>}
      </span>
      {children}
      {hint && <span className="field-hint">{hint}</span>}
    </label>
  );
}

function Input(props) {
  return <input className="input" {...props} />;
}

function Textarea(props) {
  return <textarea className="input textarea" rows={3} {...props} />;
}

function Select({ children, ...props }) {
  return (
    <div className="select-wrap">
      <select className="input select" {...props}>{children}</select>
    </div>
  );
}

function CheckGrid({ name, items, values, onChange, columns = 3 }) {
  const toggle = (k) => onChange({ ...values, [k]: !values[k] });
  return (
    <div className="check-grid" style={{ gridTemplateColumns: `repeat(${columns}, minmax(0,1fr))` }}>
      {items.map(({ key, label }) => (
        <label key={key} className={`check ${values[key] ? "on" : ""}`}>
          <input type="checkbox" name={name} checked={!!values[key]} onChange={() => toggle(key)} />
          <span className="check-box" aria-hidden="true">
            <svg viewBox="0 0 14 14"><path d="M3 7.4 5.7 10 11 4.4" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </span>
          <span className="check-label">{label}</span>
        </label>
      ))}
    </div>
  );
}

function RadioPills({ name, options, value, onChange }) {
  return (
    <div className="pills" role="radiogroup">
      {options.map((o) => (
        <label key={o.value} className={`pill ${value === o.value ? "on" : ""}`}>
          <input type="radio" name={name} value={o.value} checked={value === o.value} onChange={() => onChange(o.value)} />
          <span>{o.label}</span>
        </label>
      ))}
    </div>
  );
}

// ── File drop ──────────────────────────────────────────────────────────────
function FileDrop({ id, label, t, value, onChange }) {
  const [hover, setHover] = useState(false);
  const inputRef = useRef(null);
  const onFile = (f) => {
    if (!f) return onChange(null);
    if (f.size > 10 * 1024 * 1024) return alert("Max 10 MB");
    onChange({ name: f.name, size: f.size, file: f });
  };
  return (
    <div className={`filedrop ${hover ? "hover" : ""} ${value ? "has-file" : ""}`}
      onDragOver={(e) => { e.preventDefault(); setHover(true); }}
      onDragLeave={() => setHover(false)}
      onDrop={(e) => { e.preventDefault(); setHover(false); onFile(e.dataTransfer.files?.[0]); }}
      onClick={() => inputRef.current?.click()}>
      <input ref={inputRef} type="file" id={id} hidden
        accept=".pdf,.jpg,.jpeg,.png,.doc,.docx"
        onChange={(e) => onFile(e.target.files?.[0])} />
      <div className="filedrop-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/>
          <path d="M14 3v6h6"/>
        </svg>
      </div>
      <div className="filedrop-body">
        <div className="filedrop-label">{label}</div>
        <div className="filedrop-hint">
          {value ? `${value.name} · ${(value.size/1024).toFixed(0)} KB` : `${t.dropHint} · ${t.fileLimit}`}
        </div>
      </div>
      {value && <button type="button" className="filedrop-clear" onClick={(e) => { e.stopPropagation(); onChange(null); }} aria-label="Remove">✕</button>}
    </div>
  );
}

// ── Section wrapper ────────────────────────────────────────────────────────
function Section({ index, title, desc, children, complete }) {
  return (
    <section className="section" data-complete={complete ? "1" : "0"}>
      <header className="section-head">
        <div className="section-num">{String(index).padStart(2, "0")}</div>
        <div>
          <h2 className="section-title">{title}</h2>
          <p className="section-desc">{desc}</p>
        </div>
        <div className="section-status" aria-hidden="true">
          {complete && (
            <svg viewBox="0 0 16 16" width="14" height="14"><path d="M3 8.4 6.4 12 13 4.6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          )}
        </div>
      </header>
      <div className="section-body">{children}</div>
    </section>
  );
}

window.FormBits = { Field, Input, Textarea, Select, CheckGrid, RadioPills, FileDrop, Section };