"use client";

import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { addDoc, collection, serverTimestamp } from "firebase/firestore";
import { useState } from "react";
import { useConfigDoc } from "@/hooks/useConfigDoc";
import { COLLECTIONS, CONFIG_DOCS } from "@/lib/firestore-paths";
import { defaultSettings } from "@/lib/defaults";
import { resolveMapEmbedUrl } from "@/lib/map-embed";
import type { SiteSettings } from "@/types/models";
import { getDb, firebaseConfigured } from "@/lib/firebase";
import { SectionTitle } from "@/components/ui/SectionTitle";
import { FadeIn } from "@/components/motion/FadeIn";
import { GlassPanel } from "@/components/ui/GlassPanel";
import { Button } from "@/components/ui/Button";
import { ButtonLink } from "@/components/ui/ButtonLink";
import { MapPin, Phone, Mail } from "lucide-react";

const schema = z.object({
  name: z.string().min(2, "En az 2 karakter"),
  email: z.string().email("Geçerli e-posta girin"),
  phone: z.string().optional(),
  subject: z.string().optional(),
  message: z.string().min(10, "Mesaj en az 10 karakter olmalı"),
});

type FormValues = z.infer<typeof schema>;

export default function ContactPage() {
  const { data: settings } = useConfigDoc<SiteSettings>(
    COLLECTIONS.config,
    CONFIG_DOCS.settings,
    defaultSettings
  );
  const [status, setStatus] = useState<"idle" | "sending" | "ok" | "err">("idle");

  const form = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: { name: "", email: "", phone: "", subject: "", message: "" },
  });

  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.messages), {
        ...values,
        read: false,
        createdAt: serverTimestamp(),
      });
      setStatus("ok");
      form.reset();
    } catch {
      setStatus("err");
    }
  }

  const wa = settings.whatsappNumber.replace(/\D/g, "");
  const mapEmbedUrl = resolveMapEmbedUrl(settings.mapEmbedUrl);

  return (
    <div className="mx-auto max-w-6xl px-4 py-14 sm:px-6 lg:px-8">
      <FadeIn>
        <SectionTitle
          eyebrow="İletişim"
          title="İletişime geçin"
          subtitle="Formu doldurun veya doğrudan telefon ve WhatsApp üzerinden ulaşın."
        />
      </FadeIn>

      <div className="mt-12 grid gap-8 lg:grid-cols-2">
        <FadeIn>
          <GlassPanel className="space-y-6 border border-black/5 bg-white/90 p-8">
            <div className="flex gap-3">
              <div className="mt-0.5 flex h-9 w-9 items-center justify-center rounded-full bg-[#f0f2f7] text-[var(--navy)]">
                <Phone className="h-4 w-4" />
              </div>
              <div>
                <p className="text-xs font-semibold uppercase tracking-wide text-[var(--gold-dark)]">
                  Telefon
                </p>
                <a className="text-sm font-medium text-[var(--navy)]" href={`tel:${settings.phone}`}>
                  {settings.phone}
                </a>
              </div>
            </div>
            <div className="flex gap-3">
              <div className="mt-0.5 flex h-9 w-9 items-center justify-center rounded-full bg-[#f0f2f7] text-[var(--navy)]">
                <Mail className="h-4 w-4" />
              </div>
              <div>
                <p className="text-xs font-semibold uppercase tracking-wide text-[var(--gold-dark)]">
                  E-posta
                </p>
                <a
                  className="text-sm font-medium text-[var(--navy)]"
                  href={`mailto:${settings.email}`}
                >
                  {settings.email}
                </a>
              </div>
            </div>
            <div className="flex gap-3">
              <div className="mt-0.5 flex h-9 w-9 items-center justify-center rounded-full bg-[#f0f2f7] text-[var(--navy)]">
                <MapPin className="h-4 w-4" />
              </div>
              <div>
                <p className="text-xs font-semibold uppercase tracking-wide text-[var(--gold-dark)]">
                  Adres
                </p>
                <p className="text-sm text-[var(--muted)]">{settings.address}</p>
              </div>
            </div>

            <div className="flex flex-wrap gap-3 pt-2">
              <ButtonLink href={`https://wa.me/${wa}`} variant="primary" target="_blank" rel="noreferrer">
                WhatsApp ile yaz
              </ButtonLink>
            </div>
          </GlassPanel>
        </FadeIn>

        <FadeIn>
          <GlassPanel className="border border-black/5 bg-white/90 p-8">
            <h2 className="font-[family-name:var(--font-display)] text-2xl text-[var(--navy)]">
              Mesaj gönder
            </h2>
            <form className="mt-6 space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
              <div className="grid gap-4 sm:grid-cols-2">
                <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)]/40 focus:ring-2"
                    {...form.register("name")}
                  />
                  {form.formState.errors.name ? (
                    <p className="mt-1 text-xs text-red-600">{form.formState.errors.name.message}</p>
                  ) : null}
                </div>
                <div>
                  <label className="text-xs font-semibold text-[var(--muted)]">E-posta</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)]/40 focus:ring-2"
                    {...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>
              <div>
                <label className="text-xs font-semibold text-[var(--muted)]">Telefon (opsiyonel)</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)]/40 focus:ring-2"
                  {...form.register("phone")}
                />
              </div>
              <div>
                <label className="text-xs font-semibold text-[var(--muted)]">Konu (opsiyonel)</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)]/40 focus:ring-2"
                  {...form.register("subject")}
                />
              </div>
              <div>
                <label className="text-xs font-semibold text-[var(--muted)]">Mesaj</label>
                <textarea
                  rows={5}
                  className="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none ring-[var(--gold)]/40 focus:ring-2"
                  {...form.register("message")}
                />
                {form.formState.errors.message ? (
                  <p className="mt-1 text-xs text-red-600">{form.formState.errors.message.message}</p>
                ) : null}
              </div>
              <Button type="submit" disabled={status === "sending"}>
                {status === "sending" ? "Gönderiliyor…" : "Gönder"}
              </Button>
              {status === "ok" ? (
                <p className="text-sm text-emerald-700">Mesajınız alındı. En kısa sürede dönüş yapılacaktır.</p>
              ) : null}
              {status === "err" ? (
                <p className="text-sm text-red-600">
                  Gönderilemedi. Firebase yapılandırması ve güvenlik kurallarını kontrol edin.
                </p>
              ) : null}
            </form>
          </GlassPanel>
        </FadeIn>
      </div>

      <div className="mt-10">
        <GlassPanel className="overflow-hidden border border-black/5 bg-white/90 p-0">
          <div className="border-b border-black/5 px-6 py-4">
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--gold-dark)]">
              Harita
            </p>
            <p className="mt-1 text-sm text-[var(--muted)]">
              Ataşehir, İstanbul
            </p>
          </div>
          <div className="aspect-[16/9] w-full bg-[#eef0f6]">
            <iframe
              key={mapEmbedUrl}
              title="Ataşehir, İstanbul haritası"
              src={mapEmbedUrl}
              className="h-full min-h-[280px] w-full border-0"
              loading="lazy"
              allowFullScreen
              referrerPolicy="no-referrer-when-downgrade"
            />
          </div>
        </GlassPanel>
      </div>
    </div>
  );
}