'use client';

import { useState } from 'react';
import { emitPetEvent } from '@/lib/pet-events';
import { usePlanSyncStore } from '@/stores/plan-sync-store';
import { PetBody, type PetBodyPose } from '@/components/pet/pet-body';
import { PetFab } from '@/components/pet/pet-widget';

const POSES: PetBodyPose[] = ['idle', 'think', 'celebrate', 'sleep', 'walk', 'fall', 'sit', 'happy', 'brush', 'rinse', 'floss', 'shine', 'chomp', 'fly', 'vet_exam', 'vet_scale', 'vet_fill', 'vet_polish', 'vet_fluoride', 'absorb', 'climb', 'magnify'];

/**
 * 宠物实验室(dev 调试页,无需登录)— 上:各姿态静态陈列(直接喂 PetBody);
 * 真·PetFab(带大脑 + 运动层)在页面里自由活动:拖起有重力、空闲散步、
 * 可跳上下方的 data-pet-perch 栖息台。按钮模拟感知事件,验证 FSM 流转。
 * 不进生产导航,仅供调动画/调行为时手动访问 /pet-lab。
 */
export default function PetLabPage() {
  const [glance, setGlance] = useState(0);

  return (
    <div className="min-h-screen bg-slate-50 p-8">
      <h1 className="mb-6 text-lg font-semibold text-slate-700">宠物实验室 /pet-lab</h1>

      {/* 姿态卡片本身也是栖息点(data-pet-perch):宠物会跳到卡片上边框蹲着 */}
      <section className="mb-8 flex flex-wrap gap-6">
        {POSES.map((p) => (
          <figure
            key={p}
            data-pet-perch
            className="flex flex-col items-center gap-2 rounded-xl border bg-white p-4 shadow-sm"
          >
            <PetBody pose={p} glanceSeq={p === 'idle' ? glance : 0} size={96} />
            <figcaption className="text-xs text-slate-500">{p}</figcaption>
          </figure>
        ))}
        {/* 涂氟护盾(与姿态正交的 buff,叠在 idle 上展示) */}
        <figure
          data-pet-perch
          className="flex flex-col items-center gap-2 rounded-xl border bg-white p-4 shadow-sm"
        >
          <PetBody pose="idle" glanceSeq={0} shield size={96} />
          <figcaption className="text-xs text-slate-500">shield(涂氟护盾)</figcaption>
        </figure>
      </section>

      <section className="flex flex-wrap gap-2">
        <LabBtn label="张望一下" onClick={() => setGlance((g) => g + 1)} />
        <LabBtn label="AI 开始思考" onClick={() => emitPetEvent({ type: 'ai_thinking_start' })} />
        <LabBtn label="AI 结束" onClick={() => emitPetEvent({ type: 'ai_thinking_end' })} />
        <LabBtn
          label="模拟成约(庆祝)"
          onClick={() => {
            const s = usePlanSyncStore.getState();
            s.setCurrent({ planId: `lab-${Date.now()}`, patientId: 'lab-patient', patientName: '测试患者' });
            s.notify('lab-plan', 'completed');
          }}
        />
        <LabBtn
          label="模拟切患者(打招呼)"
          onClick={() =>
            usePlanSyncStore
              .getState()
              .setCurrent({ planId: `lab-${Date.now()}`, patientId: 'lab-patient', patientName: '王小明' })
          }
        />
        <LabBtn
          label="去栖息(跳上卡片/台子)"
          onClick={() => window.dispatchEvent(new CustomEvent('pac-pet-debug', { detail: { cmd: 'perch' } }))}
        />
        <LabBtn
          label="随便散步"
          onClick={() => window.dispatchEvent(new CustomEvent('pac-pet-debug', { detail: { cmd: 'stroll' } }))}
        />
        <LabBtn
          label="刷牙刷字(需先坐上卡片)"
          onClick={() => window.dispatchEvent(new CustomEvent('pac-pet-debug', { detail: { cmd: 'brush' } }))}
        />
        <LabBtn
          label="套绳荡飞(鼠标停高处=套鼠标)"
          onClick={() => window.dispatchEvent(new CustomEvent('pac-pet-debug', { detail: { cmd: 'swing' } }))}
        />
        <LabBtn
          label="放一只蛀牙菌 🦠"
          onClick={() => window.dispatchEvent(new CustomEvent('pac-pet-debug', { detail: { cmd: 'germ' } }))}
        />
        <LabBtn
          label="超人模式 🦸(强制)"
          onClick={() => window.dispatchEvent(new CustomEvent('pac-pet-debug', { detail: { cmd: 'germ-super' } }))}
        />
        <LabBtn
          label="牙医组合 🦷(检查→治疗→处置)"
          onClick={() => window.dispatchEvent(new CustomEvent('pac-pet-debug', { detail: { cmd: 'vet' } }))}
        />
        <LabBtn
          label="爬下楼 🧗(需先坐上卡片)"
          onClick={() => window.dispatchEvent(new CustomEvent('pac-pet-debug', { detail: { cmd: 'climb' } }))}
        />
        <LabBtn
          label="说句话 💬(LLM,需登录态)"
          onClick={() => window.dispatchEvent(new CustomEvent('pac-pet-debug', { detail: { cmd: 'say' } }))}
        />
      </section>

      <p className="mt-4 text-xs text-slate-400">
        真 PetFab 在页面里自由活动:拖起松手会摔到底边(落地压扁);静置 25-40s 它会自己散步,
        有概率跳上下面的栖息台(蹲够了走到台边踩空摔下);90s 无操作打盹;AI 思考中若助手窗开着会走过去蹲守。
        <br />
        鼠标互动:悬停它身上一会 = 摸摸(眯眼笑冒爱心);鼠标快速从它身边掠过 = 吓一跳蹦开;
        鼠标在它附近慢慢停留几秒 = 好奇凑过来看你;拖着甩出去 = 带惯性抛飞、撞墙反弹。
        坐上卡片 8-18 秒后会自己掏牙刷把脚下"刷出泡沫",刷完闪✨再鼓腮漱口吐泡泡(也可用按钮立即触发)。
        下落/抛飞/荡飞途中穿过任何带边框元素的顶边都会被接住落在上面;划选一段文字,它会走到选区正下方围观。
        把鼠标停在它头顶高处不动 25s+,它有概率甩绳子套住你的光标荡秋千 —— 荡的时候绳子一端永远钉在鼠标上
        (移动鼠标整条摆跟着走),此时不撞墙;荡够松手才变抛飞,这时才撞墙/被边框接住。
        爱牙时间:每隔约 1-2 分钟可能刷出一只蛀牙菌(地板底边,或骑在某个边框上)——它会追着打,菌被追急了会逃,
        在地板就走过去敲、在边框就纵身一跃去敲(不会卡在中间楼层),爆成星星然后庆祝;追不上就让它溜了。
        隐藏 10%:进入超人模式 🦸 —— 先原地变身(披风展开+金色光环蓄力)再直线飞过去秒掉它(lab 可强制)。它还会不定期冒护牙小贴士。
        牙医组合 🦷:闲时小概率化身牙医跑一套诊疗 —— 检查 → 概率(洗牙/补牙/收工)→ 概率(抛光/涂氟拿护盾/收工)→ 收尾;每次流程随机长短,
        中途拖它/出蛀虫就丢下工具去忙别的(lab 可一键触发)。
        闲时小动作轮盘:张望 / 牙线自理 / 闪亮微笑 / 咬合操,隔 7-16 秒随机出一个;
        完成"刷牙→闪亮→漱口"全套仪式后获得 12 秒涂氟护盾(青色光罩)。
      </p>

      {/* 栖息台:离地 ~120px,在可跳高度内(data-pet-perch 机制演示) */}
      <div
        data-pet-perch
        className="fixed bottom-[120px] left-1/2 h-3 w-56 -translate-x-1/2 rounded-full bg-brand-100 shadow-inner"
        title="栖息台(data-pet-perch)"
      />

      {/* 真 FAB(带大脑 + 运动层) */}
      <PetFab open={false} onToggle={() => console.log('[pet-lab] fab clicked')} watchRect={null} />
    </div>
  );
}

function LabBtn({ label, onClick }: { label: string; onClick: () => void }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="rounded-lg border bg-white px-3 py-1.5 text-sm text-slate-700 shadow-sm hover:bg-slate-50"
    >
      {label}
    </button>
  );
}
