'use client';
import { Separator } from '@/components/ui/separator';
import { Tabs, TabsContent } from '@/components/ui/tabs';
import { AdminPortfoliosTable } from '@/src/components/admin/AdminPortfoliosTable';
import { AdminProjectsTable } from '@/src/components/admin/AdminProjectsTable';
import { AdminUsersTable } from '@/src/components/admin/AdminUsersTable';
import { Layout } from '@/src/components/common/Layout';
import { TabsNavigation } from '@/src/components/common/TabsNavigation';
import { useEffect, useState } from 'react';

export default function AdminDashboard() {
  const [activeTab, setActiveTab] = useState('users');
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  const tabs = [
    { value: 'users', label: 'Users' },
    { value: 'portfolios', label: 'Portfolios' },
    { value: 'projects', label: 'Projects' },
  ];

  if (!mounted) {
    return null;
  }

  return (
    <Layout className='!justify-start'>
      <div className='z-50 flex flex-col gap-5 h-full p-2 lg:p-4'>
        <div className='flex items-start justify-between'>
          <h1 className='text-2xl lg:text-4xl font-bold text-neutral-800'>Admin Dashboard</h1>
          <span className='px-3 py-1 bg-red-900 text-white text-sm rounded-full'>Admin Mode</span>
        </div>

        <Tabs value={activeTab} className='w-full flex flex-col' onValueChange={setActiveTab}>
          <TabsNavigation
            tabs={tabs}
            activeTab={activeTab}
            setActiveTab={setActiveTab}
            storageKey='admin-dashboard-tab'
          />

          <Separator className='w-full' />

          <TabsContent value='users' className='mt-4 ml-0'>
            <AdminUsersTable />
          </TabsContent>

          <TabsContent value='portfolios' className='mt-4 ml-0'>
            <AdminPortfoliosTable />
          </TabsContent>

          <TabsContent value='projects' className='mt-4 ml-0'>
            <AdminProjectsTable />
          </TabsContent>
        </Tabs>
      </div>
    </Layout>
  );
}
