import React from 'react';
import { useSearchParams } from 'react-router-dom';
import { 
  Building2, Truck, Users, CalendarDays, ClipboardCheck, 
  ShoppingCart, Map, MapPin, Navigation, Link2, Activity,
  Bell, Settings, Search, Database
} from 'lucide-react';
import { motion } from 'framer-motion';

import { FleetOrganization } from './fleet/FleetOrganization';
import { FleetAssets } from './fleet/FleetAssets';
import { FleetPersonnel } from './fleet/FleetPersonnel';
import { FleetScheduling } from './fleet/FleetScheduling';
import { FleetInventory } from './fleet/FleetInventory';
import { FleetWarehouseStock } from './fleet/FleetWarehouseStock';
import { FleetPendingRequests } from './fleet/FleetPendingRequests';
import { LiveDashboard } from './fleet/LiveDashboard';
import { FleetActiveShifts } from './fleet/FleetActiveShifts';
import { FleetTrips } from './fleet/FleetTrips';
import { FleetAnalytics } from './fleet/FleetAnalytics';
import './fleet/FleetOperator.css';

const SCOPE_MODULES = [
  { id: 'overview', label: 'Live Dashboard', icon: Map, desc: 'Real-time fleet tracking & telemetry' },
  { id: 'organization', label: 'Stations', icon: Building2, desc: 'Manage stations and profiles' },
  { id: 'assets', label: 'Vehicle Management', icon: Truck, desc: 'Registration, Docs, Services' },
  { id: 'personnel', label: 'Staff Management', icon: Users, desc: 'Pilots, EMTs, Doctors' },
  { id: 'scheduling', label: 'Crew Scheduling', icon: CalendarDays, desc: 'Shift assignments & conflicts' },
  { id: 'attendance', label: 'Attendance & Duty', icon: ClipboardCheck, desc: 'Daily attendance & payroll' },
  { id: 'inventory', label: 'Inventory Management', icon: ShoppingCart, desc: 'Stock levels & consumption' },
  { id: 'trips', label: 'Trip Management', icon: MapPin, desc: 'Active, pending, and completed trips' },
  { id: 'telematics', label: 'GPS Telematics', icon: Navigation, desc: 'Geofencing, speed, SOS alerts' },
  { id: 'referrals', label: 'Referral Network', icon: Link2, desc: 'Hospitals & specialty routing' },
  { id: 'analytics', label: 'Fleet Analytics', icon: Activity, desc: 'KPIs, SLAs, and reports' },
  { id: 'warehouse', label: 'Warehouse Stock', icon: Database, desc: 'Central warehouse inventory overview' },
  { id: 'pending-requests', label: 'Stock Requests', icon: ShoppingCart, desc: 'View, approve, and complete supply restock requests' },
  { id: 'active-shifts', label: 'Active Shifts', icon: Activity, desc: 'Real-time tracking of active shifts' }
];

const PlaceholderModule: React.FC<{ label: string; icon: React.ElementType }> = ({ label, icon: Icon }) => (
  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', minHeight: '400px', color: '#94A3B8', gap: '16px' }}>
    <Icon size={64} style={{ opacity: 0.15 }} />
    <h2 style={{ fontSize: '1.5rem', fontWeight: 700, color: '#fff', margin: 0 }}>{label}</h2>
    <p style={{ margin: 0, opacity: 0.6 }}>This module is under active development.</p>
  </div>
);

export const FleetOperatorDashboard: React.FC = () => {
  const [searchParams] = useSearchParams();
  const activeModule = searchParams.get('tab') || 'overview';

  const activeModuleInfo = SCOPE_MODULES.find(m => m.id === activeModule);

  const renderModuleContent = () => {
    switch (activeModule) {
      case 'organization':
        return <FleetOrganization />;
      case 'assets':
        return <FleetAssets />;
      case 'personnel':
        return <FleetPersonnel />;
      case 'scheduling':
        return <FleetScheduling />;
      case 'inventory':
        return <FleetInventory />;
      case 'warehouse':
        return <FleetWarehouseStock />;
      case 'pending-requests':
        return <FleetPendingRequests />;
      case 'active-shifts':
        return <FleetActiveShifts />;
      case 'overview':
        return <LiveDashboard />;
      case 'attendance':
        return <PlaceholderModule label="Attendance & Duty" icon={ClipboardCheck} />;
      case 'trips':
        return <FleetTrips />;
      case 'telematics':
        return <PlaceholderModule label="GPS Telematics" icon={Navigation} />;
      case 'referrals':
        return <PlaceholderModule label="Referral Network" icon={Link2} />;
      case 'analytics':
        return <FleetAnalytics />;
      default:
        return <PlaceholderModule label="Module Loading" icon={Activity} />;
    }
  };

  return (
    <div className="fleet-dashboard-container" style={{ 
      display: 'flex', 
      flexDirection: 'column',
      height: '100%', 
      width: '100%',
      background: '#040B16',
      color: '#F8FAFC',
      fontFamily: "'Inter', sans-serif"
    }}>
      {/* Top Header */}
      <header className="fleet-dashboard-header" style={{ 
        height: '72px', 
        padding: '0 32px', 
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: 'space-between',
        borderBottom: '1px solid rgba(255,255,255,0.05)', 
        background: 'rgba(15, 23, 42, 0.5)', 
        backdropFilter: 'blur(12px)', 
        zIndex: 40,
        flexShrink: 0
      }}>
        <div>
          <h1 style={{ fontSize: '1.5rem', fontWeight: 900, color: '#fff', margin: 0, letterSpacing: '-0.5px' }}>
            {activeModuleInfo?.label || 'Fleet Command'}
          </h1>
          <div style={{ fontSize: '0.7rem', color: '#94A3B8', display: 'flex', alignItems: 'center', gap: '8px', marginTop: '3px' }}>
            <div style={{ width: '6px', height: '6px', borderRadius: '50%', background: '#10B981', boxShadow: '0 0 8px #10B981' }} />
            {activeModuleInfo?.desc || 'Secure Connection • TeleEMS Fleet'}
          </div>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>

          <button className="fleet-header-btn" style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: '10px', padding: '8px', color: '#94A3B8', cursor: 'pointer', position: 'relative', display: 'flex' }}>
            <Bell size={18} />
            <span style={{ position: 'absolute', top: 6, right: 6, width: '7px', height: '7px', background: '#EF4444', borderRadius: '50%', border: '1px solid #040B16' }} />
          </button>
          <button className="fleet-header-btn" style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: '10px', padding: '8px', color: '#94A3B8', cursor: 'pointer', display: 'flex' }}>
            <Settings size={18} />
          </button>
          <div className="fleet-header-divider" style={{ width: '1px', height: '24px', background: 'rgba(255,255,255,0.07)' }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
            <div className="fleet-profile-name" style={{ textAlign: 'right' }}>
              <div className="fleet-profile-title" style={{ fontSize: '0.8rem', fontWeight: 700, color: '#fff' }}>Station Incharge</div>
              <div style={{ fontSize: '0.62rem', color: '#06B6D4' }}>Fleet Operator</div>
            </div>
            <div style={{ width: '34px', height: '34px', borderRadius: '10px', background: 'linear-gradient(135deg, #06B6D4, #3B82F6)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Users size={16} color="#fff" />
            </div>
          </div>
        </div>
      </header>

      {/* Scrollable Content */}
      <div className="fleet-dashboard-content" style={{ flex: 1, overflowY: 'auto', padding: '32px' }}>
        <motion.div
          key={activeModule}
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.35, ease: 'easeOut' }}
        >
          {renderModuleContent()}
        </motion.div>
      </div>
    </div>
  );
};
