'use client';

import Link from 'next/link';
import { ArrowUpRight, Building2, Check, ChevronDown } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { IdentityCluster } from '@/components/identity-cluster';
import { isEmbedded } from '@/lib/embed';
import { useAuthStore, visibleClinics } from '@/stores/auth-store';
import { cn } from '@/lib/utils';

/**
 * 主管工作台的头部 —— 沿用 PAC 现有头部的骨架，但**换成主管性质**（2026-08-07 设计稿）。
 *
 * ── 与客服执行页那个 header 的差别（都是刻意的）────────────────────
 * 去掉：场景 chip / 刷新 / 预约 / 「还剩 N 天退回」
 *   —— 那四件都是**单条任务**的东西，主管这一屏根本没有"当前这条"。
 * 加上：**诊所切换** + 「客服执行页 ↗」
 *   —— 前者是主管才有的视角（他管的是一个诊所而不是一条单）；
 *      后者是两个页面分家之后的**回去的路**，⛔ 不能只出不进。
 *
 * ⚠️ 嵌入宿主（iframe）时整栏隐藏 —— 与现有 header 同一条规矩：宿主自有品牌与导航。
 */
export function SupervisorHeader({
  clinicId,
  onClinicChange,
}: {
  clinicId: string | null;
  onClinicChange: (id: string) => void;
}) {
  const user = useAuthStore((s) => s.user);
  const clinics = visibleClinics(user);
  const [open, setOpen] = useState(false);
  const boxRef = useRef<HTMLDivElement>(null);

  // 点外面收起 —— 下拉挂在 header 上，不收起会挡住下面的表
  useEffect(() => {
    if (!open) return;
    const onDown = (e: MouseEvent) => {
      if (!boxRef.current?.contains(e.target as Node)) setOpen(false);
    };
    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && setOpen(false);
    document.addEventListener('mousedown', onDown);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDown);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

  /**
   * 🔴 嵌入宿主时**只隐藏品牌与标题,⛔ 不隐藏整栏**（2026-08-10 产品：
   *   「标题栏不要全部隐藏，学一下客服工作台，保持一致」）。
   *
   * ⚠️ 与执行页那个 header **同一条规矩**（见 plan-detail-app 的 `embedded`）：
   *   宿主已经提供了自己的品牌与导航，重复的是 `PAC` 徽标 + 「疗效保障 / 主管工作台」；
   *   而**功能区**（诊所切换、回执行页）宿主没有,整栏藏掉等于把它们一起弄丢 ——
   *   嵌入态下主管就再也回不到执行页了（那正是刚补上的那条路）。
   * ⚠️ 身份三件套不用在这里判：`IdentityCluster` 自己会在嵌入态隐藏。
   */
  const embedded = isEmbedded();

  const current = clinics.find((c) => c.id === clinicId);

  return (
    <header className="flex h-12 flex-none items-center gap-2.5 border-b border-slate-100 bg-white px-3 sm:px-4">
      {!embedded && (
        <>
          <span className="inline-flex h-7 w-7 flex-none items-center justify-center rounded-md bg-brand-600 text-[12px] font-bold text-white">
            PAC
          </span>
          {/* 面包屑与执行页同构（疗效保障 / X）——⛔ 别只写「主管工作台」：
              两个页面同属一个产品，面包屑一致才看得出是同一套东西的两面 */}
          <span className="hidden lg:inline text-[13px] font-semibold text-slate-900">疗效保障</span>
          <span className="hidden lg:inline text-slate-300">/</span>
          <h1 className="flex-none text-[14px] font-semibold text-slate-900">主管工作台</h1>
        </>
      )}

      {/* 诊所切换 —— 只有一个诊所时**不给下拉**（点开只有一项是噪音），直接显示名字 */}
      {clinics.length > 0 && (
        <div ref={boxRef} className="relative flex-none">
          <button
            type="button"
            disabled={clinics.length < 2}
            onClick={() => setOpen((v) => !v)}
            className={cn(
              'inline-flex h-7 items-center gap-1.5 rounded-md border border-slate-100 px-2 text-[12px] text-slate-600',
              clinics.length > 1 && 'hover:bg-slate-50',
            )}
          >
            <Building2 className="h-3.5 w-3.5 flex-none text-slate-400" />
            <span className="max-w-[10rem] truncate">{current?.name ?? '选择诊所'}</span>
            {clinics.length > 1 && <ChevronDown className="h-3 w-3 flex-none text-slate-300" />}
          </button>
          {open && (
            <div className="absolute left-0 top-8 z-30 max-h-72 w-56 overflow-auto rounded-lg border border-slate-100 bg-white py-1 shadow-lg">
              {clinics.map((c) => (
                <button
                  key={c.id}
                  type="button"
                  onClick={() => {
                    onClinicChange(c.id);
                    setOpen(false);
                  }}
                  className="flex w-full items-center gap-2 px-2.5 py-1.5 text-left text-[12.5px] text-slate-700 hover:bg-brand-50"
                >
                  <Check
                    className={cn(
                      'h-3.5 w-3.5 flex-none',
                      c.id === clinicId ? 'text-brand-600' : 'text-transparent',
                    )}
                  />
                  <span className="truncate">{c.name}</span>
                </button>
              ))}
            </div>
          )}
        </div>
      )}

      <div className="ml-auto flex items-center gap-2.5">
        {/* 🔴 回执行页的路 —— 分家之后**必须双向**。
            主管本人也要打电话（T16 那半句仍然成立），只是不在这一屏做。
            ⚠️ `?exec=1` 不能省：`/plans` 的落地规则会把主管弹回工作台，
              不带这个开关，这个链接点了就是**没反应**（实测踩过）。 */}
        <Link
          href="/plans?exec=1"
          className="hidden sm:inline-flex items-center gap-1 text-[12.5px] text-brand-700 hover:underline"
        >
          客服执行页
          <ArrowUpRight className="h-3.5 w-3.5" />
        </Link>
        {/* ⚠️ 分隔线跟着身份三件套走 —— 嵌入态 IdentityCluster 返 null,
            不一起藏就剩一条悬空的竖线 */}
        {!embedded && <span className="hidden sm:block h-4 w-px bg-slate-100" />}
        <IdentityCluster />
      </div>
    </header>
  );
}
