/* Reusable form-field primitives. Tracks pre-filled vs blank
   so styling and progress can react to user edits. */

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

/* Track whether a field's *current* value differs from blank.
   We classify each field as:
     - 'prefilled' — had a value at mount AND still has one
     - 'blank'     — currently empty
     - 'filled'    — was empty at mount, user has typed
   For styling, we only use prefilled/blank — filled-by-user uses
   the neutral border so it remains visually distinct from auto-captured. */

function classifyField(fieldKey, value, initialPrefilled) {
  if (!value || value === '') return 'blank';
  if (initialPrefilled) return 'prefilled';
  return 'filled';
}

function fieldClasses(state) {
  if (state === 'prefilled') return 'field-input is-prefilled';
  if (state === 'blank')     return 'field-input is-blank';
  return 'field-input';
}

function Field({ label, optional, hint, children }) {
  return (
    <div className="field">
      <label className="field-label">
        {label}
        {optional && <span className="optional">{optional}</span>}
      </label>
      {children}
      {hint && <div className="field-hint">{hint}</div>}
    </div>
  );
}

function TextField({ fieldKey, label, optional, hint, value, onChange, prefix, suffix, initialPrefilled, type = 'text', placeholder, readOnly = false }) {
  const state = classifyField(fieldKey, value, initialPrefilled);
  const isReadOnly = readOnly || (window.READONLY_KEYS && window.READONLY_KEYS.has(fieldKey));
  
  return (
    <Field label={label} optional={optional} hint={hint}>
      <div className={fieldClasses(state) + (prefix ? ' has-prefix' : '') + (isReadOnly ? ' is-readonly' : '')}>
        {prefix && <span className="field-prefix">{prefix}</span>}
        <input
          type={type}
          value={value}
          placeholder={placeholder || ''}
          onChange={e => !isReadOnly && onChange(e.target.value)}
          readOnly={isReadOnly}
          disabled={isReadOnly}
        />
        {suffix && <span className="field-suffix">{suffix}</span>}
      </div>
    </Field>
  );
}

function TextArea({ fieldKey, label, optional, hint, value, onChange, initialPrefilled, rows = 2 }) {
  const state = classifyField(fieldKey, value, initialPrefilled);
  return (
    <Field label={label} optional={optional} hint={hint}>
      <div className={fieldClasses(state)}>
        <textarea
          rows={rows}
          value={value}
          onChange={e => onChange(e.target.value)}
        />
      </div>
    </Field>
  );
}

function Select({ fieldKey, label, optional, hint, value, onChange, options, initialPrefilled }) {
  const state = classifyField(fieldKey, value, initialPrefilled);
  return (
    <Field label={label} optional={optional} hint={hint}>
      <div className={fieldClasses(state)}>
        <select value={value} onChange={e => onChange(e.target.value)}>
          {value === '' && <option value="">Select…</option>}
          {options.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
      </div>
    </Field>
  );
}

function RadioGroup({ fieldKey, label, optional, hint, value, onChange, options, initialPrefilled }) {
  const state = classifyField(fieldKey, value, initialPrefilled);
  const groupClass =
    state === 'prefilled' ? 'radio-group is-prefilled'
    : state === 'blank'   ? 'radio-group is-blank'
    : 'radio-group';
  return (
    <Field label={label} optional={optional} hint={hint}>
      <div className={groupClass} role="radiogroup">
        {options.map(o => (
          <button
            key={o}
            type="button"
            className="radio-opt"
            aria-pressed={value === o}
            onClick={() => onChange(o)}
          >{o}</button>
        ))}
      </div>
    </Field>
  );
}

function CurrencyField(props) {
  return <TextField {...props} prefix="₹" />;
}

window.TextField = TextField;
window.TextArea = TextArea;
window.Select = Select;
window.RadioGroup = RadioGroup;
window.CurrencyField = CurrencyField;
window.classifyField = classifyField;