import { useState } from 'react';

type LoginScreenProps = {
  loading: boolean;
  error: string;
  onSubmit: (username: string, password: string) => Promise<void>;
};

export function LoginScreen({
  loading,
  error,
  onSubmit,
}: LoginScreenProps) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  return (
    <div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(245,158,11,0.18),_transparent_38%),linear-gradient(180deg,_#13151c_0%,_#090b11_100%)] px-4 py-8 text-zinc-100">
      <div className="mx-auto flex min-h-[calc(100vh-4rem)] w-full max-w-5xl items-center justify-center">
        <div className="grid w-full max-w-4xl overflow-hidden rounded-[28px] border border-amber-200/15 bg-zinc-950/78 shadow-[0_24px_80px_rgba(0,0,0,0.45)] md:grid-cols-[1.15fr_0.85fr]">
          <div className="border-b border-amber-200/10 bg-[linear-gradient(135deg,_rgba(245,158,11,0.16),_rgba(20,184,166,0.08))] px-6 py-8 md:border-b-0 md:border-r md:px-10 md:py-12">
            <p className="text-xs uppercase tracking-[0.35em] text-amber-200/70">
              Genarrative
            </p>
            <h1 className="mt-4 text-3xl font-semibold tracking-tight text-zinc-50 md:text-4xl">
              登录后进入冒险
            </h1>
            <p className="mt-4 max-w-md text-sm leading-7 text-zinc-300">
              当前版本已切到后端账号模式。输入用户名和密码即可直接进入，用户名不存在时会自动创建账号。
            </p>
            <div className="mt-8 grid gap-3 text-sm text-zinc-300">
              <div className="rounded-2xl border border-white/8 bg-white/5 px-4 py-3">
                用户名：3 到 24 位字母、数字、下划线
              </div>
              <div className="rounded-2xl border border-white/8 bg-white/5 px-4 py-3">
                第一次提交会自动注册，后续同名即登录
              </div>
            </div>
          </div>

          <form
            className="flex flex-col justify-center gap-5 px-6 py-8 md:px-10 md:py-12"
            onSubmit={(event) => {
              event.preventDefault();
              void onSubmit(username, password);
            }}
          >
            <label className="grid gap-2 text-sm text-zinc-300">
              <span>用户名</span>
              <input
                className="h-12 rounded-2xl border border-white/10 bg-black/30 px-4 text-base text-zinc-100 outline-none transition focus:border-amber-300/50 focus:bg-black/40"
                autoComplete="username"
                value={username}
                onChange={(event) => setUsername(event.target.value)}
                placeholder="hero_name"
              />
            </label>

            <label className="grid gap-2 text-sm text-zinc-300">
              <span>密码</span>
              <input
                className="h-12 rounded-2xl border border-white/10 bg-black/30 px-4 text-base text-zinc-100 outline-none transition focus:border-amber-300/50 focus:bg-black/40"
                type="password"
                autoComplete="current-password"
                value={password}
                onChange={(event) => setPassword(event.target.value)}
                placeholder="至少 6 位"
              />
            </label>

            {error ? (
              <div className="rounded-2xl border border-rose-400/25 bg-rose-500/10 px-4 py-3 text-sm text-rose-100">
                {error}
              </div>
            ) : null}

            <button
              type="submit"
              disabled={loading}
              className="mt-2 h-12 rounded-2xl bg-[linear-gradient(135deg,_#f59e0b,_#f97316)] px-4 text-base font-medium text-zinc-950 transition hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-60"
            >
              {loading ? '正在进入...' : '进入游戏'}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}