import React, { useState } from 'react';
import { AdminDashboardView } from '../admin/AdminDashboardView';
import { AdminUsersView } from '../admin/AdminUsersView';
import { AdminModerationView } from '../admin/AdminModerationView';
import { AdminSettingsView } from '../admin/AdminSettingsView';
import { LayoutDashboard, Users, ShieldAlert, Settings } from 'lucide-react';

interface AdminViewProps {
  currentSubView?: string; // 'dashboard' | 'users' | 'moderation' | 'settings'
}

export const AdminView: React.FC<AdminViewProps> = ({
  currentSubView = 'dashboard',
}) => {
  // Local state for internal navigation if not driven by props, but props is better for deep linking simulation
  const [activeTab, setActiveTab] = useState(currentSubView);

  const renderContent = () => {
    switch (activeTab) {
      case 'users':
        return <AdminUsersView />;
      case 'moderation':
        return <AdminModerationView />;
      case 'settings':
        return <AdminSettingsView />;
      case 'dashboard':
      default:
        return <AdminDashboardView />;
    }
  };

  return (
    <div className="flex flex-col lg:flex-row gap-8 animate-fadeIn h-[calc(100vh-140px)]">
      {/* Admin Sidebar */}
      <div className="w-full lg:w-64 flex-shrink-0">
        <div className="bg-kodo-red/10 border border-kodo-red/30 p-4 rounded-xl mb-6 flex items-center gap-3">
          <ShieldAlert className="w-6 h-6 text-kodo-red" />
          <div>
            <h3 className="font-bold text-white text-sm">Admin Area</h3>
            <p className="text-[10px] text-gray-400">Restricted Access</p>
          </div>
        </div>

        <div className="space-y-1">
          {[
            {
              id: 'dashboard',
              label: 'Dashboard',
              icon: <LayoutDashboard className="w-4 h-4" />,
            },
            {
              id: 'users',
              label: 'Users',
              icon: <Users className="w-4 h-4" />,
            },
            {
              id: 'moderation',
              label: 'Moderation',
              icon: <ShieldAlert className="w-4 h-4" />,
            },
            {
              id: 'settings',
              label: 'Settings',
              icon: <Settings className="w-4 h-4" />,
            },
          ].map((item) => (
            <button
              key={item.id}
              onClick={() => setActiveTab(item.id)}
              className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-all ${
                activeTab === item.id
                  ? 'bg-white/10 text-white border-l-2 border-kodo-red'
                  : 'text-gray-400 hover:text-white hover:bg-white/5 border-l-2 border-transparent'
              }`}
            >
              {item.icon}
              {item.label}
            </button>
          ))}
        </div>
      </div>

      {/* Content Area */}
      <div className="flex-1 overflow-y-auto pr-2 pb-10 custom-scrollbar">
        {renderContent()}
      </div>
    </div>
  );
};