/**
 * 米棉之战线索区域组件
 * 包含投机商情报、全国物资分布、对话的展示
 */
import { Image } from "@/components";
import { cn, getStaticImage } from "@/lib/utils";
import { ClueItem } from "../shared/ClueItem";
import type { FileType } from "../shared/types";
import type { ClueData } from "@/components/layout";
import { MIMIAN_CLUE_DATA } from "../constants/mimian";

export interface MimianCluesProps {
  /** 当前展开的文件 */
  expandedFile: FileType | null;
  /** 线索状态 */
  clueStates: Record<string, boolean>;
  /** 线索点击回调 */
  onClueClick: (clue: ClueData, clueKey: string) => void;
}

/**
 * 米棉之战线索区域组件
 * 显示投机商情报、全国物资分布、对话
 */
export const MimianClues = ({
  expandedFile,
  clueStates,
  onClueClick,
}: MimianCluesProps) => {
  const isExpanded = expandedFile === "mimian";

  return (
    <>
      {/* 米棉之战：线索-投机商情报 */}
      <div
        className={cn([
          "absolute left-70 bottom-8 transition-all duration-300 delay-100",
          "hover:scale-105 hover:brightness-115",
          isExpanded
            ? "opacity-100 translate-y-0"
            : "opacity-0 translate-y-10 pointer-events-none",
        ])}
      >
        <ClueItem
          clueKey="mimian-intelligence"
          imageSrc="chenyun/reflection/投机商情报桌上"
          isViewed={clueStates["mimian-intelligence"] || false}
          onClick={() => {
            const clue = MIMIAN_CLUE_DATA["mimian-intelligence"];
            if (clue) {
              onClueClick(clue, "mimian-intelligence");
            }
          }}
          viewedMarkOffset={{ left: "4px" }}
        />
      </div>

      {/* 米棉之战：线索-全国物资分布 */}
      <div
        className={cn([
          "absolute left-135 bottom-8 transition-all duration-300 delay-150",
          "hover:scale-105 hover:brightness-115",
          isExpanded
            ? "opacity-100 translate-y-0"
            : "opacity-0 translate-y-10 pointer-events-none",
        ])}
      >
        <ClueItem
          clueKey="mimian-distribution"
          imageSrc="chenyun/reflection/全国物资分布桌上"
          isViewed={clueStates["mimian-distribution"] || false}
          onClick={() => {
            const clue = MIMIAN_CLUE_DATA["mimian-distribution"];
            if (clue) {
              onClueClick(clue, "mimian-distribution");
            }
          }}
          viewedMarkOffset={{ left: "12px" }}
        />
      </div>

      {/* 米棉之战：消息（对话线索） */}
      <div
        className={cn([
          "absolute left-155 -top-118 transition-all duration-300 delay-200",
          "hover:scale-105 hover:brightness-115",
          isExpanded
            ? "opacity-100 translate-y-0"
            : "opacity-0 -translate-y-10 pointer-events-none",
        ])}
      >
        <div
          className="cursor-pointer"
          onClick={() => {
            const clue = MIMIAN_CLUE_DATA["mimian-dialogue"];
            if (clue) {
              onClueClick(clue, "mimian-dialogue");
            }
          }}
        >
          <Image src={getStaticImage("chenyun/reflection/对话气泡")} button />
          {/* 未倾听时显示三个点动画 */}
          {!clueStates["mimian-dialogue"] && (
            <div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 flex items-center justify-center">
              <div className="animate-dots flex gap-2">
                <span className="w-3 h-3 bg-gray-500 rounded-full inline-block" />
                <span className="w-3 h-3 bg-gray-500 rounded-full inline-block" />
                <span className="w-3 h-3 bg-gray-500 rounded-full inline-block" />
              </div>
            </div>
          )}
          {/* 已倾听标记 */}
          {clueStates["mimian-dialogue"] && (
            <div className="absolute left-1/2 -translate-x-1/2 bottom-16">
              <span
                className={cn([
                  "text-[#ae6400] text-3xl font-bold whitespace-nowrap",
                  "[text-shadow:_-4px_-4px_0_#ffffff,_4px_-4px_0_#ffffff,_-4px_4px_0_#ffffff,_4px_4px_0_#ffffff,_-5px_0_0_#ffffff,_5px_0_0_#ffffff,_0_-5px_0_#ffffff,_0_5px_0_#ffffff]",
                ])}
              >
                已倾听
              </span>
            </div>
          )}
        </div>
      </div>
    </>
  );
};