import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth';
import { AppLayout } from '@/components/AppLayout';
import { Skeleton } from '@/components/ui/skeleton';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { WorkhoursTab } from '@/components/admin/settings/WorkhoursTab';
import { NotifikasiTab } from '@/components/admin/settings/NotifikasiTab';
import { KonsultasiTab } from '@/components/admin/settings/KonsultasiTab';
import { BrandingTab } from '@/components/admin/settings/BrandingTab';
import { IntegrasiTab } from '@/components/admin/settings/IntegrasiTab';
import { CollaborationTab } from '@/components/admin/settings/CollaborationTab';
import { Clock, Bell, Video, Palette, Puzzle, Wallet } from 'lucide-react';

export default function AdminSettings() {
  const { user, isAdmin, loading: authLoading } = useAuth();
  const navigate = useNavigate();


  if (authLoading) {
    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">
        <h1 className="text-4xl font-bold mb-2">Pengaturan</h1>
        <p className="text-muted-foreground mb-8">Konfigurasi platform</p>

        <Tabs defaultValue="workhours" className="space-y-6">
          <TabsList className="grid w-full grid-cols-3 md:grid-cols-6 lg:w-auto lg:inline-flex">
            <TabsTrigger value="workhours" className="flex items-center gap-2">
              <Clock className="w-4 h-4" />
              <span className="hidden sm:inline">Jam Kerja</span>
            </TabsTrigger>
            <TabsTrigger value="notifikasi" className="flex items-center gap-2">
              <Bell className="w-4 h-4" />
              <span className="hidden sm:inline">Notifikasi</span>
            </TabsTrigger>
            <TabsTrigger value="konsultasi" className="flex items-center gap-2">
              <Video className="w-4 h-4" />
              <span className="hidden sm:inline">Konsultasi</span>
            </TabsTrigger>
            <TabsTrigger value="branding" className="flex items-center gap-2">
              <Palette className="w-4 h-4" />
              <span className="hidden sm:inline">Branding</span>
            </TabsTrigger>
            <TabsTrigger value="integrasi" className="flex items-center gap-2">
              <Puzzle className="w-4 h-4" />
              <span className="hidden sm:inline">Integrasi</span>
            </TabsTrigger>
            <TabsTrigger value="collaboration" className="flex items-center gap-2">
              <Wallet className="w-4 h-4" />
              <span className="hidden sm:inline">Kolaborasi</span>
            </TabsTrigger>
          </TabsList>

          <TabsContent value="workhours">
            <WorkhoursTab />
          </TabsContent>

          <TabsContent value="notifikasi">
            <NotifikasiTab />
          </TabsContent>

          <TabsContent value="konsultasi">
            <KonsultasiTab />
          </TabsContent>

          <TabsContent value="branding">
            <BrandingTab />
          </TabsContent>

          <TabsContent value="integrasi">
            <IntegrasiTab />
          </TabsContent>

          <TabsContent value="collaboration">
            <CollaborationTab />
          </TabsContent>
        </Tabs>
      </div>
    </AppLayout>
  );
}