"use client";

import { useState } from "react";
import Link from "next/link";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { addDoc, collection, Timestamp } from "firebase/firestore";
import { getDb, firebaseConfigured } from "@/lib/firebase";
import { COLLECTIONS } from "@/lib/firestore-paths";
import { GlassPanel } from "@/components/ui/GlassPanel";
import { Button } from "@/components/ui/Button";
import { ButtonLink } from "@/components/ui/ButtonLink";
import { FadeIn } from "@/components/motion/FadeIn";

const schema = z.object({
  name: z.string().min(2, "En az 2 karakter").max(100),
  role: z.string().min(1, "Unvan veya bağlam girin").max(120),
  quote: z.string().min(20, "Yorum en az 20 karakter olmalı").max(2000),
});

type FormValues = z.infer<typeof schema>;

export function TestimonialSubmissionForm({
  cancelHref = "/",
}: {
  cancelHref?: string;
}) {
  const [status, setStatus] = useState<"idle" | "sending" | "ok" | "err">("idle");

  const form = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: { name: "", role: "", quote: "" },
  });

  async function onSubmit(values: FormValues) {
    if (!firebaseConfigured) {
      setStatus("err");
      return;
    }
    const db = getDb();
    if (!db) {
      setStatus("err");
      return;
    }
    setStatus("sending");
    try {
      await addDoc(collection(db, COLLECTIONS.testimonialSubmissions), {
        name: values.name.trim(),
        role: values.role.trim(),
        quote: values.quote.trim(),
        status: "pending" as const,
        createdAt: Timestamp.now(),
      });
      setStatus("ok");
      form.reset({ name: "", role: "", quote: "" });
    } catch {
      setStatus("err");
    }
  }

  return (
    <FadeIn>
      <GlassPanel className="space-y-5 border border-black/5 bg-white/90 p-8">
        {status === "ok" ? (
          <div className="space-y-3 text-sm text-[var(--muted)]">
            <p className="font-medium text-[var(--navy)]">Teşekkürler.</p>
            <p>Başvurunuz alındı. Yönetici onayından sonra bu sayfada listelenecektir.</p>
            <ButtonLink href="/" variant="navySolid">
              Ana sayfaya dön
            </ButtonLink>
          </div>
        ) : (
          <form className="space-y-4" onSubmit={form.handleSubmit((v) => void onSubmit(v))}>
            <div>
              <label className="text-xs font-medium text-[var(--muted)]">
                Görünen isim (kısaltma kullanabilirsiniz)
              </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"
                {...form.register("name")}
              />
              {form.formState.errors.name ? (
                <p className="mt-1 text-xs text-rose-600">{form.formState.errors.name.message}</p>
              ) : null}
            </div>
            <div>
              <label className="text-xs font-medium text-[var(--muted)]">Unvan / bağlam (ör. İş insanı)</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"
                {...form.register("role")}
              />
              {form.formState.errors.role ? (
                <p className="mt-1 text-xs text-rose-600">{form.formState.errors.role.message}</p>
              ) : null}
            </div>
            <div>
              <label className="text-xs font-medium text-[var(--muted)]">Yorum (20–2000 karakter)</label>
              <textarea
                rows={6}
                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"
                {...form.register("quote")}
              />
              {form.formState.errors.quote ? (
                <p className="mt-1 text-xs text-rose-600">{form.formState.errors.quote.message}</p>
              ) : null}
            </div>
            <div className="flex flex-wrap gap-3 pt-2">
              <Button type="submit" variant="primary" disabled={status === "sending"}>
                {status === "sending" ? "Gönderiliyor…" : "Gönder"}
              </Button>
              <Link href={cancelHref} className="self-center text-sm text-[var(--muted)] hover:text-[var(--navy)]">
                Vazgeç
              </Link>
            </div>
            {status === "err" ? (
              <p className="text-xs text-rose-600">
                Gönderilemedi. Bağlantınızı veya Firestore kurallarını kontrol edin.
              </p>
            ) : null}
          </form>
        )}
      </GlassPanel>
    </FadeIn>
  );
}