import { useState } from 'react'
import { useAuth } from '../store/authStore'
import { isSupabaseConfigured } from '../lib/supabase'

export function AuthScreen() {
  const { signIn, continueAsGuest, error, isLoading } = useAuth()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    signIn(email, password)
  }

  return (
    <div className="flex min-h-screen items-center justify-center px-4">
      <div className="w-full max-w-sm">
        <div className="mb-8 text-center">
          <h1 className="text-4xl font-black tracking-tight text-slate-50">仕訳クエスト</h1>
          <p className="mt-2 text-slate-400">借方・貸方をゲームで体感しよう</p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-3">
          <input
            type="email"
            placeholder="メールアドレス"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            disabled={!isSupabaseConfigured || isLoading}
            className="w-full rounded-xl border border-slate-600 bg-slate-800 px-4 py-3 text-slate-100 placeholder-slate-500 outline-none transition focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/20 disabled:opacity-40"
          />
          <input
            type="password"
            placeholder="パスワード"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            disabled={!isSupabaseConfigured || isLoading}
            className="w-full rounded-xl border border-slate-600 bg-slate-800 px-4 py-3 text-slate-100 placeholder-slate-500 outline-none transition focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/20 disabled:opacity-40"
          />

          {!isSupabaseConfigured && (
            <p className="rounded-lg bg-amber-500/10 px-4 py-2 text-sm text-amber-300">
              Supabase が設定されていないため、ログインは使用できません。
            </p>
          )}

          {error && (
            <p className="rounded-lg bg-rose-500/10 px-4 py-2 text-sm text-rose-300">{error}</p>
          )}

          <button
            type="submit"
            disabled={!isSupabaseConfigured || isLoading || !email || !password}
            className="w-full rounded-2xl bg-cyan-500 py-3 font-black text-slate-900 shadow-lg transition hover:bg-cyan-400 disabled:cursor-not-allowed disabled:bg-slate-700 disabled:text-slate-500"
          >
            {isLoading ? 'ログイン中…' : 'ログイン'}
          </button>
        </form>

        <div className="my-6 flex items-center gap-3">
          <div className="h-px flex-1 bg-slate-700" />
          <span className="text-sm text-slate-500">または</span>
          <div className="h-px flex-1 bg-slate-700" />
        </div>

        <button
          onClick={continueAsGuest}
          className="w-full rounded-2xl border border-slate-600 py-3 font-bold text-slate-300 transition hover:border-slate-400 hover:text-slate-100"
        >
          ゲストとして続ける
        </button>
        <p className="mt-2 text-center text-xs text-slate-500">
          サンプル問題のみ。問題の自動生成・成績記録は利用できません。
        </p>
      </div>
    </div>
  )
}