import { useState } from 'react';
import { ActivationSettings } from '../components/admin/ActivationSettings';
import { ExitPolicySettings } from '../components/admin/ExitPolicySettings';
import { AlertSettings } from '../components/admin/AlertSettings';
import { SentimentProviderSettings } from '../components/admin/SentimentProviderSettings';
import { DataCleanup } from '../components/admin/DataCleanup';
import { JobControls } from '../components/admin/JobControls';
import { PipelineReadinessPanel } from '../components/admin/PipelineReadinessPanel';
import { RecommendationSettings } from '../components/admin/RecommendationSettings';
import { ScheduleSettings } from '../components/admin/ScheduleSettings';
import { SettingsForm } from '../components/admin/SettingsForm';
import { TickerManagement } from '../components/admin/TickerManagement';
import { TickerUniverseBootstrap } from '../components/admin/TickerUniverseBootstrap';
import { UserTable } from '../components/admin/UserTable';
import { PageHeader } from '../components/ui/PageHeader';
import { Tabs } from '../components/ui/Tabs';

const tabs = ['Users', 'Tickers', 'Settings', 'Jobs', 'Cleanup'] as const;
type Tab = (typeof tabs)[number];

export default function AdminPage() {
  const [activeTab, setActiveTab] = useState<Tab>('Users');

  return (
    <div className="space-y-6 animate-slide-up">
      <PageHeader title="Admin" subtitle="System management" />

      <Tabs tabs={tabs} active={activeTab} onChange={setActiveTab} />

      {/* Tab content */}
      <div className="animate-fade-in">
        {activeTab === 'Users' && <UserTable />}
        {activeTab === 'Tickers' && <TickerManagement />}
        {activeTab === 'Settings' && (
          <div className="space-y-4">
            <ActivationSettings />
            <ExitPolicySettings />
            <AlertSettings />
            <SentimentProviderSettings />
            <TickerUniverseBootstrap />
            <RecommendationSettings />
            <SettingsForm />
          </div>
        )}
        {activeTab === 'Jobs' && (
          <div className="space-y-4">
            <ScheduleSettings />
            <JobControls />
            <PipelineReadinessPanel />
          </div>
        )}
        {activeTab === 'Cleanup' && <DataCleanup />}
      </div>
    </div>
  );
}