"use client";

import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import Input from "@/components/form/Input";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Mail } from "lucide-react";

interface FormErrors {
  firstName?: string;
  lastName?: string;
  email?: string;
  grade?: string;
  learningGoals?: string;
}

export default function StudentRegistrationPage() {
  const navItems = [
    { name: "Ana Sayfa", id: "/" },
    { name: "Öğretmenler", id: "/teachers" },
    { name: "Öğrenciler", id: "/students" },
    { name: "Çalışma Programı", id: "schedule" },
  ];

  const [formData, setFormData] = useState({
    firstName: "",    lastName: "",    email: "",    grade: "",    learningGoals: ""});

  const [errors, setErrors] = useState<FormErrors>({});
  const [submitted, setSubmitted] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const validateForm = (): boolean => {
    const newErrors: FormErrors = {};

    if (!formData.firstName.trim()) {
      newErrors.firstName = "Ad gereklidir";
    }

    if (!formData.lastName.trim()) {
      newErrors.lastName = "Soyadı gereklidir";
    }

    if (!formData.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
      newErrors.email = "Geçerli bir email adı girin";
    }

    if (!formData.grade.trim()) {
      newErrors.grade = "Sınıf seçiniz";
    }

    if (!formData.learningGoals.trim()) {
      newErrors.learningGoals = "Öğrenme hedefleri gereklidir";
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!validateForm()) {
      return;
    }

    setIsSubmitting(true);
    // Simulate API call
    setTimeout(() => {
      console.log("Form submitted:", formData);
      setSubmitted(true);
      setIsSubmitting(false);
    }, 1500);
  };

  const handleReset = () => {
    setFormData({
      firstName: "",      lastName: "",      email: "",      grade: "",      learningGoals: ""});
    setErrors({});
    setSubmitted(false);
  };

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Öğretmen Platformu"
          bottomLeftText="Eğitim Topluluğu"
          bottomRightText="info@platform.com"
        />
      </div>

      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-12 px-4 pt-32">
        <div className="max-w-2xl mx-auto">
          {/* Header */}
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold text-slate-900 mb-2">Öğrenci Kaydı</h1>
            <p className="text-lg text-slate-600">Eğitim yolculuğunuza katılın ve size uygun öğretmen bulun</p>
          </div>

          {/* Success Message */}
          {submitted ? (
            <div className="bg-white rounded-lg shadow-lg p-12 text-center">
              <div className="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-6">
                <svg
                  className="w-8 h-8 text-green-600"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              </div>
              <h2 className="text-2xl font-bold text-slate-900 mb-2">Kayıt Başarılı!</h2>
              <p className="text-slate-600 mb-6">
                Merhaba <strong>{formData.firstName} {formData.lastName}</strong>, kaydınız başarıyla tamamlanmıştır.
              </p>
              <p className="text-slate-600 mb-8">
                En yakın zamanda size uygun öğretmen önerileri gönderilecektir. Lütfen email kutunuzu kontrol edin.
              </p>
              <button
                onClick={handleReset}
                className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition"
              >
                Yeni Kayıt
              </button>
            </div>
          ) : (
            /* Registration Form */
            <form onSubmit={handleSubmit} className="bg-white rounded-lg shadow-lg p-8">
              <div className="space-y-6">
                {/* First Name */}
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Ad *</label>
                  <Input
                    value={formData.firstName}
                    onChange={(value) => {
                      setFormData({ ...formData, firstName: value });
                      if (errors.firstName) {
                        setErrors({ ...errors, firstName: undefined });
                      }
                    }}
                    type="text"
                    placeholder="Adınız"
                    required
                  />
                  {errors.firstName && (
                    <div className="flex items-center gap-2 mt-2">
                      <span className="text-red-500">⚠</span>
                      <p className="text-red-600 text-sm">{errors.firstName}</p>
                    </div>
                  )}
                </div>

                {/* Last Name */}
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Soyadı *</label>
                  <Input
                    value={formData.lastName}
                    onChange={(value) => {
                      setFormData({ ...formData, lastName: value });
                      if (errors.lastName) {
                        setErrors({ ...errors, lastName: undefined });
                      }
                    }}
                    type="text"
                    placeholder="Soyadınız"
                    required
                  />
                  {errors.lastName && (
                    <div className="flex items-center gap-2 mt-2">
                      <span className="text-red-500">⚠</span>
                      <p className="text-red-600 text-sm">{errors.lastName}</p>
                    </div>
                  )}
                </div>

                {/* Email */}
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Email Adresi *</label>
                  <div className="relative">
                    <Input
                      value={formData.email}
                      onChange={(value) => {
                        setFormData({ ...formData, email: value });
                        if (errors.email) {
                          setErrors({ ...errors, email: undefined });
                        }
                      }}
                      type="email"
                      placeholder="example@email.com"
                      required
                    />
                  </div>
                  {errors.email ? (
                    <div className="flex items-center gap-2 mt-2">
                      <span className="text-red-500">⚠</span>
                      <p className="text-red-600 text-sm">{errors.email}</p>
                    </div>
                  ) : (
                    <p className="text-slate-500 text-sm mt-2">Güvenli ve gizli tutulacaktır</p>
                  )}
                </div>

                {/* Grade Level */}
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Sınıf Seviyesi *</label>
                  <select
                    value={formData.grade}
                    onChange={(e) => {
                      setFormData({ ...formData, grade: e.target.value });
                      if (errors.grade) {
                        setErrors({ ...errors, grade: undefined });
                      }
                    }}
                    className="w-full px-4 py-2 bg-slate-100 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-slate-900"
                    required
                  >
                    <option value="">Sınıf seçiniz</option>
                    <option value="primary">İlkokul (1-4)</option>
                    <option value="middle">Ortaokul (5-8)</option>
                    <option value="high">Lise (9-12)</option>
                    <option value="university">Üniversite</option>
                    <option value="adult">Yetişkinler</option>
                  </select>
                  {errors.grade && (
                    <div className="flex items-center gap-2 mt-2">
                      <span className="text-red-500">⚠</span>
                      <p className="text-red-600 text-sm">{errors.grade}</p>
                    </div>
                  )}
                </div>

                {/* Learning Goals */}
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Öğrenme Hedefleri *</label>
                  <textarea
                    value={formData.learningGoals}
                    onChange={(e) => {
                      setFormData({ ...formData, learningGoals: e.target.value });
                      if (errors.learningGoals) {
                        setErrors({ ...errors, learningGoals: undefined });
                      }
                    }}
                    placeholder="Ne öğrenmek istiyorsunuz? Örn: Matematik becerilerimi geliştirmek, İngilizce konuşmayı öğrenmek..."
                    rows={4}
                    className="w-full px-4 py-2 bg-slate-100 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none text-slate-900"
                    required
                  />
                  {errors.learningGoals ? (
                    <div className="flex items-center gap-2 mt-2">
                      <span className="text-red-500">⚠</span>
                      <p className="text-red-600 text-sm">{errors.learningGoals}</p>
                    </div>
                  ) : (
                    <p className="text-slate-500 text-sm mt-2">Hedefleriniz, size doğru öğretmen bulunması için önemlidir</p>
                  )}
                </div>

                {/* Terms Agreement */}
                <div className="flex items-start gap-3 p-4 bg-blue-50 rounded-lg">
                  <input
                    type="checkbox"
                    id="terms"
                    className="mt-1 w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
                    defaultChecked
                  />
                  <label htmlFor="terms" className="text-sm text-slate-700">
                    Kullanım şartlarını ve gizlilik politikasını kabul ediyorum
                  </label>
                </div>
              </div>

              {/* Submit Button */}
              <div className="mt-8">
                <button
                  type="submit"
                  disabled={isSubmitting}
                  className="w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg font-medium transition flex items-center justify-center gap-2"
                >
                  {isSubmitting ? (
                    <>
                      <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                      Kaydediliyor...
                    </>
                  ) : (
                    <>
                      <Mail size={20} />
                      Kaydı Tamamla
                    </>
                  )}
                </button>
              </div>

              {/* Login Link */}
              <p className="text-center text-slate-600 mt-6">
                Zaten kayıtlı mısınız?{" "}
                <a href="/" className="text-blue-600 hover:text-blue-700 font-medium">
                  Giriş yapın
                </a>
              </p>
            </form>
          )}
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Öğretmen Platformu"
          leftLink={{
            text: "Gizlilik Politikası",            href: "#"}}
          rightLink={{
            text: "Kullanım Şartları",            href: "#"}}
        />
      </div>
    </ThemeProvider>
  );
}