import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { supabase } from '@/integrations/supabase/client';
import { useAuth } from '@/hooks/useAuth';
import { AppLayout } from '@/components/AppLayout';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { CurriculumEditor } from '@/components/admin/CurriculumEditor';
import { BookOpen } from 'lucide-react';

interface Product {
  id: string;
  title: string;
  slug: string;
}

export default function AdminBootcamp() {
  const { user, isAdmin, loading: authLoading } = useAuth();
  const navigate = useNavigate();
  const [bootcamps, setBootcamps] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!authLoading) {
      if (!user) navigate('/auth');
      else if (!isAdmin) navigate('/dashboard');
      else fetchBootcamps();
    }
  }, [user, isAdmin, authLoading]);

  const fetchBootcamps = async () => {
    const { data, error } = await supabase
      .from('products')
      .select('id, title, slug')
      .eq('type', 'bootcamp')
      .order('created_at', { ascending: false });
    if (!error && data) setBootcamps(data);
    setLoading(false);
  };

  if (authLoading || loading) {
    return (
      <AppLayout>
        <div className="container mx-auto px-4 py-8">
          <Skeleton className="h-10 w-1/3 mb-8" />
          <Skeleton className="h-64 w-full" />
        </div>
      </AppLayout>
    );
  }

  return (
    <AppLayout>
      <div className="container mx-auto px-4 py-8">
        <div className="flex items-center gap-3 mb-8">
          <BookOpen className="w-8 h-8" />
          <div>
            <h1 className="text-4xl font-bold">Manajemen Bootcamp</h1>
            <p className="text-muted-foreground">Kelola kurikulum bootcamp</p>
          </div>
        </div>

        {bootcamps.length === 0 ? (
          <Card className="border-2 border-border">
            <CardContent className="py-12 text-center">
              <p className="text-muted-foreground mb-4">Belum ada bootcamp. Buat produk dengan tipe bootcamp terlebih dahulu.</p>
              <Button onClick={() => navigate('/admin/products')} variant="outline" className="border-2">
                Ke Manajemen Produk
              </Button>
            </CardContent>
          </Card>
        ) : (
          <Accordion type="single" collapsible className="space-y-4">
            {bootcamps.map((bootcamp) => (
              <AccordionItem key={bootcamp.id} value={bootcamp.id} className="border-2 border-border bg-card">
                <AccordionTrigger className="px-4 hover:no-underline">
                  <span className="font-bold">{bootcamp.title}</span>
                </AccordionTrigger>
                <AccordionContent className="px-4 pb-4">
                  <CurriculumEditor productId={bootcamp.id} />
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        )}
      </div>
    </AppLayout>
  );
}