import { useState, useEffect } from 'react';
import type { Route } from './+types/analytics';
import { Card, CardHeader, CardTitle, CardContent } from '~/components/ui/card/card';
import { Button } from '~/components/ui/button/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~/components/ui/select/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs/tabs';
import { 
  BarChart, 
  Bar, 
  LineChart, 
  Line, 
  AreaChart,
  Area,
  PieChart, 
  Pie, 
  Cell,
  ResponsiveContainer, 
  XAxis, 
  YAxis, 
  CartesianGrid, 
  Tooltip, 
  Legend 
} from 'recharts';
import { 
  TrendingUp, 
  Users, 
  Server, 
  Download,
  Upload,
  Activity,
  BarChart3,
  PieChart as PieChartIcon
} from 'lucide-react';
import { generateMockUsageStats, generateMockServerStats } from '~/services/realtime-stats';
import styles from './analytics.module.css';

export const meta: Route.MetaFunction = () => {
  return [{ title: 'Analytics Dashboard' }];
};

export default function Analytics() {
  const [timeRange, setTimeRange] = useState<'7days' | '30days' | '90days'>('30days');
  const [usageStats, setUsageStats] = useState(generateMockUsageStats(30));
  const [serverStats, setServerStats] = useState(generateMockServerStats());

  useEffect(() => {
    const days = timeRange === '7days' ? 7 : timeRange === '30days' ? 30 : 90;
    setUsageStats(generateMockUsageStats(days));
  }, [timeRange]);

  // Server usage distribution
  const serverDistribution = serverStats.map(server => ({
    name: server.serverName,
    value: server.activeConnections
  }));

  const COLORS = [
    'var(--color-accent-9)',
    'var(--color-success-9)',
    'var(--color-error-9)',
    '#8884d8',
    '#82ca9d'
  ];

  // Traffic data
  const trafficData = usageStats.map(stat => ({
    date: new Date(stat.date).toLocaleDateString('fa-IR', { month: 'short', day: 'numeric' }),
    traffic: stat.totalTraffic
  }));

  // User growth data
  const userGrowthData = usageStats.map(stat => ({
    date: new Date(stat.date).toLocaleDateString('fa-IR', { month: 'short', day: 'numeric' }),
    active: stat.activeUsers,
    new: stat.newSubscriptions
  }));

  // Peak hours data (mock)
  const peakHoursData = Array.from({ length: 24 }, (_, i) => ({
    hour: `${i}:00`,
    users: Math.floor(Math.random() * 100) + 20
  }));

  const totalActiveUsers = usageStats[usageStats.length - 1]?.activeUsers || 0;
  const totalTraffic = usageStats.reduce((acc, stat) => acc + stat.totalTraffic, 0);
  const totalNewSubs = usageStats.reduce((acc, stat) => acc + stat.newSubscriptions, 0);
  const avgDailyUsers = Math.floor(usageStats.reduce((acc, stat) => acc + stat.activeUsers, 0) / usageStats.length);

  const formatTraffic = (bytes: number) => {
    return `${(bytes / 1024).toFixed(1)} GB`;
  };

  const exportAnalytics = (format: 'pdf' | 'excel' | 'csv') => {
    console.log(`Exporting analytics as ${format}`);
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div>
          <h1 className={styles.title}>
            <BarChart3 size={28} />
            آنالیتیکس پیشرفته
          </h1>
          <p className={styles.subtitle}>تحلیل دقیق عملکرد و رفتار کاربران</p>
        </div>
        <div className={styles.actions}>
          <Select value={timeRange} onValueChange={(value: any) => setTimeRange(value)}>
            <SelectTrigger className={styles.select}>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="7days">7 روز گذشته</SelectItem>
              <SelectItem value="30days">30 روز گذشته</SelectItem>
              <SelectItem value="90days">90 روز گذشته</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" onClick={() => exportAnalytics('excel')}>
            <Download size={16} />
            Export
          </Button>
        </div>
      </div>

      <div className={styles.statsGrid}>
        <Card>
          <CardHeader>
            <div className={styles.statHeader}>
              <CardTitle>کاربران فعال</CardTitle>
              <Users size={20} className={styles.statIcon} />
            </div>
          </CardHeader>
          <CardContent>
            <div className={styles.statValue}>{totalActiveUsers.toLocaleString('fa-IR')}</div>
            <div className={styles.statSubtext}>میانگین روزانه: {avgDailyUsers.toLocaleString('fa-IR')}</div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <div className={styles.statHeader}>
              <CardTitle>کل ترافیک</CardTitle>
              <Activity size={20} className={styles.statIcon} />
            </div>
          </CardHeader>
          <CardContent>
            <div className={styles.statValue}>{formatTraffic(totalTraffic)}</div>
            <div className={styles.statSubtext}>در {timeRange === '7days' ? '7' : timeRange === '30days' ? '30' : '90'} روز</div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <div className={styles.statHeader}>
              <CardTitle>اشتراک‌های جدید</CardTitle>
              <TrendingUp size={20} className={styles.statIcon} />
            </div>
          </CardHeader>
          <CardContent>
            <div className={styles.statValue}>{totalNewSubs.toLocaleString('fa-IR')}</div>
            <div className={styles.statSubtext}>رشد {((totalNewSubs / usageStats.length) * 10).toFixed(1)}% ماهانه</div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <div className={styles.statHeader}>
              <CardTitle>سرورهای آنلاین</CardTitle>
              <Server size={20} className={styles.statIcon} />
            </div>
          </CardHeader>
          <CardContent>
            <div className={styles.statValue}>
              {serverStats.filter(s => s.status === 'online').length} / {serverStats.length}
            </div>
            <div className={styles.statSubtext}>
              {Math.floor((serverStats.filter(s => s.status === 'online').length / serverStats.length) * 100)}% Uptime
            </div>
          </CardContent>
        </Card>
      </div>

      <Tabs defaultValue="overview" className={styles.tabs}>
        <TabsList>
          <TabsTrigger value="overview">نمای کلی</TabsTrigger>
          <TabsTrigger value="servers">سرورها</TabsTrigger>
          <TabsTrigger value="users">کاربران</TabsTrigger>
          <TabsTrigger value="traffic">ترافیک</TabsTrigger>
        </TabsList>

        <TabsContent value="overview">
          <div className={styles.chartsGrid}>
            <Card className={styles.chartCard}>
              <CardHeader>
                <CardTitle>روند کاربران فعال</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <AreaChart data={userGrowthData}>
                    <defs>
                      <linearGradient id="colorActive" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor="var(--color-accent-9)" stopOpacity={0.3}/>
                        <stop offset="95%" stopColor="var(--color-accent-9)" stopOpacity={0}/>
                      </linearGradient>
                    </defs>
                    <CartesianGrid strokeDasharray="3 3" stroke="var(--color-neutral-6)" />
                    <XAxis dataKey="date" stroke="var(--color-neutral-11)" />
                    <YAxis stroke="var(--color-neutral-11)" />
                    <Tooltip contentStyle={{ 
                      backgroundColor: 'var(--color-neutral-2)', 
                      border: '1px solid var(--color-neutral-6)',
                      borderRadius: 'var(--radius-3)'
                    }} />
                    <Legend />
                    <Area type="monotone" dataKey="active" stroke="var(--color-accent-9)" fillOpacity={1} fill="url(#colorActive)" name="کاربران فعال" />
                  </AreaChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>

            <Card className={styles.chartCard}>
              <CardHeader>
                <CardTitle>اشتراک‌های جدید</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <BarChart data={userGrowthData}>
                    <CartesianGrid strokeDasharray="3 3" stroke="var(--color-neutral-6)" />
                    <XAxis dataKey="date" stroke="var(--color-neutral-11)" />
                    <YAxis stroke="var(--color-neutral-11)" />
                    <Tooltip contentStyle={{ 
                      backgroundColor: 'var(--color-neutral-2)', 
                      border: '1px solid var(--color-neutral-6)',
                      borderRadius: 'var(--radius-3)'
                    }} />
                    <Legend />
                    <Bar dataKey="new" fill="var(--color-success-9)" name="اشتراک جدید" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        <TabsContent value="servers">
          <div className={styles.chartsGrid}>
            <Card className={styles.chartCard}>
              <CardHeader>
                <CardTitle>توزیع کاربران در سرورها</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <PieChart>
                    <Pie
                      data={serverDistribution}
                      cx="50%"
                      cy="50%"
                      labelLine={false}
                      label={({ name, percent }) => `${name}: ${((percent || 0) * 100).toFixed(0)}%`}
                      outerRadius={100}
                      fill="#8884d8"
                      dataKey="value"
                    >
                      {serverDistribution.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </PieChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>

            <Card className={styles.chartCard}>
              <CardHeader>
                <CardTitle>عملکرد سرورها</CardTitle>
              </CardHeader>
              <CardContent>
                <div className={styles.serverList}>
                  {serverStats.map(server => (
                    <div key={server.serverId} className={styles.serverItem}>
                      <div className={styles.serverInfo}>
                        <div className={styles.serverName}>{server.serverName}</div>
                        <div className={styles.serverMeta}>
                          <span>Ping: {server.ping}ms</span>
                          <span>Load: {server.load}%</span>
                          <span>Users: {server.activeConnections}</span>
                        </div>
                      </div>
                      <div className={styles.serverBandwidth}>
                        <div className={styles.bandwidthItem}>
                          <Download size={14} />
                          <span>{server.bandwidth.download} MB/s</span>
                        </div>
                        <div className={styles.bandwidthItem}>
                          <Upload size={14} />
                          <span>{server.bandwidth.upload} MB/s</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        <TabsContent value="users">
          <Card className={styles.chartCard}>
            <CardHeader>
              <CardTitle>فعالیت کاربران در ساعات مختلف</CardTitle>
            </CardHeader>
            <CardContent>
              <ResponsiveContainer width="100%" height={400}>
                <BarChart data={peakHoursData}>
                  <CartesianGrid strokeDasharray="3 3" stroke="var(--color-neutral-6)" />
                  <XAxis dataKey="hour" stroke="var(--color-neutral-11)" />
                  <YAxis stroke="var(--color-neutral-11)" />
                  <Tooltip contentStyle={{ 
                    backgroundColor: 'var(--color-neutral-2)', 
                    border: '1px solid var(--color-neutral-6)',
                    borderRadius: 'var(--radius-3)'
                  }} />
                  <Bar dataKey="users" fill="var(--color-accent-9)" name="کاربران فعال" />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="traffic">
          <Card className={styles.chartCard}>
            <CardHeader>
              <CardTitle>روند مصرف ترافیک</CardTitle>
            </CardHeader>
            <CardContent>
              <ResponsiveContainer width="100%" height={400}>
                <LineChart data={trafficData}>
                  <CartesianGrid strokeDasharray="3 3" stroke="var(--color-neutral-6)" />
                  <XAxis dataKey="date" stroke="var(--color-neutral-11)" />
                  <YAxis stroke="var(--color-neutral-11)" />
                  <Tooltip contentStyle={{ 
                    backgroundColor: 'var(--color-neutral-2)', 
                    border: '1px solid var(--color-neutral-6)',
                    borderRadius: 'var(--radius-3)'
                  }} />
                  <Legend />
                  <Line type="monotone" dataKey="traffic" stroke="var(--color-success-9)" strokeWidth={2} name="ترافیک (MB)" />
                </LineChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}