/* global React */
// Admin shared form controls

const Placeholder = ({ color, label, style }) => (
  <div
    className="placeholder-photo"
    data-label={label}
    style={{ '--ph-bg': color, ...style }}
  />
);

const Field = ({ label, labelEn, children, hint }) => (
  <div className="field">
    <div className="field-label">
      {window.LANG === 'en'
        ? (labelEn || label)
        : <>{label}{labelEn && <span className="en">{labelEn}</span>}</>}
    </div>
    {children}
    {hint && <div style={{ fontSize: 11, color: 'var(--ink-faint)', marginTop: 2, fontFamily: 'var(--font-cn-hand)' }}>{hint}</div>}
  </div>
);

const Input = ({ value, onChange, placeholder, ...rest }) => (
  <input
    className="input"
    value={value || ''}
    onChange={e => onChange && onChange(e.target.value)}
    placeholder={placeholder}
    {...rest}
  />
);

const Textarea = ({ value, onChange, placeholder, rows = 3 }) => (
  <textarea
    className="input"
    rows={rows}
    value={value || ''}
    onChange={e => onChange && onChange(e.target.value)}
    placeholder={placeholder}
  />
);

const TagInput = ({ tags = [], onChange, placeholder = window.LANG === 'en' ? 'add tag…' : '加标签…' }) => {
  const [draft, setDraft] = React.useState('');
  const submit = () => {
    const t = draft.trim();
    if (t && !tags.includes(t)) {
      onChange([...tags, t]);
    }
    setDraft('');
  };
  return (
    <div className="tag-input">
      {tags.map((t, i) => (
        <span className="tag-chip" key={t + i}>
          {t}
          <span className="remove" onClick={() => onChange(tags.filter((_, j) => j !== i))}>✕</span>
        </span>
      ))}
      <input
        value={draft}
        onChange={e => setDraft(e.target.value)}
        onKeyDown={e => {
          if (e.key === 'Enter') { e.preventDefault(); submit(); }
          else if (e.key === 'Backspace' && !draft && tags.length) {
            onChange(tags.slice(0, -1));
          }
        }}
        placeholder={placeholder}
      />
    </div>
  );
};

const ImageUpload = ({ onPick, height = 120, label = '点击上传或拖拽照片到这里', labelEn = 'drop or click to upload', children }) => (
  <div
    className="image-upload"
    style={{ minHeight: height }}
    onClick={() => onPick && onPick({ mock: true, name: '新照片_' + Date.now() })}
  >
    {children || (window.LANG === 'en' ? (
      <>
        <div className="plus">+</div>
        <div>{labelEn}</div>
      </>
    ) : (
      <>
        <div className="plus">+</div>
        <div>{label}</div>
        <div className="en">{labelEn}</div>
      </>
    ))}
  </div>
);

// Single small portrait round
const Avatar = ({ color, label, size = 42 }) => (
  <div className="thumb" style={{ width: size, height: size, backgroundColor: color }}>
    <Placeholder color={color} label={label} />
  </div>
);

// Saved indicator that flashes
const useSaveFlash = () => {
  const [show, setShow] = React.useState(false);
  const flash = React.useCallback(() => {
    setShow(true);
    clearTimeout(window.__flashT);
    window.__flashT = setTimeout(() => setShow(false), 1800);
  }, []);
  return [show, flash];
};

window.Placeholder = Placeholder;
window.Field = Field;
window.Input = Input;
window.Textarea = Textarea;
window.TagInput = TagInput;
window.ImageUpload = ImageUpload;
window.Avatar = Avatar;
window.useSaveFlash = useSaveFlash;