"use client";

import { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import { api } from "@/lib/api";
import { 
  Bell, AlertTriangle, CheckCircle, Clock, Filter, Plus, 
  Trash2, Edit2, Power, Thermometer, Droplets, Battery, X, Wifi, WifiOff,
  Download, FileJson, FileSpreadsheet
} from "lucide-react";

interface Alert {
  id: number;
  device_id: string;
  device_name?: string;
  severity: string;
  message: string;
  is_read: boolean;
  is_resolved: boolean;
  triggered_at: string;
}

interface AlertRule {
  id: number;
  name: string;
  device_id: string;
  device_name?: string;
  reading_type: string;
  condition_type: string;
  threshold_value: number;
  severity: string;
  is_active: boolean;
}

interface Device {
  id: string;
  name: string;
}

export default function AlertsPage() {
  const t = useTranslations("alerts");
  const [activeTab, setActiveTab] = useState<"logs" | "rules">("logs");
  const [alerts, setAlerts] = useState<Alert[]>([]);
  const [rules, setRules] = useState<AlertRule[]>([]);
  const [devices, setDevices] = useState<Device[]>([]);
  const [loading, setLoading] = useState(true);
  const [showRuleModal, setShowRuleModal] = useState(false);
  const [editingRule, setEditingRule] = useState<AlertRule | null>(null);
  const [ruleForm, setRuleForm] = useState({
    name: "",
    device_id: "",
    reading_type: "temperature",
    condition_type: "greater_than",
    threshold_value: 30,
    severity: "warning"
  });

  const fetchData = async () => {
    try {
      api.loadToken();
      const [alertsData, rulesData, devicesData] = await Promise.all([
        api.getAlertLogs().catch(() => ({ items: [] })),
        api.getAlertRules().catch(() => ({ items: [] })),
        api.getDevices({ page_size: 100 }).catch(() => ({ items: [] })),
      ]);
      setAlerts(alertsData.items || []);
      setRules(rulesData.items || []);
      setDevices(devicesData.items || []);
    } catch (error) {
      console.error("Failed to fetch data:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
    
    // تحديث تلقائي كل 30 ثانية
    const interval = setInterval(() => {
      fetchData();
    }, 30000);
    
    return () => clearInterval(interval);
  }, []);

  const resetForm = () => {
    setRuleForm({
      name: "",
      device_id: "",
      reading_type: "temperature",
      condition_type: "greater_than",
      threshold_value: 30,
      severity: "warning"
    });
    setEditingRule(null);
  };

  const openAddModal = () => {
    resetForm();
    setShowRuleModal(true);
  };

  const openEditModal = (rule: AlertRule) => {
    setEditingRule(rule);
    setRuleForm({
      name: rule.name,
      device_id: rule.device_id,
      reading_type: rule.reading_type,
      condition_type: rule.condition_type,
      threshold_value: rule.threshold_value,
      severity: rule.severity
    });
    setShowRuleModal(true);
  };

  const handleSaveRule = async () => {
    try {
      api.loadToken();
      if (editingRule) {
        // تعديل قاعدة موجودة
        await api.updateAlertRule(String(editingRule.id), ruleForm);
        setRules(rules.map(r => r.id === editingRule.id ? { ...r, ...ruleForm } : r));
      } else {
        // إضافة قاعدة جديدة
        await api.createAlertRule(ruleForm);
        const rulesData = await api.getAlertRules();
        setRules(rulesData.items || []);
      }
      setShowRuleModal(false);
      resetForm();
    } catch (error) {
      console.error("Failed to save rule:", error);
      alert(editingRule ? "فشل في تعديل القاعدة" : "فشل في إنشاء القاعدة");
    }
  };

  const handleDeleteRule = async (ruleId: number) => {
    if (!confirm("هل أنت متأكد من حذف هذه القاعدة؟")) return;
    try {
      api.loadToken();
      await api.deleteAlertRule(String(ruleId));
      setRules(rules.filter(r => r.id !== ruleId));
    } catch (error) {
      console.error("Failed to delete rule:", error);
    }
  };

  const handleToggleRule = async (rule: AlertRule) => {
    try {
      api.loadToken();
      await api.updateAlertRule(String(rule.id), { is_active: !rule.is_active });
      setRules(rules.map(r => r.id === rule.id ? { ...r, is_active: !r.is_active } : r));
    } catch (error) {
      console.error("Failed to toggle rule:", error);
    }
  };

  const handleDeleteAlert = async (alertId: number) => {
    if (!confirm("هل أنت متأكد من حذف هذا التنبيه؟")) return;
    try {
      const token = localStorage.getItem("token");
      const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000/api/v1";
      await fetch(`${baseUrl}/alerts/logs/${alertId}`, { 
        method: "DELETE",
        headers: { Authorization: `Bearer ${token}` }
      });
      setAlerts(alerts.filter(a => a.id !== alertId));
    } catch (error) {
      console.error("Failed to delete alert:", error);
    }
  };

  const handleDeleteAllAlerts = async (resolvedOnly: boolean = false) => {
    const msg = resolvedOnly 
      ? "هل أنت متأكد من حذف جميع التنبيهات المحلولة؟" 
      : "هل أنت متأكد من حذف جميع التنبيهات؟";
    if (!confirm(msg)) return;
    try {
      const token = localStorage.getItem("token");
      const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000/api/v1";
      await fetch(`${baseUrl}/alerts/logs?resolved_only=${resolvedOnly}`, { 
        method: "DELETE",
        headers: { Authorization: `Bearer ${token}` }
      });
      if (resolvedOnly) {
        setAlerts(alerts.filter(a => !a.is_resolved));
      } else {
        setAlerts([]);
      }
    } catch (error) {
      console.error("Failed to delete alerts:", error);
    }
  };

  const handleExportAlerts = async (format: "csv" | "json") => {
    try {
      api.loadToken();
      const token = localStorage.getItem("token");
      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000/api/v1"}/alerts/logs/export?format=${format}`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `alerts.${format}`;
      document.body.appendChild(a);
      a.click();
      a.remove();
      window.URL.revokeObjectURL(url);
    } catch (error) {
      console.error("Failed to export alerts:", error);
    }
  };

  const getSeverityColor = (severity: string) => {
    switch (severity) {
      case "critical":
        return "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400";
      case "warning":
        return "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400";
      case "info":
        return "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400";
      default:
        return "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400";
    }
  };

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

  const getReadingTypeIcon = (type: string) => {
    switch (type) {
      case "temperature": return <Thermometer className="w-4 h-4 text-orange-500" />;
      case "humidity": return <Droplets className="w-4 h-4 text-blue-500" />;
      case "battery": return <Battery className="w-4 h-4 text-green-500" />;
      case "connection_status": return <Wifi className="w-4 h-4 text-purple-500" />;
      default: return <AlertTriangle className="w-4 h-4 text-gray-500" />;
    }
  };
  
  const getReadingTypeLabel = (type: string) => {
    switch (type) {
      case "temperature": return "الحرارة";
      case "humidity": return "الرطوبة";
      case "battery": return "البطارية";
      case "connection_status": return "حالة الاتصال";
      default: return type;
    }
  };

  const getConditionLabel = (condition: string) => {
    switch (condition) {
      case "greater_than": return "أكبر من";
      case "less_than": return "أصغر من";
      case "equals": return "يساوي";
      default: return condition;
    }
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <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">{t("subtitle")}</p>
        </div>
        {activeTab === "rules" && (
          <button 
            onClick={() => openAddModal()}
            className="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90"
          >
            <Plus className="w-5 h-5" />
            إضافة قاعدة
          </button>
        )}
        {activeTab === "logs" && alerts.length > 0 && (
          <div className="flex items-center gap-2">
            {/* أزرار التصدير */}
            <div className="flex items-center gap-1 border border-gray-200 dark:border-gray-700 rounded-lg">
              <button
                onClick={() => handleExportAlerts("csv")}
                className="flex items-center gap-1 px-3 py-2 text-sm text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-r-lg"
                title="تصدير CSV"
              >
                <FileSpreadsheet className="w-4 h-4" />
                CSV
              </button>
              <button
                onClick={() => handleExportAlerts("json")}
                className="flex items-center gap-1 px-3 py-2 text-sm text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-l-lg border-r border-gray-200 dark:border-gray-700"
                title="تصدير JSON"
              >
                <FileJson className="w-4 h-4" />
                JSON
              </button>
            </div>
            {/* أزرار الحذف */}
            <div className="flex items-center gap-1 border border-gray-200 dark:border-gray-700 rounded-lg">
              <button
                onClick={() => handleDeleteAllAlerts(true)}
                className="flex items-center gap-1 px-3 py-2 text-sm text-orange-600 hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded-r-lg"
                title="حذف المحلولة"
              >
                <Trash2 className="w-4 h-4" />
                حذف المحلولة
              </button>
              <button
                onClick={() => handleDeleteAllAlerts(false)}
                className="flex items-center gap-1 px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-l-lg border-r border-gray-200 dark:border-gray-700"
                title="حذف الكل"
              >
                <Trash2 className="w-4 h-4" />
                حذف الكل
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Tabs */}
      <div className="border-b border-gray-200 dark:border-gray-700">
        <nav className="flex gap-4 -mb-px">
          <button
            onClick={() => setActiveTab("logs")}
            className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
              activeTab === "logs"
                ? "border-primary text-primary"
                : "border-transparent text-gray-500 hover:text-gray-700"
            }`}
          >
            <Bell className="w-4 h-4" />
            سجل التنبيهات ({alerts.length})
          </button>
          <button
            onClick={() => setActiveTab("rules")}
            className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
              activeTab === "rules"
                ? "border-primary text-primary"
                : "border-transparent text-gray-500 hover:text-gray-700"
            }`}
          >
            <AlertTriangle className="w-4 h-4" />
            قواعد التنبيهات ({rules.length})
          </button>
        </nav>
      </div>

      {/* Alerts Log Tab */}
      {activeTab === "logs" && (
        <>
          {alerts.length === 0 ? (
            <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
              <Bell className="w-12 h-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
                {t("noAlerts")}
              </h3>
              <p className="text-gray-500 dark:text-gray-400">{t("noAlertsDesc")}</p>
            </div>
          ) : (
            <div className="space-y-3">
              {alerts.map((alert) => (
                <div
                  key={alert.id}
                  className={`bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 ${
                    !alert.is_read ? "border-l-4 border-l-primary" : ""
                  }`}
                >
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex items-start gap-3">
                      <div className={`p-2 rounded-lg ${getSeverityColor(alert.severity)}`}>
                        <AlertTriangle className="w-5 h-5" />
                      </div>
                      <div>
                        <h3 className="font-medium text-gray-900 dark:text-white">
                          {alert.message}
                        </h3>
                        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                          {alert.device_name || alert.device_id}
                        </p>
                        <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
                          <span className="flex items-center gap-1">
                            <Clock className="w-3 h-3" />
                            {new Date(alert.triggered_at).toLocaleString()}
                          </span>
                          <span className={`px-2 py-0.5 rounded-full ${getSeverityColor(alert.severity)}`}>
                            {alert.severity}
                          </span>
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      {alert.is_resolved && (
                        <span className="flex items-center gap-1 text-xs text-green-600 bg-green-100 dark:bg-green-900/30 px-2 py-1 rounded-full">
                          <CheckCircle className="w-3 h-3" />
                          {t("resolved")}
                        </span>
                      )}
                      <button
                        onClick={() => handleDeleteAlert(alert.id)}
                        className="text-red-500 hover:text-red-600 p-1"
                        title="حذف"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </>
      )}

      {/* Rules Tab */}
      {activeTab === "rules" && (
        <>
          {rules.length === 0 ? (
            <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
              <AlertTriangle className="w-12 h-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
                لا توجد قواعد تنبيهات
              </h3>
              <p className="text-gray-500 dark:text-gray-400 mb-4">
                أضف قاعدة جديدة لتلقي إشعارات عند تجاوز القيم المحددة
              </p>
              <button 
                onClick={() => openAddModal()}
                className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90"
              >
                <Plus className="w-5 h-5" />
                إضافة قاعدة
              </button>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {rules.map((rule) => (
                <div
                  key={rule.id}
                  className={`bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 ${
                    !rule.is_active ? "opacity-60" : ""
                  }`}
                >
                  <div className="flex items-start justify-between mb-3">
                    <div className="flex items-center gap-2">
                      {getReadingTypeIcon(rule.reading_type)}
                      <h3 className="font-medium text-gray-900 dark:text-white">{rule.name}</h3>
                    </div>
                    <span className={`px-2 py-0.5 rounded-full text-xs ${getSeverityColor(rule.severity)}`}>
                      {rule.severity}
                    </span>
                  </div>
                  
                  <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                    {devices.find(d => d.id === rule.device_id)?.name || rule.device_id}
                  </p>
                  
                  <div className="text-sm text-gray-700 dark:text-gray-300 mb-4 p-2 bg-gray-50 dark:bg-gray-700/50 rounded">
                    {getReadingTypeLabel(rule.reading_type)} {getConditionLabel(rule.condition_type)} {rule.reading_type === "connection_status" ? (rule.threshold_value === 1 ? "متصل" : "غير متصل") : rule.threshold_value}
                  </div>
                  
                  <div className="flex items-center justify-between">
                    <button
                      onClick={() => handleToggleRule(rule)}
                      className={`flex items-center gap-1 text-sm ${
                        rule.is_active ? "text-green-600" : "text-gray-400"
                      }`}
                    >
                      <Power className="w-4 h-4" />
                      {rule.is_active ? "مفعّل" : "معطّل"}
                    </button>
                    <div className="flex items-center gap-2">
                      <button
                        onClick={() => openEditModal(rule)}
                        className="text-blue-500 hover:text-blue-600"
                        title="تعديل"
                      >
                        <Edit2 className="w-4 h-4" />
                      </button>
                      <button
                        onClick={() => handleDeleteRule(rule.id)}
                        className="text-red-500 hover:text-red-600"
                        title="حذف"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </>
      )}

      {/* Add Rule Modal */}
      {showRuleModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white dark:bg-gray-800 rounded-xl p-6 w-full max-w-md mx-4">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
                {editingRule ? "تعديل قاعدة تنبيه" : "إضافة قاعدة تنبيه"}
              </h2>
              <button onClick={() => setShowRuleModal(false)} className="text-gray-400 hover:text-gray-600">
                <X className="w-5 h-5" />
              </button>
            </div>
            
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  اسم القاعدة
                </label>
                <input
                  type="text"
                  value={ruleForm.name}
                  onChange={(e) => setRuleForm({...ruleForm, name: e.target.value})}
                  placeholder="مثال: تنبيه ارتفاع الحرارة"
                  className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  الجهاز
                </label>
                <select
                  value={ruleForm.device_id}
                  onChange={(e) => setRuleForm({...ruleForm, device_id: e.target.value})}
                  className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                >
                  <option value="">اختر جهاز</option>
                  {devices.map((device) => (
                    <option key={device.id} value={device.id}>{device.name}</option>
                  ))}
                </select>
              </div>
              
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    نوع القراءة
                  </label>
                  <select
                    value={ruleForm.reading_type}
                    onChange={(e) => setRuleForm({...ruleForm, reading_type: e.target.value})}
                    className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                  >
                    <option value="temperature">الحرارة</option>
                    <option value="humidity">الرطوبة</option>
                    <option value="battery">البطارية</option>
                    <option value="connection_status">حالة الاتصال</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    الشرط
                  </label>
                  {ruleForm.reading_type === "connection_status" ? (
                    <select
                      value={ruleForm.condition_type}
                      onChange={(e) => setRuleForm({...ruleForm, condition_type: e.target.value})}
                      className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                    >
                      <option value="equals">يساوي</option>
                    </select>
                  ) : (
                    <select
                      value={ruleForm.condition_type}
                      onChange={(e) => setRuleForm({...ruleForm, condition_type: e.target.value})}
                      className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                    >
                      <option value="greater_than">أكبر من</option>
                      <option value="less_than">أصغر من</option>
                      <option value="equals">يساوي</option>
                    </select>
                  )}
                </div>
              </div>
              
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    القيمة
                  </label>
                  {ruleForm.reading_type === "connection_status" ? (
                    <select
                      value={ruleForm.threshold_value}
                      onChange={(e) => setRuleForm({...ruleForm, threshold_value: parseFloat(e.target.value)})}
                      className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                    >
                      <option value={1}>متصل (Online)</option>
                      <option value={0}>غير متصل (Offline)</option>
                    </select>
                  ) : (
                    <input
                      type="number"
                      value={ruleForm.threshold_value}
                      onChange={(e) => setRuleForm({...ruleForm, threshold_value: parseFloat(e.target.value)})}
                      className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                    />
                  )}
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    الشدة
                  </label>
                  <select
                    value={ruleForm.severity}
                    onChange={(e) => setRuleForm({...ruleForm, severity: e.target.value})}
                    className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                  >
                    <option value="info">معلومات</option>
                    <option value="warning">تحذير</option>
                    <option value="critical">حرج</option>
                  </select>
                </div>
              </div>
            </div>
            
            <div className="flex justify-end gap-3 mt-6">
              <button
                onClick={() => setShowRuleModal(false)}
                className="px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50"
              >
                إلغاء
              </button>
              <button
                onClick={handleSaveRule}
                disabled={!ruleForm.name || !ruleForm.device_id}
                className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 disabled:opacity-50"
              >
                {editingRule ? "حفظ التعديلات" : "إضافة"}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}