import { Link, Outlet, useLocation, useNavigate, useParams } from 'react-router-dom'
import { ArrowLeft } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'

export default function TryoutLayout() {
  const { id } = useParams<{ id: string }>()
  const location = useLocation()
  const navigate = useNavigate()
  
  let currentTab = 'questions'
  if (location.pathname.includes('/questions')) currentTab = 'questions'
  if (location.pathname.includes('/attempts')) currentTab = 'attempts'
  if (location.pathname.includes('/normalization')) currentTab = 'normalization'
  if (location.pathname.includes('/settings')) currentTab = 'settings'

  const handleTabChange = (value: string) => {
    navigate(`/admin/tryouts/${id}/${value}`)
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button variant="outline" size="icon" asChild>
          <Link to="/admin/dashboard">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Tryout Workspace</h1>
          <p className="text-muted-foreground mt-1">ID: {id}</p>
        </div>
      </div>

      <Tabs value={currentTab} onValueChange={handleTabChange} className="w-full">
        <TabsList className="grid w-full grid-cols-4 md:w-[560px]">
          <TabsTrigger value="questions">Questions</TabsTrigger>
          <TabsTrigger value="attempts">Attempts</TabsTrigger>
          <TabsTrigger value="normalization">Normalization</TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>
      </Tabs>

      <div className="mt-6 bg-card border rounded-xl p-6 shadow-sm min-h-[500px]">
        <Outlet />
      </div>
    </div>
  )
}