'use client';

import { useRouter } from 'next/navigation';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import { ApplicationForm } from '@/components/application-form';
import { ApplicationRecords } from '@/components/application-records';
import { Suspense } from 'react';

// Define the props interface for the ApplicationTabs component
interface ApplicationTabsProps {
  activeTab: 'new' | 'records';
}

export function ApplicationTabs({ activeTab }: ApplicationTabsProps) {
  const router = useRouter();

  // Handle tab change and update the URL accordingly
  const handleTabChange = (value: string) => {
    router.replace(`/dashboard/applications/${value}`, { scroll: false });
  };

  return (
    <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
      <TabsList className="mb-6 border-b w-full rounded-none h-auto p-0 bg-transparent">
        <TabsTrigger
          value="new"
          className="rounded-none data-[state=active]:border-b-2 data-[state=active]:border-blue-600 data-[state=active]:shadow-none bg-transparent px-6 py-2"
        >
          新建申请
        </TabsTrigger>
        <TabsTrigger
          value="records"
          className="rounded-none data-[state=active]:border-b-2 data-[state=active]:border-blue-600 data-[state=active]:shadow-none bg-transparent px-6 py-2"
        >
          申请记录
        </TabsTrigger>
      </TabsList>

      <TabsContent value="new">
        <Suspense>
          <ApplicationForm />
        </Suspense>
      </TabsContent>
      <TabsContent value="records">
        <ApplicationRecords />
      </TabsContent>
    </Tabs>
  );
}