// Modal for a parent to set/remove a child's alternative auth (pattern OR emoji-pin).
// Props:
//   open, onClose, onSaved
//   child (user object)
//   kind: 'pattern' | 'emoji-pin'

const ChildAuthModal = ({ open, onClose, onSaved, child, kind }) => {
  const [draft, setDraft] = React.useState(null);       // first input
  const [draftStr, setDraftStr] = React.useState('');   // serialized for comparison
  const [step, setStep] = React.useState('first');      // 'first' | 'confirm'
  const [resetKey, setResetKey] = React.useState(0);
  const [error, setError] = React.useState('');
  const [saving, setSaving] = React.useState(false);

  React.useEffect(() => {
    if (open) {
      setDraft(null); setDraftStr(''); setStep('first'); setResetKey((k)=>k+1); setError(''); setSaving(false);
    }
  }, [open, kind, child?.id]);

  if (!open || !child) return null;

  const title = kind === 'pattern' ? 'Графический пароль' : 'Эмодзи-PIN';
  const subtitle = kind === 'pattern'
    ? 'Нарисуйте фигуру, соединив минимум 4 точки.'
    : 'Выберите 4–6 эмодзи в нужном порядке.';

  const asStr = (v) => Array.isArray(v) ? v.join('|') : String(v);

  const onFirst = (val) => {
    setDraft(val);
    setDraftStr(asStr(val));
    setError('');
    setStep('confirm');
    setResetKey((k) => k + 1);
  };

  const onSecond = async (val) => {
    if (asStr(val) !== draftStr) {
      setError('Не совпадает с первой попыткой. Начните заново.');
      setStep('first');
      setDraft(null); setDraftStr('');
      setResetKey((k) => k + 1);
      return;
    }
    setSaving(true);
    try {
      if (kind === 'pattern') await api.setChildPattern(child.id, val);
      else await api.setChildEmojiPin(child.id, val);
      onSaved?.();
      onClose?.();
    } catch (e) {
      setSaving(false);
      setError('Не удалось сохранить: ' + (e?.message || e?.status));
    }
  };

  const remove = async () => {
    if (!confirm(`Удалить ${title.toLowerCase()}?`)) return;
    setSaving(true);
    try {
      if (kind === 'pattern') await api.removeChildPattern(child.id);
      else await api.removeChildEmojiPin(child.id);
      onSaved?.();
      onClose?.();
    } catch (e) {
      setSaving(false);
      setError('Не удалось удалить: ' + (e?.message || e?.status));
    }
  };

  const hasExisting = kind === 'pattern' ? !!child.hasPattern : !!child.hasEmojiPin;

  return (
    <Modal open={open} onClose={onClose} width={480}>
      <div style={{ padding: 24 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-subtle)', letterSpacing: '.08em', textTransform: 'uppercase' }}>
            {child.name.toUpperCase()}
          </div>
          <button type="button" onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--fg-subtle)', cursor: 'pointer' }}><IconClose size={18}/></button>
        </div>
        <h2 style={{ margin: '4px 0 6px', fontSize: 22, fontWeight: 600 }}>{title}</h2>
        <p style={{ margin: '0 0 14px', color: 'var(--fg-muted)', fontSize: 13, lineHeight: 1.5 }}>
          {step === 'first' ? subtitle : 'Повторите, чтобы подтвердить.'}
        </p>

        {error && (
          <div style={{ padding: 10, borderRadius: 10, background: '#FBE1DA', color: '#9A3218', fontSize: 13, marginBottom: 12 }}>{error}</div>
        )}

        {step === 'first' && (
          kind === 'pattern'
            ? <PatternInput resetKey={resetKey} onComplete={onFirst}/>
            : <EmojiPinInput resetKey={resetKey} onComplete={onFirst}/>
        )}

        {step === 'confirm' && (
          kind === 'pattern'
            ? <PatternInput resetKey={resetKey} onComplete={onSecond}/>
            : <EmojiPinInput resetKey={resetKey} onComplete={onSecond}/>
        )}

        <div style={{ display: 'flex', gap: 8, marginTop: 18, flexWrap: 'wrap' }}>
          <Button variant="ghost" type="button" onClick={onClose} disabled={saving}>Отмена</Button>
          {hasExisting && step === 'first' && (
            <Button variant="danger" type="button" onClick={remove} disabled={saving}>Удалить</Button>
          )}
          {step === 'confirm' && (
            <Button variant="ghost" type="button" onClick={() => { setStep('first'); setDraft(null); setDraftStr(''); setResetKey((k) => k + 1); }} disabled={saving}>
              Начать заново
            </Button>
          )}
        </div>
        {saving && (
          <div style={{ marginTop: 12, fontSize: 13, color: 'var(--fg-muted)', textAlign: 'center' }}>Сохраняем…</div>
        )}
      </div>
    </Modal>
  );
};

Object.assign(window, { ChildAuthModal });