pn-new-crm/src/components/shared/detail-layout.tsx

'use client';

import { useSearchParams, useRouter, usePathname } from 'next/navigation';
import { Loader2 } from 'lucide-react';

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Badge } from '@/components/ui/badge';

export interface DetailTab {
  id: string;
  label: string;
  content: React.ReactNode;
  badge?: string | number;
}

interface DetailLayoutProps {
  header: React.ReactNode;
  tabs: DetailTab[];
  defaultTab?: string;
  isLoading?: boolean;
  actions?: React.ReactNode;
}

export function DetailLayout({
  header,
  tabs,
  defaultTab,
  isLoading,
  actions,
}: DetailLayoutProps) {
  const searchParams = useSearchParams();
  const router = useRouter();
  const pathname = usePathname();

  const activeTab = searchParams.get('tab') ?? defaultTab ?? tabs[0]?.id;

  function handleTabChange(tabId: string) {
    const params = new URLSearchParams(searchParams.toString());
    params.set('tab', tabId);
    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-start justify-between gap-4">
        <div className="min-w-0 flex-1">{header}</div>
        {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
      </div>

      <Tabs value={activeTab} onValueChange={handleTabChange}>
        <TabsList>
          {tabs.map((tab) => (
            <TabsTrigger key={tab.id} value={tab.id} className="gap-1.5">
              {tab.label}
              {tab.badge !== undefined && tab.badge !== null && (
                <Badge variant="secondary" className="px-1.5 py-0 text-xs">
                  {tab.badge}
                </Badge>
              )}
            </TabsTrigger>
          ))}
        </TabsList>
        {tabs.map((tab) => (
          <TabsContent key={tab.id} value={tab.id} className="mt-4">
            {tab.content}
          </TabsContent>
        ))}
      </Tabs>
    </div>
  );
}