'use client';

import { useState } from 'react';
import { 
  BellAlertIcon,
  ExclamationTriangleIcon,
  CheckCircleIcon,
  ClockIcon,
  ServerIcon,
  ArrowTrendingUpIcon,
  ArrowTrendingDownIcon,
  CpuChipIcon,
  SignalIcon,
  CircleStackIcon,
} from '@heroicons/react/24/outline';
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
} from 'recharts';

// Sample data for charts
const alertTrendData = [
  { time: '00:00', critical: 2, warning: 4, info: 6 },
  { time: '01:00', critical: 3, warning: 3, info: 5 },
  { time: '02:00', critical: 1, warning: 5, info: 7 },
  { time: '03:00', critical: 4, warning: 2, info: 4 },
  { time: '04:00', critical: 2, warning: 6, info: 8 },
  { time: '05:00', critical: 3, warning: 4, info: 6 },
];

const serviceHealthData = [
  { name: 'Opérationnel', value: 24 },
  { name: 'Critique', value: 3 },
  { name: 'Avertissement', value: 5 },
];

const COLORS = ['#10B981', '#EF4444', '#F59E0B'];

export default function AdminDashboard() {
  const [timeRange, setTimeRange] = useState('1h');
  const [chartView, setChartView] = useState('service');

  return (
    <div className="p-6">
      {/* Time Range Selector */}
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-semibold text-gray-900">Tableau de bord</h1>
        <div className="flex space-x-2">
          {['1h', '6h', '1d', '1w'].map((range) => (
            <button
              key={range}
              onClick={() => setTimeRange(range)}
              className={`px-3 py-1 text-sm rounded-md ${
                timeRange === range
                  ? 'bg-blue-800 text-white'
                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
              }`}
            >
              {range}
            </button>
          ))}
        </div>
      </div>

      {/* Status Overview Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">Alertes actives</p>
              <p className="text-2xl font-semibold text-gray-900">12</p>
            </div>
            <div className="p-3 bg-red-100 rounded-full">
              <BellAlertIcon className="h-6 w-6 text-red-600" />
            </div>
          </div>
          <div className="mt-4 flex items-center text-sm">
            <ArrowTrendingUpIcon className="h-4 w-4 text-red-500 mr-1" />
            <span className="text-red-500">+2 depuis 1h</span>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">Services critiques</p>
              <p className="text-2xl font-semibold text-gray-900">3</p>
            </div>
            <div className="p-3 bg-orange-100 rounded-full">
              <ExclamationTriangleIcon className="h-6 w-6 text-orange-600" />
            </div>
          </div>
          <div className="mt-4 flex items-center text-sm">
            <ArrowTrendingDownIcon className="h-4 w-4 text-green-500 mr-1" />
            <span className="text-green-500">-1 depuis 1h</span>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">Services opérationnels</p>
              <p className="text-2xl font-semibold text-gray-900">24</p>
            </div>
            <div className="p-3 bg-green-100 rounded-full">
              <CheckCircleIcon className="h-6 w-6 text-green-600" />
            </div>
          </div>
          <div className="mt-4 flex items-center text-sm">
            <ArrowTrendingUpIcon className="h-4 w-4 text-green-500 mr-1" />
            <span className="text-green-500">+3 depuis 1h</span>
          </div>
        </div>

  <div className="bg-white rounded-lg shadow p-6">
    <div className="flex items-center justify-between">
      <div>
              <p className="text-sm font-medium text-gray-600">Temps de réponse moyen</p>
              <p className="text-2xl font-semibold text-gray-900">245ms</p>
            </div>
            <div className="p-3 bg-blue-100 rounded-full">
              <ClockIcon className="h-6 w-6 text-blue-600" />
            </div>
          </div>
          <div className="mt-4 flex items-center text-sm">
            <ArrowTrendingDownIcon className="h-4 w-4 text-green-500 mr-1" />
            <span className="text-green-500">-12ms depuis 1h</span>
          </div>
        </div>
      </div>

      {/* Additional Metrics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">Utilisation CPU</p>
              <p className="text-2xl font-semibold text-gray-900">45%</p>
            </div>
            <div className="p-3 bg-purple-100 rounded-full">
              <CpuChipIcon className="h-6 w-6 text-purple-600" />
            </div>
          </div>
          <div className="mt-4">
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div className="bg-purple-600 h-2 rounded-full" style={{ width: '45%' }}></div>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">Latence réseau</p>
              <p className="text-2xl font-semibold text-gray-900">85ms</p>
            </div>
            <div className="p-3 bg-indigo-100 rounded-full">
              <SignalIcon className="h-6 w-6 text-indigo-600" />
            </div>
          </div>
          <div className="mt-4">
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div className="bg-indigo-600 h-2 rounded-full" style={{ width: '85%' }}></div>
      </div>
    </div>
  </div>

        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">Utilisation mémoire</p>
              <p className="text-2xl font-semibold text-gray-900">62%</p>
            </div>
            <div className="p-3 bg-cyan-100 rounded-full">
              <CircleStackIcon className="h-6 w-6 text-cyan-600" />
            </div>
          </div>
          <div className="mt-4">
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div className="bg-cyan-600 h-2 rounded-full" style={{ width: '62%' }}></div>
            </div>
          </div>
        </div>
      </div>

      {/* Charts Section */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        {/* Alert Trends Chart */}
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-medium text-gray-900">Tendances des alertes</h2>
            <div className="flex space-x-2">
              <button 
                onClick={() => setChartView('service')}
                className={`px-3 py-1 text-sm rounded-md ${
                  chartView === 'service'
                    ? 'bg-blue-800 text-white'
                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                }`}
              >
                Par service
              </button>
              <button 
                onClick={() => setChartView('severity')}
                className={`px-3 py-1 text-sm rounded-md ${
                  chartView === 'severity'
                    ? 'bg-blue-800 text-white'
                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                }`}
              >
                Par sévérité
          </button>
            </div>
          </div>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={alertTrendData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="time" />
                <YAxis />
                <Tooltip />
                <Area type="monotone" dataKey="critical" stackId="1" stroke="#EF4444" fill="#EF4444" fillOpacity={0.3} />
                <Area type="monotone" dataKey="warning" stackId="1" stroke="#F59E0B" fill="#F59E0B" fillOpacity={0.3} />
                <Area type="monotone" dataKey="info" stackId="1" stroke="#3B82F6" fill="#3B82F6" fillOpacity={0.3} />
              </AreaChart>
            </ResponsiveContainer>
          </div>
        </div>

        {/* Service Health Chart */}
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-medium text-gray-900">Santé des services</h2>
            <div className="flex space-x-2">
              <button className="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200">
                Par groupe
              </button>
              <button className="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200">
                Par état
              </button>
            </div>
      </div>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={serviceHealthData}
                  cx="50%"
                  cy="50%"
                  innerRadius={60}
                  outerRadius={80}
                  fill="#8884d8"
                  paddingAngle={5}
                  dataKey="value"
                >
                  {serviceHealthData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>

      {/* Recent Activity and Service Status */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Recent Alerts */}
        <div className="bg-white rounded-lg shadow">
          <div className="p-6 border-b border-gray-200">
            <h2 className="text-lg font-medium text-gray-900">Alertes récentes</h2>
          </div>
          <div className="p-6">
            <div className="space-y-4">
              {[1, 2, 3].map((i) => (
                <div key={i} className="flex items-start space-x-4">
                  <div className="p-2 bg-red-100 rounded-full">
                    <BellAlertIcon className="h-5 w-5 text-red-600" />
                  </div>
                  <div>
                    <p className="text-sm font-medium text-gray-900">Service critique détecté</p>
                    <p className="text-sm text-gray-500">Service-{i} • Il y a {i * 5} minutes</p>
              </div>
              </div>
              ))}
            </div>
          </div>
        </div>

        {/* Service Status */}
        <div className="bg-white rounded-lg shadow">
          <div className="p-6 border-b border-gray-200">
            <h2 className="text-lg font-medium text-gray-900">État des services</h2>
          </div>
          <div className="p-6">
              <div className="space-y-4">
              {[1, 2, 3].map((i) => (
                <div key={i} className="flex items-center justify-between">
                  <div className="flex items-center space-x-3">
                    <ServerIcon className="h-5 w-5 text-gray-400" />
                    <span className="text-sm font-medium text-gray-900">Service-{i}</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <span className="text-sm text-gray-500">99.9%</span>
                    <div className="w-24 h-2 bg-gray-200 rounded-full">
                      <div className="w-24 h-2 bg-green-500 rounded-full"></div>
              </div>
            </div>
              </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}