"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { CheckCircle2, XCircle, ChevronDown } from "lucide-react";
import type { ContractRecord } from "@/types";

interface ContractHistoryItemProps {
  record: ContractRecord;
}

export default function ContractHistoryItem({ record }: ContractHistoryItemProps) {
  const [expanded, setExpanded] = useState(false);
  const isCompleted = record.status === "completed";

  const summary =
    record.activities.length <= 3
      ? record.activities.join(" → ")
      : record.activities.slice(0, 3).join(" → ") + "…";

  return (
    <button
      onClick={() => setExpanded(!expanded)}
      className="w-full rounded-xl bg-elevated p-3 text-left transition-colors active:bg-subtle"
    >
      <div className="flex items-start gap-3">
        <div
          className={`mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${
            isCompleted
              ? "bg-emerald-600/15 text-emerald-400"
              : "bg-rose-600/15 text-rose-400/70"
          }`}
        >
          {isCompleted ? <CheckCircle2 size={15} /> : <XCircle size={15} />}
        </div>

        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
            <p className="truncate text-sm font-semibold text-heading">
              {record.roomName}
            </p>
            <span
              className={`shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-bold ${
                isCompleted
                  ? "bg-emerald-600/15 text-emerald-400"
                  : "bg-rose-600/15 text-rose-400/70"
              }`}
            >
              {isCompleted ? "已完成" : "未完成"}
            </span>
          </div>
          <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
            <span>{record.date}</span>
            <span>·</span>
            <span>{record.activities.length} 项活动</span>
            <span>·</span>
            <span>
              {new Date(record.createdAt).toLocaleDateString("zh-CN", {
                month: "short",
                day: "numeric",
              })}
            </span>
          </div>
          <p className="mt-1 truncate text-xs text-dim">{summary}</p>
        </div>

        <motion.span
          animate={{ rotate: expanded ? 180 : 0 }}
          transition={{ duration: 0.2 }}
          className="mt-1 shrink-0 text-muted"
        >
          <ChevronDown size={14} />
        </motion.span>
      </div>

      <AnimatePresence>
        {expanded && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="overflow-hidden"
          >
            <div className="mt-3 border-t border-border pt-3">
              <div className="flex flex-col gap-1.5">
                {record.activities.map((activity, i) => (
                  <div key={i} className="flex items-center gap-2">
                    <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-purple-600/15 text-[10px] font-bold text-purple-400">
                      {i + 1}
                    </div>
                    <span className="text-xs text-secondary">{activity}</span>
                  </div>
                ))}
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </button>
  );
}
