/* ============================================================
   auth.jsx — Login + Register + Email verification pages
   ============================================================ */

const { useState, useEffect } = React;

const BOT_USERNAME = 'AITovarixBot';

/* ─── Telegram Login Widget ─── */
function TelegramLoginButton({ mode, linkToken }) {
  const { onLogin, API_BASE } = useAuth();
  const { navigate } = useNav();
  const toast = useToast();

  useEffect(() => {
    window.onTelegramAuth = async function(tgData) {
      try {
        const body = { ...tgData };
        if (linkToken) body.link_token = linkToken;

        const r = await fetch(`${API_BASE}/api/auth/telegram`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(body),
          credentials: 'include',
        });
        const data = await r.json();
        if (!r.ok) { toast(data.error || 'Ошибка Telegram-входа', 'warn'); return; }

        if (linkToken) {
          toast('Telegram привязан! ✅', 'ok');
          navigate('studio-profile');
        } else {
          toast('Добро пожаловать!', 'ok');
          onLogin(data.user);
        }
      } catch {
        toast('Ошибка сети', 'warn');
      }
    };

    const script = document.createElement('script');
    script.src = 'https://telegram.org/js/telegram-widget.js?22';
    script.setAttribute('data-telegram-login', BOT_USERNAME);
    script.setAttribute('data-size', 'large');
    script.setAttribute('data-onauth', 'onTelegramAuth(user)');
    script.setAttribute('data-request-access', 'write');
    script.async = true;

    const container = document.getElementById('tg-widget-' + (linkToken ? 'link' : mode));
    if (container) {
      container.innerHTML = '';
      container.appendChild(script);
    }

    return () => { delete window.onTelegramAuth; };
  }, [mode, linkToken]);

  return (
    <div id={'tg-widget-' + (linkToken ? 'link' : mode)} style={{ display: 'flex', justifyContent: 'center', minHeight: 44 }} />
  );
}

/* ─── Login ─── */
function LoginPage() {
  const { navigate } = useNav();
  const { onLogin, API_BASE } = useAuth();
  const toast = useToast();

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState('');

  async function submit(e) {
    e.preventDefault();
    if (!email.trim() || !password) { setErr('Заполни все поля'); return; }
    setErr('');
    setLoading(true);
    try {
      const r = await fetch(`${API_BASE}/api/auth/login`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: email.trim().toLowerCase(), password }),
        credentials: 'include',
      });
      const data = await r.json();
      if (!r.ok) { setErr(data.error || 'Ошибка входа'); return; }
      toast('Добро пожаловать!', 'ok');
      onLogin(data.user);
    } catch {
      setErr('Ошибка сети. Проверь подключение.');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="auth-page">
      <button className="auth-back" onClick={() => navigate('landing')}>← Назад</button>
      <div className="glass auth-card">
        <div className="auth-card-top" />
        <div className="auth-logo"><Logo size={18} /></div>
        <h1 className="auth-title h-display">Войти</h1>
        <p className="auth-sub muted">Вход в AI Media Studio</p>

        {/* Telegram виджет */}
        <div style={{ marginBottom: 20 }}>
          <TelegramLoginButton mode="login" />
        </div>

        <div className="auth-divider"><span>или по email</span></div>

        <form className="auth-form" onSubmit={submit}>
          <div className="field">
            <label className="field-label">Email</label>
            <input
              className="field-input"
              type="email"
              placeholder="you@example.com"
              value={email}
              onChange={e => setEmail(e.target.value)}
              autoComplete="email"
            />
          </div>
          <div className="field">
            <label className="field-label">Пароль</label>
            <input
              className="field-input"
              type="password"
              placeholder="••••••••"
              value={password}
              onChange={e => setPassword(e.target.value)}
              autoComplete="current-password"
            />
          </div>

          {err && <div className="auth-err">{err}</div>}

          <button className="btn btn-accent btn-block" type="submit" disabled={loading}>
            {loading ? <Spinner sm /> : 'Войти →'}
          </button>
        </form>

        <div className="auth-footer muted">
          Нет аккаунта?{' '}
          <button className="link" onClick={() => navigate('register')}>Зарегистрироваться</button>
        </div>
        <div className="auth-hint dim">
          Используя сервис, ты соглашаешься с условиями использования
        </div>
      </div>
    </div>
  );
}

/* ─── Register ─── */
function RegisterPage() {
  const { navigate } = useNav();
  const { onLogin, API_BASE } = useAuth();
  const toast = useToast();

  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState('');
  const [pendingEmail, setPendingEmail] = useState(''); // ожидает верификации
  const [devCode, setDevCode] = useState(''); // код в dev-режиме (без SMTP)

  async function submit(e) {
    e.preventDefault();
    if (!name.trim() || !email.trim() || !password || !confirm) {
      setErr('Заполни все поля');
      return;
    }
    if (password.length < 6) {
      setErr('Пароль минимум 6 символов');
      return;
    }
    if (password !== confirm) {
      setErr('Пароли не совпадают');
      return;
    }
    setErr('');
    setLoading(true);
    try {
      const r = await fetch(`${API_BASE}/api/auth/register`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: name.trim(), email: email.trim().toLowerCase(), password }),
        credentials: 'include',
      });
      const data = await r.json();
      if (!r.ok) { setErr(data.error || 'Ошибка регистрации'); return; }

      if (data.needsVerification) {
        setPendingEmail(data.email);
        if (data.devCode) setDevCode(data.devCode);
        return;
      }

      toast('Аккаунт создан!', 'ok');
      onLogin(data.user);
    } catch {
      setErr('Ошибка сети. Проверь подключение.');
    } finally {
      setLoading(false);
    }
  }

  /* Экран "проверьте почту" */
  if (pendingEmail) {
    return <VerifyEmailScreen email={pendingEmail} devCode={devCode} onLogin={onLogin} onBack={() => { setPendingEmail(''); setDevCode(''); }} />;
  }

  return (
    <div className="auth-page">
      <button className="auth-back" onClick={() => navigate('landing')}>← Назад</button>
      <div className="glass auth-card">
        <div className="auth-card-top" />
        <div className="auth-logo"><Logo size={18} /></div>
        <h1 className="auth-title h-display">Создать аккаунт</h1>
        <p className="auth-sub">
          <span className="badge badge-accent" style={{ display: 'inline-flex' }}>✨ 10 💎 бесплатно</span>
        </p>

        {/* Telegram виджет */}
        <div style={{ marginBottom: 20 }}>
          <TelegramLoginButton mode="register" />
        </div>

        <div className="auth-divider"><span>или по email</span></div>

        <form className="auth-form" onSubmit={submit}>
          <div className="field">
            <label className="field-label">Имя</label>
            <input
              className="field-input"
              type="text"
              placeholder="Как тебя зовут?"
              value={name}
              onChange={e => setName(e.target.value)}
              autoComplete="name"
            />
          </div>
          <div className="field">
            <label className="field-label">Email</label>
            <input
              className="field-input"
              type="email"
              placeholder="you@example.com"
              value={email}
              onChange={e => setEmail(e.target.value)}
              autoComplete="email"
            />
          </div>
          <div className="field-row">
            <div className="field">
              <label className="field-label">Пароль</label>
              <input
                className="field-input"
                type="password"
                placeholder="Минимум 6 символов"
                value={password}
                onChange={e => setPassword(e.target.value)}
                autoComplete="new-password"
              />
            </div>
            <div className="field">
              <label className="field-label">Повтор</label>
              <input
                className="field-input"
                type="password"
                placeholder="Повтори пароль"
                value={confirm}
                onChange={e => setConfirm(e.target.value)}
                autoComplete="new-password"
              />
            </div>
          </div>

          {err && <div className="auth-err">{err}</div>}

          <button className="btn btn-accent btn-block" type="submit" disabled={loading}>
            {loading ? <Spinner sm /> : '🚀 Зарегистрироваться'}
          </button>
        </form>

        <div className="auth-footer muted">
          Уже есть аккаунт?{' '}
          <button className="link" onClick={() => navigate('login')}>Войти</button>
        </div>
        <div className="auth-hint dim">
          Регистрируясь, ты соглашаешься с условиями использования
        </div>
      </div>
    </div>
  );
}

/* ─── Экран "проверьте почту" — ввод 6-значного кода ─── */
function VerifyEmailScreen({ email, devCode, onLogin, onBack }) {
  const { API_BASE } = useAuth();
  const toast = useToast();
  const [code, setCode] = useState('');
  const [verifying, setVerifying] = useState(false);
  const [err, setErr] = useState('');
  const [resending, setResending] = useState(false);
  const [hintCode, setHintCode] = useState(devCode || '');

  async function verify(e) {
    if (e) e.preventDefault();
    const c = code.trim();
    if (c.length !== 6) { setErr('Код состоит из 6 цифр'); return; }
    setErr('');
    setVerifying(true);
    try {
      const r = await fetch(`${API_BASE}/api/auth/verify-code`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, code: c }),
        credentials: 'include',
      });
      const data = await r.json();
      if (!r.ok) { setErr(data.error || 'Неверный код'); return; }
      toast('Email подтверждён! +10 💎', 'ok');
      onLogin(data.user);
    } catch {
      setErr('Ошибка сети');
    } finally {
      setVerifying(false);
    }
  }

  async function resend() {
    setResending(true);
    try {
      const r = await fetch(`${API_BASE}/api/auth/resend-verification`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      const data = await r.json();
      if (!r.ok) { toast(data.error || 'Ошибка', 'warn'); return; }
      if (data.devCode) setHintCode(data.devCode);
      toast('Новый код отправлен', 'ok');
    } catch {
      toast('Ошибка сети', 'warn');
    } finally {
      setResending(false);
    }
  }

  return (
    <div className="auth-page">
      <button className="auth-back" onClick={onBack}>← Назад</button>
      <div className="glass auth-card" style={{ textAlign: 'center' }}>
        <div className="auth-card-top" />
        <div style={{ fontSize: 56, marginBottom: 16 }}>📧</div>
        <h1 className="auth-title h-display">Проверь почту</h1>
        <p className="muted" style={{ fontSize: 15, lineHeight: 1.6, marginBottom: 8 }}>
          Письмо отправлено на
        </p>
        <div style={{ fontWeight: 700, fontSize: 15, marginBottom: 20, color: 'var(--text)' }}>{email}</div>
        <p className="muted" style={{ fontSize: 14, lineHeight: 1.6, marginBottom: 20 }}>
          Введи 6-значный код из письма, чтобы подтвердить аккаунт и получить <strong style={{ color: '#2dd4bf' }}>10 💎</strong>.
          Письмо может прийти в папку "Спам".
        </p>

        {hintCode && (
          <div className="glass" style={{ padding: '10px 14px', marginBottom: 16, fontSize: 13 }}>
            🔧 Код (dev): <strong style={{ letterSpacing: 2, color: '#2dd4bf' }}>{hintCode}</strong>
          </div>
        )}

        <form onSubmit={verify}>
          <input
            className="field-input"
            type="text"
            inputMode="numeric"
            pattern="[0-9]*"
            maxLength={6}
            placeholder="••••••"
            value={code}
            onChange={e => { setCode(e.target.value.replace(/\D/g, '').slice(0, 6)); setErr(''); }}
            style={{ textAlign: 'center', fontSize: 28, letterSpacing: 12, fontWeight: 700, marginBottom: 14 }}
            autoFocus
          />
          {err && <div className="auth-err" style={{ marginBottom: 14 }}>{err}</div>}
          <button className="btn btn-accent btn-block" type="submit" disabled={verifying || code.length !== 6}>
            {verifying ? <Spinner sm /> : '✅ Подтвердить'}
          </button>
        </form>

        <button
          className="btn btn-ghost btn-sm"
          onClick={resend}
          disabled={resending}
          style={{ marginTop: 14 }}
        >
          {resending ? <Spinner sm /> : 'Отправить код повторно'}
        </button>
        <div className="auth-hint dim">
          Код действует 30 минут
        </div>
      </div>
    </div>
  );
}