/**
 * ClinicWorkspacePage — `/clinics/:clinicId`
 *
 * 계약된 병원 유저의 메인 워크스페이스.
 *  - 탭 [분석] [설정] 두 개로 단순화.
 *  - 분석 탭에서 각 카드 = 하나의 분석 run + 연결된 플랜.
 *    카드 본문 클릭은 리포트 페이지로 이동, 옆 버튼으로 플랜 진입.
 *
 * 비주얼: ReportHeader / ReportBody(SectionWrapper) 와 동일 톤.
 */
import { useMemo, useRef } from 'react';
import { useParams, useSearchParams } from 'react-router';
import { FileSearch, Settings as SettingsIcon } from 'lucide-react';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/shared/ui/tabs';
import { WorkspaceHeader } from '../components/WorkspaceHeader';
import { AnalysisTab } from '../components/tabs/AnalysisTab';
import { SettingsTab } from '../components/tabs/SettingsTab';
import { useClinicWorkspace } from '../hooks/useClinicWorkspace';
import { PageContainer } from '@/shared/ui/page-container';

const VALID_TABS = ['analysis', 'settings'] as const;
type TabKey = (typeof VALID_TABS)[number];

function isTabKey(value: string | null): value is TabKey {
  return value !== null && (VALID_TABS as readonly string[]).includes(value);
}

export default function ClinicWorkspacePage() {
  const { clinicId } = useParams<{ clinicId: string }>();
  const [searchParams, setSearchParams] = useSearchParams();
  const requested = searchParams.get('tab');
  const activeTab: TabKey = isTabKey(requested) ? requested : 'analysis';

  const { data, isLoading, error } = useClinicWorkspace(clinicId);

  const sortedRuns = useMemo(
    () =>
      data
        ? [...data.runs].sort(
            (a, b) => new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime(),
          )
        : [],
    [data],
  );
  const latestRun = sortedRuns[0];
  const previousRun = sortedRuns[1];

  // 탭 클릭 시 탭 스트립이 viewport 상단(Navbar 바로 아래)으로 오도록 점프.
  //  - sticky 자체에 scrollIntoView 는 동작 X (브라우저가 stuck 위치를 "이미 정확"으로 인식)
  //  - shadcn Tabs 는 forwardRef X — 일반 div wrapper 에 ref 부착해야 함
  //  - <ScrollRestoration /> 이 navigation 시 scroll 을 0 으로 리셋하므로
  //    `preventScrollReset: true` 로 차단 후 직접 scrollTo
  const tabWrapperRef = useRef<HTMLDivElement>(null);

  const handleTabChange = (next: string) => {
    if (!isTabKey(next)) return;
    const params = new URLSearchParams(searchParams);
    if (next === 'analysis') {
      params.delete('tab');
    } else {
      params.set('tab', next);
    }
    setSearchParams(params, { replace: true, preventScrollReset: true });

    if (!tabWrapperRef.current) return;
    // Navbar 높이를 실측 — h-20 변경 시 자동 대응
    const navbar = document.querySelector('nav');
    const navbarHeight = navbar instanceof HTMLElement ? navbar.offsetHeight : 80;
    const y =
      tabWrapperRef.current.getBoundingClientRect().top + window.scrollY - navbarHeight;
    window.scrollTo({ top: y, behavior: 'auto' });
  };

  if (isLoading) {
    return (
      <div className="pt-20 min-h-screen flex items-center justify-center">
        <div className="flex flex-col items-center gap-4">
          <div className="w-10 h-10 border-4 border-[#6C5CE7] border-t-transparent rounded-full animate-spin" />
          <p className="text-slate-500 text-sm">워크스페이스를 불러오는 중...</p>
        </div>
      </div>
    );
  }

  if (error || !data) {
    return (
      <div className="pt-20 min-h-screen flex items-center justify-center">
        <div className="text-center">
          <p className="text-[#7C3A4B] font-medium mb-2">오류가 발생했습니다</p>
          <p className="text-slate-500 text-sm">{error ?? '워크스페이스 데이터를 찾을 수 없습니다.'}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="pt-20 flex-1 flex flex-col">
      <WorkspaceHeader
        clinic={data.clinic}
        latestRun={latestRun}
        previousRun={previousRun}
      />

      {/* hero 아래 본문 영역 — 흰 배경이 footer까지 자연스럽게 이어지도록 */}
      {/* tabWrapperRef 는 ref-forwarding 되지 않는 Tabs 대신 일반 div 에 부착 */}
      <div ref={tabWrapperRef} className="flex-1 flex flex-col bg-white">
        <Tabs
          value={activeTab}
          onValueChange={handleTabChange}
          className="w-full flex-1"
        >
          {/* 탭 스트립 — sticky. 점프는 tabWrapperRef(non-sticky Tabs root) 기준 */}
          <div className="sticky top-20 z-30 bg-white/95 backdrop-blur-md border-b border-slate-100">
            <PageContainer>
              <TabsList
                variant="line"
                className="h-auto w-full justify-start gap-1 bg-transparent p-0"
              >
                <TabsTrigger
                  value="analysis"
                  className="px-5 py-4 text-sm font-medium data-[state=active]:text-brand-purple data-[state=active]:after:bg-brand-purple"
                >
                  <FileSearch size={15} />
                  분석
                  <span className="ml-1 text-[10px] font-semibold text-slate-400 group-data-[state=active]/tabs-trigger:text-brand-purple/80">
                    {data.runs.length}
                  </span>
                </TabsTrigger>
                <TabsTrigger
                  value="settings"
                  className="px-5 py-4 text-sm font-medium data-[state=active]:text-brand-purple data-[state=active]:after:bg-brand-purple"
                >
                  <SettingsIcon size={15} />
                  설정
                </TabsTrigger>
              </TabsList>
            </PageContainer>
          </div>

          {/* 탭 패널 */}
          <TabsContent value="analysis">
            <AnalysisTab
              clinicId={data.clinic.clinicId}
              runs={data.runs}
              plans={data.plans}
            />
          </TabsContent>
          <TabsContent value="settings">
            <SettingsTab clinic={data.clinic} />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}
