"use client";

import { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import { api } from "@/lib/api";
import { DashboardStats } from "@/types";
import Link from "next/link";
import { useParams } from "next/navigation";
import {
  Cpu,
  Wifi,
  WifiOff,
  Bell,
  AlertTriangle,
  TrendingUp,
  ThermometerSun,
  Droplets,
  Activity,
  Thermometer,
  Sun,
  Battery,
  RefreshCw,
  ArrowUpRight,
} from "lucide-react";

interface StatCardProps {
  title: string;
  value: number | string;
  icon: React.ReactNode;
  trend?: string;
  color: string;
}

function StatCard({ title, value, icon, trend, color }: StatCardProps) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-100 dark:border-gray-700">
      <div className="flex items-start justify-between">
        <div>
          <p className="text-sm text-gray-500 dark:text-gray-400">{title}</p>
          <p className="text-2xl font-bold text-gray-900 dark:text-white mt-1">{value}</p>
          {trend && (
            <p className="text-xs text-green-600 flex items-center gap-1 mt-2">
              <TrendingUp className="w-3 h-3" />
              {trend}
            </p>
          )}
        </div>
        <div className={`p-3 rounded-xl ${color}`}>{icon}</div>
      </div>
    </div>
  );
}

interface AlertItemProps {
  title: string;
  device: string;
  severity: string;
  time: string;
}

function AlertItem({ title, device, severity, time }: AlertItemProps) {
  const severityColors: Record<string, string> = {
    critical: "bg-red-100 text-red-600 dark:bg-red-900/30",
    warning: "bg-yellow-100 text-yellow-600 dark:bg-yellow-900/30",
    info: "bg-blue-100 text-blue-600 dark:bg-blue-900/30",
  };

  return (
    <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
      <div className={`p-2 rounded-lg ${severityColors[severity] || severityColors.info}`}>
        <AlertTriangle className="w-4 h-4" />
      </div>
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{title}</p>
        <p className="text-xs text-gray-500 dark:text-gray-400">{device}</p>
      </div>
      <span className="text-xs text-gray-400">{time}</span>
    </div>
  );
}

export default function DashboardPage() {
  const t = useTranslations("dashboard");
  const params = useParams();
  const locale = params.locale as string;
  const [stats, setStats] = useState<DashboardStats | null>(null);
  const [recentAlerts, setRecentAlerts] = useState<any[]>([]);
  const [devices, setDevices] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);

  const fetchData = async () => {
    try {
      api.loadToken();
      const [statsData, alertsData, devicesData] = await Promise.all([
        api.getDashboardStats(),
        api.getRecentAlerts(5),
        api.getDevices({ page_size: 6 }),
      ]);
      setStats(statsData);
      setRecentAlerts(alertsData);
      setDevices(devicesData.items || []);
    } catch (error) {
      console.error("Failed to fetch dashboard data:", error);
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  };

  useEffect(() => {
    fetchData();
    const interval = setInterval(fetchData, 30000);
    return () => clearInterval(interval);
  }, []);

  const handleRefresh = () => {
    setRefreshing(true);
    fetchData();
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Page Title */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{t("title")}</h1>
          <p className="text-gray-500 dark:text-gray-400 mt-1">
            {t("welcome", { name: "" })}
          </p>
        </div>
        <button
          onClick={handleRefresh}
          disabled={refreshing}
          className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
        >
          <RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin' : ''}`} />
          تحديث
        </button>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard
          title={t("totalDevices")}
          value={stats?.devices.total || 0}
          icon={<Cpu className="w-6 h-6 text-blue-600" />}
          color="bg-blue-100 dark:bg-blue-900/30"
        />
        <StatCard
          title={t("onlineDevices")}
          value={stats?.devices.online || 0}
          icon={<Wifi className="w-6 h-6 text-green-600" />}
          color="bg-green-100 dark:bg-green-900/30"
        />
        <StatCard
          title={t("offlineDevices")}
          value={stats?.devices.offline || 0}
          icon={<WifiOff className="w-6 h-6 text-gray-600" />}
          color="bg-gray-100 dark:bg-gray-700"
        />
        <StatCard
          title={t("activeAlerts")}
          value={stats?.alerts.active || 0}
          icon={<Bell className="w-6 h-6 text-red-600" />}
          color="bg-red-100 dark:bg-red-900/30"
        />
      </div>

      {/* Content Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Recent Alerts */}
        <div className="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
          <div className="p-4 border-b border-gray-100 dark:border-gray-700">
            <h2 className="font-semibold text-gray-900 dark:text-white">{t("recentAlerts")}</h2>
          </div>
          <div className="p-2">
            {recentAlerts.length > 0 ? (
              recentAlerts.map((alert) => (
                <AlertItem
                  key={alert.id}
                  title={alert.title}
                  device={alert.device_name || "Unknown"}
                  severity={alert.severity || "info"}
                  time={new Date(alert.triggered_at).toLocaleTimeString("ar-SA")}
                />
              ))
            ) : (
              <div className="p-8 text-center text-gray-500">
                <Bell className="w-12 h-12 mx-auto mb-2 opacity-50" />
                <p>لا توجد تنبيهات حديثة</p>
              </div>
            )}
          </div>
        </div>

        {/* Quick Stats */}
        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
          <div className="p-4 border-b border-gray-100 dark:border-gray-700">
            <h2 className="font-semibold text-gray-900 dark:text-white">{t("deviceStatus")}</h2>
          </div>
          <div className="p-4 space-y-4">
            {/* Device Status Chart Placeholder */}
            <div className="flex items-center justify-center h-48">
              <div className="relative w-32 h-32">
                <svg className="w-full h-full transform -rotate-90">
                  <circle
                    cx="64"
                    cy="64"
                    r="56"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="12"
                    className="text-gray-200 dark:text-gray-700"
                  />
                  <circle
                    cx="64"
                    cy="64"
                    r="56"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="12"
                    strokeLinecap="round"
                    strokeDasharray={`${((stats?.devices.online || 0) / Math.max(stats?.devices.total || 1, 1)) * 352} 352`}
                    className="text-green-500"
                  />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="text-center">
                    <p className="text-2xl font-bold text-gray-900 dark:text-white">
                      {stats?.devices.total ? Math.round((stats.devices.online / stats.devices.total) * 100) : 0}%
                    </p>
                    <p className="text-xs text-gray-500">متصل</p>
                  </div>
                </div>
              </div>
            </div>

            {/* Legend */}
            <div className="flex justify-center gap-6 text-sm">
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-green-500"></div>
                <span className="text-gray-600 dark:text-gray-400">متصل ({stats?.devices.online || 0})</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-gray-300"></div>
                <span className="text-gray-600 dark:text-gray-400">غير متصل ({stats?.devices.offline || 0})</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Live Devices Section */}
      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
        <div className="p-4 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
          <h2 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
            <Activity className="w-5 h-5 text-primary" />
            الأجهزة والقراءات الحية
          </h2>
          <Link 
            href={`/${locale}/dashboard/devices`}
            className="text-sm text-primary hover:underline flex items-center gap-1"
          >
            عرض الكل
            <ArrowUpRight className="w-4 h-4" />
          </Link>
        </div>
        <div className="p-4">
          {devices.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {devices.map((device: any) => {
                const readings = device.device_metadata?.readings;
                return (
                  <Link
                    key={device.id}
                    href={`/${locale}/dashboard/devices/${device.id}`}
                    className="p-4 bg-gray-50 dark:bg-gray-900 rounded-xl hover:shadow-md transition-all border border-transparent hover:border-primary/30"
                  >
                    <div className="flex items-center justify-between mb-3">
                      <div className="flex items-center gap-2">
                        <div className={`w-2 h-2 rounded-full ${device.is_online ? 'bg-green-500 animate-pulse' : 'bg-red-500'}`}></div>
                        <span className="font-medium text-gray-900 dark:text-white">{device.name}</span>
                      </div>
                      <span className={`text-xs px-2 py-0.5 rounded-full ${
                        device.is_online 
                          ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' 
                          : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
                      }`}>
                        {device.is_online ? 'متصل' : 'غير متصل'}
                      </span>
                    </div>
                    
                    {readings && (
                      <div className="grid grid-cols-2 gap-2">
                        {readings.temperature !== undefined && (
                          <div className="flex items-center gap-2 text-sm">
                            <Thermometer className="w-4 h-4 text-orange-500" />
                            <span className="text-gray-600 dark:text-gray-400">{readings.temperature}°C</span>
                          </div>
                        )}
                        {readings.humidity !== undefined && (
                          <div className="flex items-center gap-2 text-sm">
                            <Droplets className="w-4 h-4 text-blue-500" />
                            <span className="text-gray-600 dark:text-gray-400">{readings.humidity}%</span>
                          </div>
                        )}
                        {readings.illuminance !== undefined && (
                          <div className="flex items-center gap-2 text-sm">
                            <Sun className="w-4 h-4 text-yellow-500" />
                            <span className="text-gray-600 dark:text-gray-400">{readings.illuminance} lux</span>
                          </div>
                        )}
                        {readings.battery !== undefined && (
                          <div className="flex items-center gap-2 text-sm">
                            <Battery className="w-4 h-4 text-green-500" />
                            <span className="text-gray-600 dark:text-gray-400">{readings.battery}%</span>
                          </div>
                        )}
                      </div>
                    )}
                  </Link>
                );
              })}
            </div>
          ) : (
            <div className="text-center py-8 text-gray-500">
              <Cpu className="w-12 h-12 mx-auto mb-2 opacity-50" />
              <p>لا توجد أجهزة</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}