'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 RegisterPage() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const [formData, setFormData] = useState({
    fullName: '',
    username: '',
    phone: '',
    email: '',
    password: '',
    confirmPassword: '',
    agreeToTerms: false,
  });

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

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

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

      const data = await response.json();

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

      setSuccess('নিবন্ধন সফল! এখন লগইন করুন।');
      setFormData({
        fullName: '',
        username: '',
        phone: '',
        email: '',
        password: '',
        confirmPassword: '',
        agreeToTerms: false,
      });

      setTimeout(() => {
        window.location.href = '/login';
      }, 2000);
    } 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>
              )}

              {/* Success Message */}
              {success && (
                <div className="bg-green-500/20 border border-green-500 text-green-300 px-4 py-3 rounded">
                  {success}
                </div>
              )}

              {/* Full Name */}
              <div>
                <label className="block text-sm font-semibold mb-2">সম্পূর্ণ নাম</label>
                <input
                  type="text"
                  name="fullName"
                  value={formData.fullName}
                  onChange={handleChange}
                  required
                  placeholder="আপনার সম্পূর্ণ নাম"
                  className="w-full"
                />
              </div>

              {/* Username */}
              <div>
                <label className="block text-sm font-semibold mb-2">ব্যবহারকারীর নাম</label>
                <input
                  type="text"
                  name="username"
                  value={formData.username}
                  onChange={handleChange}
                  required
                  placeholder="অনন্য ব্যবহারকারীর নাম"
                  className="w-full"
                />
                <p className="text-xs text-slate-400 mt-1">শুধুমাত্র অক্ষর, সংখ্যা এবং আন্ডারস্কোর</p>
              </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>

              {/* Email (Optional) */}
              <div>
                <label className="block text-sm font-semibold mb-2">ইমেইল (ঐচ্ছিক)</label>
                <input
                  type="email"
                  name="email"
                  value={formData.email}
                  onChange={handleChange}
                  placeholder="আপনার ইমেইল"
                  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"
                />
                <p className="text-xs text-slate-400 mt-1">
                  কমপক্ষে ৮ অক্ষর, বড় অক্ষর, ছোট অক্ষর এবং সংখ্যা প্রয়োজন
                </p>
              </div>

              {/* Confirm Password */}
              <div>
                <label className="block text-sm font-semibold mb-2">পাসওয়ার্ড নিশ্চিত করুন</label>
                <input
                  type="password"
                  name="confirmPassword"
                  value={formData.confirmPassword}
                  onChange={handleChange}
                  required
                  placeholder="পাসওয়ার্ড পুনরায় প্রবেশ করুন"
                  className="w-full"
                />
              </div>

              {/* Terms Checkbox */}
              <div className="flex items-start gap-3 pt-2">
                <input
                  type="checkbox"
                  name="agreeToTerms"
                  checked={formData.agreeToTerms}
                  onChange={handleChange}
                  required
                  className="mt-1"
                />
                <label className="text-sm">
                  আমি{' '}
                  <Link href="/terms" className="text-orange-500 hover:underline">
                    শর্তাবলী
                  </Link>{' '}
                  এবং{' '}
                  <Link href="/privacy" className="text-orange-500 hover:underline">
                    গোপনীয়তা নীতি
                  </Link>{' '}
                  স্বীকার করি
                </label>
              </div>

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

              {/* Login Link */}
              <p className="text-center text-slate-400 mt-4">
                ইতিমধ্যে অ্যাকাউন্ট আছে?{' '}
                <Link href="/login" className="text-orange-500 hover:underline font-semibold">
                  লগইন করুন
                </Link>
              </p>
            </form>
          </div>
        </div>
      </main>

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