'use client';

import { useState } from 'react';
import { Bot } from 'lucide-react';
import { Permission } from '@pac/types';
import { cn } from '@/lib/utils';
import { useHasPermission } from '@/hooks/use-permission';
import { usePlanSyncStore } from '@/stores/plan-sync-store';
import { AssistantChat } from './assistant-chat';

/**
 * AssistantWidget — 详情页右下角吸附助手(与 /assistant 同一能力,复用 AssistantChat)。
 *
 * 收起 = 右下角圆形悬浮钮;展开 = 400×~75vh 吸附小窗。
 * 关键:收起用 CSS 隐藏而非卸载 → 对话/工具步骤/听写状态全保留;
 * 挂在 plans/layout(路由段之上)→ 切患者对话也不丢。
 * 权限同 /assistant 页(AGENT_INVOKE),无权限不渲染。
 */
export function AssistantWidget() {
  const allowed = useHasPermission(Permission.AGENT_INVOKE);
  const [open, setOpen] = useState(false);
  // 场景化开场建议(规则,非 AI):有当前患者 → 围绕该患者;否则兜底通用
  const current = usePlanSyncStore((s) => s.current);
  const examples = current?.patientName
    ? [
        `${current.patientName}为什么被召回?帮我捋一下关键事实`,
        `查一下${current.patientName}的画像和潜在治疗`,
        `这通电话怎么开口比较好?给我两句开场`,
      ]
    : ['现在召回池里优先级最高的是谁?', '帮我准备一下今天要跟进的召回工作'];

  if (!allowed) return null;

  return (
    <>
      {/* 吸附窗:常驻挂载,关着时 invisible(状态不丢) */}
      <div
        className={cn(
          'fixed bottom-4 right-4 z-40 flex flex-col overflow-hidden rounded-xl border border-slate-200 shadow-2xl',
          'h-[620px] max-h-[78vh] w-[400px] max-w-[calc(100vw-2rem)]',
          'transition-[opacity,transform] duration-150',
          open ? 'translate-y-0 opacity-100' : 'pointer-events-none invisible translate-y-2 opacity-0',
        )}
      >
        <AssistantChat variant="widget" onClose={() => setOpen(false)} examples={examples} />
      </div>
      {/* 悬浮开关钮 */}
      {!open && (
        <button
          type="button"
          onClick={() => setOpen(true)}
          title="打开助手"
          className="fixed bottom-4 right-4 z-40 inline-flex h-12 w-12 items-center justify-center rounded-full bg-teal-600 text-white shadow-lg transition-transform hover:scale-105 hover:bg-teal-700"
        >
          <Bot className="h-5 w-5" />
        </button>
      )}
    </>
  );
}
