OpenFlare/frontend/app/(main)/nodes/components/node-detail-shell.tsx

'use client';

import Link from 'next/link';
import {usePathname, useRouter, useSearchParams} from 'next/navigation';
import {type ReactNode, useCallback, useMemo} from 'react';
import type {LucideIcon} from 'lucide-react';
import {ArrowLeft} from 'lucide-react';

import {Button} from '@/components/ui/button';
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs';
import {cn} from '@/lib/utils';

import {NodeKpiCard} from './node-detail-primitives';
import {NodeStatusBadge} from './node-status-badge';
import type {StatusTone} from './node-utils';

export type NodeDetailTabId = 'overview' | 'dashboard' | 'manage';

export type NodeDetailTabConfig = {
  id: NodeDetailTabId;
  label: string;
  icon?: LucideIcon;
};

export type NodeDetailKpi = {
  label: string;
  value: ReactNode;
  icon?: LucideIcon;
};

const TAB_CONFIGS: NodeDetailTabConfig[] = [
  {
    id: 'overview',
    label: '概览',
  },
  {
    id: 'dashboard',
    label: '数据看板',
  },
  {
    id: 'manage',
    label: '配置与部署',
  },
];

function isValidTab(value: string | null): value is NodeDetailTabId {
  return value === 'overview' || value === 'dashboard' || value === 'manage';
}

export function NodeDetailShell({
  title,
  typeLabel,
  typeTone = 'info',
  statusBadges,
  actions,
  kpis,
  overview,
  dashboard,
  manage,
  defaultTab = 'overview',
}: {
  title: string;
  typeLabel: string;
  typeTone?: StatusTone;
  statusBadges: Array<{ label: string; tone: StatusTone }>;
  actions: ReactNode;
  kpis: NodeDetailKpi[];
  overview: ReactNode;
  dashboard: ReactNode;
  manage: ReactNode;
  defaultTab?: NodeDetailTabId;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const activeTab = useMemo(() => {
    const tab = searchParams.get('tab');
    return isValidTab(tab) ? tab : defaultTab;
  }, [defaultTab, searchParams]);

  const setActiveTab = useCallback(
    (tab: NodeDetailTabId) => {
      const params = new URLSearchParams(searchParams.toString());
      params.set('tab', tab);
      router.replace(`${pathname}?${params.toString()}`, { scroll: false });
    },
    [pathname, router, searchParams],
  );

  return (
    <div className="py-6 px-1 space-y-6">
      <section className="overflow-hidden rounded-2xl border bg-gradient-to-br from-card via-card to-muted/30">
        <div className="flex flex-col gap-5 p-5 md:p-6">
          <div className="flex flex-wrap items-start justify-between gap-4">
            <div className="flex min-w-0 items-start gap-3">
              <Button variant="ghost" size="sm" className="mt-0.5 h-8 w-8 shrink-0 p-0" asChild>
                <Link href="/nodes" aria-label="返回节点列表">
                  <ArrowLeft className="size-4" />
                </Link>
              </Button>

              <div className="min-w-0 space-y-2">
                <div className="flex flex-wrap items-center gap-2">
                  <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
                  <NodeStatusBadge label={typeLabel} tone={typeTone} />
                </div>
                <div className="flex flex-wrap items-center gap-2">
                  {statusBadges.map((badge) => (
                    <NodeStatusBadge
                      key={badge.label}
                      label={badge.label}
                      tone={badge.tone}
                    />
                  ))}
                </div>
              </div>
            </div>

            <div className="flex flex-wrap items-center gap-2">{actions}</div>
          </div>

          {kpis.length > 0 ? (
            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
              {kpis.map((kpi) => (
                <NodeKpiCard
                  key={kpi.label}
                  label={kpi.label}
                  value={kpi.value}
                  icon={kpi.icon}
                />
              ))}
            </div>
          ) : null}
        </div>
      </section>

      <Tabs
        value={activeTab}
        onValueChange={(value) => {
          if (isValidTab(value)) {
            setActiveTab(value);
          }
        }}
        className="w-full gap-0"
      >
        <div className="space-y-3 pb-1">
          <TabsList variant="line" className="h-auto w-full justify-start gap-6 bg-transparent p-0">
            {TAB_CONFIGS.map((tab) => (
              <TabsTrigger
                key={tab.id}
                value={tab.id}
                className={cn(
                  'h-auto flex-none rounded-none px-0 pb-3 pt-1 text-sm font-semibold',
                  'data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground',
                )}
              >
                {tab.label}
              </TabsTrigger>
            ))}
          </TabsList>
        </div>

        <TabsContent value="overview" className="mt-6 outline-none">
          {activeTab === 'overview' ? overview : null}
        </TabsContent>
        <TabsContent value="dashboard" className="mt-6 outline-none">
          {activeTab === 'dashboard' ? dashboard : null}
        </TabsContent>
        <TabsContent value="manage" className="mt-6 outline-none">
          {activeTab === 'manage' ? manage : null}
        </TabsContent>
      </Tabs>
    </div>
  );
}