'use client';

import { useState } from 'react';
import { Header } from '@/components/ui/Header';
import { Footer } from '@/components/ui/Footer';
import Link from 'next/link';

export default function LoginPage() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [formData, setFormData] = useState({
    phone: '',
    password: '',
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setLoading(true);

    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });

      const data = await response.json();

      if (!response.ok) {
        setError(data.message || 'লগইন ব্যর্থ');
        return;
      }

      // Store user data in localStorage (temporary - should use secure session)
      localStorage.setItem('user', JSON.stringify(data.data));
      
      // Redirect to dashboard
      window.location.href = '/dashboard';
    } catch (err) {
      setError('লগইন ব্যর্থ। দয়া করে পরে চেষ্টা করুন।');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex flex-col min-h-screen">
      <Header appName="Gaming Tournament" />

      <main className="flex-1 py-12">
        <div className="container-max">
          <div className="max-w-md mx-auto">
            {/* Header */}
            <div className="text-center mb-8">
              <h1 className="text-3xl font-bold mb-2">আপনার অ্যাকাউন্টে লগইন করুন</h1>
              <p className="text-slate-400">টুর্নামেন্টে যোগ দিতে লগইন করুন</p>
            </div>

            {/* Form */}
            <form onSubmit={handleSubmit} className="card space-y-4">
              {/* Error Message */}
              {error && (
                <div className="bg-red-500/20 border border-red-500 text-red-300 px-4 py-3 rounded">
                  {error}
                </div>
              )}

              {/* Phone */}
              <div>
                <label className="block text-sm font-semibold mb-2">ফোন নম্বর</label>
                <input
                  type="tel"
                  name="phone"
                  value={formData.phone}
                  onChange={handleChange}
                  required
                  placeholder="০১XXXXXXXXX"
                  className="w-full"
                />
              </div>

              {/* Password */}
              <div>
                <label className="block text-sm font-semibold mb-2">পাসওয়ার্ড</label>
                <input
                  type="password"
                  name="password"
                  value={formData.password}
                  onChange={handleChange}
                  required
                  placeholder="আপনার পাসওয়ার্ড"
                  className="w-full"
                />
              </div>

              {/* Remember Me and Forgot Password */}
              <div className="flex items-center justify-between text-sm">
                <label className="flex items-center gap-2">
                  <input type="checkbox" className="w-4 h-4" />
                  <span>আমাকে মনে রাখুন</span>
                </label>
                <Link href="/forgot-password" className="text-orange-500 hover:underline">
                  পাসওয়ার্ড ভুলে গেছেন?
                </Link>
              </div>

              {/* Submit Button */}
              <button
                type="submit"
                disabled={loading}
                className="btn btn-primary w-full mt-6"
              >
                {loading ? 'প্রক্রিয়াধীন...' : 'লগইন করুন'}
              </button>

              {/* Register Link */}
              <p className="text-center text-slate-400 mt-4">
                নতুন ব্যবহারকারী?{' '}
                <Link href="/register" className="text-orange-500 hover:underline font-semibold">
                  এখানে নিবন্ধন করুন
                </Link>
              </p>
            </form>

            {/* Demo Info */}
            <div className="mt-8 p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg text-center text-sm text-blue-300">
              <p className="font-semibold mb-2">ডেমো ক্রেডেনশিয়াল</p>
              <p>ফোন: ০১৭১২৩৪৫৬৭৮</p>
              <p>পাসওয়ার্ড: Demo@1234</p>
            </div>
          </div>
        </div>
      </main>

      <Footer appName="Gaming Tournament" />
    </div>
  );
}