import React, { useRef } from 'react';
import './Form.css';

/* 表单（移动端）— 规格 §32
   结构：item（字段）> label（标签 + 必填星号）/ main（控件 + 错误提示）。
   移动端与桌面端的关键差别是**标签位置**：窄屏默认置顶标签（labelPosition=top），
   需要一组纵向对齐的字段时才用 left（定宽标签列）。
   必填星号是装饰（aria-hidden），语义由控件的 aria-required / required 承担；
   错误态由字段级 is-error + 控件 aria-invalid 双写，错误文案用 aria-describedby 关联。
   本端只做「必填」的结构表达，不发请求、不做正则校验（业务规则在宿主，规格 §32.7）。 */

let seq = 0;

export default function Form({
  fields = [],
  labelPosition = 'top',
  borderless = false,
  disabled = false,
  submitText = '提交',
  onSubmit,
  onChange,
  children = null,
}) {
  const idRef = useRef(null);
  if (idRef.current === null) {
    seq += 1;
    idRef.current = 'kole-m-form-' + seq;
  }
  const base = idRef.current;

  const cls =
    'kole-m-form' +
    (labelPosition === 'left' ? ' kole-m-form--left' : '') +
    (borderless ? ' kole-m-form--borderless' : '') +
    (disabled ? ' is-disabled' : '');

  return (
    <form
      className={cls}
      noValidate
      onSubmit={(e) => {
        e.preventDefault();
        if (disabled) return;
        if (onSubmit) onSubmit(fields);
      }}
    >
      {fields.map((f, i) => {
        const item = f || {};
        const key = item.name || String(i);
        const labelId = `${base}-label-${key}`;
        const errorId = `${base}-error-${key}`;
        const hintId = `${base}-hint-${key}`;
        const describedBy = [item.error ? errorId : '', item.hint ? hintId : ''].filter(Boolean).join(' ') || undefined;
        return (
          <div className={'kole-m-form__item' + (item.error ? ' is-error' : '')} key={String(key)}>
            <span className="kole-m-form__label" id={labelId}>
              {item.required ? (
                <span className="kole-m-form__star" aria-hidden="true">
                  *
                </span>
              ) : null}
              {item.label}
            </span>
            <span className="kole-m-form__main">
              {item.type === 'select' ? (
                /* 非输入型控件：整行可点（原生 button，键盘可达） */
                <button className="kole-m-form__hit" type="button" aria-labelledby={labelId} aria-haspopup="dialog" disabled={disabled}>
                  <span>{item.value || item.placeholder || ''}</span>
                  <span aria-hidden="true">›</span>
                </button>
              ) : item.type === 'textarea' ? (
                <textarea
                  className="kole-m-form__control kole-m-form__control--multiline"
                  name={item.name}
                  rows={item.rows || 2}
                  value={item.value || ''}
                  placeholder={item.placeholder || ''}
                  disabled={disabled}
                  required={!!item.required}
                  aria-labelledby={labelId}
                  aria-required={item.required ? 'true' : undefined}
                  aria-invalid={item.error ? 'true' : undefined}
                  aria-describedby={describedBy}
                  onChange={(e) => {
                    if (disabled) return;
                    if (onChange) onChange(item.name, e.target.value);
                  }}
                />
              ) : (
                <input
                  className="kole-m-form__control"
                  type="text"
                  inputMode={item.inputMode || undefined}
                  name={item.name}
                  value={item.value || ''}
                  placeholder={item.placeholder || ''}
                  disabled={disabled}
                  required={!!item.required}
                  aria-labelledby={labelId}
                  aria-required={item.required ? 'true' : undefined}
                  aria-invalid={item.error ? 'true' : undefined}
                  aria-describedby={describedBy}
                  onChange={(e) => {
                    if (disabled) return;
                    if (onChange) onChange(item.name, e.target.value);
                  }}
                />
              )}
              {item.error ? (
                <span className="kole-m-form__error" id={errorId} role="alert">
                  {item.error}
                </span>
              ) : null}
              {item.hint ? (
                <span className="kole-m-form__hint" id={hintId}>
                  {item.hint}
                </span>
              ) : null}
            </span>
          </div>
        );
      })}
      {children}
      {submitText ? (
        <div className="kole-m-form__item">
          <button className="kole-m-form__submit" type="submit" disabled={disabled}>
            {submitText}
          </button>
        </div>
      ) : null}
    </form>
  );
}