"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { motion } from "framer-motion";
import {
  Mic,
  Plus,
  LogIn,
  Link2,
  Share2,
  MessageCircle,
  Loader2,
  AudioWaveform,
  ShieldCheck,
  Zap,
} from "lucide-react";
import { NicknameModal, getStoredNickname } from "@/components/NicknameModal";
import { Toasts } from "@/components/Toast";
import { useToast } from "@/hooks/useToast";
import { config, roomUrl } from "@/lib/config";
import { normalizeRoomId, validateRoomId } from "@/lib/utils";

type ModalMode = null | "create" | "join";

export default function HomePage() {
  const router = useRouter();
  const { toasts, push } = useToast();
  const [modal, setModal] = useState<ModalMode>(null);
  const [joinCode, setJoinCode] = useState("");
  const [joinError, setJoinError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [createdRoom, setCreatedRoom] = useState<string | null>(null);

  const openCreate = () => {
    const nick = getStoredNickname();
    if (!nick) setModal("create");
    else void doCreate(nick);
  };

  const openJoin = () => {
    const nick = getStoredNickname();
    if (!nick) setModal("join");
    else {
      setModal("join");
    }
  };

  const doCreate = async (nickname: string) => {
    setBusy(true);
    try {
      const res = await fetch(`${config.socketUrl}/api/rooms`, { method: "POST" });
      if (!res.ok) throw new Error("create-failed");
      const data = (await res.json()) as { roomId: string };
      if (!data.roomId) throw new Error("no-room");
      try {
        localStorage.setItem("nickname", nickname);
      } catch {
        /* noop */
      }
      setCreatedRoom(data.roomId);
      setModal(null);
      push("Oda oluşturuldu. Yönlendiriliyorsun…");
      setTimeout(() => router.push(`/room/${data.roomId}`), 600);
    } catch {
      push("Oda oluşturulamadı. Sunucunun çalıştığını kontrol et.", "error");
    } finally {
      setBusy(false);
    }
  };

  const doJoin = async (nickname: string) => {
    const code = normalizeRoomId(joinCode);
    const err = validateRoomId(code);
    if (err) {
      setJoinError(err);
      return;
    }
    setJoinError(null);
    setBusy(true);
    try {
      const res = await fetch(`${config.socketUrl}/api/rooms/${code}`);
      if (res.status === 404) {
        setJoinError("Oda bulunamadı. Kodu kontrol edip tekrar dene.");
        return;
      }
      const data = (await res.json()) as { full?: boolean };
      if (data.full) {
        setJoinError("Bu oda şu anda dolu. (MVP'de en fazla 2 kişi)");
        return;
      }
      try {
        localStorage.setItem("nickname", nickname);
      } catch {
        /* noop */
      }
      setModal(null);
      router.push(`/room/${code}`);
    } catch {
      setJoinError("Sunucuya ulaşılamadı. İnternetini kontrol edip tekrar dene.");
    } finally {
      setBusy(false);
    }
  };

  const handleNicknameSubmit = (nickname: string) => {
    if (modal === "create") void doCreate(nickname);
    else if (modal === "join") void doJoin(nickname);
  };

  return (
    <div className="relative min-h-screen overflow-hidden bg-[#09090b]">
      {/* Arka plan ızgarası */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0"
        style={{
          backgroundImage:
            "linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)",
          backgroundSize: "56px 56px",
          maskImage: "radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%)",
        }}
      />
      <div
        aria-hidden
        className="pointer-events-none absolute -top-40 left-1/2 h-80 w-[42rem] -translate-x-1/2 rounded-full bg-white/[0.04] blur-3xl"
      />

      {/* Header */}
      <header className="relative z-10 mx-auto flex max-w-6xl items-center justify-between px-5 py-5 sm:px-8">
        <div className="flex items-center gap-2.5">
          <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-white text-black">
            <AudioWaveform className="h-5 w-5" />
          </div>
          <span className="text-[17px] font-bold tracking-tight">VoccoTalk</span>
        </div>
        <div className="hidden items-center gap-2 text-[13px] text-zinc-500 sm:flex">
          <span className="flex items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.03] px-3 py-1.5">
            <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-400" />
            WebRTC ile uçtan uca ses
          </span>
        </div>
      </header>

      {/* Hero */}
      <main className="relative z-10 mx-auto max-w-6xl px-5 pb-20 sm:px-8">
        <div className="mx-auto max-w-3xl pt-10 text-center sm:pt-20">
          <motion.div
            initial={{ opacity: 0, y: 14 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="mb-5 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-1.5 text-[13px] text-zinc-300 backdrop-blur"
          >
            <Zap className="h-3.5 w-3.5 text-amber-300" />
            Program indirmeden · Tarayıcıda çalışır
          </motion.div>

          <motion.h1
            initial={{ opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.55, delay: 0.05 }}
            className="text-4xl font-bold leading-[1.08] tracking-tight text-white sm:text-6xl"
          >
            Arkadaşlarınla
            <br />
            anında konuş.
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.55, delay: 0.12 }}
            className="mx-auto mt-5 max-w-xl text-base leading-relaxed text-zinc-400 sm:text-lg"
          >
            Program indirmeden, tarayıcı üzerinden güvenli ve hızlı sesli sohbet.
            Odanı oluştur, linki paylaş, konuşmaya başla.
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.55, delay: 0.2 }}
            className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row"
          >
            <button
              onClick={openCreate}
              disabled={busy}
              className="flex w-full items-center justify-center gap-2 rounded-xl bg-white px-7 py-3.5 text-[15px] font-semibold text-black transition hover:bg-zinc-200 active:scale-[0.98] disabled:opacity-60 sm:w-auto"
            >
              {busy && createdRoom === null && modal === null ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <Plus className="h-4 w-4" />
              )}
              Yeni Oda Oluştur
            </button>
            <button
              onClick={openJoin}
              className="flex w-full items-center justify-center gap-2 rounded-xl border border-white/15 bg-white/[0.04] px-7 py-3.5 text-[15px] font-semibold text-white backdrop-blur transition hover:bg-white/[0.08] active:scale-[0.98] sm:w-auto"
            >
              <LogIn className="h-4 w-4" />
              Odaya Katıl
            </button>
          </motion.div>

          {/* Katıl kodu hızlı giriş */}
          <motion.div
            initial={{ opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.55, delay: 0.28 }}
            className="mx-auto mt-6 flex max-w-md items-center gap-2"
          >
            <input
              value={joinCode}
              onChange={(e) => setJoinCode(e.target.value.toUpperCase())}
              onKeyDown={(e) => {
                if (e.key === "Enter") openJoin();
              }}
              placeholder="Oda kodu — örn. AB7X9K"
              maxLength={12}
              className="w-full rounded-xl border border-white/10 bg-white/[0.04] px-4 py-3 text-center text-[15px] font-mono uppercase tracking-[0.2em] text-white placeholder:font-sans placeholder:normal-case placeholder:tracking-normal placeholder:text-zinc-600 outline-none transition focus:border-white/25"
            />
          </motion.div>
        </div>

        {/* Nasıl çalışır */}
        <div className="mx-auto mt-16 max-w-4xl sm:mt-24">
          <h2 className="text-center text-sm font-semibold uppercase tracking-[0.2em] text-zinc-500">
            Nasıl çalışır?
          </h2>
          <div className="mt-6 grid gap-3 sm:grid-cols-3">
            {[
              {
                icon: Plus,
                step: "1",
                title: "Odanı oluştur",
                desc: "Tek tıkla benzersiz bir oda kodu al. Kayıt gerekmez.",
              },
              {
                icon: Share2,
                step: "2",
                title: "Linki paylaş",
                desc: "Bağlantıyı kopyala, arkadaşına gönder. O kodu girip katılsın.",
              },
              {
                icon: MessageCircle,
                step: "3",
                title: "Konuşmaya başla",
                desc: "Mikrofona izin ver. Ses doğrudan aranızda iletilir.",
              },
            ].map((s, i) => (
              <motion.div
                key={s.title}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-40px" }}
                transition={{ duration: 0.45, delay: i * 0.08 }}
                className="rounded-2xl border border-white/10 bg-[#101013]/80 p-6 backdrop-blur"
              >
                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/10">
                  <s.icon className="h-5 w-5 text-white" />
                </div>
                <p className="mt-4 text-xs font-semibold uppercase tracking-widest text-zinc-500">
                  Adım {s.step}
                </p>
                <h3 className="mt-1 text-[15px] font-semibold text-white">{s.title}</h3>
                <p className="mt-1.5 text-sm leading-relaxed text-zinc-400">{s.desc}</p>
              </motion.div>
            ))}
          </div>

          <div className="mt-3 grid gap-3 sm:grid-cols-2">
            <div className="flex items-start gap-3 rounded-2xl border border-white/10 bg-[#101013]/80 p-5">
              <ShieldCheck className="mt-0.5 h-5 w-5 shrink-0 text-emerald-400" />
              <p className="text-sm leading-relaxed text-zinc-400">
                <span className="font-semibold text-zinc-200">Doğrudan bağlantı.</span>{" "}
                Sesin sunucudan geçmez; WebRTC ile iki tarayıcı arasında iletilir.
              </p>
            </div>
            <div className="flex items-start gap-3 rounded-2xl border border-white/10 bg-[#101013]/80 p-5">
              <Mic className="mt-0.5 h-5 w-5 shrink-0 text-sky-400" />
              <p className="text-sm leading-relaxed text-zinc-400">
                <span className="font-semibold text-zinc-200">Sadece mikrofon.</span>{" "}
                Kamera istenmez. Mikrofonunu tek dokunuşla açıp kapatabilirsin.
              </p>
            </div>
          </div>

          <p className="mt-8 flex items-center justify-center gap-1.5 text-center text-[13px] text-zinc-600">
            <Link2 className="h-3.5 w-3.5" />
            Oda linkin şuna benzer: {roomUrl("AB7X9K").replace(/^https?:\/\//, "")}
          </p>
        </div>
      </main>

      {/* Nickname + join modal */}
      <NicknameModal
        open={modal !== null}
        title={modal === "create" ? "Oda oluştur — adın ne?" : "Odaya katıl — adın ne?"}
        initial={getStoredNickname()}
        onClose={() => {
          setModal(null);
          setJoinError(null);
        }}
        onSubmit={handleNicknameSubmit}
      />

      {/* Join için kod girişi — nickname modalının üstüne ek bilgi */}
      {modal === "join" && (
        <div className="pointer-events-none fixed inset-0 z-[60] flex items-end justify-center p-4 pb-24 sm:pb-16">
          <div className="pointer-events-auto w-full max-w-sm rounded-2xl border border-white/10 bg-black/80 p-4 backdrop-blur">
            <label className="text-xs font-medium uppercase tracking-widest text-zinc-500">
              Oda kodu
            </label>
            <input
              value={joinCode}
              onChange={(e) => setJoinCode(e.target.value.toUpperCase())}
              placeholder="AB7X9K"
              maxLength={12}
              className="mt-1.5 w-full rounded-xl border border-white/10 bg-white/[0.05] px-4 py-2.5 text-center font-mono text-lg uppercase tracking-[0.25em] text-white outline-none focus:border-white/25"
            />
            {joinError && <p className="mt-2 text-[13px] text-red-400">{joinError}</p>}
          </div>
        </div>
      )}

      <Toasts toasts={toasts} />
    </div>
  );
}