"use client";

import { useState, useEffect } from "react";
import { useTranslations } from "next-intl";
import { useAuthStore } from "@/stores/authStore";
import { api } from "@/lib/api";
import axios from "axios";
import { 
  Settings, User, Bell, Shield, Globe, Moon, Sun, Save, Check, 
  Mail, Server, TestTube, AlertTriangle, Thermometer, Droplets,
  Lock, Eye, EyeOff, Send, BellRing, Webhook, Clock
} from "lucide-react";

// إنشاء axios instance مع interceptor للـ token
const API_BASE = process.env.NEXT_PUBLIC_API_URL || "https://smart-life.online";
const apiClient = axios.create({
  baseURL: `${API_BASE}/api/v1`,
  headers: {
    "Content-Type": "application/json",
  },
});

apiClient.interceptors.request.use((config) => {
  const token = localStorage.getItem("token") || localStorage.getItem("access_token");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

interface SettingsData {
  smtp_enabled: boolean;
  smtp_host: string;
  smtp_port: number;
  smtp_username: string;
  smtp_password: string;
  smtp_from_email: string;
  smtp_from_name: string;
  smtp_use_tls: boolean;
  smtp_use_ssl: boolean;
  alert_email_enabled: boolean;
  alert_email_recipients: string;
  alert_sms_enabled: boolean;
  alert_webhook_enabled: boolean;
  alert_webhook_url: string;
  default_temp_high: number;
  default_temp_low: number;
  default_humidity_high: number;
  default_humidity_low: number;
  dashboard_refresh_interval: number;
  timezone: string;
  language: string;
}

export default function SettingsPage() {
  const t = useTranslations("settings");
  const { user } = useAuthStore();
  const [activeTab, setActiveTab] = useState<"general" | "smtp" | "alerts" | "appearance">("general");
  const [darkMode, setDarkMode] = useState(false);
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [testing, setTesting] = useState(false);
  const [testResult, setTestResult] = useState<{success: boolean; message: string} | null>(null);
  const [showPassword, setShowPassword] = useState(false);
  const [testEmail, setTestEmail] = useState("");
  
  const [settings, setSettings] = useState<SettingsData>({
    smtp_enabled: false,
    smtp_host: "",
    smtp_port: 587,
    smtp_username: "",
    smtp_password: "",
    smtp_from_email: "",
    smtp_from_name: "SmartLife",
    smtp_use_tls: true,
    smtp_use_ssl: false,
    alert_email_enabled: true,
    alert_email_recipients: "",
    alert_sms_enabled: false,
    alert_webhook_enabled: false,
    alert_webhook_url: "",
    default_temp_high: 30,
    default_temp_low: 10,
    default_humidity_high: 70,
    default_humidity_low: 20,
    dashboard_refresh_interval: 30,
    timezone: "Asia/Riyadh",
    language: "ar"
  });

  useEffect(() => {
    const loadSettings = async () => {
      try {
        api.loadToken();
        const data = await api.getSettings();
        console.log("=== LOADED SETTINGS ===");
        console.log("smtp_password:", data.smtp_password);
        console.log("has_smtp_password:", data.has_smtp_password);
        setSettings(prev => ({ ...prev, ...data }));
      } catch (error) {
        console.error("Failed to load settings:", error);
      }
    };
    loadSettings();
  }, []);

  const handleSave = async () => {
    setSaving(true);
    try {
      api.loadToken();
      const updatedSettings = await api.updateSettings(settings);
      
      // تحديث الإعدادات المحلية بالقيم المرجعة من الخادم (بما في ذلك كلمة المرور)
      if (updatedSettings) {
        setSettings(prev => ({ ...prev, ...updatedSettings }));
      }
      
      if (darkMode) {
        document.documentElement.classList.add("dark");
      } else {
        document.documentElement.classList.remove("dark");
      }
      
      setSaved(true);
      setTimeout(() => setSaved(false), 3000);
    } catch (error) {
      console.error("Failed to save settings:", error);
      alert("فشل في حفظ الإعدادات");
    } finally {
      setSaving(false);
    }
  };

  const handleTestSMTP = async () => {
    if (!testEmail) {
      setTestResult({ success: false, message: "الرجاء إدخال بريد إلكتروني للاختبار" });
      return;
    }
    
    if (!settings.smtp_host || !settings.smtp_username || !settings.smtp_password) {
      setTestResult({ success: false, message: "يجب إدخال جميع بيانات SMTP (الخادم، المستخدم، كلمة المرور)" });
      return;
    }
    
    setTesting(true);
    setTestResult(null);
    
    const requestData = {
      recipient_email: testEmail,
      smtp_host: settings.smtp_host,
      smtp_port: settings.smtp_port,
      smtp_username: settings.smtp_username,
      smtp_password: settings.smtp_password,
      smtp_from_email: settings.smtp_from_email,
      smtp_from_name: settings.smtp_from_name,
      smtp_use_tls: settings.smtp_use_tls,
      smtp_use_ssl: settings.smtp_use_ssl
    };
    
    console.log("=== SMTP TEST REQUEST ===");
    console.log("URL:", "http://localhost:8000/api/v1/settings/smtp/test");
    console.log("Data:", JSON.stringify(requestData, null, 2));
    console.log("Token:", localStorage.getItem("token") || localStorage.getItem("access_token"));
    
    try {
      const response = await apiClient.post("/settings/smtp/test", requestData);
      console.log("Response:", response.data);
      setTestResult(response.data);
    } catch (error: any) {
      console.error("Test SMTP error:", error);
      console.error("Error response:", error.response?.data);
      console.error("Error status:", error.response?.status);
      const message = error.response?.data?.detail || error.response?.data?.message || error.message || "فشل في الاتصال بالخادم";
      setTestResult({ success: false, message });
    } finally {
      setTesting(false);
    }
  };

  const tabs = [
    { id: "general", label: "عام", icon: <User className="w-4 h-4" /> },
    { id: "smtp", label: "إعدادات SMTP", icon: <Mail className="w-4 h-4" /> },
    { id: "alerts", label: "التنبيهات", icon: <BellRing className="w-4 h-4" /> },
    { id: "appearance", label: "المظهر", icon: <Sun className="w-4 h-4" /> },
  ];

  return (
    <div className="space-y-6">
      {/* Header */}
      <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>

      {/* Tabs */}
      <div className="border-b border-gray-200 dark:border-gray-700">
        <nav className="flex gap-4 -mb-px">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id as any)}
              className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
                activeTab === tab.id
                  ? "border-primary text-primary"
                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
              }`}
            >
              {tab.icon}
              {tab.label}
            </button>
          ))}
        </nav>
      </div>

      {/* Tab Content */}
      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
        {/* General Tab */}
        {activeTab === "general" && (
          <div className="space-y-6">
            <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
              <User className="w-5 h-5" />
              الإعدادات العامة
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  الاسم الكامل
                </label>
                <input
                  type="text"
                  defaultValue={user?.full_name}
                  className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 focus:ring-2 focus:ring-primary focus:border-transparent"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  البريد الإلكتروني
                </label>
                <input
                  type="email"
                  defaultValue={user?.email}
                  disabled
                  className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  المنطقة الزمنية
                </label>
                <select
                  value={settings.timezone}
                  onChange={(e) => setSettings({...settings, timezone: 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 focus:ring-2 focus:ring-primary focus:border-transparent"
                >
                  <option value="Asia/Riyadh">Asia/Riyadh (GMT+3)</option>
                  <option value="Asia/Dubai">Asia/Dubai (GMT+4)</option>
                  <option value="Europe/London">Europe/London (GMT+0)</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  فترة تحديث لوحة التحكم (ثانية)
                </label>
                <input
                  type="number"
                  value={settings.dashboard_refresh_interval}
                  onChange={(e) => setSettings({...settings, dashboard_refresh_interval: parseInt(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 focus:ring-2 focus:ring-primary focus:border-transparent"
                />
              </div>
            </div>
          </div>
        )}

        {/* SMTP Tab */}
        {activeTab === "smtp" && (
          <div className="space-y-6">
            <div className="flex items-center justify-between">
              <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                <Mail className="w-5 h-5" />
                إعدادات خادم البريد SMTP
              </h2>
              <button
                onClick={() => setSettings({...settings, smtp_enabled: !settings.smtp_enabled})}
                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                  settings.smtp_enabled 
                    ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" 
                    : "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
                }`}
              >
                {settings.smtp_enabled ? "✓ مفعّل" : "معطّل"}
              </button>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  خادم SMTP
                </label>
                <input
                  type="text"
                  value={settings.smtp_host}
                  onChange={(e) => setSettings({...settings, smtp_host: e.target.value})}
                  placeholder="smtp.gmail.com"
                  className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 focus:ring-2 focus:ring-primary focus:border-transparent"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  المنفذ
                </label>
                <input
                  type="number"
                  value={settings.smtp_port}
                  onChange={(e) => setSettings({...settings, smtp_port: parseInt(e.target.value)})}
                  placeholder="587"
                  className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 focus:ring-2 focus:ring-primary focus:border-transparent"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  اسم المستخدم
                </label>
                <input
                  type="text"
                  value={settings.smtp_username}
                  onChange={(e) => setSettings({...settings, smtp_username: e.target.value})}
                  placeholder="your-email@gmail.com"
                  className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 focus:ring-2 focus:ring-primary focus:border-transparent"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  كلمة المرور
                  {(settings as any).has_smtp_password && !settings.smtp_password && (
                    <span className="text-green-600 text-xs mr-2">✓ محفوظة</span>
                  )}
                </label>
                <div className="relative">
                  <input
                    type={showPassword ? "text" : "password"}
                    value={settings.smtp_password}
                    onChange={(e) => setSettings({...settings, smtp_password: e.target.value})}
                    placeholder={(settings as any).has_smtp_password ? "اتركه فارغاً للإبقاء على كلمة المرور الحالية" : "أدخل كلمة المرور"}
                    className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 focus:ring-2 focus:ring-primary focus:border-transparent"
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                  >
                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                  </button>
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  البريد المرسل
                </label>
                <input
                  type="email"
                  value={settings.smtp_from_email}
                  onChange={(e) => setSettings({...settings, smtp_from_email: e.target.value})}
                  placeholder="noreply@company.com"
                  className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 focus:ring-2 focus:ring-primary focus:border-transparent"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  اسم المرسل
                </label>
                <input
                  type="text"
                  value={settings.smtp_from_name}
                  onChange={(e) => setSettings({...settings, smtp_from_name: e.target.value})}
                  placeholder="SmartLife"
                  className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 focus:ring-2 focus:ring-primary focus:border-transparent"
                />
              </div>
            </div>

            <div className="flex items-center gap-6">
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={settings.smtp_use_tls}
                  onChange={(e) => setSettings({...settings, smtp_use_tls: e.target.checked, smtp_use_ssl: false})}
                  className="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary"
                />
                <span className="text-sm text-gray-700 dark:text-gray-300">استخدام TLS</span>
              </label>
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={settings.smtp_use_ssl}
                  onChange={(e) => setSettings({...settings, smtp_use_ssl: e.target.checked, smtp_use_tls: false})}
                  className="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary"
                />
                <span className="text-sm text-gray-700 dark:text-gray-300">استخدام SSL</span>
              </label>
            </div>

            {/* Test SMTP */}
            <div className="border-t border-gray-200 dark:border-gray-700 pt-6">
              <h3 className="text-md font-medium text-gray-900 dark:text-white mb-4">اختبار الإعدادات</h3>
              <div className="flex gap-4">
                <input
                  type="email"
                  value={testEmail}
                  onChange={(e) => setTestEmail(e.target.value)}
                  placeholder="أدخل بريد إلكتروني للاختبار"
                  className="flex-1 px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 focus:ring-2 focus:ring-primary focus:border-transparent"
                />
                <button
                  onClick={handleTestSMTP}
                  disabled={testing}
                  className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
                >
                  <Send className="w-4 h-4" />
                  {testing ? "جاري الاختبار..." : "إرسال بريد تجريبي"}
                </button>
              </div>
              {testResult && (
                <div className={`mt-4 p-4 rounded-lg ${testResult.success ? "bg-green-50 text-green-700" : "bg-red-50 text-red-700"}`}>
                  {testResult.message}
                </div>
              )}
            </div>
          </div>
        )}

        {/* Alerts Tab */}
        {activeTab === "alerts" && (
          <div className="space-y-6">
            <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
              <BellRing className="w-5 h-5" />
              إعدادات التنبيهات
            </h2>

            {/* Email Alerts */}
            <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-3">
                  <Mail className="w-5 h-5 text-blue-600" />
                  <div>
                    <p className="font-medium text-gray-900 dark:text-white">تنبيهات البريد الإلكتروني</p>
                    <p className="text-sm text-gray-500">إرسال التنبيهات عبر البريد الإلكتروني</p>
                  </div>
                </div>
                <button
                  onClick={() => setSettings({...settings, alert_email_enabled: !settings.alert_email_enabled})}
                  className={`w-12 h-6 rounded-full p-1 transition-colors ${
                    settings.alert_email_enabled ? "bg-primary" : "bg-gray-300 dark:bg-gray-600"
                  }`}
                >
                  <div className={`w-4 h-4 bg-white rounded-full transition-transform ${
                    settings.alert_email_enabled ? "translate-x-6" : ""
                  }`} />
                </button>
              </div>
              {settings.alert_email_enabled && (
                <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={settings.alert_email_recipients}
                      onChange={(e) => setSettings({...settings, alert_email_recipients: e.target.value})}
                      placeholder="admin@company.com, support@company.com"
                      className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 focus:ring-2 focus:ring-primary focus:border-transparent"
                    />
                  </div>
                  <button
                    onClick={async () => {
                      const recipientEmail = settings.alert_email_recipients?.split(",")[0]?.trim();
                      if (!recipientEmail) {
                        setTestResult({ success: false, message: "الرجاء إدخال عنوان بريد إلكتروني أولاً" });
                        return;
                      }
                      if (!settings.smtp_enabled) {
                        setTestResult({ success: false, message: "يرجى تفعيل SMTP أولاً" });
                        return;
                      }
                      setTesting(true);
                      setTestResult(null);
                      try {
                        console.log("Sending test alert to:", recipientEmail);
                        console.log("Token:", localStorage.getItem("token") || localStorage.getItem("access_token"));
                        const response = await apiClient.post("/settings/smtp/test-alert", {
                          recipient_email: recipientEmail,
                          alert_type: "threshold",
                          device_name: "مستشعر درجة الحرارة - اختبار",
                          reading_type: "temperature",
                          current_value: 35.5,
                          threshold_value: 30,
                          condition: "above",
                          severity: "high"
                        });
                        console.log("Response:", response.data);
                        setTestResult(response.data);
                      } catch (error: any) {
                        console.error("Test alert error:", error);
                        console.error("Error response:", error.response?.data);
                        const message = error.response?.data?.message || error.response?.data?.detail || error.message || "فشل في إرسال التنبيه";
                        setTestResult({ success: false, message });
                      } finally {
                        setTesting(false);
                      }
                    }}
                    disabled={testing}
                    className="flex items-center gap-2 px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 disabled:opacity-50"
                  >
                    <AlertTriangle className="w-4 h-4" />
                    {testing ? "جاري الإرسال..." : "إرسال تنبيه تجريبي"}
                  </button>
                </div>
              )}
            </div>

            {/* Webhook Alerts */}
            <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-3">
                  <Webhook className="w-5 h-5 text-purple-600" />
                  <div>
                    <p className="font-medium text-gray-900 dark:text-white">Webhook</p>
                    <p className="text-sm text-gray-500">إرسال التنبيهات إلى URL خارجي</p>
                  </div>
                </div>
                <button
                  onClick={() => setSettings({...settings, alert_webhook_enabled: !settings.alert_webhook_enabled})}
                  className={`w-12 h-6 rounded-full p-1 transition-colors ${
                    settings.alert_webhook_enabled ? "bg-primary" : "bg-gray-300 dark:bg-gray-600"
                  }`}
                >
                  <div className={`w-4 h-4 bg-white rounded-full transition-transform ${
                    settings.alert_webhook_enabled ? "translate-x-6" : ""
                  }`} />
                </button>
              </div>
              {settings.alert_webhook_enabled && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Webhook URL
                  </label>
                  <input
                    type="url"
                    value={settings.alert_webhook_url}
                    onChange={(e) => setSettings({...settings, alert_webhook_url: e.target.value})}
                    placeholder="https://api.example.com/webhook"
                    className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 focus:ring-2 focus:ring-primary focus:border-transparent"
                  />
                </div>
              )}
            </div>

            {/* Alert Interval Settings */}
            <div className="border-t border-gray-200 dark:border-gray-700 pt-6">
              <h3 className="text-md font-medium text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                <Clock className="w-5 h-5 text-blue-500" />
                إعدادات فترات التنبيه
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    الوقت بين التنبيهات المتكررة (بالدقائق)
                  </label>
                  <input
                    type="number"
                    value={(settings as any).alert_cooldown_minutes || 15}
                    onChange={(e) => setSettings({...settings, alert_cooldown_minutes: parseInt(e.target.value)} as any)}
                    min={1}
                    className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                  />
                  <p className="text-xs text-gray-500 mt-1">الفترة الزمنية قبل إرسال تنبيه آخر لنفس القاعدة</p>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    فترة تحديث لوحة التحكم (ثانية)
                  </label>
                  <input
                    type="number"
                    value={settings.dashboard_refresh_interval}
                    onChange={(e) => setSettings({...settings, dashboard_refresh_interval: parseInt(e.target.value)})}
                    min={10}
                    className="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
                  />
                  <p className="text-xs text-gray-500 mt-1">يُستخدم أيضاً كزمن للاستعلام عن التنبيهات</p>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Appearance Tab */}
        {activeTab === "appearance" && (
          <div className="space-y-6">
            <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
              {darkMode ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />}
              المظهر واللغة
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Theme Selection */}
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                  السمة
                </label>
                <div className="space-y-3">
                  <button
                    onClick={() => setDarkMode(false)}
                    className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border ${
                      !darkMode
                        ? "border-primary bg-primary/10"
                        : "border-gray-200 dark:border-gray-700"
                    }`}
                  >
                    <Sun className="w-5 h-5" />
                    <span>الوضع الفاتح</span>
                  </button>
                  <button
                    onClick={() => setDarkMode(true)}
                    className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg border ${
                      darkMode
                        ? "border-primary bg-primary/10"
                        : "border-gray-200 dark:border-gray-700"
                    }`}
                  >
                    <Moon className="w-5 h-5" />
                    <span>الوضع الداكن</span>
                  </button>
                </div>
              </div>

              {/* Language Selection */}
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                  اللغة
                </label>
                <select
                  value={settings.language}
                  onChange={(e) => setSettings({...settings, language: 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 focus:ring-2 focus:ring-primary focus:border-transparent"
                >
                  <option value="ar">العربية</option>
                  <option value="en">English</option>
                </select>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Save Button */}
      <div className="flex justify-end items-center gap-4">
        {saved && (
          <span className="flex items-center gap-2 text-green-600">
            <Check className="w-5 h-5" />
            تم الحفظ بنجاح
          </span>
        )}
        <button 
          onClick={handleSave}
          disabled={saving}
          className="flex items-center gap-2 px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50"
        >
          <Save className="w-5 h-5" />
          {saving ? "جاري الحفظ..." : "حفظ الإعدادات"}
        </button>
      </div>
    </div>
  );
}