"use client";

import { motion, AnimatePresence } from "framer-motion";
import { Clock, ChevronDown, ClipboardList } from "lucide-react";
import Card from "@/components/Card";
import EmptyState from "@/components/EmptyState";
import RestaurantImage from "@/components/RestaurantImage";
import { RecordItemSkeleton } from "@/components/Skeleton";
import { buildNavUrl } from "@/lib/navigation";
import type { DecisionRecord, Restaurant } from "@/types";

function firstImage(r: Restaurant): string {
  if (r.images?.length > 0) return r.images[0];
  const legacy = (r as unknown as Record<string, unknown>).image;
  return typeof legacy === "string" ? legacy : "";
}

interface ProfileHistoryCardProps {
  history: DecisionRecord[];
  loading: boolean;
  open: boolean;
  onToggle: () => void;
  onEmpty: () => void;
  delay?: number;
}

export default function ProfileHistoryCard({
  history,
  loading,
  open,
  onToggle,
  onEmpty,
  delay,
}: ProfileHistoryCardProps) {
  return (
    <Card animated className="mt-4" delay={delay}>
      <button
        onClick={onToggle}
        className="flex w-full items-center justify-between"
      >
        <div className="flex items-center gap-2">
          <Clock size={15} className="text-muted" />
          <h3 className="text-sm font-semibold text-secondary">
            决策记录 {history.length > 0 && `(${history.length})`}
          </h3>
        </div>
        <motion.span
          animate={{ rotate: open ? 180 : 0 }}
          transition={{ duration: 0.2 }}
          className="text-muted"
        >
          <ChevronDown size={16} />
        </motion.span>
      </button>

      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="overflow-hidden"
          >
            {loading ? (
              <div className="mt-3 flex flex-col gap-2">
                <RecordItemSkeleton />
                <RecordItemSkeleton />
              </div>
            ) : history.length === 0 ? (
              <EmptyState
                icon={ClipboardList}
                image="/empty-no-record.png"
                title="还没有决策记录"
                subtitle="创建房间开始一起选餐厅"
                ctaLabel="去创建第一个房间"
                onCta={onEmpty}
                color="purple"
              />
            ) : (
              <div className="mt-3 flex flex-col gap-2">
                {history.map((d) => (
                  <a
                    key={d.id}
                    href={buildNavUrl(d.restaurantData)}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex gap-3 rounded-xl bg-elevated p-2.5 transition-colors active:bg-subtle"
                  >
                    {firstImage(d.restaurantData) && (
                      <RestaurantImage
                        src={firstImage(d.restaurantData)}
                        alt={d.restaurantName}
                        className="h-12 w-12 shrink-0 rounded-lg object-cover"
                      />
                    )}
                    <div className="flex min-w-0 flex-1 flex-col justify-center">
                      <p className="truncate text-sm font-semibold text-heading">{d.restaurantName}</p>
                      <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
                        <span>{d.matchType === "unanimous" ? "全员一致" : "最佳匹配"}</span>
                        <span>{d.participants} 人参与</span>
                        <span>{new Date(d.createdAt).toLocaleDateString("zh-CN", { month: "short", day: "numeric" })}</span>
                      </div>
                    </div>
                  </a>
                ))}
              </div>
            )}
          </motion.div>
        )}
      </AnimatePresence>
    </Card>
  );
}