"use client"

import { useState } from 'react'
import { AdminSidebar } from './admin-sidebar'
import { AdminTemplatesManager } from './admin-templates-manager'
import { AdminDashboard } from './admin-dashboard'
import { TemplateFeaturesManager } from './template-features-manager'
import { AdminNotificationsPanel } from './admin-notifications-panel'

type AdminView = 
  | 'dashboard' 
  | 'templates' 
  | 'features' 
  | 'ai-features'
  | 'users' 
  | 'notifications' 
  | 'analytics' 
  | 'settings'
  | 'create-template'
  | 'add-feature'
  | 'ai-analyze'

export function AdminLayout() {
  const [currentView, setCurrentView] = useState<AdminView>('dashboard')
  const [featuresDialogOpen, setFeaturesDialogOpen] = useState(false)

  const renderMainContent = () => {
    switch (currentView) {
      case 'dashboard':
        return <AdminDashboard />
      
      case 'templates':
      case 'create-template':
        return <AdminTemplatesManager />
      
      case 'features':
      case 'add-feature':
        const defaultTemplate = {
          id: "default",
          type: "default",
          title: "Default Template",
          description: "Default template for feature management",
          complexity: "medium" as const,
          approved: true,
          usage_count: 0,
          created_at: new Date().toISOString(),
          updated_at: new Date().toISOString(),
          is_custom: false,
          status: "approved" as const
        }
        return (
          <TemplateFeaturesManager 
            template={defaultTemplate}
            open={true}
            onOpenChange={(open) => {
              if (!open) {
                setCurrentView('dashboard')
              }
            }}
          />
        )
      
      case 'ai-features':
      case 'ai-analyze':
        return (
          <div className="max-w-7xl mx-auto space-y-6">
            <div className="text-center space-y-4">
              <h1 className="text-4xl font-bold text-white">AI Feature Analysis</h1>
              <p className="text-xl text-white/60">AI-powered feature creation and optimization</p>
            </div>
            <div className="bg-white/5 border border-white/10 rounded-xl p-8 text-center">
              <div className="text-6xl mb-4">🤖</div>
              <h3 className="text-2xl font-bold text-white mb-2">AI Feature Creator</h3>
              <p className="text-white/60 mb-6">Analyze project requirements and generate optimized features</p>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="bg-white/5 rounded-lg p-4">
                  <h4 className="font-semibold text-white mb-2">Smart Analysis</h4>
                  <p className="text-white/60 text-sm">AI analyzes your project type and suggests relevant features</p>
                </div>
                <div className="bg-white/5 rounded-lg p-4">
                  <h4 className="font-semibold text-white mb-2">Essential Features</h4>
                  <p className="text-white/60 text-sm">Creates essential features that integrate with your template</p>
                </div>
                <div className="bg-white/5 rounded-lg p-4">
                  <h4 className="font-semibold text-white mb-2">Auto-Optimization</h4>
                  <p className="text-white/60 text-sm">Optimizes complexity and requirements automatically</p>
                </div>
              </div>
            </div>
          </div>
        )
      
      case 'users':
        return (
          <div className="max-w-7xl mx-auto space-y-6">
            <div className="text-center space-y-4">
              <h1 className="text-4xl font-bold text-white">User Management</h1>
              <p className="text-xl text-white/60">Manage user accounts and permissions</p>
            </div>
            <div className="bg-white/5 border border-white/10 rounded-xl p-8 text-center">
              <div className="text-6xl mb-4">👥</div>
              <h3 className="text-2xl font-bold text-white mb-2">User Administration</h3>
              <p className="text-white/60">User management features coming soon</p>
            </div>
          </div>
        )
      
      case 'notifications':
        return <AdminNotificationsPanel open={true} onOpenChange={() => {}} />
      
      case 'analytics':
        return (
          <div className="max-w-7xl mx-auto space-y-6">
            <div className="text-center space-y-4">
              <h1 className="text-4xl font-bold text-white">Analytics Dashboard</h1>
              <p className="text-xl text-white/60">Usage statistics and performance metrics</p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="bg-white/5 border border-white/10 rounded-xl p-6">
                <h3 className="text-lg font-semibold text-white mb-2">Total Templates</h3>
                <div className="text-3xl font-bold text-orange-400">24</div>
                <p className="text-white/60 text-sm">+3 this week</p>
              </div>
              <div className="bg-white/5 border border-white/10 rounded-xl p-6">
                <h3 className="text-lg font-semibold text-white mb-2">Active Users</h3>
                <div className="text-3xl font-bold text-emerald-400">156</div>
                <p className="text-white/60 text-sm">+12 this week</p>
              </div>
              <div className="bg-white/5 border border-white/10 rounded-xl p-6">
                <h3 className="text-lg font-semibold text-white mb-2">Features Created</h3>
                <div className="text-3xl font-bold text-blue-400">89</div>
                <p className="text-white/60 text-sm">+7 this week</p>
              </div>
              <div className="bg-white/5 border border-white/10 rounded-xl p-6">
                <h3 className="text-lg font-semibold text-white mb-2">AI Analyses</h3>
                <div className="text-3xl font-bold text-purple-400">42</div>
                <p className="text-white/60 text-sm">+8 this week</p>
              </div>
            </div>
          </div>
        )
      
      case 'settings':
        return (
          <div className="max-w-7xl mx-auto space-y-6">
            <div className="text-center space-y-4">
              <h1 className="text-4xl font-bold text-white">System Settings</h1>
              <p className="text-xl text-white/60">Configure system preferences and options</p>
            </div>
            <div className="bg-white/5 border border-white/10 rounded-xl p-8 text-center">
              <div className="text-6xl mb-4">⚙️</div>
              <h3 className="text-2xl font-bold text-white mb-2">Configuration Panel</h3>
              <p className="text-white/60">System settings panel coming soon</p>
            </div>
          </div>
        )
      
      default:
        return <AdminDashboard />
    }
  }

  return (
    <div className="min-h-screen bg-black flex">
      <AdminSidebar 
        currentView={currentView} 
        onViewChange={(view) => setCurrentView(view as AdminView)}
      />
      <main className="flex-1 overflow-y-auto">
        <div className="p-8">
          {renderMainContent()}
        </div>
      </main>
    </div>
  )
}
