"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 { ChevronRight, Check } from "lucide-react";

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

  const [currentStep, setCurrentStep] = useState(1);
  const totalSteps = 5;

  // Personal Info Step
  const [personalInfo, setPersonalInfo] = useState({
    firstName: "",    lastName: "",    email: "",    phone: ""});
  const [personalErrors, setPersonalErrors] = useState<Record<string, string>>({});

  // Education Step
  const [education, setEducation] = useState({
    degree: "",    university: "",    field: "",    year: ""});
  const [educationErrors, setEducationErrors] = useState<Record<string, string>>({});

  // Lesson Details Step
  const [lessonDetails, setLessonDetails] = useState({
    subjects: "",    levels: "",    experience: "",    bio: ""});
  const [lessonErrors, setLessonErrors] = useState<Record<string, string>>({});

  // Pricing Step
  const [pricing, setPricing] = useState({
    hourlyRate: "",    currency: "USD",    availability: ""});
  const [pricingErrors, setPricingErrors] = useState<Record<string, string>>({});

  // Identity Verification Step
  const [identity, setIdentity] = useState({
    idType: "",    idNumber: "",    dob: ""});
  const [identityErrors, setIdentityErrors] = useState<Record<string, string>>({});

  const validateStep = (step: number): boolean => {
    let isValid = true;
    const errors: Record<string, string> = {};

    if (step === 1) {
      if (!personalInfo.firstName.trim()) {
        errors.firstName = "Ad gereklidir";
        isValid = false;
      }
      if (!personalInfo.lastName.trim()) {
        errors.lastName = "Soyadı gereklidir";
        isValid = false;
      }
      if (!personalInfo.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
        errors.email = "Geçerli bir email adı girin";
        isValid = false;
      }
      if (!personalInfo.phone.match(/^[0-9\s+()-]{10}$/)) {
        errors.phone = "Geçerli bir telefon numarası girin";
        isValid = false;
      }
      setPersonalErrors(errors);
    }

    if (step === 2) {
      if (!education.degree.trim()) {
        errors.degree = "Derece türü gereklidir";
        isValid = false;
      }
      if (!education.university.trim()) {
        errors.university = "Üniversite adı gereklidir";
        isValid = false;
      }
      if (!education.field.trim()) {
        errors.field = "Alan gereklidir";
        isValid = false;
      }
      if (!education.year.trim()) {
        errors.year = "Mezuniyet yılı gereklidir";
        isValid = false;
      }
      setEducationErrors(errors);
    }

    if (step === 3) {
      if (!lessonDetails.subjects.trim()) {
        errors.subjects = "Konular gereklidir";
        isValid = false;
      }
      if (!lessonDetails.levels.trim()) {
        errors.levels = "Seviyeler gereklidir";
        isValid = false;
      }
      if (!lessonDetails.experience.trim()) {
        errors.experience = "Deneyim gereklidir";
        isValid = false;
      }
      if (!lessonDetails.bio.trim()) {
        errors.bio = "Biyografi gereklidir";
        isValid = false;
      }
      setLessonErrors(errors);
    }

    if (step === 4) {
      if (!pricing.hourlyRate.match(/^[0-9]+(\.[0-9]{1,2})?$/)) {
        errors.hourlyRate = "Geçerli bir fiyat girin";
        isValid = false;
      }
      if (!pricing.availability.trim()) {
        errors.availability = "Kullanılabilirlik gereklidir";
        isValid = false;
      }
      setPricingErrors(errors);
    }

    if (step === 5) {
      if (!identity.idType.trim()) {
        errors.idType = "Kimlik türü gereklidir";
        isValid = false;
      }
      if (!identity.idNumber.trim()) {
        errors.idNumber = "Kimlik numarası gereklidir";
        isValid = false;
      }
      if (!identity.dob.trim()) {
        errors.dob = "Doğum tarihi gereklidir";
        isValid = false;
      }
      setIdentityErrors(errors);
    }

    return isValid;
  };

  const handleNext = () => {
    if (validateStep(currentStep)) {
      setCurrentStep(currentStep + 1);
    }
  };

  const handlePrevious = () => {
    setCurrentStep(currentStep - 1);
  };

  const handleSubmit = () => {
    if (validateStep(currentStep)) {
      console.log("Form submitted:", {
        personalInfo,
        education,
        lessonDetails,
        pricing,
        identity,
      });
      alert("Kayıt başarıyla tamamlandı!");
    }
  };

  const progressPercentage = (currentStep / totalSteps) * 100;

  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-3xl mx-auto">
          {/* Header */}
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold text-slate-900 mb-2">Öğretmen Kaydı</h1>
            <p className="text-lg text-slate-600">Adım {currentStep} / {totalSteps}</p>
          </div>

          {/* Progress Bar */}
          <div className="mb-8">
            <div className="flex gap-2 mb-3">
              {Array.from({ length: totalSteps }).map((_, i) => (
                <div key={i} className="flex-1">
                  <div className="h-2 bg-slate-300 rounded-full overflow-hidden">
                    <div
                      className={`h-full transition-all duration-300 ${
                        i + 1 <= currentStep ? "bg-blue-600" : "bg-slate-300"
                      }`}
                      style={{
                        width: i + 1 === currentStep ? "100%" : i + 1 < currentStep ? "100%" : "0%"}}
                    />
                  </div>
                </div>
              ))}
            </div>
            <div className="w-full h-1 bg-slate-300 rounded-full overflow-hidden">
              <div
                className="h-full bg-blue-600 transition-all duration-300"
                style={{ width: `${progressPercentage}%` }}
              />
            </div>
          </div>

          {/* Form Container */}
          <div className="bg-white rounded-lg shadow-lg p-8 mb-8">
            {/* Step 1: Personal Info */}
            {currentStep === 1 && (
              <div className="space-y-6">
                <h2 className="text-2xl font-bold text-slate-900 mb-6">Kişisel Bilgiler</h2>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">Ad</label>
                    <Input
                      value={personalInfo.firstName}
                      onChange={(value) => setPersonalInfo({ ...personalInfo, firstName: value })}
                      type="text"
                      placeholder="Adınız"
                      required
                    />
                    {personalErrors.firstName && (
                      <p className="text-red-600 text-sm mt-1">{personalErrors.firstName}</p>
                    )}
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">Soyadı</label>
                    <Input
                      value={personalInfo.lastName}
                      onChange={(value) => setPersonalInfo({ ...personalInfo, lastName: value })}
                      type="text"
                      placeholder="Soyadınız"
                      required
                    />
                    {personalErrors.lastName && (
                      <p className="text-red-600 text-sm mt-1">{personalErrors.lastName}</p>
                    )}
                  </div>
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Email</label>
                  <Input
                    value={personalInfo.email}
                    onChange={(value) => setPersonalInfo({ ...personalInfo, email: value })}
                    type="email"
                    placeholder="example@email.com"
                    required
                  />
                  {personalErrors.email && (
                    <p className="text-red-600 text-sm mt-1">{personalErrors.email}</p>
                  )}
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Telefon</label>
                  <Input
                    value={personalInfo.phone}
                    onChange={(value) => setPersonalInfo({ ...personalInfo, phone: value })}
                    type="tel"
                    placeholder="+90 5XX XXX XXXX"
                    required
                  />
                  {personalErrors.phone && (
                    <p className="text-red-600 text-sm mt-1">{personalErrors.phone}</p>
                  )}
                </div>
              </div>
            )}

            {/* Step 2: Education */}
            {currentStep === 2 && (
              <div className="space-y-6">
                <h2 className="text-2xl font-bold text-slate-900 mb-6">Eğitim Bilgileri</h2>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Derece Türü</label>
                  <Input
                    value={education.degree}
                    onChange={(value) => setEducation({ ...education, degree: value })}
                    type="text"
                    placeholder="örn. Lisans, Yüksek Lisans"
                    required
                  />
                  {educationErrors.degree && (
                    <p className="text-red-600 text-sm mt-1">{educationErrors.degree}</p>
                  )}
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Üniversite</label>
                  <Input
                    value={education.university}
                    onChange={(value) => setEducation({ ...education, university: value })}
                    type="text"
                    placeholder="Üniversite adı"
                    required
                  />
                  {educationErrors.university && (
                    <p className="text-red-600 text-sm mt-1">{educationErrors.university}</p>
                  )}
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Alan</label>
                  <Input
                    value={education.field}
                    onChange={(value) => setEducation({ ...education, field: value })}
                    type="text"
                    placeholder="Çalışma alanı"
                    required
                  />
                  {educationErrors.field && (
                    <p className="text-red-600 text-sm mt-1">{educationErrors.field}</p>
                  )}
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Mezuniyet Yılı</label>
                  <Input
                    value={education.year}
                    onChange={(value) => setEducation({ ...education, year: value })}
                    type="text"
                    placeholder="2020"
                    required
                  />
                  {educationErrors.year && (
                    <p className="text-red-600 text-sm mt-1">{educationErrors.year}</p>
                  )}
                </div>
              </div>
            )}

            {/* Step 3: Lesson Details */}
            {currentStep === 3 && (
              <div className="space-y-6">
                <h2 className="text-2xl font-bold text-slate-900 mb-6">Ders Detayları</h2>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Konular</label>
                  <Input
                    value={lessonDetails.subjects}
                    onChange={(value) => setLessonDetails({ ...lessonDetails, subjects: value })}
                    type="text"
                    placeholder="örn. Matematik, Fizik, İngilizce"
                    required
                  />
                  {lessonErrors.subjects && (
                    <p className="text-red-600 text-sm mt-1">{lessonErrors.subjects}</p>
                  )}
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Seviyeler</label>
                  <Input
                    value={lessonDetails.levels}
                    onChange={(value) => setLessonDetails({ ...lessonDetails, levels: value })}
                    type="text"
                    placeholder="örn. İlkokul, Ortaokul, Lise"
                    required
                  />
                  {lessonErrors.levels && (
                    <p className="text-red-600 text-sm mt-1">{lessonErrors.levels}</p>
                  )}
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Deneyim (yıl)</label>
                  <Input
                    value={lessonDetails.experience}
                    onChange={(value) => setLessonDetails({ ...lessonDetails, experience: value })}
                    type="text"
                    placeholder="örn. 5 yıl"
                    required
                  />
                  {lessonErrors.experience && (
                    <p className="text-red-600 text-sm mt-1">{lessonErrors.experience}</p>
                  )}
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Biyografi</label>
                  <textarea
                    value={lessonDetails.bio}
                    onChange={(e) => setLessonDetails({ ...lessonDetails, bio: e.target.value })}
                    placeholder="Kendiniz hakkında yazın"
                    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"
                  />
                  {lessonErrors.bio && (
                    <p className="text-red-600 text-sm mt-1">{lessonErrors.bio}</p>
                  )}
                </div>
              </div>
            )}

            {/* Step 4: Pricing */}
            {currentStep === 4 && (
              <div className="space-y-6">
                <h2 className="text-2xl font-bold text-slate-900 mb-6">Fiyatlandırma</h2>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">Saatlik Ücret</label>
                    <Input
                      value={pricing.hourlyRate}
                      onChange={(value) => setPricing({ ...pricing, hourlyRate: value })}
                      type="number"
                      placeholder="50"
                      required
                    />
                    {pricingErrors.hourlyRate && (
                      <p className="text-red-600 text-sm mt-1">{pricingErrors.hourlyRate}</p>
                    )}
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">Para Birimi</label>
                    <select
                      value={pricing.currency}
                      onChange={(e) => setPricing({ ...pricing, currency: e.target.value })}
                      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"
                    >
                      <option>USD</option>
                      <option>EUR</option>
                      <option>TRY</option>
                      <option>GBP</option>
                    </select>
                  </div>
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Kullanılabilirlik</label>
                  <Input
                    value={pricing.availability}
                    onChange={(value) => setPricing({ ...pricing, availability: value })}
                    type="text"
                    placeholder="örn. Pazartesi-Cuma 15:00-20:00"
                    required
                  />
                  {pricingErrors.availability && (
                    <p className="text-red-600 text-sm mt-1">{pricingErrors.availability}</p>
                  )}
                </div>
              </div>
            )}

            {/* Step 5: Identity Verification */}
            {currentStep === 5 && (
              <div className="space-y-6">
                <h2 className="text-2xl font-bold text-slate-900 mb-6">Kimlik Doğrulaması</h2>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Kimlik Türü</label>
                  <Input
                    value={identity.idType}
                    onChange={(value) => setIdentity({ ...identity, idType: value })}
                    type="text"
                    placeholder="örn. Pasaport, Kimlik Kartı"
                    required
                  />
                  {identityErrors.idType && (
                    <p className="text-red-600 text-sm mt-1">{identityErrors.idType}</p>
                  )}
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Kimlik Numarası</label>
                  <Input
                    value={identity.idNumber}
                    onChange={(value) => setIdentity({ ...identity, idNumber: value })}
                    type="text"
                    placeholder="Kimlik numarası"
                    required
                  />
                  {identityErrors.idNumber && (
                    <p className="text-red-600 text-sm mt-1">{identityErrors.idNumber}</p>
                  )}
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Doğum Tarihi</label>
                  <Input
                    value={identity.dob}
                    onChange={(value) => setIdentity({ ...identity, dob: value })}
                    type="date"
                    required
                  />
                  {identityErrors.dob && (
                    <p className="text-red-600 text-sm mt-1">{identityErrors.dob}</p>
                  )}
                </div>
                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-4">
                  <p className="text-sm text-blue-800">✓ Tüm bilgileriniz güvenli şekilde saklanacaktır ve GDPR uyumlu olacaktır.</p>
                </div>
              </div>
            )}
          </div>

          {/* Navigation Buttons */}
          <div className="flex gap-4 justify-between">
            <button
              onClick={handlePrevious}
              disabled={currentStep === 1}
              className="px-6 py-3 bg-slate-200 hover:bg-slate-300 disabled:opacity-50 disabled:cursor-not-allowed text-slate-900 rounded-lg font-medium transition"
            >
              Geri
            </button>
            {currentStep < totalSteps ? (
              <button
                onClick={handleNext}
                className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition flex items-center gap-2"
              >
                İleri <ChevronRight size={20} />
              </button>
            ) : (
              <button
                onClick={handleSubmit}
                className="px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition flex items-center gap-2"
              >
                <Check size={20} /> Kayıt Tamamla
              </button>
            )}
          </div>
        </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>
  );
}