import { useState, useEffect } from "react";
import { useNavigate } from "react-router";
import { Server, Globe, Users, Activity, Wifi, WifiOff, Settings, FileCode } from "lucide-react";
import { ProtectedRoute } from "~/components/protected-route";
import { Header } from "~/components/header";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card/card";
import { Badge } from "~/components/ui/badge/badge";
import { Progress } from "~/components/ui/progress/progress";
import { Button } from "~/components/ui/button/button";
import { mockServers, type VPNServer } from "~/data/servers";
import styles from "./servers.module.css";

export default function Servers() {
  const navigate = useNavigate();
  const [servers, setServers] = useState<VPNServer[]>(mockServers);

  // Update server data in real-time
  useEffect(() => {
    const interval = setInterval(() => {
      setServers((prevServers) =>
        prevServers.map((server) => {
          const now = new Date();
          const minute = now.getMinutes();
          const second = now.getSeconds();

          // Simulate real-time changes
          if (server.status === "online") {
            return {
              ...server,
              load: Math.min(95, Math.max(10, server.load + (Math.random() > 0.5 ? 1 : -1) * Math.floor(Math.random() * 5))),
              users: Math.max(0, server.users + (Math.random() > 0.5 ? 1 : -1) * Math.floor(Math.random() * 3)),
              ping: Math.max(5, server.ping + (Math.random() > 0.5 ? 1 : -1) * Math.floor(Math.random() * 3)),
              bandwidth: {
                ...server.bandwidth,
                used: Math.min(server.bandwidth.total, server.bandwidth.used + Math.floor(Math.random() * 10)),
              },
            };
          }
          return server;
        })
      );
    }, 5000); // Update every 5 seconds

    return () => clearInterval(interval);
  }, []);

  const getStatusColor = (status: string) => {
    switch (status) {
      case "online":
        return "var(--color-success-9)";
      case "offline":
        return "var(--color-error-9)";
      case "maintenance":
        return "var(--color-warning-9)";
      default:
        return "var(--color-neutral-9)";
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case "online":
        return "آنلاین";
      case "offline":
        return "آفلاین";
      case "maintenance":
        return "تعمیر";
      default:
        return "نامشخص";
    }
  };

  const getLoadColor = (load: number) => {
    if (load < 50) return "var(--color-success-9)";
    if (load < 80) return "var(--color-warning-9)";
    return "var(--color-error-9)";
  };

  return (
    <ProtectedRoute>
      <div className={styles.container}>
        <Header />
        <main className={styles.content}>
          <div className={styles.pageHeader}>
            <div>
              <h1 className={styles.pageTitle}>مدیریت سرورها</h1>
              <p className={styles.pageDescription}>نظارت و مدیریت سرورهای VPN</p>
            </div>
            <Button>
              <Server style={{ width: "16px", height: "16px", marginLeft: "var(--space-2)" }} />
              افزودن سرور
            </Button>
          </div>

          <div className={styles.serversGrid}>
            {servers.map((server) => (
              <Card key={server.id} className={styles.serverCard}>
                <CardHeader className={styles.serverHeader}>
                  <div className={styles.serverTitleRow}>
                    <div className={styles.serverTitle}>
                      <Globe size={20} />
                      <CardTitle>{server.name}</CardTitle>
                    </div>
                    <Badge
                      style={{
                        background: `${getStatusColor(server.status)}20`,
                        color: getStatusColor(server.status),
                        border: `1px solid ${getStatusColor(server.status)}40`,
                      }}
                    >
                      {server.status === "online" ? <Wifi size={12} /> : <WifiOff size={12} />}
                      {getStatusText(server.status)}
                    </Badge>
                  </div>
                  <p className={styles.serverLocation}>
                    {server.location}, {server.country}
                  </p>
                </CardHeader>

                <CardContent className={styles.serverContent}>
                  <div className={styles.serverMetrics}>
                    <div className={styles.metric}>
                      <div className={styles.metricHeader}>
                        <span className={styles.metricLabel}>بار سرور</span>
                        <span className={styles.metricValue} style={{ color: getLoadColor(server.load) }}>
                          {server.load}٪
                        </span>
                      </div>
                      <Progress value={server.load} className={styles.metricProgress} />
                    </div>

                    <div className={styles.metric}>
                      <div className={styles.metricHeader}>
                        <span className={styles.metricLabel}>پهنای باند</span>
                        <span className={styles.metricValue}>
                          {server.bandwidth.used} / {server.bandwidth.total} GB
                        </span>
                      </div>
                      <Progress value={(server.bandwidth.used / server.bandwidth.total) * 100} className={styles.metricProgress} />
                    </div>

                    <div className={styles.statsRow}>
                      <div className={styles.stat}>
                        <Users size={16} />
                        <div>
                          <span className={styles.statValue}>
                            {server.users} / {server.maxUsers}
                          </span>
                          <span className={styles.statLabel}>کاربر</span>
                        </div>
                      </div>

                      <div className={styles.stat}>
                        <Activity size={16} />
                        <div>
                          <span className={styles.statValue}>{server.ping} ms</span>
                          <span className={styles.statLabel}>پینگ</span>
                        </div>
                      </div>

                      <div className={styles.stat}>
                        <Server size={16} />
                        <div>
                          <span className={styles.statValue}>{server.uptime}٪</span>
                          <span className={styles.statLabel}>آپتایم</span>
                        </div>
                      </div>
                    </div>

                    <div className={styles.protocolsSection}>
                      <span className={styles.protocolsLabel}>پروتکل‌ها:</span>
                      <div className={styles.protocols}>
                        {server.protocols.map((protocol) => (
                          <Badge key={protocol} variant="secondary" className={styles.protocolBadge}>
                            {protocol}
                          </Badge>
                        ))}
                      </div>
                    </div>

                    <div className={styles.featuresSection}>
                      <span className={styles.featuresLabel}>ویژگی‌ها:</span>
                      <ul className={styles.features}>
                        {server.features.map((feature) => (
                          <li key={feature}>{feature}</li>
                        ))}
                      </ul>
                    </div>

                    <div className={styles.serverActions}>
                      <Button
                        variant="outline"
                        size="sm"
                        className={styles.actionButton}
                        onClick={() => navigate(`/server-config?id=${server.id}&name=${encodeURIComponent(server.name)}`)}
                      >
                        <FileCode size={14} />
                        کانفیگ دستی
                      </Button>
                      <Button variant="outline" size="sm" className={styles.actionButton}>
                        <Settings size={14} />
                        تنظیمات
                      </Button>
                      <Button variant="outline" size="sm" className={styles.actionButton}>
                        <Activity size={14} />
                        مانیتورینگ
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </main>
      </div>
    </ProtectedRoute>
  );
}