const PARENT_ROLES = ['Мама', 'Папа', 'Опекун'];

const Label = ({ children }) => (
  <label className="mono" style={{ fontSize: 11, color:'var(--fg-subtle)', letterSpacing:'.06em', textTransform:'uppercase', marginBottom: 6, display:'block' }}>
    {children}
  </label>
);

const ErrorBanner = ({ msg }) => !msg ? null : (
  <div style={{ padding: 10, borderRadius: 10, background:'#FBE1DA', color:'#9A3218', fontSize: 13 }}>{msg}</div>
);

const RegisterScreen = ({ onRegistered, onGoLogin }) => {
  const [step, setStep] = React.useState(1);
  const [branch, setBranch] = React.useState(null);
  const [parent, setParent] = React.useState({ name:'', parentRole:'Мама', login:'', password:'', passwordConfirm:'' });
  const [child, setChild] = React.useState({ name:'', age:9, login:'', password:'' });
  const [inviteCode, setInviteCode] = React.useState('');
  const [error, setError] = React.useState('');
  const [errorField, setErrorField] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const step1Valid =
    parent.name.trim().length >= 1 &&
    PARENT_ROLES.includes(parent.parentRole) &&
    parent.login.trim().length >= 2 &&
    parent.password.length >= 6 &&
    parent.password === parent.passwordConfirm;

  const submitNew = async () => {
    setError(''); setErrorField('');
    if (child.name.trim().length < 1) { setError('Укажите имя ребёнка'); setErrorField('child.name'); return; }
    if (!(child.age >= 1 && child.age <= 18)) { setError('Возраст: от 1 до 18'); setErrorField('child.age'); return; }
    if (child.login.trim().length < 2) { setError('Логин ребёнка: минимум 2 символа'); setErrorField('child.login'); return; }
    if (child.password.length < 2) { setError('Пароль ребёнка: минимум 2 символа'); setErrorField('child.password'); return; }

    setLoading(true);
    try {
      const bundle = await api.registerNewFamily(
        { name: parent.name.trim(), parentRole: parent.parentRole, login: parent.login.trim(), password: parent.password },
        { name: child.name.trim(), age: Number(child.age), login: child.login.trim(), password: child.password }
      );
      onRegistered?.(bundle);
    } catch (err) {
      setLoading(false);
      if (err.status === 409 && err.field === 'parent.login') { setError('Ваш логин уже занят'); setStep(1); setErrorField('parent.login'); }
      else if (err.status === 409 && err.field === 'child.login') { setError('Логин ребёнка уже занят'); setErrorField('child.login'); }
      else if (err.status === 400) { setError('Проверьте поля: ' + (err.field || 'неизвестно')); setErrorField(err.field || ''); }
      else setError('Не удалось создать аккаунт: ' + (err.message || err.status));
    }
  };

  const submitJoin = async () => {
    setError(''); setErrorField('');
    const normalized = inviteCode.trim().toUpperCase();
    if (!/^[23456789ABCDEFGHJKLMNPQRSTUVWXYZ]{4}-[23456789ABCDEFGHJKLMNPQRSTUVWXYZ]{4}$/.test(normalized)) {
      setError('Код должен быть в формате XXXX-YYYY'); setErrorField('inviteCode'); return;
    }
    setLoading(true);
    try {
      const bundle = await api.registerJoin(
        { name: parent.name.trim(), parentRole: parent.parentRole, login: parent.login.trim(), password: parent.password },
        normalized
      );
      onRegistered?.(bundle);
    } catch (err) {
      setLoading(false);
      if (err.status === 404) { setError('Код семьи не найден. Проверьте написание.'); setErrorField('inviteCode'); }
      else if (err.status === 409 && err.field === 'parent.login') { setError('Ваш логин уже занят'); setStep(1); setErrorField('parent.login'); }
      else if (err.status === 400) { setError('Проверьте поля: ' + (err.field || 'неизвестно')); setErrorField(err.field || ''); }
      else setError('Не удалось присоединиться: ' + (err.message || err.status));
    }
  };

  const titles = {
    1: 'Создать аккаунт',
    2: 'Новая семья или присоединиться?',
    '3-new': 'Данные ребёнка',
    '3-join': 'Введите код семьи',
  };
  const subtitles = {
    1: 'Сначала расскажите о себе.',
    2: 'Создайте новую семью или присоединитесь к существующей по коду.',
    '3-new': 'Один аккаунт ребёнка создаётся сразу. Дополнительных можно добавить позже в настройках.',
    '3-join': 'Попросите у другого родителя код, который он получил при регистрации.',
  };
  const titleKey = step === 3 ? (branch === 'new' ? '3-new' : '3-join') : step;

  return (
    <AuthLayout title={titles[titleKey]} subtitle={subtitles[titleKey]} side={<AuthSidePanel/>}>
      {step === 1 && (
        <div style={{ display:'flex', flexDirection:'column', gap: 12 }}>
          <ErrorBanner msg={error}/>
          <div>
            <Label>Как вас зовут</Label>
            <Input leading={<IconUser size={16}/>} placeholder="Марина" value={parent.name} onChange={e=> setParent({...parent, name: e.target.value})} error={errorField==='parent.name'}/>
          </div>
          <div>
            <Label>Роль в семье</Label>
            <div style={{ display:'flex', gap: 8 }}>
              {PARENT_ROLES.map(r => (
                <button key={r} type="button" onClick={()=> setParent({...parent, parentRole: r})} style={{
                  flex: 1, padding:'10px', borderRadius: 10,
                  border: `1.5px solid ${parent.parentRole===r ? 'var(--fg)' : 'var(--border)'}`,
                  background: parent.parentRole===r ? 'var(--surface-2)' : 'var(--surface)',
                  cursor:'pointer', fontSize: 14, color:'var(--fg)',
                }}>{r}</button>
              ))}
            </div>
          </div>
          <div>
            <Label>Логин</Label>
            <Input leading={<IconMail size={16}/>} placeholder="ivan.p" value={parent.login} onChange={e=> setParent({...parent, login: e.target.value})} error={errorField==='parent.login'}/>
          </div>
          <div>
            <Label>Пароль (минимум 6 символов)</Label>
            <Input leading={<IconLock size={16}/>} type="password" placeholder="Надёжный пароль" value={parent.password} onChange={e=> setParent({...parent, password: e.target.value})} error={errorField==='parent.password'}/>
          </div>
          <div>
            <Label>Подтверждение пароля</Label>
            <Input leading={<IconLock size={16}/>} type="password" placeholder="Ещё раз" value={parent.passwordConfirm} onChange={e=> setParent({...parent, passwordConfirm: e.target.value})} error={parent.passwordConfirm !== '' && parent.password !== parent.passwordConfirm}/>
          </div>
          {parent.passwordConfirm !== '' && parent.password !== parent.passwordConfirm && (
            <div style={{ fontSize: 12, color:'var(--bad)' }}>Пароли не совпадают</div>
          )}
          <Button variant="primary" size="lg" full type="button" disabled={!step1Valid} onClick={()=> { setError(''); setErrorField(''); setStep(2); }} trailing={<IconArrow size={16}/>}>
            Продолжить
          </Button>
          <div style={{ textAlign:'center', marginTop: 6, fontSize: 14, color:'var(--fg-muted)' }}>
            Уже есть аккаунт?{' '}
            <button type="button" onClick={onGoLogin} style={{ background:'none', border:'none', color:'var(--accent)', cursor:'pointer', fontWeight: 500, padding: 0 }}>
              Войти
            </button>
          </div>
        </div>
      )}

      {step === 2 && (
        <div style={{ display:'flex', flexDirection:'column', gap: 12 }}>
          <button type="button" onClick={()=> { setBranch('new'); setStep(3); }} style={{
            textAlign:'left', padding: 16, borderRadius: 14, border: '1.5px solid var(--border)',
            background: 'var(--surface)', cursor:'pointer', display:'flex', alignItems:'center', gap: 14,
          }}>
            <div style={{ width: 48, height: 48, borderRadius: 14, background:'var(--surface-2)', display:'grid', placeItems:'center', fontSize: 26 }}>🏠</div>
            <div style={{ flex:1 }}>
              <div style={{ fontWeight:600, fontSize: 15, marginBottom: 2 }}>Создать новую семью</div>
              <div style={{ color:'var(--fg-muted)', fontSize: 13, lineHeight: 1.4 }}>Добавьте первого ребёнка — и получите код для приглашения второго родителя.</div>
            </div>
            <IconArrow size={18}/>
          </button>
          <button type="button" onClick={()=> { setBranch('join'); setStep(3); }} style={{
            textAlign:'left', padding: 16, borderRadius: 14, border: '1.5px solid var(--border)',
            background: 'var(--surface)', cursor:'pointer', display:'flex', alignItems:'center', gap: 14,
          }}>
            <div style={{ width: 48, height: 48, borderRadius: 14, background:'var(--surface-2)', display:'grid', placeItems:'center', fontSize: 26 }}>🔗</div>
            <div style={{ flex:1 }}>
              <div style={{ fontWeight:600, fontSize: 15, marginBottom: 2 }}>Присоединиться по коду</div>
              <div style={{ color:'var(--fg-muted)', fontSize: 13, lineHeight: 1.4 }}>Второй родитель — введите код семьи, который вам дал первый.</div>
            </div>
            <IconArrow size={18}/>
          </button>
          <div style={{ display:'flex', gap: 8, marginTop: 6 }}>
            <Button variant="ghost" size="lg" type="button" onClick={()=> setStep(1)} leading={<IconBack size={16}/>}>Назад</Button>
          </div>
        </div>
      )}

      {step === 3 && branch === 'new' && (
        <div style={{ display:'flex', flexDirection:'column', gap: 12 }}>
          <ErrorBanner msg={error}/>
          <div>
            <Label>Имя ребёнка</Label>
            <Input leading={<IconUser size={16}/>} placeholder="Катя" value={child.name} onChange={e=> setChild({...child, name: e.target.value})} error={errorField==='child.name'}/>
          </div>
          <div>
            <Label>Возраст (1–18)</Label>
            <Input leading={<IconSparkle size={16}/>} type="number" min="1" max="18" value={child.age} onChange={e=> setChild({...child, age: Number(e.target.value)})} error={errorField==='child.age'}/>
          </div>
          <div>
            <Label>Логин ребёнка</Label>
            <Input leading={<IconMail size={16}/>} placeholder="kate2017" value={child.login} onChange={e=> setChild({...child, login: e.target.value})} error={errorField==='child.login'}/>
          </div>
          <div>
            <Label>Пароль ребёнка (можно простой)</Label>
            <Input leading={<IconLock size={16}/>} type="password" placeholder="Минимум 2 символа" value={child.password} onChange={e=> setChild({...child, password: e.target.value})} error={errorField==='child.password'}/>
          </div>
          <div style={{ display:'flex', gap: 8, marginTop: 6 }}>
            <Button variant="ghost" size="lg" type="button" onClick={()=> setStep(2)} leading={<IconBack size={16}/>}>Назад</Button>
            <Button variant="primary" size="lg" full type="button" disabled={loading} onClick={submitNew} trailing={<IconArrow size={16}/>}>
              {loading ? 'Создаём…' : 'Создать аккаунт'}
            </Button>
          </div>
        </div>
      )}

      {step === 3 && branch === 'join' && (
        <div style={{ display:'flex', flexDirection:'column', gap: 12 }}>
          <ErrorBanner msg={error}/>
          <div>
            <Label>Код семьи</Label>
            <Input leading={<IconUsers size={16}/>} placeholder="K7X9-M2N4" value={inviteCode} onChange={e=> setInviteCode(e.target.value.toUpperCase())} error={errorField==='inviteCode'}/>
            <div style={{ fontSize: 12, color:'var(--fg-subtle)', marginTop: 6 }}>
              Формат: 4 символа, дефис, ещё 4 символа. Без нулей и единиц.
            </div>
          </div>
          <div style={{ display:'flex', gap: 8, marginTop: 6 }}>
            <Button variant="ghost" size="lg" type="button" onClick={()=> setStep(2)} leading={<IconBack size={16}/>}>Назад</Button>
            <Button variant="primary" size="lg" full type="button" disabled={loading} onClick={submitJoin} trailing={<IconArrow size={16}/>}>
              {loading ? 'Присоединяемся…' : 'Присоединиться'}
            </Button>
          </div>
        </div>
      )}
    </AuthLayout>
  );
};

Object.assign(window, { RegisterScreen, Label, ErrorBanner, PARENT_ROLES });