"use client";

import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { createUserWithEmailAndPassword, signOut } from "firebase/auth";
import { doc, serverTimestamp, setDoc } from "firebase/firestore";
import Link from "next/link";
import { getFirebaseAuth, getDb, firebaseConfigured } from "@/lib/firebase";
import { COLLECTIONS, CONFIG_DOCS } from "@/lib/firestore-paths";
import { useConfigDoc } from "@/hooks/useConfigDoc";
import { defaultSettings } from "@/lib/defaults";
import type { SiteSettings } from "@/types/models";
import { SectionTitle } from "@/components/ui/SectionTitle";
import { FadeIn } from "@/components/motion/FadeIn";
import { GlassPanel } from "@/components/ui/GlassPanel";
import { Button } from "@/components/ui/Button";

const schema = z
  .object({
    displayName: z.string().min(2, "En az 2 karakter"),
    email: z.string().email("Geçerli e-posta girin"),
    password: z.string().min(6, "Şifre en az 6 karakter"),
    passwordConfirm: z.string(),
  })
  .refine((d) => d.password === d.passwordConfirm, {
    message: "Şifreler eşleşmiyor",
    path: ["passwordConfirm"],
  });

type FormValues = z.infer<typeof schema>;

export function KayitClient() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const ok = searchParams.get("ok") === "1";
  const [submitError, setSubmitError] = useState<string | null>(null);

  const { data: settings } = useConfigDoc<SiteSettings>(
    COLLECTIONS.config,
    CONFIG_DOCS.settings,
    defaultSettings
  );

  const allowed = settings.allowPublicRegistration !== false;

  const form = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: {
      displayName: "",
      email: "",
      password: "",
      passwordConfirm: "",
    },
  });

  async function onSubmit(values: FormValues) {
    setSubmitError(null);
    if (!firebaseConfigured) {
      setSubmitError("Firebase yapılandırılmadı.");
      return;
    }
    const auth = getFirebaseAuth();
    const db = getDb();
    if (!auth || !db) {
      setSubmitError("Bağlantı kurulamadı.");
      return;
    }
    try {
      const cred = await createUserWithEmailAndPassword(auth, values.email, values.password);
      await setDoc(doc(db, COLLECTIONS.registeredUsers, cred.user.uid), {
        email: values.email.trim().toLowerCase(),
        displayName: values.displayName.trim(),
        status: "active",
        createdAt: serverTimestamp(),
      });
      await signOut(auth);
      router.replace("/kayit?ok=1");
    } catch (e: unknown) {
      const code = e && typeof e === "object" && "code" in e ? String((e as { code: string }).code) : "";
      if (code === "auth/email-already-in-use") {
        setSubmitError("Bu e-posta ile zaten kayıt var.");
      } else if (code === "auth/weak-password") {
        setSubmitError("Şifre çok zayıf.");
      } else {
        setSubmitError("Kayıt tamamlanamadı. Kuralları ve Authentication ayarlarını kontrol edin.");
      }
    }
  }

  return (
    <div className="mx-auto max-w-lg px-4 py-14 sm:px-6 lg:px-8">
      <FadeIn>
        <SectionTitle
          eyebrow="Üyelik"
          title="Kayıt ol"
          subtitle="Hesabınız oluşturulur; yönetici paneli yalnızca site sahibine açıktır."
        />
      </FadeIn>

      {!firebaseConfigured ? (
        <p className="mt-8 text-sm text-[var(--muted)]">Firebase yapılandırması gerekli.</p>
      ) : !allowed ? (
        <GlassPanel className="mt-8 border border-black/5 bg-white/90 p-6 text-sm text-[var(--muted)]">
          Şu an yeni kayıtlar kapatılmış. Daha sonra tekrar deneyebilir veya{" "}
          <Link href="/iletisim" className="font-medium text-[var(--navy)] underline">
            iletişim
          </Link>{" "}
          sayfasından ulaşabilirsiniz.
        </GlassPanel>
      ) : ok ? (
        <GlassPanel className="mt-8 border border-emerald-200/80 bg-emerald-50/90 p-6 text-sm text-[var(--navy)]">
          <p className="font-semibold">Kayıt tamamlandı</p>
          <p className="mt-2 text-[var(--muted)]">
            Hesabınız oluşturuldu. Sorularınız için{" "}
            <Link href="/iletisim" className="font-medium text-[var(--navy)] underline">
              iletişim
            </Link>{" "}
            kullanabilirsiniz.
          </p>
          <Link
            href="/"
            className="mt-4 inline-block text-sm font-semibold text-[var(--gold-dark)] hover:underline"
          >
            Ana sayfaya dön
          </Link>
        </GlassPanel>
      ) : (
        <GlassPanel className="mt-8 border border-black/5 bg-white/90 p-6 sm:p-8">
          <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
            <div>
              <label className="text-xs font-semibold text-[var(--muted)]">Ad Soyad</label>
              <input
                className="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none ring-[var(--gold)]/30 focus:ring-2"
                autoComplete="name"
                {...form.register("displayName")}
              />
              {form.formState.errors.displayName ? (
                <p className="mt-1 text-xs text-red-600">{form.formState.errors.displayName.message}</p>
              ) : null}
            </div>
            <div>
              <label className="text-xs font-semibold text-[var(--muted)]">E-posta</label>
              <input
                type="email"
                className="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none ring-[var(--gold)]/30 focus:ring-2"
                autoComplete="email"
                {...form.register("email")}
              />
              {form.formState.errors.email ? (
                <p className="mt-1 text-xs text-red-600">{form.formState.errors.email.message}</p>
              ) : null}
            </div>
            <div>
              <label className="text-xs font-semibold text-[var(--muted)]">Şifre</label>
              <input
                type="password"
                className="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none ring-[var(--gold)]/30 focus:ring-2"
                autoComplete="new-password"
                {...form.register("password")}
              />
              {form.formState.errors.password ? (
                <p className="mt-1 text-xs text-red-600">{form.formState.errors.password.message}</p>
              ) : null}
            </div>
            <div>
              <label className="text-xs font-semibold text-[var(--muted)]">Şifre tekrar</label>
              <input
                type="password"
                className="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none ring-[var(--gold)]/30 focus:ring-2"
                autoComplete="new-password"
                {...form.register("passwordConfirm")}
              />
              {form.formState.errors.passwordConfirm ? (
                <p className="mt-1 text-xs text-red-600">{form.formState.errors.passwordConfirm.message}</p>
              ) : null}
            </div>
            {submitError ? <p className="text-sm text-red-600">{submitError}</p> : null}
            <Button type="submit" disabled={form.formState.isSubmitting}>
              {form.formState.isSubmitting ? "Kaydediliyor…" : "Kayıt ol"}
            </Button>
          </form>
        </GlassPanel>
      )}
    </div>
  );
}