import { useState } from 'react';
import { QRCodeSVG } from 'qrcode.react';
import { useGameStore } from '../store/gameStore';
import { emit } from '../lib/socket';

type Mode = 'login' | 'register';

export default function Auth() {
  const [mode, setMode] = useState<Mode>('login');
  const [username, setUsername] = useState(localStorage.getItem('bridzik_name') ?? '');
  const [code, setCode] = useState('');
  const registration = useGameStore((s) => s.registration);
  const setRegistration = useGameStore((s) => s.setRegistration);

  const remember = (name: string) => localStorage.setItem('bridzik_name', name.trim());

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    if (!username.trim() || code.trim().length < 6) return;
    remember(username);
    emit.login(username.trim(), code.trim());
  };

  const handleRegisterStart = (e: React.FormEvent) => {
    e.preventDefault();
    if (!username.trim()) return;
    remember(username);
    emit.registerAccount(username.trim());
  };

  const handleConfirm = (e: React.FormEvent) => {
    e.preventDefault();
    if (code.trim().length < 6) return;
    emit.confirmAccount(username.trim(), code.trim());
  };

  const switchMode = (m: Mode) => {
    setMode(m);
    setCode('');
    setRegistration(null);
  };

  return (
    <div className="max-w-sm mx-auto p-4 pt-10">
      <h1 className="text-2xl font-bold text-center mb-2 tracking-wide">Bridzik</h1>
      <p className="text-center text-gray-400 text-sm mb-6">
        Prihlas sa kodom z aplikacie (napr. Google Authenticator).
      </p>

      <div className="flex mb-6 rounded-xl overflow-hidden border border-slate-700">
        <button
          onClick={() => switchMode('login')}
          className={`flex-1 py-2 text-sm font-semibold ${
            mode === 'login' ? 'bg-blue-600 text-white' : 'bg-slate-800 text-gray-400'
          }`}
        >
          Prihlasenie
        </button>
        <button
          onClick={() => switchMode('register')}
          className={`flex-1 py-2 text-sm font-semibold ${
            mode === 'register' ? 'bg-blue-600 text-white' : 'bg-slate-800 text-gray-400'
          }`}
        >
          Registracia
        </button>
      </div>

      {mode === 'login' && (
        <form onSubmit={handleLogin} className="flex flex-col gap-4">
          <input
            autoFocus
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            maxLength={40}
            placeholder="Pouzivatelske meno"
            className="bg-slate-700 text-white rounded-lg px-4 py-2 outline-none focus:ring-2 focus:ring-blue-500"
          />
          <input
            type="text"
            inputMode="numeric"
            value={code}
            onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
            maxLength={6}
            placeholder="6-miestny kod"
            className="bg-slate-700 text-white rounded-lg px-4 py-2 outline-none focus:ring-2 focus:ring-blue-500 tracking-widest font-mono"
          />
          <button
            type="submit"
            disabled={!username.trim() || code.trim().length < 6}
            className="py-3 rounded-xl bg-blue-600 hover:bg-blue-500 font-bold disabled:opacity-40"
          >
            Prihlasit
          </button>
        </form>
      )}

      {mode === 'register' && !registration && (
        <form onSubmit={handleRegisterStart} className="flex flex-col gap-4">
          <input
            autoFocus
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            maxLength={40}
            placeholder="Zvol si pouzivatelske meno"
            className="bg-slate-700 text-white rounded-lg px-4 py-2 outline-none focus:ring-2 focus:ring-blue-500"
          />
          <button
            type="submit"
            disabled={!username.trim()}
            className="py-3 rounded-xl bg-green-700 hover:bg-green-600 font-bold disabled:opacity-40"
          >
            Vytvorit ucet
          </button>
        </form>
      )}

      {mode === 'register' && registration && (
        <div className="flex flex-col gap-4">
          <p className="text-sm text-gray-300">
            Naskenuj QR kod do autentifikacnej aplikacie a opis aktualny kod.
          </p>
          <div className="bg-white rounded-xl p-4 flex justify-center">
            <QRCodeSVG value={registration.otpauth_uri} size={176} />
          </div>
          <div className="text-xs text-gray-400 text-center">
            Alebo zadaj rucne kluc:
            <span className="block font-mono text-gray-200 break-all mt-1">
              {registration.secret}
            </span>
          </div>
          <form onSubmit={handleConfirm} className="flex flex-col gap-3">
            <input
              autoFocus
              type="text"
              inputMode="numeric"
              value={code}
              onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
              maxLength={6}
              placeholder="6-miestny kod"
              className="bg-slate-700 text-white rounded-lg px-4 py-2 outline-none focus:ring-2 focus:ring-blue-500 tracking-widest font-mono"
            />
            <button
              type="submit"
              disabled={code.trim().length < 6}
              className="py-3 rounded-xl bg-blue-600 hover:bg-blue-500 font-bold disabled:opacity-40"
            >
              Potvrdit a prihlasit
            </button>
          </form>
        </div>
      )}
    </div>
  );
}