MOPC-Portal/src/app/(admin)/admin/logistics/page.tsx

'use client'

import { useState } from 'react'
import { useEdition } from '@/contexts/edition-context'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import {
  CheckCircle2,
  Hotel as HotelIcon,
  Plane,
  Salad,
  ScrollText,
  Stamp,
} from 'lucide-react'
import { ConfirmationsTab } from '@/components/admin/logistics/confirmations-tab'
import { TravelTab } from '@/components/admin/logistics/travel-tab'
import { HotelsTab } from '@/components/admin/logistics/hotels-tab'
import { VisasTab } from '@/components/admin/logistics/visas-tab'

export default function LogisticsPage() {
  const { currentEdition } = useEdition()
  const [tab, setTab] = useState('confirmations')

  if (!currentEdition) {
    return (
      <p className="text-muted-foreground py-12 text-center text-sm">
        Select an edition to view logistics.
      </p>
    )
  }
  const programId = currentEdition.id

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Logistics</h1>
        <p className="text-muted-foreground">
          Operational hub for the grand finale: confirmations, travel, hotels, and more.
        </p>
      </div>

      <Tabs value={tab} onValueChange={setTab} className="space-y-6">
        <TabsList className="h-auto w-full justify-start overflow-x-auto pb-2">
          <TabsTrigger value="confirmations">
            <CheckCircle2 className="mr-2 h-4 w-4" /> Confirmations
          </TabsTrigger>
          <TabsTrigger value="travel">
            <Plane className="mr-2 h-4 w-4" /> Travel
          </TabsTrigger>
          <TabsTrigger value="hotels">
            <HotelIcon className="mr-2 h-4 w-4" /> Hotels
          </TabsTrigger>
          <TabsTrigger value="visas">
            <Stamp className="mr-2 h-4 w-4" /> Visas
          </TabsTrigger>
          <TabsTrigger value="lunch" disabled>
            <Salad className="mr-2 h-4 w-4" /> Lunch
            <span className="text-muted-foreground ml-1 text-xs">(soon)</span>
          </TabsTrigger>
          <TabsTrigger value="email-templates" disabled>
            <ScrollText className="mr-2 h-4 w-4" /> Email Templates
            <span className="text-muted-foreground ml-1 text-xs">(soon)</span>
          </TabsTrigger>
        </TabsList>

        <TabsContent value="confirmations">
          <ConfirmationsTab programId={programId} />
        </TabsContent>
        <TabsContent value="travel">
          <TravelTab programId={programId} />
        </TabsContent>
        <TabsContent value="hotels">
          <HotelsTab programId={programId} />
        </TabsContent>
        <TabsContent value="visas">
          <VisasTab programId={programId} />
        </TabsContent>
      </Tabs>
    </div>
  )
}