'use client';

import { useEffect, useState } from 'react';
import { DashboardOverview } from '@/components/DashboardOverview';
import { ConfigEditor } from '@/components/ConfigEditor';
import { LogViewer } from '@/components/LogViewer';
import { ProviderManager } from '@/components/ProviderManager';
import { ModelSwitcher } from '@/components/ModelSwitcher';
import { QuickActions } from '@/components/QuickActions';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Activity, Settings, Terminal, Key, Cpu, Zap } from 'lucide-react';

type TabValue = 'dashboard' | 'config' | 'logs' | 'providers' | 'models' | 'actions';

export default function Home() {
  const [activeTab, setActiveTab] = useState<TabValue>('dashboard');

  return (
    <main className="min-h-screen bg-gradient-to-br from-zinc-950 via-zinc-900 to-zinc-950 text-zinc-100">
      <div className="container mx-auto px-4 py-8 max-w-7xl">
        {/* Header */}
        <header className="mb-8 flex items-center justify-between">
          <div>
            <h1 className="text-4xl font-bold bg-gradient-to-r from-orange-400 to-cyan-400 bg-clip-text text-transparent">
              OpenClaw Dashboard
            </h1>
            <p className="text-zinc-400 mt-1">Manage your AI infrastructure</p>
          </div>
          <div className="text-right">
            <div className="text-sm text-zinc-500">Status</div>
            <div className="flex items-center gap-2 text-green-400">
              <span className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
              <span>Live</span>
            </div>
          </div>
        </header>

        {/* Main Content */}
        <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as TabValue)} className="w-full">
          <TabsList className="grid w-full grid-cols-3 lg:grid-cols-6 bg-zinc-900/50 border border-zinc-800">
            <TabsTrigger value="dashboard" className="data-[state=active]:bg-orange-500/20 data-[state=active]:text-orange-400">
              <Activity className="w-4 h-4 mr-2" />
              Dashboard
            </TabsTrigger>
            <TabsTrigger value="config" className="data-[state=active]:bg-orange-500/20 data-[state=active]:text-orange-400">
              <Settings className="w-4 h-4 mr-2" />
              Config
            </TabsTrigger>
            <TabsTrigger value="logs" className="data-[state=active]:bg-orange-500/20 data-[state=active]:text-orange-400">
              <Terminal className="w-4 h-4 mr-2" />
              Logs
            </TabsTrigger>
            <TabsTrigger value="providers" className="data-[state=active]:bg-orange-500/20 data-[state=active]:text-orange-400">
              <Key className="w-4 h-4 mr-2" />
              Providers
            </TabsTrigger>
            <TabsTrigger value="models" className="data-[state=active]:bg-orange-500/20 data-[state=active]:text-orange-400">
              <Cpu className="w-4 h-4 mr-2" />
              Models
            </TabsTrigger>
            <TabsTrigger value="actions" className="data-[state=active]:bg-orange-500/20 data-[state=active]:text-orange-400">
              <Zap className="w-4 h-4 mr-2" />
              Actions
            </TabsTrigger>
          </TabsList>

          <TabsContent value="dashboard" className="mt-6">
            <DashboardOverview />
          </TabsContent>

          <TabsContent value="config" className="mt-6">
            <ConfigEditor />
          </TabsContent>

          <TabsContent value="logs" className="mt-6">
            <LogViewer />
          </TabsContent>

          <TabsContent value="providers" className="mt-6">
            <ProviderManager />
          </TabsContent>

          <TabsContent value="models" className="mt-6">
            <ModelSwitcher />
          </TabsContent>

          <TabsContent value="actions" className="mt-6">
            <QuickActions />
          </TabsContent>
        </Tabs>

        {/* Footer */}
        <footer className="mt-12 text-center text-zinc-600 text-sm">
          <p>OpenClaw Dashboard • Self-hosted AI Management</p>
        </footer>
      </div>
    </main>
  );
}