'use client';

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

import { ResponsiveTabs, type ResponsiveTab } from '@/components/shared/responsive-tabs';

export type DetailTab = ResponsiveTab;

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);
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    router.replace(`${pathname}?${params.toString()}` as any, { 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 flex-wrap">
        <div className="min-w-0 flex-1">{header}</div>
        {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
      </div>

      <ResponsiveTabs tabs={tabs} value={activeTab} onValueChange={handleTabChange} />
    </div>
  );
}