"use client";

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

export default function RegisterPage() {
  const [formData, setFormData] = useState({
    firstName: "",    lastName: "",    email: "",    phone: "",    subject: "",    message: ""});

  const [errors, setErrors] = useState<Record<string, string>>({});
  const [submitted, setSubmitted] = useState(false);

  const navItems = [
    { name: "Ana Sayfa", id: "/" },
    { name: "Öğretmenler", id: "/teachers" },
    { name: "Kayıt", id: "/register" },
    { name: "Çalışma Programı", id: "schedule" },
  ];

  const validateForm = () => {
    const newErrors: Record<string, string> = {};

    if (!formData.firstName.trim()) {
      newErrors.firstName = "Ad gereklidir";
    }
    if (!formData.lastName.trim()) {
      newErrors.lastName = "Soyadı gereklidir";
    }
    if (!formData.email.trim()) {
      newErrors.email = "E-posta gereklidir";
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      newErrors.email = "Geçerli bir e-posta adresi giriniz";
    }
    if (!formData.phone.trim()) {
      newErrors.phone = "Telefon numarası gereklidir";
    } else if (!/^[0-9+\-\s()]+$/.test(formData.phone)) {
      newErrors.phone = "Geçerli bir telefon numarası giriniz";
    }
    if (!formData.subject.trim()) {
      newErrors.subject = "Konu gereklidir";
    }
    if (!formData.message.trim()) {
      newErrors.message = "Mesaj gereklidir";
    } else if (formData.message.trim().length < 10) {
      newErrors.message = "Mesaj en az 10 karakter olmalıdır";
    }

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

  const handleChange = (field: string, value: string) => {
    setFormData((prev) => ({
      ...prev,
      [field]: value,
    }));
    if (errors[field]) {
      setErrors((prev) => ({
        ...prev,
        [field]: ""}));
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (validateForm()) {
      console.log("Form gönderildi:", formData);
      setSubmitted(true);
      setFormData({
        firstName: "",        lastName: "",        email: "",        phone: "",        subject: "",        message: ""});
      setTimeout(() => setSubmitted(false), 5000);
    }
  };

  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 id="register" data-section="register" className="min-h-screen py-20 px-4">
        <div className="max-w-2xl mx-auto">
          <div className="text-center mb-12">
            <h1 className="text-4xl md:text-5xl font-light mb-4">Öğrenci Kaydı</h1>
            <p className="text-lg text-foreground/70">
              Platformumuza katılın ve eğitim yolculuğunuza başlayın
            </p>
          </div>

          {submitted && (
            <div className="mb-6 p-4 bg-green-500/20 border border-green-500 rounded-lg">
              <p className="text-green-700">Başarıyla gönderildi! Yakında sizinle iletişime geçeceğiz.</p>
            </div>
          )}

          <form
            onSubmit={handleSubmit}
            className="space-y-6 bg-card rounded-lg p-8 border border-foreground/10"
          >
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium mb-2">Ad *</label>
                <input
                  value={formData.firstName}
                  onChange={(e) => handleChange("firstName", e.target.value)}
                  type="text"
                  placeholder="Adınız"
                  required
                  className={`w-full px-4 py-2 rounded-md bg-secondary-button border border-foreground/10 text-foreground placeholder:text-foreground/75 focus:outline-none focus:ring-2 focus:ring-primary-cta transition-all ${
                    errors.firstName ? "border-red-500" : ""
                  }`}
                />
                {errors.firstName && (
                  <p className="text-red-500 text-sm mt-1">{errors.firstName}</p>
                )}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">Soyadı *</label>
                <input
                  value={formData.lastName}
                  onChange={(e) => handleChange("lastName", e.target.value)}
                  type="text"
                  placeholder="Soyadınız"
                  required
                  className={`w-full px-4 py-2 rounded-md bg-secondary-button border border-foreground/10 text-foreground placeholder:text-foreground/75 focus:outline-none focus:ring-2 focus:ring-primary-cta transition-all ${
                    errors.lastName ? "border-red-500" : ""
                  }`}
                />
                {errors.lastName && (
                  <p className="text-red-500 text-sm mt-1">{errors.lastName}</p>
                )}
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium mb-2">E-posta *</label>
                <input
                  value={formData.email}
                  onChange={(e) => handleChange("email", e.target.value)}
                  type="email"
                  placeholder="örnek@email.com"
                  required
                  className={`w-full px-4 py-2 rounded-md bg-secondary-button border border-foreground/10 text-foreground placeholder:text-foreground/75 focus:outline-none focus:ring-2 focus:ring-primary-cta transition-all ${
                    errors.email ? "border-red-500" : ""
                  }`}
                />
                {errors.email && (
                  <p className="text-red-500 text-sm mt-1">{errors.email}</p>
                )}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">Telefon *</label>
                <input
                  value={formData.phone}
                  onChange={(e) => handleChange("phone", e.target.value)}
                  type="tel"
                  placeholder="+90 555 123 4567"
                  required
                  className={`w-full px-4 py-2 rounded-md bg-secondary-button border border-foreground/10 text-foreground placeholder:text-foreground/75 focus:outline-none focus:ring-2 focus:ring-primary-cta transition-all ${
                    errors.phone ? "border-red-500" : ""
                  }`}
                />
                {errors.phone && (
                  <p className="text-red-500 text-sm mt-1">{errors.phone}</p>
                )}
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium mb-2">Konu *</label>
              <input
                value={formData.subject}
                onChange={(e) => handleChange("subject", e.target.value)}
                type="text"
                placeholder="Kayıt nedeni"
                required
                className={`w-full px-4 py-2 rounded-md bg-secondary-button border border-foreground/10 text-foreground placeholder:text-foreground/75 focus:outline-none focus:ring-2 focus:ring-primary-cta transition-all ${
                  errors.subject ? "border-red-500" : ""
                }`}
              />
              {errors.subject && (
                <p className="text-red-500 text-sm mt-1">{errors.subject}</p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium mb-2">Mesaj *</label>
              <Textarea
                value={formData.message}
                onChange={(value) => handleChange("message", value)}
                placeholder="Bize hakkınızda biraz bilgi verin"
                rows={6}
                required
                className={errors.message ? "border-red-500" : ""}
              />
              {errors.message && (
                <p className="text-red-500 text-sm mt-1">{errors.message}</p>
              )}
            </div>

            <button
              type="submit"
              className="w-full py-3 bg-primary-cta text-white rounded-md font-medium hover:opacity-90 transition-opacity"
            >
              Kaydı Tamamla
            </button>
          </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>
  );
}
