"use client";

import { useEffect, useRef, useState } from "react";
import { useGame } from "@/hooks/useGame";
import VillageView, { type PlacingState } from "@/components/game/VillageView";
import DbStatus from "@/components/DbStatus";
import NicknameModal from "@/components/game/NicknameModal";
import ChatTicker from "@/components/game/ChatTicker";
import ChatPanel from "@/components/game/ChatPanel";
import IntroScreen from "@/components/game/IntroScreen";
import {
  engine,
  effectiveRate,
  activeRecipe,
  adoptCost,
  fullnessPenalty,
  isUnderConstruction,
  storageCap,
} from "@/lib/game/engine";
import {
  APTITUDE_LABEL,
  BREEDS,
  BUILD_DEFS,
  BUILDING_IMG,
  catSprite,
  DECO_DEFS,
  HALL_LEVELS,
  ICON_IMG,
  KITCHEN_UPGRADE_COST,
  MEAL_PRICES,
  mealCap,
  REROLL_COST,
  SELL_PRICES,
  PASSIVES,
  RECIPES,
  TOOL_IMG,
  type BuildDef,
} from "@/lib/game/data";
import type { AptitudeKey, Building, Cat, GameState } from "@/lib/game/types";

const RES_EMOJI: Record<string, string> = { fish: "🐟", wood: "🪵", stone: "🪨" };
const RES_LABEL: Record<string, string> = { fish: "생선", wood: "목재", stone: "돌" };

// ---------- 튜토리얼 ----------
interface TutStep {
  text: string;
  task?: string;
  check?: (s: GameState) => boolean;
  manual?: boolean; // 버튼으로 진행
}

const TUTORIAL_STEPS: TutStep[] = [
  {
    text: "안녕! 난 이 마을의 촌장 냥이야. 여긴 아직 아무것도 없는 들판이지만... 우리 함께 아늑한 고양이 마을을 만들어보자!",
    manual: true,
  },
  {
    text: "먼저 첫 친구를 데려오자. 오른쪽 위 😻 입양 버튼을 눌러서 마음에 드는 아이를 골라줘. 낚시를 잘하는 친구면 좋겠다!",
    task: "고양이 1마리 입양하기",
    check: (s) => s.cats.length >= 1,
  },
  {
    text: "이제 먹을거리를 구해야지. 🛒 상점에서 부두를 골라 강물 위에 놓아줘. 첫 건물이니까 공짜야!",
    task: "부두 건설하기 (강물 위)",
    check: (s) => s.buildings.some((b) => b.type === "dock"),
  },
  {
    text: "뚝딱뚝딱... 부두가 완성되면 부두를 눌러서 친구를 배치해줘. 생선이 모이면 배지를 눌러 거둬들이는 것도 잊지 마!",
    task: "부두에 고양이 배치하기",
    check: (s) => {
      const d = s.buildings.find((b) => b.type === "dock");
      return !!d && d.constructionUntil === undefined && d.assigned.length >= 1;
    },
  },
  {
    text: "생선이 모이는 동안 친구를 한 마리 더 데려오자! 이번엔 벌목을 잘하는 아이면 좋겠어.",
    task: "고양이 2마리째 입양하기",
    check: (s) => s.cats.length >= 2,
  },
  {
    text: "이제 벌목장을 짓자! 재료로 생선 30마리가 필요한데... 짜잔, 내가 미리 준비해뒀어. 🛒 상점에서 벌목장을 사서 마음에 드는 곳에 놓아줘!",
    task: "벌목장 건설하기 (🐟 30 — 촌장 냥이가 지원!)",
    check: (s) => s.buildings.some((b) => b.type === "lumberyard"),
  },
  {
    text: "벌목장이 완성되면 벌목 잘하는 친구를 배치해줘!",
    task: "벌목장에 고양이 배치하기",
    check: (s) => {
      const l = s.buildings.find((b) => b.type === "lumberyard");
      return !!l && l.constructionUntil === undefined && l.assigned.length >= 1;
    },
  },
  {
    text: "일하다 보면 배가 고파지지. 부엌을 짓자 — 목재 60은 내가 지원해줄게! 요리 잘하는 친구를 배치해두면 다들 알아서 밥을 챙겨 먹는단다.",
    task: "부엌 건설하기 (🪵 60 — 촌장 냥이가 지원!)",
    check: (s) => s.buildings.some((b) => b.type === "kitchen"),
  },
  {
    text: "마지막이야! 증축 재료(목재 100·생선 80)는 마을 발전 기금에서 내가 쏠게. 열심히 일한 친구에겐 특훈까지 시켜뒀단다. 회관을 눌러 Lv2로 증축해봐!",
    task: "마을 회관 Lv2 증축하기",
    check: (s) => s.hall.level >= 2,
  },
  {
    text: "축하해! 이제 이 마을은 온전히 네 거야. 아 참 — 정착 지원금으로 냥코인 🪙200을 문패 아래 두고 갈게. 새 친구를 데려오거나 장터를 짓는 데 쓰렴! 난 회관에 있을게 🐾",
    manual: true,
  },
];

const TUTORIAL_DONE = 99;

type Panel =
  | { type: "building"; id: string }
  | { type: "hall" }
  | { type: "shop" }
  | { type: "cats" }
  | { type: "deco"; id: string }
  | { type: "chat" }
  | null;

export default function Game() {
  const { state, dispatch } = useGame();
  const [panel, setPanel] = useState<Panel>(null);
  const [showIntro, setShowIntro] = useState(true);
  const [candidates, setCandidates] = useState<Cat[] | null>(null);
  const [placing, setPlacing] = useState<PlacingState | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  const msgTimer = useRef<ReturnType<typeof setTimeout> | null>(null);

  const run = (action: () => string | null | void) => {
    const error = dispatch(action);
    setMessage(error ?? null);
    if (msgTimer.current) clearTimeout(msgTimer.current);
    if (error) msgTimer.current = setTimeout(() => setMessage(null), 3500);
    return error;
  };

  useEffect(() => () => {
    if (msgTimer.current) clearTimeout(msgTimer.current);
  }, []);

  // 튜토리얼 자동 진행 (조건 충족 시)
  useEffect(() => {
    if (!state) return;
    const step = state.tutorialStep ?? TUTORIAL_DONE;
    if (step >= TUTORIAL_STEPS.length) return;
    const def = TUTORIAL_STEPS[step];
    if (def.check && def.check(state)) {
      dispatch(() => engine.setTutorialStep(step + 1));
    }
  }, [state, dispatch]);

  // 오프라인 정산 알림 (1회)
  const offlineShown = useRef(false);
  useEffect(() => {
    if (!state || offlineShown.current) return;
    offlineShown.current = true;
    const mins = engine.consumeOfflineReport();
    if (mins) {
      setMessage(
        `🌙 ${mins >= 60 ? `${Math.floor(mins / 60)}시간 ${mins % 60}분` : `${mins}분`} 동안 자리를 비웠어요 — 마을은 계속 돌아갔답니다!`,
      );
      msgTimer.current = setTimeout(() => setMessage(null), 6000);
    }
  }, [state]);

  if (!state) {
    return (
      <div className="fixed inset-0 flex items-center justify-center bg-[#f6eeda] font-jua text-lg text-[#8a7551]">
        마을 불러오는 중…
      </div>
    );
  }

  const meals = state.buildings
    .filter((b) => b.type === "kitchen")
    .reduce((sum, b) => sum + Math.floor(b.stored), 0);
  const openedBuilding =
    panel?.type === "building"
      ? state.buildings.find((b) => b.id === panel.id)
      : undefined;

  // 튜토리얼: 지금 눌러야 할 곳 하이라이트 타깃
  const tutStep = state.tutorialStep ?? TUTORIAL_DONE;
  const tutTarget: string | null = (() => {
    if (tutStep >= TUTORIAL_STEPS.length) return null;
    const dock = state.buildings.find((b) => b.type === "dock");
    const lumber = state.buildings.find((b) => b.type === "lumberyard");
    switch (tutStep) {
      case 1:
      case 4:
        return candidates ? "adopt-pick" : "adopt";
      case 2:
        return panel?.type === "shop" ? "shop-dock" : placing ? null : "shop";
      case 3:
        if (!dock) return null;
        if (panel?.type === "building" && panel.id === dock.id) return "assign";
        return `canvas:${dock.id}`;
      case 5:
        return panel?.type === "shop" ? "shop-lumberyard" : placing ? null : "shop";
      case 6:
        if (!lumber) return null;
        if (panel?.type === "building" && panel.id === lumber.id) return "assign";
        return `canvas:${lumber.id}`;
      case 7:
        return panel?.type === "shop" ? "shop-kitchen" : placing ? null : "shop";
      case 8:
        return panel?.type === "hall" ? "hall-upgrade" : "canvas:hall";
      default:
        return null;
    }
  })();
  const tut = (key: string) => (tutTarget === key ? " tut-highlight" : "");

  return (
    <div className="fixed inset-0 overflow-hidden">
      {/* ── 인트로 (시작하기 → 구름 걷힘) ── */}
      {showIntro && <IntroScreen onDone={() => setShowIntro(false)} />}
      <VillageView
        onBuildingClick={(id) => {
          if (id === "hall") setPanel({ type: "hall" });
          else if (id.startsWith("deco:")) setPanel({ type: "deco", id: id.slice(5) });
          else setPanel({ type: "building", id });
        }}
        placing={placing}
        onPlace={(i, j) => {
          if (!placing) return;
          if (placing.deco) {
            run(() => engine.placeDeco(placing.deco!, { i, j }));
            return; // 연속 배치 (ESC/취소로 종료)
          }
          const error = placing.moveId
            ? run(() => engine.moveBuilding(placing.moveId!, { i, j }))
            : run(() => engine.build(placing.type as BuildDef["type"], { i, j }));
          if (!error) setPlacing(null);
        }}
        onCancelPlace={() => setPlacing(null)}
        tutHighlight={
          tutTarget?.startsWith("canvas:") ? tutTarget.slice(7) : null
        }
      />

      {/* ── 실시간 마을 채팅 티커 (닉네임 확정 후) ── */}
      {state.nickname && state.syncToken && (
        <ChatTicker
          onOpen={() =>
            setPanel(panel?.type === "chat" ? null : { type: "chat" })
          }
        />
      )}

      {/* ── 닉네임 입력 (인사 후, 미입력 시 게임 차단) ── */}
      {!state.nickname && (state.tutorialStep ?? TUTORIAL_DONE) >= 1 && (
        <NicknameModal onDone={() => dispatch(() => undefined)} />
      )}

      {/* ── 배치 모드 힌트 ── */}
      {placing && (
        <div className="wood-plank font-jua absolute bottom-6 left-1/2 z-40 flex -translate-x-1/2 items-center gap-3 px-5 py-2.5 text-sm">
          📍 {placing.deco
            ? "꾸밀 타일을 클릭하세요 (연속 배치 가능)"
            : `${placing.moveId ? "옮길" : "배치할"} 위치를 클릭하세요`}
          {placing.type === "dock" && " (부두는 물가에만)"}
          <button
            onClick={() => setPlacing(null)}
            className="wood-pill px-3 py-1 text-xs hover:brightness-125"
          >
            취소 (ESC)
          </button>
        </div>
      )}

      {/* ── 상단 HUD (어두운 나무 바) ── */}
      <div className="nature-topbar pointer-events-none absolute inset-x-0 top-0 z-30 h-[52px]">
        <div className="flex h-full items-start justify-between gap-2 px-4">
          {/* 매달린 나무 판자 타이틀 */}
          <div className="pointer-events-auto relative mt-0 flex items-start gap-3.5">
            <button
              onClick={() => setPanel({ type: "hall" })}
              className="wood-plank relative mt-1 flex items-center gap-2 px-4 py-2"
            >
              <span className="absolute -top-1 left-4 h-4 w-[3px] -rotate-12 bg-linear-to-b from-[#c9b184] to-[#8c7550]" />
              <span className="absolute -top-1 right-4 h-4 w-[3px] rotate-12 bg-linear-to-b from-[#c9b184] to-[#8c7550]" />
              <span className="font-jua text-[17px] tracking-wide [text-shadow:0_1px_2px_rgba(0,0,0,.45)]">
                🏡 {state.nickname ? `${state.nickname}의 마을` : "고양이 마을"} · 회관 Lv{state.hall.level}
              </span>
            </button>
            {/* 자원 pill */}
            <div className="mt-2 flex flex-wrap items-center gap-2">
              {(
                [
                  ["🐱", null, `${state.cats.length}/${state.hall.capacity}`],
                  ["🐟", ICON_IMG.fish, Math.floor(state.resources.fish)],
                  ["🪵", ICON_IMG.wood, Math.floor(state.resources.wood)],
                  ["🪨", ICON_IMG.stone, Math.floor(state.resources.stone)],
                  ["🍖", ICON_IMG.meal, meals],
                  ["🪙", ICON_IMG.coin, Math.floor(state.coins ?? 0)],
                ] as Array<[string, string | null, string | number]>
              ).map(([emoji, img, value]) => (
                <span
                  key={emoji}
                  className="wood-pill flex items-center gap-1.5 py-1 pl-1 pr-3"
                >
                  <span className="wood-pill-icon grid h-6 w-6 place-items-center text-[13px]">
                    {img ? (
                      /* eslint-disable-next-line @next/next/no-img-element */
                      <img src={img} alt="" className="h-4 w-4 object-contain" />
                    ) : (
                      emoji
                    )}
                  </span>
                  <span className="font-num text-sm leading-none">{value}</span>
                </span>
              ))}
            </div>
          </div>
          <div className="pointer-events-auto mt-2 flex gap-2">
            <button
              onClick={() =>
                setPanel(panel?.type === "shop" ? null : { type: "shop" })
              }
              className={"wood-pill font-jua flex items-center gap-1.5 px-4 py-2 text-[15px] hover:brightness-125" + tut("shop")}
            >
              🛒 상점
            </button>
            <button
              onClick={() =>
                setPanel(panel?.type === "cats" ? null : { type: "cats" })
              }
              className="wood-pill font-jua flex items-center gap-1.5 px-4 py-2 text-[15px] hover:brightness-125"
            >
              🐾 고양이
            </button>
            <button
              onClick={() => {
                const needCook =
                  state.buildings.some((b) => b.type === "kitchen") &&
                  !state.cats.some((c) => c.aptitude.cooking > 0);
                setCandidates(
                  engine.generateCandidates(
                    3,
                    state.tutorialStep === 1
                      ? "fishing"
                      : state.tutorialStep === 4
                        ? "logging"
                        : needCook
                          ? "cooking"
                          : undefined,
                  ),
                );
              }}
              disabled={state.cats.length >= state.hall.capacity}
              className={"nature-btn flex items-center gap-1.5 px-4 py-2 text-[15px] disabled:cursor-not-allowed disabled:opacity-50" + tut("adopt")}
            >
              😻 입양
            </button>
          </div>
        </div>
      </div>

      {/* ── 메시지 토스트 ── */}
      {message && (
        <div className="wood-plank font-jua absolute left-1/2 top-16 z-50 -translate-x-1/2 px-5 py-2 text-sm">
          ⚠️ {message}
        </div>
      )}

      {/* ── 촌장 냥이 튜토리얼 가이드 ── */}
      {(state.tutorialStep ?? TUTORIAL_DONE) < TUTORIAL_STEPS.length && (() => {
        const step = state.tutorialStep ?? 0;
        const def = TUTORIAL_STEPS[step];
        const isLast = step === TUTORIAL_STEPS.length - 1;
        return (
          <div className="pointer-events-none absolute bottom-8 left-4 z-40 flex max-w-md items-end gap-2">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={catSprite("korean_shorthair", "idle")}
              alt="촌장 냥이"
              className="h-24 w-24 shrink-0 object-contain drop-shadow-lg"
            />
            <div className="panel-paper pointer-events-auto relative mb-2 rounded-2xl p-4 shadow-xl">
              <div className="font-jua text-[13px] text-[#8a6316]">
                🎗️ 촌장 냥이 <span className="font-num text-[11px] text-[#a3906c]">({Math.min(step + 1, TUTORIAL_STEPS.length)}/{TUTORIAL_STEPS.length})</span>
              </div>
              <p className="mt-1 text-sm leading-relaxed text-[#3f2c14]">{def.text}</p>
              {def.task && (
                <div className="chip-nature mt-2 inline-block px-2.5 py-1 text-xs font-semibold">
                  📌 {def.task}
                </div>
              )}
              {def.manual && (
                <button
                  onClick={() =>
                    dispatch(() =>
                      engine.setTutorialStep(isLast ? TUTORIAL_DONE : step + 1),
                    )
                  }
                  className="nature-btn mt-3 block px-5 py-1.5 text-sm"
                >
                  {isLast ? "고마워, 촌장 냥이! 🐾" : "좋아, 시작하자!"}
                </button>
              )}
            </div>
          </div>
        );
      })()}

      {/* ── 촌장 냥이: 행복도 시스템 안내 (해금 시 1회) ── */}
      {state.happinessUnlocked &&
        !state.happinessIntroSeen &&
        (state.tutorialStep ?? TUTORIAL_DONE) >= TUTORIAL_STEPS.length && (
          <div className="pointer-events-none absolute bottom-8 left-4 z-40 flex max-w-md items-end gap-2">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={catSprite("korean_shorthair", "idle")}
              alt="촌장 냥이"
              className="h-24 w-24 shrink-0 object-contain drop-shadow-lg"
            />
            <div className="panel-paper pointer-events-auto relative mb-2 rounded-2xl p-4 shadow-xl">
              <div className="font-jua text-[13px] text-[#8a6316]">🎗️ 촌장 냥이</div>
              <p className="mt-1 text-sm leading-relaxed text-[#3f2c14]">
                오랜만이야! 마을이 근사해졌네. 햇볕 데크도 생겼으니 이제
                친구들의 <b>💗 행복도</b>를 챙길 때야. 배부르게 먹고 푹 쉬면
                행복해지고, 굶거나 고양이 집이 모자라면 시무룩해져. 행복도가
                너무 낮으면 <b>파업</b>할 수도 있으니 잘 돌봐줘! 80 이상이면
                일도 10% 빨라진단다.
              </p>
              <button
                onClick={() => dispatch(() => engine.markHappinessIntroSeen())}
                className="nature-btn mt-3 block px-5 py-1.5 text-sm"
              >
                알겠어, 잘 돌볼게! 💗
              </button>
            </div>
          </div>
        )}

      {/* ── DB 상태 (좌하단 미니) ── */}
      <div className="absolute bottom-2 left-3 z-30 opacity-70">
        <DbStatus />
      </div>

      {/* ── 우측 패널 ── */}
      {panel?.type === "chat" && (
        <SidePanel title="💬 마을 채팅" onClose={() => setPanel(null)}>
          <ChatPanel nickname={state.nickname ?? ""} token={state.syncToken ?? ""} />
        </SidePanel>
      )}
      {panel?.type === "hall" && (
        <SidePanel title={`🏛️ 마을 회관 Lv${state.hall.level}`} onClose={() => setPanel(null)}>
          <HallPanel
            state={state}
            onUpgrade={() => run(() => engine.upgradeHall())}
            highlightUpgrade={tutTarget === "hall-upgrade"}
          />
        </SidePanel>
      )}
      {panel?.type === "shop" && (
        <SidePanel title="🛒 건물 상점" onClose={() => setPanel(null)}>
          <ShopPanel
            state={state}
            highlightType={
              tutTarget?.startsWith("shop-") ? tutTarget.slice(5) : null
            }
            onBuy={(def) => {
              setPanel(null);
              setPlacing({ type: def.type, aptitude: def.aptitude });
            }}
            onBuyDeco={(key) => {
              setPanel(null);
              setPlacing({ deco: key });
            }}
          />
        </SidePanel>
      )}
      {openedBuilding && (
        <SidePanel
          title={
            BUILDING_IMG[openedBuilding.type]
              ? `${openedBuilding.name} Lv${openedBuilding.level}`
              : `${openedBuilding.emoji} ${openedBuilding.name} Lv${openedBuilding.level}`
          }
          icon={BUILDING_IMG[openedBuilding.type]}
          onClose={() => setPanel(null)}
        >
          <BuildingPanel
            building={openedBuilding}
            state={state}
            onAssign={(catId) => run(() => engine.assign(catId, openedBuilding.id))}
            onUnassign={(catId) => run(() => engine.unassign(catId))}
            onCollect={() => run(() => engine.collect(openedBuilding.id))}
            onUpgradeKitchen={() => run(() => engine.upgradeKitchen())}
            highlightAssign={tutTarget === "assign"}
            onRush={() => run(() => engine.rushConstruction(openedBuilding.id))}
            onSetSell={(key) => run(() => engine.setSellKey(openedBuilding.id, key))}
            onMove={() => {
              setPanel(null);
              setPlacing({
                type: openedBuilding.type,
                aptitude: openedBuilding.aptitude,
                moveId: openedBuilding.id,
              });
            }}
          />
        </SidePanel>
      )}
      {panel?.type === "deco" && (() => {
        const deco = state.decors?.find((d) => d.id === panel.id);
        const def = deco ? DECO_DEFS.find((x) => x.key === deco.kind) : undefined;
        if (!deco || !def) return null;
        return (
          <SidePanel title={`🌿 ${def.name}`} onClose={() => setPanel(null)}>
            <div className="space-y-4">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={def.img} alt={def.name} className="mx-auto h-24 object-contain" />
              <p className="text-center text-sm text-[#6f5c39]">마을을 꾸미는 바닥 장식이에요.</p>
              <button
                onClick={() => {
                  run(() => engine.removeDeco(deco.id));
                  setPanel(null);
                }}
                className="wood-plank w-full py-2 text-sm hover:brightness-110"
              >
                🗑 치우기
              </button>
            </div>
          </SidePanel>
        );
      })()}
      {panel?.type === "cats" && (
        <SidePanel title={`🐾 우리 고양이들 (${state.cats.length}/${state.hall.capacity})`} onClose={() => setPanel(null)}>
          <div className="space-y-3">
            {state.cats.map((cat) => (
              <CatCard
                key={cat.id}
                cat={cat}
                buildings={state.buildings}
                happinessUnlocked={state.happinessUnlocked}
                onInvest={(catId, key) => run(() => engine.investAptitude(catId, key))}
              />
            ))}
          </div>
        </SidePanel>
      )}

      {/* ── 입양 모달 ── */}
      {candidates && (
        <AdoptModal
          candidates={candidates}
          highlightPick={tutTarget === "adopt-pick"}
          cost={adoptCost(state)}
          coins={Math.floor(state.coins ?? 0)}
          rerollUnlocked={state.buildings.some(
            (b) => b.type === "market" && b.constructionUntil === undefined,
          )}
          onReroll={() => {
            const err = run(() => engine.payReroll());
            if (!err) {
              const needCook =
                state.buildings.some((b) => b.type === "kitchen") &&
                !state.cats.some((c) => c.aptitude.cooking > 0);
              setCandidates(
                engine.generateCandidates(
                  3,
                  state.tutorialStep === 1
                    ? "fishing"
                    : state.tutorialStep === 4
                      ? "logging"
                      : needCook
                        ? "cooking"
                        : undefined,
                ),
              );
            }
          }}
          onPick={(cat) => {
            const err = run(() => engine.adoptCandidate(cat));
            if (!err) setCandidates(null);
          }}
          onClose={() => setCandidates(null)}
        />
      )}
    </div>
  );
}

/* ──────────────── 공통 패널 셸 ──────────────── */

function SidePanel({
  title,
  icon,
  onClose,
  children,
}: {
  title: string;
  icon?: string;
  onClose: () => void;
  children: React.ReactNode;
}) {
  return (
    <aside className="panel-wood absolute bottom-3 right-3 top-15 z-40 w-full max-w-sm p-2.5">
      {/* 잎사귀 장식 */}
      <span className="leaf left-2 top-14 h-6 w-6 rotate-[-28deg]" />
      <span className="leaf leaf-bright left-1 top-20 h-4 w-4 rotate-24" />
      <span className="leaf right-2 top-52 h-5 w-5 rotate-140" />
      <span className="leaf leaf-bright bottom-2 left-24 h-5 w-5 rotate-[-140deg]" />
      <span className="leaf leaf-bright bottom-1.5 right-32 h-4 w-4 rotate-[-200deg]" />
      <div className="panel-paper relative flex h-full flex-col overflow-hidden">
        <div className="flex items-center justify-between border-b border-[rgba(126,95,48,.18)] px-5 py-3.5">
          <h2 className="font-jua flex items-center gap-2 text-[19px] text-[#4a3418]">
            {icon && (
              /* eslint-disable-next-line @next/next/no-img-element */
              <img src={icon} alt="" className="h-8 w-8 object-contain" />
            )}
            {title}
          </h2>
          <button
            onClick={onClose}
            className="grid h-8 w-8 place-items-center rounded-full bg-linear-to-b from-[#e8d6ae] to-[#cdb488] text-sm text-[#6b4a20] shadow hover:brightness-105"
          >
            ✕
          </button>
        </div>
        <div className="flex-1 overflow-y-auto px-4 py-4">{children}</div>
      </div>
    </aside>
  );
}

/* ──────────────── 회관 패널 ──────────────── */

function HallPanel({
  state,
  onUpgrade,
  highlightUpgrade,
}: {
  state: GameState;
  onUpgrade: () => void;
  highlightUpgrade?: boolean;
}) {
  const next = HALL_LEVELS[state.hall.level + 1];
  return (
    <div className="space-y-4">
      <p className="text-sm text-[#6f5c39]">
        마을의 중심. 회관 레벨이 수용 인원과 건물·레시피 해금을 결정합니다.
      </p>
      <div className="card-nature px-4 py-3 text-sm">
        현재 수용 인원 <b>{state.cats.length}/{state.hall.capacity}마리</b>
      </div>
      {next ? (
        <div className="card-nature p-4">
          <h3 className="font-jua mb-2 text-[16px] text-[#4a3418]">
            Lv{state.hall.level + 1} 증축 → 수용 {next.capacity}마리
          </h3>
          <ul className="mb-3 space-y-1 text-sm text-[#6f5c39]">
            {Object.entries(next.cost).map(([key, amount]) => {
              const have = Math.floor(
                state.resources[key as keyof typeof state.resources],
              );
              const ok = have >= (amount ?? 0);
              return (
                <li key={key} className={ok ? "text-[#5c8a2a]" : ""}>
                  {ok ? "✓" : "·"} {RES_EMOJI[key]} {RES_LABEL[key]} {have}/{amount}
                </li>
              );
            })}
            {(next.reqBuildings ?? []).map((req) => {
              const b = state.buildings.find((x) => x.type === req.type);
              const ok = Boolean(b && b.level >= (req.level ?? 1));
              return (
                <li key={req.label} className={ok ? "text-[#5c8a2a]" : ""}>
                  {ok ? "✓" : "·"} {req.label}
                </li>
              );
            })}
            {next.reqCat && (
              <li
                className={
                  state.cats.filter((c) => c.level >= next.reqCat!.level).length >=
                  next.reqCat.count
                    ? "text-emerald-600 dark:text-emerald-400"
                    : ""
                }
              >
                {state.cats.filter((c) => c.level >= next.reqCat!.level).length >=
                next.reqCat.count
                  ? "✓"
                  : "·"}{" "}
                Lv{next.reqCat.level} 이상 고양이{" "}
                {state.cats.filter((c) => c.level >= next.reqCat!.level).length}/
                {next.reqCat.count}마리
              </li>
            )}
          </ul>
          {next.locked ? (
            <p className="chip-nature px-3 py-2 text-xs">
              🔒 {next.locked}
            </p>
          ) : (
            <button
              onClick={onUpgrade}
              className={"nature-btn w-full py-2 text-sm" + (highlightUpgrade ? " tut-highlight" : "")}
            >
              🏗️ 증축하기
            </button>
          )}
        </div>
      ) : (
        <p className="text-sm text-[#a3906c]">회관이 최고 레벨입니다.</p>
      )}
    </div>
  );
}

/* ──────────────── 건물 상점 ──────────────── */

function ShopPanel({
  state,
  onBuy,
  onBuyDeco,
  highlightType,
}: {
  state: GameState;
  onBuy: (def: BuildDef) => void;
  onBuyDeco: (key: string) => void;
  highlightType?: string | null;
}) {
  return (
    <div className="space-y-3">
      <p className="text-xs text-[#8a7551]">
        구매 후 마을의 원하는 타일을 클릭해 배치합니다. 비용은 배치 확정 시 차감돼요.
      </p>
      <h3 className="font-jua text-sm text-[#8a7551]">🏗️ 건물</h3>
      {BUILD_DEFS.map((def) => {
        const built = state.buildings.some((b) => b.type === def.type);
        const hallOk = state.hall.level >= def.reqHallLv;
        const costEntries = Object.entries(def.cost) as Array<[string, number]>;
        const affordable = costEntries.every(
          ([key, amount]) =>
            state.resources[key as keyof GameState["resources"]] >= amount,
        );
        return (
          <div
            key={def.type}
            className="card-nature flex items-center gap-3 p-3"
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            {BUILDING_IMG[def.type] ? (
              /* eslint-disable-next-line @next/next/no-img-element */
              <img
                src={BUILDING_IMG[def.type]}
                alt={def.name}
                className={`h-14 w-14 shrink-0 object-contain ${built || !hallOk ? "opacity-40" : ""}`}
              />
            ) : (
              <span className={`grid h-14 w-14 shrink-0 place-items-center text-4xl ${built || !hallOk ? "opacity-40" : ""}`}>
                {def.emoji}
              </span>
            )}
            <div className="min-w-0 flex-1">
              <div className="font-jua text-[15px] text-[#3f2c14]">{def.name}</div>
              <div className="font-num text-xs text-[#8a6316]">
                {costEntries.length > 0
                  ? costEntries.map(([k, v]) => `${RES_EMOJI[k]} ${v}`).join(" + ")
                  : "무료"}
                {` · ⏱ ${def.buildTime}초`}
                {def.reqHallLv > 1 && ` · 회관 Lv${def.reqHallLv}`}
              </div>
              <div className="mt-0.5 line-clamp-2 text-[11px] text-[#8a7551]">{def.desc}</div>
            </div>
            {built ? (
              <span className="chip-nature shrink-0 px-3 py-1.5 text-xs">
                보유 중
              </span>
            ) : (
              <button
                onClick={() => onBuy(def)}
                disabled={!hallOk || !affordable}
                className={"amber-btn shrink-0 px-3.5 py-1.5 text-xs disabled:cursor-not-allowed disabled:opacity-40" + (highlightType === def.type ? " tut-highlight" : "")}
              >
                {!hallOk ? `회관 Lv${def.reqHallLv}` : !affordable ? "자원 부족" : "구매"}
              </button>
            )}
          </div>
        );
      })}

      <h3 className="font-jua mt-4 text-sm text-[#8a7551]">🌿 꾸미기 (여러 개 배치 가능)</h3>
      <div className="grid grid-cols-3 gap-2">
        {DECO_DEFS.map((def) => {
          const affordable = Object.entries(def.cost).every(
            ([key, amount]) =>
              state.resources[key as keyof GameState["resources"]] >= (amount ?? 0),
          );
          return (
            <button
              key={def.key}
              onClick={() => onBuyDeco(def.key)}
              disabled={!affordable}
              className="card-nature flex flex-col items-center gap-1 p-2 hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-40"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={def.img} alt={def.name} className="h-12 w-12 object-contain" />
              <span className="font-jua text-[12px] text-[#3f2c14]">{def.name}</span>
              <span className="font-num text-[10px] text-[#8a6316]">
                {Object.entries(def.cost)
                  .map(([k, v]) => `${RES_EMOJI[k]} ${v}`)
                  .join(" ")}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

/* ──────────────── 건물 패널 (정보 + 배치) ──────────────── */

function BuildingPanel({
  building,
  state,
  onAssign,
  onUnassign,
  onCollect,
  onUpgradeKitchen,
  onMove,
  highlightAssign,
  onRush,
  onSetSell,
}: {
  building: Building;
  state: GameState;
  onAssign: (catId: string) => void;
  onUnassign: (catId: string) => void;
  onCollect: () => void;
  onUpgradeKitchen: () => void;
  onMove: () => void;
  highlightAssign?: boolean;
  onRush: () => void;
  onSetSell: (key: string | null) => void;
}) {
  const isKitchen = building.type === "kitchen";
  const recipe = activeRecipe(state);
  const assignedCats = building.assigned
    .map((id) => state.cats.find((c) => c.id === id))
    .filter((c): c is Cat => Boolean(c));
  const totalRate = assignedCats.reduce(
    (sum, c) => sum + effectiveRate(c, building.aptitude),
    0,
  );
  const stored = Math.floor(building.stored);
  const slotsLeft = building.maxSlots - assignedCats.length;
  // 배치 후보: 이 건물 적성이 있는 모든 고양이 (다른 곳에서 일하는 고양이 포함)
  const candidates = state.cats
    .filter((c) => c.aptitude[building.aptitude] > 0 && c.assignedTo !== building.id)
    .sort(
      (a, b) =>
        effectiveRate(b, building.aptitude) - effectiveRate(a, building.aptitude),
    );

  if (isUnderConstruction(building)) {
    const def = BUILD_DEFS.find((d) => d.type === building.type);
    const total = (def?.buildTime ?? 60) * 1000;
    const remainMs = Math.max(0, (building.constructionUntil ?? 0) - Date.now());
    const pct = Math.min(100, ((total - remainMs) / total) * 100);
    const remainSec = Math.ceil(remainMs / 1000);
    return (
      <div className="space-y-4">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={BUILDING_IMG.construction}
          alt="건설 중"
          className="mx-auto h-28 object-contain"
        />
        <p className="text-center text-sm text-[#6f5c39]">
          🔨 열심히 짓는 중이에요…
        </p>
        <div className="bar-track h-3 w-full">
          <div className="bar-fill-amber" style={{ width: `${pct}%` }} />
        </div>
        <p className="font-num text-center text-sm text-[#8a6316]">
          남은 시간 {Math.floor(remainSec / 60)}:{String(remainSec % 60).padStart(2, "0")}
        </p>
        <button
          onClick={onRush}
          className="amber-btn w-full py-2 text-sm"
        >
          ⚡ 즉시 완공 — 🪙 {Math.max(1, Math.ceil(remainMs / 10000))}
        </button>
      </div>
    );
  }

  if (building.type === "market") {
    // 장터: 판매 품목 선택
    const options: Array<{ key: string; label: string; price: number; stock: number }> = [
      { key: "fish", label: "🐟 생선", price: SELL_PRICES.fish, stock: Math.floor(state.resources.fish) },
      { key: "wood", label: "🪵 목재", price: SELL_PRICES.wood, stock: Math.floor(state.resources.wood) },
      { key: "stone", label: "🪨 돌", price: SELL_PRICES.stone, stock: Math.floor(state.resources.stone) },
      {
        key: "meals",
        label: `${recipe.emoji} 요리(${recipe.name})`,
        price: MEAL_PRICES[recipe.key] ?? 4,
        stock: state.buildings
          .filter((b) => b.type === "kitchen")
          .reduce((sum, b) => sum + Math.floor(b.stored), 0),
      },
    ];
    return (
      <div className="space-y-4">
        <p className="text-sm text-[#6f5c39]">
          판매 품목을 정하면 분당 5개씩 자동으로 팔아 냥코인을 벌어요. 가공한
          요리일수록 값이 좋답니다!
        </p>
        <div className="flex items-center justify-end">
          <button onClick={onMove} className="wood-plank shrink-0 px-2.5 py-1 text-xs hover:brightness-110">
            📍 이동
          </button>
        </div>
        <div className="space-y-2">
          {options.map((o) => (
            <button
              key={o.key}
              onClick={() => onSetSell(building.sellKey === o.key ? null : o.key)}
              className={`card-nature flex w-full items-center justify-between px-3.5 py-2.5 text-sm hover:brightness-105 ${
                building.sellKey === o.key ? "tut-highlight" : ""
              }`}
            >
              <span className="font-jua text-[#3f2c14]">{o.label}</span>
              <span className="font-num text-xs text-[#8a6316]">
                개당 🪙{o.price} · 재고 {o.stock}
                {building.sellKey === o.key && " · 판매 중!"}
              </span>
            </button>
          ))}
        </div>
        {!building.sellKey && (
          <p className="text-center text-xs text-[#a3906c]">지금은 아무것도 팔지 않아요</p>
        )}
      </div>
    );
  }

  if (building.maxSlots === 0) {
    // 패시브 건물 — 배치 없음
    const restingHere = state.cats.filter((c) => c.state === "resting");
    return (
      <div className="space-y-4">
        <p className="text-sm text-[#6f5c39]">
          {BUILD_DEFS.find((d) => d.type === building.type)?.desc}
        </p>
        <div className="flex items-center justify-end">
          <button
            onClick={onMove}
            className="wood-plank shrink-0 px-2.5 py-1 text-xs hover:brightness-110"
          >
            📍 이동
          </button>
        </div>
        {building.type === "warehouse" && (
          <div className="card-nature px-4 py-3 text-center text-sm">
            현재 보관 상한: <b className="font-num">{storageCap(state)}</b> / 자원
          </div>
        )}
        {building.type === "cat_house" && (
          <section>
            <h3 className="font-jua mb-2 text-sm text-[#8a7551]">
              💤 쉬고 있는 고양이 ({restingHere.length})
            </h3>
            {restingHere.length === 0 && (
              <p className="text-xs text-[#8a7551]">지금은 모두 기운이 넘쳐요!</p>
            )}
            <div className="space-y-2">
              {restingHere.map((cat) => (
                <div key={cat.id} className="card-nature flex items-center gap-3 px-3 py-2">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img src={catSprite(cat.breed, "sleep")} alt="" className="h-10 w-10 shrink-0 object-contain" />
                  <div className="min-w-0 flex-1">
                    <div className="font-jua truncate text-sm text-[#3f2c14]">{cat.name}</div>
                    <div className="font-num text-xs text-[#8a7551]">
                      ⚡ {Math.floor(cat.status.energy)}/{cat.stats.stamina}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </section>
        )}
      </div>
    );
  }

  return (
    <div className="space-y-5">
      {/* 정보 */}
      <div className="card-nature px-4 py-3 text-sm leading-relaxed">
        <div className="flex items-center justify-between">
          <span>
            필요 적성: <b>{APTITUDE_LABEL[building.aptitude]}</b> · 슬롯{" "}
            {assignedCats.length}/{building.maxSlots}
          </span>
          <button
            onClick={onMove}
            title="건물 위치 옮기기"
            className="wood-plank shrink-0 px-2.5 py-1 text-xs hover:brightness-110"
          >
            📍 이동
          </button>
        </div>
        {isKitchen ? (
          <>
            <div>
              {recipe.emoji} {recipe.name} (
              {Object.entries(recipe.input)
                .map(([k, v]) => `${RES_LABEL[k] ?? k} ${v}`)
                .join(" + ")}
              → 포만도 +{recipe.fullness})
            </div>
            <div>요리 속도 {totalRate.toFixed(2)}/초</div>
            <div className="bar-track mt-1 h-2 w-full">
              <div
                className="bar-fill-amber"
                style={{
                  width: `${Math.min(100, ((building.progress ?? 0) / recipe.work) * 100)}%`,
                }}
              />
            </div>
          </>
        ) : (
          <div>생산 속도 {totalRate.toFixed(2)}/초</div>
        )}
      </div>

      {/* 산출/선반 */}
      {isKitchen ? (
        <>
          <div className="card-nature px-4 py-2.5 text-center text-sm font-semibold text-[#8a6316]">
            {recipe.emoji} 선반 {stored}/{mealCap(building.level)} — 배고픈 고양이가 자동으로 먹습니다
          </div>
          {building.level < 2 && (
            <div className="card-nature p-3 text-sm">
              <div className="font-jua mb-1 text-[15px] text-[#3f2c14]">⬆️ 부엌 Lv2 증축</div>
              <p className="mb-2 text-xs text-[#6f5c39]">
                선반 15칸으로 확장 · 회관 Lv3 달성 시 🐟 훈제 생선 해금
              </p>
              <button
                onClick={onUpgradeKitchen}
                className="nature-btn w-full py-2 text-xs"
              >
                {Object.entries(KITCHEN_UPGRADE_COST)
                  .map(([k, v]) => `${RES_EMOJI[k]} ${v}`)
                  .join(" + ")}{" "}
                로 증축
              </button>
            </div>
          )}
          {(() => {
            const kitchenLv = building.level;
            const lockedRecipe = RECIPES.find(
              (r) => r.reqHallLv > state.hall.level || r.reqKitchenLv > kitchenLv,
            );
            return lockedRecipe ? (
              <p className="text-xs text-[#8a7551]">
                🔒 {lockedRecipe.emoji} {lockedRecipe.name} — 회관 Lv
                {lockedRecipe.reqHallLv} · 부엌 Lv{lockedRecipe.reqKitchenLv} 해금
              </p>
            ) : null;
          })()}
        </>
      ) : (
        <button
          onClick={onCollect}
          disabled={stored <= 0}
          className="amber-btn w-full py-2.5 text-sm disabled:cursor-not-allowed disabled:opacity-40"
        >
          {building.resource === "fish" ? "🐟" : "🪵"} {stored}개 회수
        </button>
      )}

      {/* 배치된 고양이 */}
      <section>
        <h3 className="font-jua mb-2 text-sm text-[#8a7551]">
          일하는 중 ({assignedCats.length}/{building.maxSlots})
        </h3>
        {assignedCats.length === 0 && (
          <p className="text-xs text-[#8a7551]">아직 아무도 없어요</p>
        )}
        <div className="space-y-2">
          {assignedCats.map((cat) => (
            <CatRow
              key={cat.id}
              cat={cat}
              aptitude={building.aptitude}
              tag={null}
              action={{ label: "해제 ✕", style: "danger", onClick: () => onUnassign(cat.id) }}
            />
          ))}
        </div>
      </section>

      {/* 배치 가능한 고양이 */}
      <section>
        <h3 className="font-jua mb-2 text-sm text-[#8a7551]">
          배치 가능한 고양이
        </h3>
        {candidates.length === 0 && (
          <p className="text-xs text-[#8a7551]">
            {APTITUDE_LABEL[building.aptitude]} 적성이 있는 고양이가 없어요
          </p>
        )}
        <div className="space-y-2">
          {candidates.map((cat) => {
            const workplace = state.buildings.find((b) => b.id === cat.assignedTo);
            return (
              <CatRow
                key={cat.id}
                cat={cat}
                aptitude={building.aptitude}
                tag={workplace ? `${workplace.name}에서 일하는 중` : "쉬는 중"}
                action={{
                  label: "배치",
                  style: "primary",
                  disabled: slotsLeft <= 0,
                  highlight: highlightAssign,
                  onClick: () => onAssign(cat.id),
                }}
              />
            );
          })}
        </div>
        {slotsLeft <= 0 && candidates.length > 0 && (
          <p className="mt-2 text-xs text-[#8a6316]">
            슬롯이 가득 찼어요 — 먼저 해제하거나 건물을 증축하세요
          </p>
        )}
      </section>
    </div>
  );
}

/** 패널용 고양이 행 */
function CatRow({
  cat,
  aptitude,
  tag,
  action,
}: {
  cat: Cat;
  aptitude: AptitudeKey;
  tag: string | null;
  action: {
    label: string;
    style: "primary" | "danger";
    disabled?: boolean;
    highlight?: boolean;
    onClick: () => void;
  };
}) {
  return (
    <div className="card-nature flex items-center gap-3 px-3 py-2">
      <span className="card-accent" />
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={catSprite(cat.breed, "idle")}
        alt=""
        className="h-10 w-10 shrink-0 object-contain"
      />
      <div className="min-w-0 flex-1">
        <div className="font-jua truncate text-sm text-[#3f2c14]">
          {cat.name}{" "}
          <span className="font-num text-xs text-[#8a7551]">Lv{cat.level}</span>
        </div>
        <div className="text-xs text-[#6f5c39]">
          {APTITUDE_LABEL[aptitude]} {cat.aptitude[aptitude]} ·{" "}
          {effectiveRate(cat, aptitude).toFixed(2)}/초
          {fullnessPenalty(cat) < 1 && (
            <span className="ml-1 text-[#b0472a]">배고픔</span>
          )}
        </div>
        {tag && <div className="text-[11px] text-[#a3906c]">{tag}</div>}
      </div>
      <button
        onClick={action.onClick}
        disabled={action.disabled}
        className={`shrink-0 px-3 py-1.5 text-xs disabled:cursor-not-allowed disabled:opacity-40 ${
          action.style === "primary"
            ? "nature-btn"
            : "wood-plank hover:brightness-110"
        }${action.highlight ? " tut-highlight" : ""}`}
      >
        {action.label}
      </button>
    </div>
  );
}

/* ──────────────── 패시브 배지 (툴팁) ──────────────── */

function PassiveBadge({ passiveKey }: { passiveKey: string }) {
  const def = PASSIVES.find((p) => p.key === passiveKey);
  if (!def) return null;
  const color =
    def.kind === "positive"
      ? "bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300"
      : def.kind === "negative"
        ? "bg-red-50 text-red-600 dark:bg-red-950 dark:text-red-300"
        : "bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300";
  const kindLabel =
    def.kind === "positive" ? "긍정" : def.kind === "negative" ? "부정" : "복합";
  return (
    <span className={`group relative cursor-help rounded px-1.5 py-0.5 text-[11px] ${color}`}>
      {def.name}
      <span className="pointer-events-none absolute bottom-full left-0 z-20 mb-1.5 hidden w-48 rounded-lg bg-gray-900 px-3 py-2 text-left text-[11px] leading-relaxed text-white shadow-lg group-hover:block dark:bg-gray-700">
        <span className="mb-0.5 block font-semibold">
          {def.name} <span className="font-normal opacity-70">({kindLabel})</span>
        </span>
        {def.desc}
        <span className="absolute left-3 top-full border-4 border-transparent border-t-gray-900 dark:border-t-gray-700" />
      </span>
    </span>
  );
}

/* ──────────────── 고양이 카드 (정보용) ──────────────── */

function CatCard({
  cat,
  buildings,
  onInvest,
  happinessUnlocked,
}: {
  cat: Cat;
  buildings: Building[];
  onInvest: (catId: string, key: AptitudeKey) => void;
  happinessUnlocked?: boolean;
}) {
  const workplace = buildings.find((b) => b.id === cat.assignedTo);
  const expNeeded = cat.level * 90;
  const cap = BREEDS.find((b) => b.key === cat.breed)?.aptitudeCap ?? 5;

  return (
    <div className="card-nature p-4">
      <span className="card-accent" />
      <div className="mb-1 flex items-center justify-between">
        <span className="font-jua flex items-center gap-1.5 text-[16px] text-[#3f2c14]">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={catSprite(cat.breed, "idle")}
            alt=""
            className="h-7 w-7 object-contain"
          />
          {cat.name}{" "}
          <span className="font-num text-xs text-[#8a7551]">Lv{cat.level}</span>
        </span>
        <span className="text-xs text-[#a3906c]">{cat.breedName}</span>
      </div>

      <div className="bar-track mb-2 h-1.5 w-full">
        <div
          className="bar-fill-amber"
          style={{ width: `${Math.min(100, (cat.exp / expNeeded) * 100)}%` }}
        />
      </div>

      <div className="flex flex-wrap gap-1 text-xs">
        {(Object.keys(APTITUDE_LABEL) as AptitudeKey[])
          .filter((k) => cat.aptitude[k] > 0 || cat.aptitudePoints > 0)
          .map((k) => (
            <span
              key={k}
              className="chip-nature flex items-center gap-0.5 px-1.5 py-0.5 text-[11px]"
            >
              {APTITUDE_LABEL[k]} {cat.aptitude[k]}
              {cat.aptitudePoints > 0 && cat.aptitude[k] < cap && (
                <button
                  onClick={() => onInvest(cat.id, k)}
                  title="적성 포인트 투자"
                  className="ml-0.5 rounded bg-[#5d8f22] px-1 text-[10px] font-bold text-white hover:bg-[#4f8420]"
                >
                  +
                </button>
              )}
            </span>
          ))}
      </div>
      <p className="mt-1 text-xs text-[#6f5c39]">
        💪 근면 {cat.stats.diligence}
        {cat.aptitudePoints > 0 && (
          <span className="ml-2 rounded-full bg-[rgba(214,164,60,.2)] px-2 py-0.5 text-[11px] font-semibold text-[#8a6316]">
            ✨ 적성 포인트 {cat.aptitudePoints}
          </span>
        )}
      </p>

      <div className="mt-2 flex items-center gap-2">
        <div className="bar-track h-2 flex-1">
          <div
            className={cat.status.fullness < 25 ? "bar-fill-red" : "bar-fill-green"}
            style={{ width: `${cat.status.fullness}%` }}
          />
        </div>
        <span className="font-num text-[11px] text-[#8a7a58]">
          🍽️ {Math.floor(cat.status.fullness)} (식욕 {cat.stats.appetite})
        </span>
      </div>
      <div className="mt-1.5 flex items-center gap-2">
        <div className="bar-track h-2 flex-1">
          <div
            className="bar-fill-amber"
            style={{ width: `${(cat.status.energy / cat.stats.stamina) * 100}%` }}
          />
        </div>
        <span className="font-num text-[11px] text-[#8a7a58]">
          ⚡ {Math.floor(cat.status.energy)}/{cat.stats.stamina}
        </span>
      </div>
      {happinessUnlocked && (
      <div className="mt-1.5 flex items-center gap-2">
        <div className="bar-track h-2 flex-1">
          <div
            className={cat.status.happiness < 20 ? "bar-fill-red" : "bar-fill-green"}
            style={{ width: `${cat.status.happiness}%`, background: cat.status.happiness >= 20 ? "linear-gradient(90deg,#e88bb8,#f7b7d4)" : undefined }}
          />
        </div>
        <span className="font-num text-[11px] text-[#8a7a58]">
          💗 {Math.floor(cat.status.happiness)}
        </span>
        {fullnessPenalty(cat) < 1 && (
          <span className="rounded-full bg-[rgba(214,106,74,.16)] px-2 py-0.5 text-[11px] text-[#b0472a]">
            배고픔
          </span>
        )}
      </div>
      )}

      {cat.passives.length > 0 && (
        <div className="mt-2 flex flex-wrap gap-1">
          {cat.passives.map((key) => (
            <PassiveBadge key={key} passiveKey={key} />
          ))}
        </div>
      )}

      <p className="mt-2 text-xs">
        {cat.state === "resting" ? (
          <span className="text-[#8a6316]">💤 지쳐서 휴식 중 (회복되면 복귀)</span>
        ) : cat.state === "striking" ? (
          <span className="text-[#b0472a]">💢 파업 중! 행복도를 올려주세요</span>
        ) : workplace ? (
          <span className="text-[#5c8a2a]">
            {workplace.emoji} {workplace.name}에서 일하는 중
          </span>
        ) : (
          <span className="text-[#a3906c]">쉬는 중</span>
        )}
      </p>
    </div>
  );
}

/* ──────────────── 입양 모달 ──────────────── */

function AdoptModal({
  candidates,
  onPick,
  onClose,
  highlightPick,
  cost,
  onReroll,
  coins,
  rerollUnlocked,
}: {
  candidates: Cat[];
  onPick: (cat: Cat) => void;
  onClose: () => void;
  highlightPick?: boolean;
  cost: number;
  onReroll: () => void;
  coins: number;
  rerollUnlocked?: boolean;
}) {
  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
      onClick={onClose}
    >
      <div
        className="panel-wood max-h-[90vh] w-full max-w-3xl overflow-hidden p-2.5"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="panel-paper max-h-[calc(90vh-20px)] overflow-y-auto p-5">
        <div className="mb-4 flex items-center justify-between">
          <h2 className="font-jua text-xl text-[#4a3418]">
            😻 입양할 고양이를 선택하세요{" "}
            <span className="font-num text-sm text-[#8a6316]">
              {cost > 0 ? `(비용 🪙${cost})` : "(무료!)"}
            </span>
          </h2>
          <button
            onClick={onClose}
            className="grid h-8 w-8 place-items-center rounded-full bg-linear-to-b from-[#e8d6ae] to-[#cdb488] text-sm text-[#6b4a20] shadow hover:brightness-105"
          >
            ✕
          </button>
        </div>
        <div className="grid gap-4 sm:grid-cols-3">
          {candidates.map((cat) => {
            const breed = BREEDS.find((b) => b.key === cat.breed);
            const aptitudes = (Object.keys(APTITUDE_LABEL) as AptitudeKey[]).filter(
              (k) => cat.aptitude[k] > 0,
            );
            return (
              <div
                key={cat.id}
                className="card-nature flex flex-col p-4"
              >
                <div className="mb-2 text-center">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={catSprite(cat.breed, "idle")}
                    alt={cat.name}
                    className="mx-auto h-20 w-auto object-contain drop-shadow-sm"
                  />
                  <div className="font-jua mt-1 text-[17px] text-[#3f2c14]">{cat.name}</div>
                  <div className="text-xs text-[#a3906c]">
                    {cat.breedName}{" "}
                    <span className="text-amber-400">
                      {"★".repeat(breed?.rarity ?? 1)}
                    </span>
                  </div>
                </div>

                <div className="chip-nature mb-2 px-3 py-2 text-xs leading-relaxed">
                  💪 근면 {cat.stats.diligence} · ❤️ 체력 {cat.stats.stamina} · 🍽️
                  식욕 {cat.stats.appetite}
                </div>

                <div className="mb-2 flex flex-wrap gap-1">
                  {aptitudes.length > 0 ? (
                    aptitudes.map((k) => (
                      <span
                        key={k}
                        className="chip-nature px-1.5 py-0.5 text-[11px]"
                      >
                        {APTITUDE_LABEL[k]} {cat.aptitude[k]}
                      </span>
                    ))
                  ) : (
                    <span className="text-[11px] text-[#a3906c]">적성 없음…</span>
                  )}
                </div>

                <div className="mb-3 flex min-h-6 flex-wrap gap-1">
                  {cat.passives.length > 0 ? (
                    cat.passives.map((key) => <PassiveBadge key={key} passiveKey={key} />)
                  ) : (
                    <span className="text-[11px] text-[#a3906c]">패시브 없음</span>
                  )}
                </div>

                <button
                  onClick={() => onPick(cat)}
                  className={"nature-btn mt-auto py-2 text-sm" + (highlightPick ? " tut-highlight" : "")}
                >
                  이 아이로 할래요{cost > 0 ? ` (🪙${cost})` : ""}
                </button>
              </div>
            );
          })}
        </div>
        {rerollUnlocked && (
          <div className="mt-4 flex items-center justify-center gap-3">
            <button
              onClick={onReroll}
              disabled={coins < REROLL_COST}
              className="wood-plank px-4 py-1.5 text-xs hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-40"
            >
              🎲 다른 아이들 보기 (🪙{REROLL_COST})
            </button>
          </div>
        )}
        <p className="mt-3 text-center text-xs text-[#8a7551]">
          한 마리만 선택할 수 있어요 · 패시브에 마우스를 올리면 상세 정보가 보입니다
        </p>
        </div>
      </div>
    </div>
  );
}