'use client';

import { useRouter } from 'next/navigation';
import { ArrowLeft, Layers } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  GenerationModeTabs,
  type GenerationMode,
} from '@/components/generation/generation-mode-tabs';
import { LargeCourseWorkbench } from '@/components/generation/large-course-workbench';
import { useI18n } from '@/lib/hooks/use-i18n';

export default function CoursesPage() {
  const { t } = useI18n();
  const router = useRouter();

  const handleModeChange = (mode: GenerationMode) => {
    if (mode === 'normal') router.push('/');
  };

  return (
    <main className="min-h-[100dvh] bg-zinc-50 dark:bg-zinc-950">
      <div className="mx-auto max-w-4xl px-6 py-8">
        <header className="mb-6 flex items-center justify-between gap-4">
          <div>
            <h1 className="flex items-center gap-2 text-xl font-semibold">
              <Layers className="size-5 text-violet-500" />
              {t('course.createTitle')}
            </h1>
          </div>
          <Button variant="outline" size="sm" onClick={() => router.push('/')}>
            <ArrowLeft className="size-4" />
            {t('common.back')}
          </Button>
        </header>

        <div className="mb-6 flex justify-center">
          <GenerationModeTabs value="large" onChange={handleModeChange} />
        </div>

        <LargeCourseWorkbench embedded />
      </div>
    </main>
  );
}