no-whatever/src/components/SwipeDeck.tsx

"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, UserProfile, SceneType } from "@/types";
import { Heart, Undo2, Check } from "lucide-react";
import UserAvatar from "@/components/UserAvatar";

function UserProgressBar({
  userId,
  swipeCounts,
  localIndex,
  total,
  userProfiles,
  onUndo,
}: {
  userId: string;
  swipeCounts: Record<string, number>;
  localIndex: number;
  total: number;
  userProfiles: Record<string, UserProfile>;
  onUndo: () => void;
}) {
  const others = Object.entries(swipeCounts).filter(([id]) => id !== userId);

  return (
    <div className="flex items-center gap-x-3">
      <div className="flex flex-1 flex-wrap items-center gap-x-3 gap-y-1">
        <span className="flex items-center gap-1.5 text-[11px] text-accent">
          <UserAvatar userId={userId} profile={userProfiles[userId]} size="xs" />
          你
          <span className="rounded bg-accent/10 px-1 py-px tabular-nums font-medium">
            {localIndex}/{total}
          </span>
        </span>
        {others.map(([id, count]) => {
          const finished = count >= total;
          const label = userProfiles[id]?.username ?? "";
          return (
            <span
              key={id}
              className={`flex items-center gap-1.5 text-[11px] ${finished ? "text-emerald-400" : "text-muted"}`}
            >
              <UserAvatar userId={id} profile={userProfiles[id]} size="xs" />
              {label && <span className="max-w-12 truncate">{label}</span>}
              <span className={`rounded px-1 py-px tabular-nums font-medium ${finished ? "bg-emerald-500/10" : "bg-elevated"}`}>
                {count}/{total}
              </span>
              {finished && <Check size={10} className="text-emerald-400" />}
            </span>
          );
        })}
      </div>
      <button
        onClick={onUndo}
        disabled={localIndex === 0}
        className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-amber-400 transition-colors active:bg-amber-500/15 disabled:opacity-0"
      >
        <Undo2 size={12} />
        撤回
      </button>
    </div>
  );
}

function WaitingProgress({
  userId,
  swipeCounts,
  total,
  userProfiles,
}: {
  userId: string;
  swipeCounts: Record<string, number>;
  total: number;
  userProfiles: Record<string, UserProfile>;
}) {
  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-surface px-4 py-3 ring-1 ring-border">
      <div className="flex items-center justify-between">
        <span className="flex items-center gap-1.5 text-xs font-medium text-accent">
          <UserAvatar userId={userId} profile={userProfiles[userId]} size="sm" />
          你 {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 label = userProfiles[id]?.username ?? "";
        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-accent" : "text-muted"}`}>
                <UserAvatar
                  userId={id}
                  profile={userProfiles[id]}
                  size="sm"
                  bg={finished ? "bg-emerald-500/20" : undefined}
                />
                {label && <span className="max-w-12 truncate">{label}</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-elevated">
                <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-muted">
        {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;
  userProfiles: Record<string, UserProfile>;
  onReset: () => Promise<void>;
  onNarrow: (restaurantIds: string[]) => Promise<void>;
  scene?: SceneType;
}

export default function SwipeDeck({
  restaurants,
  roomId,
  userId,
  initialIndex,
  matchedRestaurantId,
  matchType,
  matchLikes,
  runnerUps,
  likeCounts,
  swipeCounts,
  userCount,
  userProfiles,
  onReset,
  onNarrow,
  scene = "eat",
}: 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 = {};
  }, []);

  useEffect(() => {
    const serverIndex = swipeCounts[userId] ?? 0;
    if (serverIndex === 0 && currentIndex > 0 && !resetting) {
      clearLocalState();
    }
  }, [swipeCounts, userId, currentIndex, resetting, clearLocalState]);

  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 && userCount > 1;

  return (
    <>
      <div className="relative flex flex-1 items-center justify-center px-4">
          <div className="relative h-[60vh] w-full max-w-sm">
          {!allSwiped && !resolvedMatchId && (
            <div className="absolute inset-x-0 bottom-full mb-2">
              <UserProgressBar
                userId={userId}
                swipeCounts={swipeCounts}
                localIndex={currentIndex}
                total={restaurants.length}
                userProfiles={userProfiles}
                onUndo={handleUndo}
              />
            </div>
          )}
          {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-subtle border-t-accent" />
              <p className="text-sm font-medium text-muted">等待其他人完成选择</p>
              <WaitingProgress
                userId={userId}
                swipeCounts={swipeCounts}
                total={restaurants.length}
                userProfiles={userProfiles}
              />
            </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}
          roomId={roomId}
          userId={userId}
          onReset={handleReset}
          onNarrow={handleNarrow}
          resetting={resetting}
          scene={scene}
        />
      )}
    </>
  );
}