"use client";

import { useState, useCallback, useRef, useEffect } from "react";
import { AnimatePresence, motion } from "framer-motion";
import SwipeableCard from "./SwipeableCard";
import ActionButtons from "./ActionButtons";
import MatchResult from "./MatchResult";
import SwipeGuide from "./SwipeGuide";
import { Restaurant, SwipeDirection, MatchType, RunnerUp } from "@/types";
import { Heart, Undo2, Check } from "lucide-react";

const AVATARS = [
  { emoji: "🐱", bg: "bg-amber-100" },
  { emoji: "🐶", bg: "bg-orange-100" },
  { emoji: "🦊", bg: "bg-red-100" },
  { emoji: "🐰", bg: "bg-pink-100" },
  { emoji: "🐼", bg: "bg-zinc-100" },
  { emoji: "🐨", bg: "bg-sky-100" },
  { emoji: "🦁", bg: "bg-yellow-100" },
  { emoji: "🐸", bg: "bg-lime-100" },
  { emoji: "🐵", bg: "bg-stone-100" },
  { emoji: "🐷", bg: "bg-rose-100" },
  { emoji: "🐙", bg: "bg-purple-100" },
  { emoji: "🦄", bg: "bg-violet-100" },
] as const;

function getAvatar(uid: string) {
  let hash = 0;
  for (let i = 0; i < uid.length; i++) {
    hash = (hash * 31 + uid.charCodeAt(i)) | 0;
  }
  return AVATARS[((hash % AVATARS.length) + AVATARS.length) % AVATARS.length];
}

function UserProgressBar({
  userId,
  swipeCounts,
  localIndex,
  total,
}: {
  userId: string;
  swipeCounts: Record<string, number>;
  localIndex: number;
  total: number;
}) {
  const others = Object.entries(swipeCounts).filter(([id]) => id !== userId);
  if (others.length === 0) return null;

  return (
    <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1">
      <span className="flex items-center gap-1 text-[11px] tabular-nums text-emerald-500">
        <span className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-emerald-100 text-[10px] leading-none">
          {getAvatar(userId).emoji}
        </span>
        你 {localIndex}/{total}
      </span>
      {others.map(([id, count]) => {
        const finished = count >= total;
        const avatar = getAvatar(id);
        return (
          <span
            key={id}
            className={`flex items-center gap-1 text-[11px] tabular-nums ${finished ? "text-emerald-400" : "text-zinc-400"}`}
          >
            <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${avatar.bg} text-[10px] leading-none`}>
              {avatar.emoji}
            </span>
            {count}/{total}
            {finished && <Check size={10} className="text-emerald-400" />}
          </span>
        );
      })}
    </div>
  );
}

function WaitingProgress({
  userId,
  swipeCounts,
  total,
}: {
  userId: string;
  swipeCounts: Record<string, number>;
  total: number;
}) {
  const entries = Object.entries(swipeCounts);
  if (entries.length <= 1) return null;

  const others = entries.filter(([id]) => id !== userId);
  const finishedCount = others.filter(([, c]) => c >= total).length;

  return (
    <div className="flex w-60 flex-col gap-2.5 rounded-2xl bg-zinc-50 px-4 py-3">
      <div className="flex items-center justify-between">
        <span className="flex items-center gap-1.5 text-xs font-medium text-emerald-600">
          <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-sm leading-none">
            {getAvatar(userId).emoji}
          </span>
          你 {total}/{total}
        </span>
        <Check size={14} className="text-emerald-400" />
      </div>

      {others.map(([id, count]) => {
        const finished = count >= total;
        const pct = Math.min((count / total) * 100, 100);
        const avatar = getAvatar(id);
        return (
          <div key={id} className="flex flex-col gap-1">
            <div className="flex items-center justify-between">
              <span className={`flex items-center gap-1.5 text-xs font-medium ${finished ? "text-emerald-600" : "text-zinc-500"}`}>
                <span className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-sm leading-none ${finished ? "bg-emerald-100" : avatar.bg}`}>
                  {avatar.emoji}
                </span>
                {count}/{total}
              </span>
              {finished && <Check size={14} className="text-emerald-400" />}
            </div>
            {!finished && (
              <div className="ml-7 h-1 overflow-hidden rounded-full bg-zinc-200">
                <motion.div
                  className="h-full rounded-full bg-amber-400"
                  animate={{ width: `${pct}%` }}
                  transition={{ type: "spring", stiffness: 300, damping: 30 }}
                />
              </div>
            )}
          </div>
        );
      })}

      <p className="text-center text-[10px] text-zinc-400">
        {finishedCount}/{others.length} 人已完成
      </p>
    </div>
  );
}

interface SwipeDeckProps {
  restaurants: Restaurant[];
  roomId: string;
  userId: string;
  initialIndex: number;
  matchedRestaurantId: string | null;
  matchType: MatchType;
  matchLikes: number;
  runnerUps: RunnerUp[];
  likeCounts: Record<string, number>;
  swipeCounts: Record<string, number>;
  userCount: number;
  onReset: () => Promise<void>;
  onNarrow: (restaurantIds: string[]) => Promise<void>;
}

export default function SwipeDeck({
  restaurants,
  roomId,
  userId,
  initialIndex,
  matchedRestaurantId,
  matchType,
  matchLikes,
  runnerUps,
  likeCounts,
  swipeCounts,
  userCount,
  onReset,
  onNarrow,
}: SwipeDeckProps) {
  const [currentIndex, setCurrentIndex] = useState(initialIndex);
  const [showMatch, setShowMatch] = useState(false);
  const [localMatchId, setLocalMatchId] = useState<string | null>(null);
  const [resetting, setResetting] = useState(false);
  const [bubble, setBubble] = useState("");
  const [guideVisible, setGuideVisible] = useState(initialIndex === 0);
  const [swipeHistory, setSwipeHistory] = useState<string[]>(
    () => restaurants.slice(0, initialIndex).map((r) => r.id),
  );
  const swipeFnRef = useRef<((direction: SwipeDirection) => void) | null>(null);
  const swipingRef = useRef(false);
  const prevLikeCounts = useRef<Record<string, number>>({});

  const resolvedMatchId = matchedRestaurantId ?? localMatchId;

  useEffect(() => {
    if (resolvedMatchId != null && !showMatch) {
      setShowMatch(true);
    }
  }, [resolvedMatchId, showMatch]);

  useEffect(() => {
    const currentCard = restaurants[currentIndex];
    if (!currentCard || resolvedMatchId) return;

    const prev = prevLikeCounts.current;
    const rid = currentCard.id;
    const oldCount = prev[rid] ?? 0;
    const newCount = likeCounts[rid] ?? 0;

    if (newCount > oldCount && oldCount > 0) {
      setBubble("有人也想去这家！");
      const timer = setTimeout(() => setBubble(""), 2000);
      return () => clearTimeout(timer);
    }
  }, [likeCounts, currentIndex, restaurants, resolvedMatchId]);

  useEffect(() => {
    prevLikeCounts.current = { ...likeCounts };
  }, [likeCounts]);

  const registerSwipe = useCallback(
    (fn: (direction: SwipeDirection) => void) => {
      swipeFnRef.current = fn;
    },
    [],
  );

  const sendSwipe = async (restaurantId: string, action: "like" | "nope") => {
    try {
      const res = await fetch(`/api/room/${roomId}/swipe`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ userId, restaurantId, action }),
      });
      const data = await res.json();
      if (data.match != null) {
        setLocalMatchId(data.match);
      }
    } catch {
      // Polling will catch match state
    }
  };

  const handleSwipe = useCallback(
    (direction: SwipeDirection) => {
      const current = restaurants[currentIndex];
      if (!current) return;

      swipingRef.current = false;
      if (guideVisible) setGuideVisible(false);

      const action = direction === "right" ? "like" : "nope";
      sendSwipe(current.id, action);

      setSwipeHistory((h) => [...h, current.id]);
      const nextIndex = currentIndex + 1;
      setCurrentIndex(nextIndex);
      swipeFnRef.current = null;
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [currentIndex, restaurants, roomId, userId],
  );

  const handleButtonAction = useCallback(
    (direction: SwipeDirection) => {
      if (swipeFnRef.current && !swipingRef.current) {
        swipingRef.current = true;
        swipeFnRef.current(direction);
      }
    },
    [],
  );

  const handleUndo = useCallback(async () => {
    if (swipeHistory.length === 0 || currentIndex === 0) return;

    const lastRid = swipeHistory[swipeHistory.length - 1];

    try {
      await fetch(`/api/room/${roomId}/undo`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ userId, restaurantId: lastRid }),
      });
    } catch {
      // Best-effort
    }

    setSwipeHistory((h) => h.slice(0, -1));
    setCurrentIndex((i) => i - 1);
    setLocalMatchId(null);
    swipeFnRef.current = null;
  }, [swipeHistory, currentIndex, roomId, userId]);

  const clearLocalState = useCallback(() => {
    setCurrentIndex(0);
    setShowMatch(false);
    setLocalMatchId(null);
    setSwipeHistory([]);
    prevLikeCounts.current = {};
  }, []);

  const handleReset = useCallback(async () => {
    setResetting(true);
    try {
      await onReset();
      clearLocalState();
    } finally {
      setResetting(false);
    }
  }, [onReset, clearLocalState]);

  const handleNarrow = useCallback(async (restaurantIds: string[]) => {
    setResetting(true);
    try {
      await onNarrow(restaurantIds);
      clearLocalState();
    } finally {
      setResetting(false);
    }
  }, [onNarrow, clearLocalState]);

  const allSwiped = currentIndex >= restaurants.length;
  const isDone = allSwiped || resolvedMatchId != null;

  const matchRestaurant = resolvedMatchId
    ? restaurants.find((r) => r.id === resolvedMatchId) ?? null
    : null;

  const showWaiting = allSwiped && !resolvedMatchId;

  return (
    <>
      {!allSwiped && !resolvedMatchId && (
        <div className="mx-auto w-full max-w-sm px-4 pb-1">
          <div className="flex items-center gap-2">
            <div className="h-1 flex-1 overflow-hidden rounded-full bg-zinc-100">
              <motion.div
                className="h-full rounded-full bg-emerald-400"
                initial={{ width: 0 }}
                animate={{
                  width: `${((currentIndex) / restaurants.length) * 100}%`,
                }}
                transition={{ type: "spring", stiffness: 300, damping: 30 }}
              />
            </div>
            <span className="shrink-0 text-[11px] tabular-nums text-zinc-400">
              {currentIndex}/{restaurants.length}
            </span>
            <button
              onClick={handleUndo}
              disabled={currentIndex === 0}
              className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-amber-500 transition-colors active:bg-amber-50 disabled:opacity-0"
            >
              <Undo2 size={12} />
              撤回
            </button>
          </div>
          <UserProgressBar
            userId={userId}
            swipeCounts={swipeCounts}
            localIndex={currentIndex}
            total={restaurants.length}
          />
        </div>
      )}

      <div className="relative flex flex-1 items-center justify-center px-4">
        <div className="relative h-[70vh] w-full max-w-sm">
          {currentIndex === 0 && !resolvedMatchId && guideVisible && (
            <SwipeGuide onDismiss={() => setGuideVisible(false)} />
          )}
          {!resolvedMatchId && (
            <AnimatePresence>
              {restaurants.map((restaurant, index) => {
                if (index < currentIndex || index > currentIndex + 1)
                  return null;
                const isTop = index === currentIndex;
                return (
                  <SwipeableCard
                    key={restaurant.id}
                    restaurant={restaurant}
                    isTop={isTop}
                    onSwipe={handleSwipe}
                    registerSwipe={isTop ? registerSwipe : undefined}
                    likeCount={likeCounts[restaurant.id] ?? 0}
                  />
                );
              })}
            </AnimatePresence>
          )}

          {showWaiting && (
            <div className="flex h-full flex-col items-center justify-center gap-4">
              <div className="h-5 w-5 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" />
              <p className="text-sm font-medium text-zinc-500">等待其他人完成选择</p>
              <WaitingProgress
                userId={userId}
                swipeCounts={swipeCounts}
                total={restaurants.length}
              />
            </div>
          )}

          <AnimatePresence>
            {bubble && (
              <motion.div
                className="absolute left-1/2 top-4 z-30 flex -translate-x-1/2 items-center gap-1.5 rounded-full bg-rose-500 px-3.5 py-1.5 text-xs font-semibold text-white shadow-lg"
                initial={{ opacity: 0, y: -16, x: "-50%" }}
                animate={{ opacity: 1, y: 0, x: "-50%" }}
                exit={{ opacity: 0, y: -16, x: "-50%" }}
                transition={{ type: "spring", stiffness: 400, damping: 25 }}
              >
                <Heart size={12} className="fill-white" />
                {bubble}
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </div>

      <ActionButtons onAction={handleButtonAction} disabled={isDone} />

      {showMatch && matchRestaurant && (
        <MatchResult
          restaurant={matchRestaurant}
          matchType={matchType ?? "unanimous"}
          matchLikes={matchLikes}
          runnerUps={runnerUps}
          allRestaurants={restaurants}
          userCount={userCount}
          onReset={handleReset}
          onNarrow={handleNarrow}
          resetting={resetting}
        />
      )}
    </>
  );
}