'use client';

import { useEffect, useState } from 'react';
import { clinicScopeReady, useAuthStore, visibleClinics } from '@/stores/auth-store';
import { AssistantWidget } from '@/components/assistant/assistant-widget';
import { SupervisorHeader } from './supervisor-header';
import { BatchTracking } from './batch-tracking';
import { TeamStatus } from './team-status';
import { NewBatchPanel } from './new-batch';
import { useAssistantStore } from '@/stores/assistant-store';

/**
 * 主管工作台 —— 左「分一批新的 ＋ 我分的批次」/ 右「团队现在什么状态」。
 *
 * ⚠️ 设计稿是 1440×1000 的固定框，这里做**自适应**（2026-08-07 产品定，与现有页面一致）：
 *   右栏固定 34rem、左栏吃剩下的；<1280px 时右栏落到下面（⛔ 别横向滚 ——
 *   这页会嵌在宿主 iframe 里，横条比换行难受得多）。
 *   ⚠️ 34rem 比设计稿的 470px 宽 —— 那个宽度装不下退回率的两个分母（见下方注释）。
 *
 * ⚠️ 诊所是这一屏**所有查询的前提**（批次、团队都按诊所）。没有诊所就什么都不查，
 *   ⛔ 别用「全部诊所」兜底：那会把别家的负载混进来，而主管管的是自己这一家。
 */
export function SupervisorWorkbench() {
  const user = useAuthStore((s) => s.user);
  const clinics = visibleClinics(user);
  const [clinicId, setClinicId] = useState<string | null>(null);
  /**
   * ⭐ 把"当前看的是哪家诊所"同步给助手 —— 它随每次 chat 请求发给服务端,
   *   当作 `propose_assignment` 的诊所兜底。⛔ 别指望模型从对话里推出来:
   *   移交那句话里根本没有诊所（见 assistant-store 的 activeClinicId 注释）。
   */
  useEffect(() => {
    useAssistantStore.getState().setActiveClinicId(clinicId);
  }, [clinicId]);

  /**
   * 默认落到第一个可见诊所。
   *
   * 🔴 **必须等 `/auth/session` 回来**（`clinicScopeReady`），⛔ 不能一挂载就锁。
   *   2026-08-10 测试机实测：第一帧 `user.clinicIds` 还是 undefined，
   *   `visibleClinics` 回落到「字典里的全部诊所」，于是锁了第一个「杭州大厦」，
   *   **带着别家诊所 id 真的发出了一次 `/workload`** —— 而那时服务端还没有越权闸，
   *   那一发把别家 26 位客服的姓名与负载取了回来。
   *   session 回来后这里自己纠正成朝阳公园，所以肉眼只看见"发了两个请求"。
   *
   * 🔴 **同时必须校验"当前选的还在不在列表里"**（2026-08-07 先踩的那一半）：
   *   否则纠正不会发生 —— 界面表现是头部显示「选择诊所」，
   *   左边批次是自己的、右边团队是别家的人，**两栏对不上却都不报错**。
   * ⚠️ 只在"不在列表里"时才纠正 —— 用户手动切过的选择不能被后续 render 冲掉。
   * ⚠️ 服务端 `resolveClinicId` 是独立的第二层闸，⛔ 别因为这里等了就把它省掉。
   */
  const scopeReady = clinicScopeReady(user);
  useEffect(() => {
    if (!scopeReady || clinics.length === 0) return;
    if (clinicId != null && clinics.some((c) => c.id === clinicId)) return;
    setClinicId(clinics[0]!.id);
  }, [scopeReady, clinics, clinicId]);

  return (
    <div className="flex h-screen flex-col overflow-hidden bg-slate-50">
      <SupervisorHeader clinicId={clinicId} onClinicChange={setClinicId} />

      <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-auto p-3 xl:flex-row xl:overflow-hidden xl:p-4">
        {/**
         * 左栏是**上下结构**（2026-08-11 产品定）：上面挑格子分人，下面看这些格子
         * 分出去之后跑成什么样 —— 那是同一件事的**前后两段**，摞在一起才读得出因果。
         * 右边的团队状态是**另一个维度**（按人看而不是按批看），所以跟这一整栏并排。
         * ⛔ 别把矩阵挪到右栏或收回浮层：一收，上下这条因果链就断了。
         */}
        <div className="flex min-w-0 flex-1 flex-col gap-3 xl:min-h-0">
          {/* ⚠️ `flex-none`：矩阵是固定 8 行的东西，高度由内容定；
              剩下的竖直空间全给批次列表（它才是要滚的那个）。 */}
          <section className="flex-none">
            <NewBatchPanel clinicId={clinicId} />
          </section>
          <section className="flex min-h-[26rem] min-w-0 flex-1 xl:min-h-0">
            <BatchTracking clinicId={clinicId} />
          </section>
        </div>
        {/* ⚠️ 470px（设计稿宽度）装不下「退回率」那一列:
            百分比下面还有「退回 3 / 已处置 3 = 100.0%,另有 65 条没动」——
            两个分母都得给（那是定死的口径），整行就被切掉右半截（实测）。
            ⇒ 放宽到 34rem;⛔ 别为了塞进 470 去砍分母。 */}
        <section className="flex min-h-[24rem] flex-none xl:min-h-0 xl:w-[34rem]">
          <TeamStatus clinicId={clinicId} />
        </section>
      </div>

      {/* 🔴 助手必须挂在这一页上 —— 挑完格子走 `handoff()`，落点就是它。
          ⚠️ 它原本只挂在 `plans/layout`；工作台是**另一条路由**（T16 已改写），
          ⛔ 不挂的话点完格子什么都不会发生，而且不报任何错。 */}
      <AssistantWidget />
    </div>
  );
}
