"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  Sparkles, Bot, Key, Shield, Check, X, Loader2, Save, Wifi,
  Server, Zap, Eye, EyeOff, RefreshCw, ExternalLink, Copy, Terminal,
  Activity, Globe, Cpu, AlertTriangle
} from "lucide-react";
import { AI_MODELS, type AIProvider } from "@/lib/ai/models";
import { cn } from "@/lib/utils";

interface ProviderConfig {
  id: AIProvider;
  name: string;
  nameEn: string;
  logo: string;
  color: string;
  bgColor: string;
  borderColor: string;
  glowColor: string;
  keyPlaceholder: string;
  keyPrefix: string;
  docsUrl: string;
  description: string;
  envKey: string;
}

const PROVIDERS: ProviderConfig[] = [
  {
    id: "openai",
    name: "OpenAI",
    nameEn: "OpenAI",
    logo: "🤖",
    color: "text-emerald-400",
    bgColor: "bg-emerald-500/10",
    borderColor: "border-emerald-500/20",
    glowColor: "shadow-emerald-500/10",
    keyPlaceholder: "sk-proj-xxxxxxxxxxxxxxxxxxxx",
    keyPrefix: "sk-",
    docsUrl: "https://platform.openai.com/api-keys",
    description: "GPT-4o, GPT-4o Mini — أقوى نماذج المحادثة والتحليل",
    envKey: "OPENAI_API_KEY",
  },
  {
    id: "claude",
    name: "Anthropic Claude",
    nameEn: "Claude",
    logo: "🔷",
    color: "text-blue-400",
    bgColor: "bg-blue-500/10",
    borderColor: "border-blue-500/20",
    glowColor: "shadow-blue-500/10",
    keyPlaceholder: "sk-ant-xxxxxxxxxxxxxxxxxxxx",
    keyPrefix: "sk-ant-",
    docsUrl: "https://console.anthropic.com/settings/keys",
    description: "Claude 3.5 Sonnet, Claude 3 Haiku — الأفضل في الكتابة الإبداعية",
    envKey: "ANTHROPIC_API_KEY",
  },
  {
    id: "gemini",
    name: "Google Gemini",
    nameEn: "Gemini",
    logo: "✨",
    color: "text-purple-400",
    bgColor: "bg-purple-500/10",
    borderColor: "border-purple-500/20",
    glowColor: "shadow-purple-500/10",
    keyPlaceholder: "AIzaSyxxxxxxxxxxxxxxxxxx",
    keyPrefix: "AIza",
    docsUrl: "https://aistudio.google.com/apikey",
    description: "Gemini 1.5 Pro, Gemini Flash — سياق ضخم 2M توكن",
    envKey: "GOOGLE_GENERATIVE_AI_API_KEY",
  },
  {
    id: "deepseek",
    name: "DeepSeek",
    nameEn: "DeepSeek",
    logo: "🌊",
    color: "text-cyan-400",
    bgColor: "bg-cyan-500/10",
    borderColor: "border-cyan-500/20",
    glowColor: "shadow-cyan-500/10",
    keyPlaceholder: "sk-xxxxxxxxxxxxxxxxxxxx",
    keyPrefix: "sk-",
    docsUrl: "https://platform.deepseek.com/api_keys",
    description: "DeepSeek Chat, DeepSeek Coder — تكلفة منخفضة وأداء عالي",
    envKey: "DEEPSEEK_API_KEY",
  },
  {
    id: "qwen",
    name: "Alibaba Qwen",
    nameEn: "Qwen",
    logo: "🌐",
    color: "text-orange-400",
    bgColor: "bg-orange-500/10",
    borderColor: "border-orange-500/20",
    glowColor: "shadow-orange-500/10",
    keyPlaceholder: "sk-xxxxxxxxxxxxxxxxxxxx",
    keyPrefix: "sk-",
    docsUrl: "https://dashscope.console.aliyun.com/",
    description: "Qwen Max, Qwen Turbo — نماذج Alibaba القوية",
    envKey: "QWEN_API_KEY",
  },
  {
    id: "manus",
    name: "Manus AI",
    nameEn: "Manus",
    logo: "⚡",
    color: "text-amber-400",
    bgColor: "bg-amber-500/10",
    borderColor: "border-amber-500/20",
    glowColor: "shadow-amber-500/10",
    keyPlaceholder: "manus-xxxxxxxxxxxxxxxxxxxx",
    keyPrefix: "manus-",
    docsUrl: "https://manus.ai/docs",
    description: "Manus AI — نموذج متعدد المهام",
    envKey: "MANUS_API_KEY",
  },
];

interface ConnectionStatus {
  provider: string;
  status: "idle" | "testing" | "connected" | "failed";
  message?: string;
  latency?: number;
  models?: any[];
  modelsCount?: number;
}

export default function AISettingsPage() {
  // API Keys state with lazy initializer
  const [apiKeys, setApiKeys] = useState<Record<string, string>>(() => {
    if (typeof window !== "undefined") {
      const savedKeys = localStorage.getItem("ai_api_keys");
      if (savedKeys) {
        try {
          return JSON.parse(savedKeys);
        } catch {}
      }
    }
    return {};
  });
  const [showKeys, setShowKeys] = useState<Record<string, boolean>>({});
  const [connectionStatus, setConnectionStatus] = useState<Record<string, ConnectionStatus>>({});
  const [saved, setSaved] = useState(false);

  // Ollama state with lazy initializer
  const [ollamaUrl, setOllamaUrl] = useState<string>(() => {
    if (typeof window !== "undefined") {
      return localStorage.getItem("ollama_base_url") || "http://localhost:11434";
    }
    return "http://localhost:11434";
  });
  const [ollamaStatus, setOllamaStatus] = useState<ConnectionStatus>({
    provider: "ollama",
    status: "idle",
  });
  const [ollamaModels, setOllamaModels] = useState<unknown[]>([]);

  // Global testing
  const [testingAll, setTestingAll] = useState(false);

  function handleKeyChange(provider: string, value: string) {
    setApiKeys((prev) => ({ ...prev, [provider]: value }));
  }

  function handleSaveAll() {
    localStorage.setItem("ai_api_keys", JSON.stringify(apiKeys));
    localStorage.setItem("ollama_base_url", ollamaUrl);
    setSaved(true);
    setTimeout(() => setSaved(false), 3000);
  }

  function copyToClipboard(text: string) {
    navigator.clipboard.writeText(text);
  }

  async function testConnection(provider: ProviderConfig) {
    setConnectionStatus((prev) => ({
      ...prev,
      [provider.id]: { provider: provider.id, status: "testing" },
    }));

    try {
      const res = await fetch("/api/ai/test-connection", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          provider: provider.id,
          apiKey: apiKeys[provider.id] || undefined,
        }),
      });

      const data = await res.json();

      setConnectionStatus((prev) => ({
        ...prev,
        [provider.id]: {
          provider: provider.id,
          status: data.success ? "connected" : "failed",
          message: data.message || data.error,
          latency: data.latency,
          models: data.models,
        },
      }));
    } catch (err: any) {
      setConnectionStatus((prev) => ({
        ...prev,
        [provider.id]: {
          provider: provider.id,
          status: "failed",
          message: "فشل الاتصال بالخادم",
        },
      }));
    }
  }

  async function testOllamaConnection() {
    setOllamaStatus({ provider: "ollama", status: "testing" });
    setOllamaModels([]);

    try {
      const res = await fetch("/api/ai/test-connection", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          provider: "ollama",
          ollamaBaseUrl: ollamaUrl,
        }),
      });

      const data = await res.json();

      setOllamaStatus({
        provider: "ollama",
        status: data.success ? "connected" : "failed",
        message: data.message || data.error,
        latency: data.latency,
        modelsCount: data.modelsCount,
      });

      if (data.models) {
        setOllamaModels(data.models);
      }
    } catch {
      setOllamaStatus({
        provider: "ollama",
        status: "failed",
        message: "تعذر الوصول لسيرفر Ollama",
      });
    }
  }

  async function testAllConnections() {
    setTestingAll(true);
    for (const provider of PROVIDERS) {
      if (apiKeys[provider.id]) {
        await testConnection(provider);
      }
    }
    if (ollamaUrl) {
      await testOllamaConnection();
    }
    setTestingAll(false);
  }

  const connectedCount = Object.values(connectionStatus).filter(
    (s) => s.status === "connected"
  ).length + (ollamaStatus.status === "connected" ? 1 : 0);

  const configuredCount = Object.keys(apiKeys).filter((k) => apiKeys[k]?.trim()).length +
    (ollamaUrl && ollamaUrl !== "http://localhost:11434" ? 1 : 0);

  return (
    <div className="p-6 space-y-6 text-right animate-fadeIn" dir="rtl">
      {/* 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-white flex items-center gap-2">
            <Sparkles className="w-6 h-6 text-purple-400" />
            <span>مركز إعدادات الذكاء الاصطناعي</span>
          </h1>
          <p className="text-[#8a8380] text-sm mt-0.5">
            أضف مفاتيح API لتفعيل نماذج الـ AI واختبر الاتصال بكل مزود فوراً
          </p>
        </div>

        <div className="flex items-center gap-2 flex-wrap">
          {/* Test All Button */}
          <button
            onClick={testAllConnections}
            disabled={testingAll}
            className="flex items-center gap-2 bg-[#161b27] hover:bg-gray-850 border border-gray-800 hover:border-gray-700 text-white font-semibold px-4 py-2.5 rounded-xl text-xs transition-colors disabled:opacity-50"
          >
            {testingAll ? (
              <Loader2 className="w-3.5 h-3.5 animate-spin" />
            ) : (
              <Activity className="w-3.5 h-3.5 text-purple-400" />
            )}
            <span>اختبار جميع الاتصالات</span>
          </button>

          {/* Save Button */}
          <button
            onClick={handleSaveAll}
            className="flex items-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-white font-semibold px-5 py-2.5 rounded-xl text-xs transition-colors shadow-lg shadow-emerald-500/20"
          >
            {saved ? <Check className="w-3.5 h-3.5" /> : <Save className="w-3.5 h-3.5" />}
            <span>{saved ? "تم الحفظ!" : "حفظ الكل"}</span>
          </button>
        </div>
      </div>

      {/* Status Overview Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div className="bg-[#101010] border border-gray-800 rounded-xl p-4 flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-purple-500/10 flex items-center justify-center">
            <Bot className="w-5 h-5 text-purple-400" />
          </div>
          <div>
            <p className="text-[11px] text-gray-500 font-bold">المزودين المتاحين</p>
            <p className="text-xl font-black text-white">{PROVIDERS.length + 1}</p>
          </div>
        </div>
        <div className="bg-[#101010] border border-gray-800 rounded-xl p-4 flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center">
            <Key className="w-5 h-5 text-blue-400" />
          </div>
          <div>
            <p className="text-[11px] text-gray-500 font-bold">مفاتيح مُهيّأة</p>
            <p className="text-xl font-black text-white">{configuredCount}</p>
          </div>
        </div>
        <div className="bg-[#101010] border border-gray-800 rounded-xl p-4 flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center">
            <Wifi className="w-5 h-5 text-emerald-400" />
          </div>
          <div>
            <p className="text-[11px] text-gray-500 font-bold">اتصالات نشطة</p>
            <p className="text-xl font-black text-emerald-400">{connectedCount}</p>
          </div>
        </div>
      </div>

      {/* AI Providers Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        {PROVIDERS.map((provider) => {
          const status = connectionStatus[provider.id];
          const hasKey = !!apiKeys[provider.id]?.trim();
          const isVisible = showKeys[provider.id];
          const models = AI_MODELS.filter((m) => m.provider === provider.id);

          return (
            <motion.div
              key={provider.id}
              layout
              className={cn(
                "bg-[#101010] border rounded-2xl p-5 space-y-4 transition-all duration-300",
                status?.status === "connected"
                  ? `${provider.borderColor} shadow-lg ${provider.glowColor}`
                  : "border-gray-800 hover:border-gray-700"
              )}
            >
              {/* Provider Header */}
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className={cn("w-10 h-10 rounded-xl flex items-center justify-center text-lg border", provider.bgColor, provider.borderColor)}>
                    {provider.logo}
                  </div>
                  <div>
                    <h3 className="text-white font-bold text-sm flex items-center gap-2">
                      {provider.name}
                      {status?.status === "connected" && (
                        <span className="text-[9px] bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded-full font-bold flex items-center gap-1">
                          <span className="w-1 h-1 rounded-full bg-emerald-400 animate-pulse" />
                          متصل
                        </span>
                      )}
                      {status?.status === "failed" && (
                        <span className="text-[9px] bg-red-500/10 text-red-400 border border-red-500/20 px-2 py-0.5 rounded-full font-bold">
                          فشل
                        </span>
                      )}
                    </h3>
                    <p className="text-[10px] text-gray-500 mt-0.5">{provider.description}</p>
                  </div>
                </div>

                {/* Latency Badge */}
                {status?.latency && status.status === "connected" && (
                  <span className="text-[9px] text-gray-400 font-mono bg-[#161b27] border border-gray-850 px-2 py-1 rounded-lg">
                    {status.latency}ms
                  </span>
                )}
              </div>

              {/* API Key Input */}
              <div className="space-y-2">
                <label className="block text-[11px] text-gray-400 font-bold">
                  مفتاح الـ API ({provider.envKey})
                </label>
                <div className="flex gap-2">
                  <div className="relative flex-1">
                    <Key className="absolute right-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-600" />
                    <input
                      type={isVisible ? "text" : "password"}
                      value={apiKeys[provider.id] || ""}
                      onChange={(e) => handleKeyChange(provider.id, e.target.value)}
                      placeholder={provider.keyPlaceholder}
                      className="w-full bg-[#161b27] border border-gray-700 focus:border-purple-500 text-white rounded-xl py-2.5 pr-9 pl-10 text-xs outline-none transition-colors font-mono"
                      dir="ltr"
                    />
                    <button
                      type="button"
                      onClick={() => setShowKeys((p) => ({ ...p, [provider.id]: !p[provider.id] }))}
                      className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-600 hover:text-gray-400"
                    >
                      {isVisible ? <EyeOff className="w-3.5 h-3.5" /> : <Eye className="w-3.5 h-3.5" />}
                    </button>
                  </div>

                  {/* Test Button */}
                  <button
                    onClick={() => testConnection(provider)}
                    disabled={!hasKey || status?.status === "testing"}
                    className={cn(
                      "flex items-center gap-1.5 px-3.5 py-2.5 rounded-xl text-xs font-bold transition-all disabled:opacity-30 disabled:cursor-not-allowed",
                      status?.status === "connected"
                        ? "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20"
                        : status?.status === "failed"
                        ? "bg-red-500/10 text-red-400 border border-red-500/20"
                        : "bg-[#161b27] text-gray-300 border border-gray-700 hover:border-purple-500 hover:text-purple-400"
                    )}
                  >
                    {status?.status === "testing" ? (
                      <Loader2 className="w-3.5 h-3.5 animate-spin" />
                    ) : status?.status === "connected" ? (
                      <Check className="w-3.5 h-3.5" />
                    ) : status?.status === "failed" ? (
                      <X className="w-3.5 h-3.5" />
                    ) : (
                      <Wifi className="w-3.5 h-3.5" />
                    )}
                    <span className="hidden sm:inline">
                      {status?.status === "testing" ? "جاري..." : status?.status === "connected" ? "متصل" : status?.status === "failed" ? "إعادة" : "اختبار"}
                    </span>
                  </button>
                </div>

                {/* Status message */}
                <AnimatePresence>
                  {status?.message && (
                    <motion.p
                      initial={{ opacity: 0, y: -5 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0 }}
                      className={cn(
                        "text-[10px] flex items-center gap-1.5 px-3 py-2 rounded-lg",
                        status.status === "connected"
                          ? "text-emerald-400 bg-emerald-500/5 border border-emerald-500/10"
                          : "text-red-400 bg-red-500/5 border border-red-500/10"
                      )}
                    >
                      {status.status === "connected" ? (
                        <Check className="w-3 h-3 flex-shrink-0" />
                      ) : (
                        <AlertTriangle className="w-3 h-3 flex-shrink-0" />
                      )}
                      {status.message}
                    </motion.p>
                  )}
                </AnimatePresence>

                {/* Docs link */}
                <a
                  href={provider.docsUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-[10px] text-gray-500 hover:text-purple-400 flex items-center gap-1 transition-colors"
                >
                  <ExternalLink className="w-3 h-3" />
                  <span>احصل على مفتاح API من {provider.nameEn}</span>
                </a>
              </div>

              {/* Available Models */}
              <div className="flex flex-wrap gap-1.5">
                {models.map((model) => (
                  <span
                    key={model.id}
                    className={cn(
                      "text-[9px] px-2 py-1 rounded-lg border font-medium",
                      hasKey
                        ? `${provider.bgColor} ${provider.color} ${provider.borderColor}`
                        : "bg-gray-800/30 text-gray-500 border-gray-800"
                    )}
                  >
                    {model.name}
                    {model.badge === "fast" && " ⚡"}
                    {model.badge === "smart" && " 🧠"}
                  </span>
                ))}
              </div>
            </motion.div>
          );
        })}
      </div>

      {/* ═══════════ Ollama Section (Special) ═══════════ */}
      <div className={cn(
        "bg-[#101010] border rounded-2xl p-6 space-y-5 transition-all duration-300",
        ollamaStatus.status === "connected"
          ? "border-pink-500/20 shadow-lg shadow-pink-500/10"
          : "border-gray-800"
      )}>
        {/* Ollama Header */}
        <div className="flex items-center justify-between border-b border-gray-800 pb-4">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-pink-500/10 to-purple-500/10 border border-pink-500/20 flex items-center justify-center">
              <Server className="w-6 h-6 text-pink-400" />
            </div>
            <div>
              <h3 className="text-white font-bold text-base flex items-center gap-2">
                🖥️ Ollama — سيرفرك الخاص
                {ollamaStatus.status === "connected" && (
                  <span className="text-[9px] bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded-full font-bold flex items-center gap-1">
                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
                    متصل ونشط
                  </span>
                )}
              </h3>
              <p className="text-[11px] text-gray-500 mt-0.5">
                شغّل نماذج AI محلية على سيرفرك الخاص بدون مفاتيح أو اشتراكات — خصوصية 100%
              </p>
            </div>
          </div>

          {ollamaStatus.latency && ollamaStatus.status === "connected" && (
            <span className="text-xs text-pink-400 font-mono bg-pink-500/10 border border-pink-500/20 px-3 py-1 rounded-lg font-bold">
              {ollamaStatus.latency}ms
            </span>
          )}
        </div>

        {/* Ollama URL Input */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
          <div className="md:col-span-2 space-y-2">
            <label className="block text-xs text-[#b8b3b0] font-bold">
              رابط سيرفر Ollama (Base URL)
            </label>
            <div className="relative">
              <Globe className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-600" />
              <input
                type="text"
                value={ollamaUrl}
                onChange={(e) => setOllamaUrl(e.target.value)}
                placeholder="http://your-server-ip:11434"
                className="w-full bg-[#161b27] border border-gray-700 focus:border-pink-500 text-white rounded-xl py-3 pr-10 pl-4 text-xs outline-none transition-colors font-mono"
                dir="ltr"
              />
            </div>
          </div>

          <button
            onClick={testOllamaConnection}
            disabled={ollamaStatus.status === "testing"}
            className={cn(
              "flex items-center justify-center gap-2 px-5 py-3 rounded-xl text-xs font-bold transition-all",
              ollamaStatus.status === "connected"
                ? "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20"
                : ollamaStatus.status === "failed"
                ? "bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20"
                : "bg-gradient-to-l from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 text-white shadow-lg shadow-pink-500/20"
            )}
          >
            {ollamaStatus.status === "testing" ? (
              <Loader2 className="w-4 h-4 animate-spin" />
            ) : ollamaStatus.status === "connected" ? (
              <Check className="w-4 h-4" />
            ) : ollamaStatus.status === "failed" ? (
              <RefreshCw className="w-4 h-4" />
            ) : (
              <Wifi className="w-4 h-4" />
            )}
            <span>
              {ollamaStatus.status === "testing" ? "جاري الاختبار..." :
                ollamaStatus.status === "connected" ? "متصل بنجاح" :
                ollamaStatus.status === "failed" ? "إعادة المحاولة" :
                "اختبار الاتصال"}
            </span>
          </button>
        </div>

        {/* Ollama Status */}
        <AnimatePresence>
          {ollamaStatus.message && (
            <motion.div
              initial={{ opacity: 0, y: -5 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0 }}
              className={cn(
                "text-xs flex items-center gap-2 px-4 py-3 rounded-xl",
                ollamaStatus.status === "connected"
                  ? "text-emerald-400 bg-emerald-500/5 border border-emerald-500/10"
                  : "text-red-400 bg-red-500/5 border border-red-500/10"
              )}
            >
              {ollamaStatus.status === "connected" ? (
                <Check className="w-4 h-4 flex-shrink-0" />
              ) : (
                <AlertTriangle className="w-4 h-4 flex-shrink-0" />
              )}
              {ollamaStatus.message}
            </motion.div>
          )}
        </AnimatePresence>

        {/* Discovered Ollama Models */}
        {ollamaModels.length > 0 && (
          <div className="space-y-3">
            <h4 className="text-white font-bold text-xs flex items-center gap-2">
              <Terminal className="w-4 h-4 text-pink-400" />
              النماذج المثبتة على السيرفر ({ollamaModels.length} نموذج)
            </h4>
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
              {ollamaModels.map((model: any, idx: number) => (
                <div
                  key={idx}
                  className="flex items-center justify-between p-3 bg-[#161b27]/60 border border-gray-850 rounded-xl"
                >
                  <div className="flex items-center gap-2">
                    <Cpu className="w-3.5 h-3.5 text-pink-400" />
                    <span className="text-xs text-white font-bold font-mono">{model.name}</span>
                  </div>
                  <span className="text-[10px] text-gray-500 font-mono">{model.size}</span>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Ollama Setup Instructions */}
        <div className="bg-[#161b27]/40 border border-gray-850 rounded-xl p-4 space-y-3">
          <h4 className="text-white font-bold text-xs flex items-center gap-2">
            <Zap className="w-3.5 h-3.5 text-amber-400" />
            تشغيل Ollama على سيرفرك الخاص
          </h4>
          <div className="space-y-2 text-[10px] text-[#8a8380] leading-relaxed">
            <div className="flex items-start gap-2">
              <span className="text-emerald-400 font-bold">1.</span>
              <div>
                ثبّت Ollama على السيرفر:{" "}
                <code className="bg-gray-850 text-pink-300 px-1.5 py-0.5 rounded text-[9px] font-mono" dir="ltr">
                  curl -fsSL https://ollama.com/install.sh | sh
                </code>
              </div>
            </div>
            <div className="flex items-start gap-2">
              <span className="text-emerald-400 font-bold">2.</span>
              <div>
                حمّل نموذج:{" "}
                <code className="bg-gray-850 text-pink-300 px-1.5 py-0.5 rounded text-[9px] font-mono" dir="ltr">
                  ollama pull llama3.2
                </code>
              </div>
            </div>
            <div className="flex items-start gap-2">
              <span className="text-emerald-400 font-bold">3.</span>
              <div>
                فعّل CORS:{" "}
                <code className="bg-gray-850 text-pink-300 px-1.5 py-0.5 rounded text-[9px] font-mono" dir="ltr">
                  OLLAMA_ORIGINS=* ollama serve
                </code>
              </div>
            </div>
            <div className="flex items-start gap-2">
              <span className="text-emerald-400 font-bold">4.</span>
              <span>ضع IP السيرفر بالأعلى واضغط &quot;اختبار الاتصال&quot;</span>
            </div>
          </div>
        </div>
      </div>

      {/* ═══════════ .env.local Helper ═══════════ */}
      <div className="bg-[#101010] border border-gray-800 rounded-2xl p-5 space-y-4">
        <div className="flex items-center justify-between border-b border-gray-800 pb-3">
          <h3 className="text-white font-bold text-sm flex items-center gap-2">
            <Terminal className="w-5 h-5 text-amber-400" />
            ملف البيئة (.env.local) — للمطورين
          </h3>
          <button
            onClick={() => {
              const envContent = PROVIDERS
                .filter((p) => apiKeys[p.id]?.trim())
                .map((p) => `${p.envKey}=${apiKeys[p.id]}`)
                .concat([`OLLAMA_BASE_URL=${ollamaUrl}`, `NEXT_PUBLIC_OLLAMA_BASE_URL=${ollamaUrl}`])
                .join("\n");
              copyToClipboard(envContent);
            }}
            className="flex items-center gap-1.5 text-xs text-gray-500 hover:text-white bg-[#161b27] px-3 py-1.5 rounded-xl border border-gray-850 transition-colors"
          >
            <Copy className="w-3 h-3" />
            <span>نسخ</span>
          </button>
        </div>

        <p className="text-[11px] text-[#8a8380] leading-relaxed">
          يمكنك أيضاً إضافة المفاتيح مباشرة في ملف <code className="bg-gray-850 text-purple-300 px-1 py-0.5 rounded text-[10px]">.env.local</code> بجذر المشروع.
          المفاتيح المُضافة هنا تُحفظ محلياً في المتصفح وتُمرر مع كل طلب AI.
        </p>

        <div className="bg-[#0d111a] border border-gray-850 rounded-xl p-4 text-left" dir="ltr">
          <pre className="text-[10px] font-mono text-gray-400 leading-relaxed whitespace-pre-wrap">
{PROVIDERS.map((p) => {
  const val = apiKeys[p.id]?.trim() ? apiKeys[p.id] : `your_${p.id}_api_key`;
  return `${p.envKey}=${val}`;
}).join("\n")}
{"\n\n"}# Ollama (Private Server)
OLLAMA_BASE_URL={ollamaUrl}
NEXT_PUBLIC_OLLAMA_BASE_URL={ollamaUrl}
          </pre>
        </div>
      </div>

      {/* Security Notice */}
      <div className="bg-gradient-to-l from-purple-500/5 to-indigo-500/5 border border-purple-500/15 rounded-2xl p-5 flex items-start gap-3">
        <div className="w-10 h-10 rounded-xl bg-purple-500/10 flex items-center justify-center flex-shrink-0">
          <Shield className="w-5 h-5 text-purple-400" />
        </div>
        <div>
          <h4 className="text-white font-bold text-xs">حماية مفاتيح الـ API</h4>
          <p className="text-[10px] text-gray-400 mt-1 leading-relaxed">
            المفاتيح تُحفظ مشفرة في متصفحك المحلي فقط ولا تُرسل لأي جهة خارجية.
            لأمان أعلى في بيئة الإنتاج، أضف المفاتيح في ملف <code className="text-purple-300">.env.local</code> على الخادم مباشرة.
            النظام يستخدم المفاتيح حصرياً للتواصل المباشر مع مزودي الـ AI.
          </p>
        </div>
      </div>
    </div>
  );
}