"use client";

import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { motion } from "framer-motion";
import {
  Users,
  Heart,
  Sparkles,
  ChevronRight,
} from "lucide-react";
import { getUserId } from "@/lib/userId";
import { joinRoom } from "@/lib/room";
import { Skeleton, SkeletonCircle } from "@/components/Skeleton";
import Button from "@/components/Button";
import { getSceneConfig } from "@/lib/sceneConfig";
import type { SceneType } from "@/types";

export default function InvitePage() {
  const params = useParams<{ id: string }>();
  const router = useRouter();
  const roomId = params.id;

  const [status, setStatus] = useState<"loading" | "ready" | "not_found">(
    "loading",
  );
  const [userCount, setUserCount] = useState(0);
  const [scene, setScene] = useState<SceneType>("eat");
  const [joining, setJoining] = useState(false);
  const [joinError, setJoinError] = useState("");

  const sceneConfig = getSceneConfig(scene);

  useEffect(() => {
    fetch(`/api/room/${roomId}`)
      .then((res) => {
        if (!res.ok) throw new Error();
        return res.json();
      })
      .then((data) => {
        setUserCount(data.userCount ?? 0);
        if (data.scene) setScene(data.scene);
        setStatus("ready");
      })
      .catch(() => setStatus("not_found"));
  }, [roomId]);

  const handleJoin = async () => {
    setJoining(true);
    setJoinError("");
    try {
      await joinRoom(roomId, getUserId());
      router.push(`/room/${roomId}`);
    } catch (e) {
      setJoinError(e instanceof Error ? e.message : "加入失败，请重试");
      setJoining(false);
    }
  };

  if (status === "loading") {
    return (
      <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6">
        <Skeleton className="h-16 w-16 rounded-2xl" />
        <Skeleton className="mt-5 h-8 w-40" />
        <Skeleton className="mt-2 h-4 w-24" />
        <div className="mt-8 w-full max-w-xs rounded-2xl bg-surface px-6 py-5 ring-1 ring-border">
          <div className="flex flex-col items-center gap-3">
            <Skeleton className="h-5 w-44" />
            <Skeleton className="h-7 w-24 rounded-full" />
            <Skeleton className="h-4 w-32" />
          </div>
        </div>
        <div className="mt-6 flex gap-3">
          <SkeletonCircle className="h-10 w-10" />
          <SkeletonCircle className="h-10 w-10" />
          <SkeletonCircle className="h-10 w-10" />
        </div>
        <Skeleton className="mt-8 h-12 w-full max-w-xs rounded-xl" />
      </div>
    );
  }

  if (status === "not_found") {
    return (
      <div className="flex min-h-dvh flex-col items-center justify-center gap-4 bg-background px-6">
        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface ring-1 ring-border">
          <Utensils size={28} className="text-muted" />
        </div>
        <h1 className="text-xl font-bold text-heading">房间不存在</h1>
        <p className="text-center text-sm text-muted">
          这个房间已过期或不存在，请让朋友重新分享链接
        </p>
        <Button onClick={() => router.push("/")} className="mt-2">
          自己创建房间
        </Button>
      </div>
    );
  }

  return (
    <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-12 overflow-y-auto scrollbar-none">
      <motion.div
        className="flex flex-col items-center"
        initial={{ y: -20, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.5 }}
      >
        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-accent shadow-lg shadow-accent/20">
          <span className="text-3xl leading-none">{sceneConfig.emoji}</span>
        </div>

        <h1 className="mt-5 text-3xl font-black tracking-tight text-heading">
          NoWhatever
        </h1>
        <p className="mt-0.5 text-sm font-medium tracking-widest text-muted">
          别说随便
        </p>
      </motion.div>

      <motion.div
        className="mt-8 flex w-full max-w-xs flex-col items-center gap-2 rounded-2xl bg-surface px-6 py-5 ring-1 ring-accent/30"
        initial={{ y: 10, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.5, delay: 0.1 }}
      >
        <p className="text-center text-lg font-bold text-heading">
          {sceneConfig.inviteText}
        </p>
        <div className="flex items-center gap-2 text-sm text-muted">
          <span className="rounded-full bg-elevated px-2.5 py-0.5 font-mono text-base font-bold tracking-widest text-accent ring-1 ring-border">
            {roomId}
          </span>
        </div>
        {userCount > 0 && (
          <div className="flex items-center gap-1 text-xs text-muted">
            <Users size={13} />
            <span>
              已有 <span className="font-semibold text-accent">{userCount}</span> 人在房间
            </span>
          </div>
        )}
      </motion.div>

      <motion.div
        className="mt-6 flex items-start justify-center gap-3"
        initial={{ y: 10, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.5, delay: 0.2 }}
      >
        <div className="flex flex-col items-center gap-1.5 w-20">
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent/15">
            <Users size={18} className="text-accent" />
          </div>
          <span className="text-xs font-semibold text-secondary">加入房间</span>
          <span className="text-[10px] leading-tight text-muted text-center">
            和朋友一起
          </span>
        </div>

        <ChevronRight size={14} className="mt-3 shrink-0 text-subtle" />

        <div className="flex flex-col items-center gap-1.5 w-20">
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/15">
            <Heart size={18} className="text-amber-400" />
          </div>
          <span className="text-xs font-semibold text-secondary">各自滑卡</span>
          <span className="text-[10px] leading-tight text-muted text-center">
            右滑喜欢的店
          </span>
        </div>

        <ChevronRight size={14} className="mt-3 shrink-0 text-subtle" />

        <div className="flex flex-col items-center gap-1.5 w-20">
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-500/15">
            <Sparkles size={18} className="text-rose-400" />
          </div>
          <span className="text-xs font-semibold text-secondary">匹配结果</span>
          <span className="text-[10px] leading-tight text-muted text-center">
            滑中同一家就去
          </span>
        </div>
      </motion.div>

      <motion.div
        className="mt-8 w-full max-w-xs"
        initial={{ y: 20, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.5, delay: 0.3 }}
      >
        {joinError && (
          <motion.p
            className="mb-3 text-center text-xs font-medium text-rose-400"
            initial={{ opacity: 0, y: -4 }}
            animate={{ opacity: 1, y: 0 }}
          >
            {joinError}
          </motion.p>
        )}
        <Button
          onClick={handleJoin}
          size="lg"
          fullWidth
          loading={joining}
          loadingText="加入中..."
        >
          加入房间
        </Button>
      </motion.div>
    </div>
  );
}