import React, { useMemo } from 'react';
import Sidebar from './components/Layout/Sidebar';
import Header from './components/Layout/Header';
import StatsCard from './components/Dashboard/StatsCard';
import UserTable from './components/Dashboard/UserTable';
import NetworkMap from './components/Dashboard/NetworkMap';
import { mockUsers } from './data/mockUsers';
import { Users, Globe2, Activity, RadioReceiver } from 'lucide-react';

function App() {
  const stats = useMemo(() => {
    return {
      total: mockUsers.length,
      online: mockUsers.filter(u => u.status === 'Online').length,
      roaming: mockUsers.filter(u => u.isRoaming).length,
      avgSignal: (mockUsers.reduce((acc, u) => acc + u.signalStrength, 0) / mockUsers.length).toFixed(1)
    };
  }, []);

  return (
    <div style={{ display: 'flex', width: '100%', height: '100vh', background: 'var(--bg-app)', color: 'var(--text-main)' }}>
      <Sidebar />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'relative' }}>

        {/* Background Grid/Effect */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px)',
          backgroundSize: '40px 40px',
          pointerEvents: 'none'
        }} />

        <Header />

        <main style={{ flex: 1, padding: 'var(--space-md)', overflowY: 'auto', zIndex: 1 }}>
          <div style={{ marginBottom: 'var(--space-xl)' }}>
            <h1 className="text-glow" style={{ fontSize: '1.5rem', marginBottom: 'var(--space-xs)' }}>Network Overview</h1>
            <p style={{ color: 'var(--text-muted)' }}>Real-time monitoring of GlobeSIM subscriber activities.</p>
          </div>

          {/* KPI Cards */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-md)', marginBottom: 'var(--space-xl)' }}>
            <StatsCard title="Total Subscribers" value={stats.total} icon={Users} trend={2.5} />
            <StatsCard title="Active Connections" value={stats.online} icon={Activity} trend={5.2} />
            <StatsCard title="Roaming Users" value={stats.roaming} icon={Globe2} trend={-1.1} />
            <StatsCard title="Avg Signal Strength" value={`${stats.avgSignal}/5`} icon={RadioReceiver} />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 'var(--space-md)', marginBottom: 'var(--space-xl)', height: '500px' }}>
            <UserTable users={mockUsers} />
            <NetworkMap users={mockUsers} />
          </div>
        </main>
      </div>
    </div>
  );
}

export default App;