// Renders a single cleaner-form field by `kind`. Also exports the small
// MField label wrapper and the shared mobileInputStyle helper so the
// mobile form and the portal-settings preview render identically.

function FormFieldRenderer({ field, value, setValue, houses, hasReceipt, setHasReceipt }) {
  const { kind, label, hint } = field;

  if (kind === 'property') {
    return (
      <MField label={label}>
        <select value={value || ''} onChange={e => setValue(e.target.value)} style={mobileInputStyle()}>
          {houses.map(h => <option key={h.id} value={h.id}>{h.name}</option>)}
        </select>
      </MField>
    );
  }
  if (kind === 'date') {
    return (
      <MField label={label}>
        <input type="date" value={value || ''} onChange={e => setValue(e.target.value)} style={mobileInputStyle()}/>
      </MField>
    );
  }
  if (kind === 'money') {
    return (
      <MField label={label} hint={hint}>
        <div style={{ position: 'relative' }}>
          <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: '#8a8780', fontSize: 16 }}>$</span>
          <input type="number" inputMode="decimal" placeholder="0.00" value={value || ''}
                 onChange={e => setValue(e.target.value)}
                 style={{ ...mobileInputStyle(), paddingLeft: 26, fontSize: 16 }}/>
        </div>
      </MField>
    );
  }
  if (kind === 'number') {
    return (
      <MField label={label} hint={hint}>
        <input type="number" inputMode="numeric" placeholder="0" value={value || ''}
               onChange={e => setValue(e.target.value)} style={mobileInputStyle()}/>
      </MField>
    );
  }
  if (kind === 'text') {
    return (
      <MField label={label} hint={hint}>
        <input type="text" value={value || ''} onChange={e => setValue(e.target.value)} style={mobileInputStyle()}/>
      </MField>
    );
  }
  if (kind === 'longtext') {
    return (
      <MField label={label} hint={hint}>
        <textarea placeholder="e.g. Ran out of coffee pods. Guest left the key in the drawer."
                  value={value || ''} onChange={e => setValue(e.target.value)}
                  style={{ ...mobileInputStyle(), height: 76, padding: '12px 14px', fontFamily: 'inherit', resize: 'none' }}/>
      </MField>
    );
  }
  if (kind === 'photo') {
    const has = field.id === 'laundryReceipt' ? hasReceipt : !!value;
    const toggle = field.id === 'laundryReceipt' ? (() => setHasReceipt(h => !h)) : (() => setValue(value ? '' : 'photo'));
    return (
      <MField label={label} hint={hint}>
        <button onClick={toggle}
                style={{
                  height: 90, borderRadius: 10, border: `1.5px dashed ${has ? '#2d5f3f' : '#d8d5cd'}`,
                  background: has ? '#e8f0ea' : '#faf9f6', display: 'flex', flexDirection: 'column',
                  alignItems: 'center', justifyContent: 'center', gap: 4, fontFamily: 'inherit',
                  color: has ? '#2d5f3f' : '#5c5a54', fontSize: 13, fontWeight: 500,
                }}>
          {has ? (
            <>
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5 9-11"/></svg>
              <span>photo-04-24.jpg</span>
            </>
          ) : (
            <>
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 8h3l2-3h6l2 3h3a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V9a1 1 0 011-1z"/><circle cx="12" cy="13" r="4"/></svg>
              <span>Take photo or upload</span>
            </>
          )}
        </button>
      </MField>
    );
  }
  if (kind === 'yesno') {
    return (
      <MField label={label} hint={hint}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {['No', 'Yes'].map(opt => {
            const selected = value === opt;
            return (
              <button key={opt} onClick={() => setValue(opt)}
                      style={{
                        height: 44, borderRadius: 10, border: `1.5px solid ${selected ? '#1a1a17' : '#d8d5cd'}`,
                        background: selected ? '#1a1a17' : '#faf9f6', color: selected ? 'white' : '#1a1a17',
                        fontSize: 14, fontWeight: 500, fontFamily: 'inherit',
                      }}>{opt}</button>
            );
          })}
        </div>
      </MField>
    );
  }
  if (kind === 'checklist') {
    const items = field.items || [];
    const selected = value || [];
    const toggle = (item) => {
      if (selected.includes(item)) setValue(selected.filter(x => x !== item));
      else setValue([...selected, item]);
    };
    return (
      <MField label={label} hint={hint}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {items.map(item => {
            const isSel = selected.includes(item);
            return (
              <button key={item} onClick={() => toggle(item)}
                      style={{
                        display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px',
                        background: isSel ? '#e8f0ea' : '#faf9f6', border: `1px solid ${isSel ? '#2d5f3f' : '#e8e6e0'}`,
                        borderRadius: 8, fontSize: 13.5, color: '#1a1a17', fontFamily: 'inherit', textAlign: 'left',
                      }}>
                <span style={{
                  width: 20, height: 20, borderRadius: 5, border: `1.5px solid ${isSel ? '#2d5f3f' : '#c8c5bc'}`,
                  background: isSel ? '#2d5f3f' : 'transparent', display: 'grid', placeItems: 'center', flexShrink: 0,
                }}>
                  {isSel && <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5 9-11"/></svg>}
                </span>
                <span style={{ flex: 1 }}>{item}</span>
              </button>
            );
          })}
        </div>
      </MField>
    );
  }
  if (kind === 'select') {
    return (
      <MField label={label} hint={hint}>
        <select value={value || ''} onChange={e => setValue(e.target.value)} style={mobileInputStyle()}>
          <option value="">Choose…</option>
          {(field.items || []).map(opt => <option key={opt} value={opt}>{opt}</option>)}
        </select>
      </MField>
    );
  }
  return null;
}

function MField({ label, hint, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontSize: 12, fontWeight: 500, color: '#5c5a54' }}>{label}</span>
      {children}
      {hint && <span style={{ fontSize: 11, color: '#8a8780' }}>{hint}</span>}
    </label>
  );
}

function mobileInputStyle() {
  return {
    width: '100%', height: 44, borderRadius: 10, border: '1px solid #d8d5cd',
    background: '#faf9f6', padding: '0 14px', fontFamily: 'inherit', fontSize: 15, color: '#1a1a17',
    outline: 'none', appearance: 'none', WebkitAppearance: 'none', boxSizing: 'border-box',
  };
}

Object.assign(window, { FormFieldRenderer, MField, mobileInputStyle });