'use client';

import { useState } from 'react';
import { useSelectedLayoutSegment } from 'next/navigation';
import { Users, X } from 'lucide-react';
import { cn } from '@/lib/utils';
import { PatientPickerRail } from '@/components/plans/patient-picker-rail';

/** 详情 TopBar 经 portal 渲到这个槽 → header 延伸到最左(在左栏之上)。 */
export const PLAN_WORKSPACE_HEADER_SLOT = 'plan-workspace-header';

/**
 * /plans 段布局 — 详情页"一页式工作台"骨架(上下大布局):
 *   ┌ header(详情 TopBar portal 到此,全宽延伸到最左)┐
 *   ├ 左栏选患者列 300px │ 详情内容(原三列)          ┤
 * 布局挂在动态段之上 → 切患者只重渲染右侧,左栏筛选/分页/滚动全保留。
 * 响应式:<lg(1024)左栏收成抽屉(单实例 CSS 平移,状态不丢)+ 左缘竖把手"选患者"作明确点击点;
 * 选中患者后自动收起。/plans 列表页(无 planId 段)不渲染本骨架。
 */
export default function PlansLayout({ children }: { children: React.ReactNode }) {
  const planId = useSelectedLayoutSegment();
  const [railOpen, setRailOpen] = useState(false);

  if (!planId) return <>{children}</>;

  return (
    <div className="flex h-screen flex-col overflow-hidden bg-slate-50">
      {/* header 槽:PlanDetailApp 的 TopBar createPortal 进来(全宽) */}
      <div id={PLAN_WORKSPACE_HEADER_SLOT} className="flex-none" />
      <div className="relative flex min-h-0 flex-1">
        {/* 小屏遮罩 */}
        {railOpen && (
          <div className="fixed inset-0 z-40 bg-black/30 lg:hidden" onClick={() => setRailOpen(false)} />
        )}
        {/* 左栏:xl+ 常驻在流内;<xl 固定抽屉(CSS 平移,单实例不重挂 → 状态保留) */}
        <div
          className={cn(
            'z-50 h-full transition-transform duration-200',
            'fixed inset-y-0 left-0 shadow-xl lg:static lg:inset-auto lg:translate-x-0 lg:shadow-none',
            railOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
          )}
        >
          {/* 小屏抽屉内关闭钮 */}
          {railOpen && (
            <button
              type="button"
              onClick={() => setRailOpen(false)}
              className="absolute -right-9 top-3 z-50 rounded-full bg-white p-1.5 text-slate-500 shadow-md ring-1 ring-slate-200 lg:hidden"
              title="收起"
            >
              <X className="h-4 w-4" />
            </button>
          )}
          <PatientPickerRail currentPlanId={planId} onNavigated={() => setRailOpen(false)} />
        </div>
        {/* 小屏点击点:左缘竖把手 */}
        {!railOpen && (
          <button
            type="button"
            onClick={() => setRailOpen(true)}
            className="fixed left-0 top-1/2 z-50 -translate-y-1/2 rounded-r-lg bg-teal-600 px-1.5 py-3 text-white shadow-lg hover:bg-teal-700 lg:hidden"
            title="打开患者列表"
          >
            <span className="flex flex-col items-center gap-1">
              <Users className="h-4 w-4" />
              <span className="text-[10px] leading-tight [writing-mode:vertical-rl]">选患者</span>
            </span>
          </button>
        )}
        <div className="min-h-0 min-w-0 flex-1">{children}</div>
      </div>
    </div>
  );
}
