"use client";

import React, { useEffect, useMemo, useState } from "react";
import { motion } from "framer-motion";
import { Canvas } from "@react-three/fiber";
import { Float, OrbitControls, Stars } from "@react-three/drei";

const stats = [
  { label: "المستخدمون", value: "2.4m" },
  { label: "الفحوصات", value: "18.9m" },
  { label: "الملفات", value: "91.2m" },
  { label: "الروابط", value: "63.5m" },
  { label: "التهديدات", value: "4.8m" },
  { label: "الدول", value: "187" },
  { label: "التقارير", value: "820k" },
  { label: "طلبات API", value: "9.3b" },
  { label: "معدل الكشف", value: "99.98%" },
];

const tools = [
  {
    title: "فاحص أمان الجهاز",
    items: ["النظام", "المتصفح", "الكوكيز", "الإضافات", "الصلاحيات", "JavaScript", "Fingerprint", "Canvas", "Fonts", "WebRTC", "Media Devices", "TLS", "HTTPS", "CSP", "Security Headers"],
  },
  {
    title: "محلل الشبكة",
    items: ["IPv4", "IPv6", "ASN", "Gateway", "DNS", "DNS Leak", "Latency", "Packet Loss", "VPN", "Proxy", "NAT", "MTU", "Traceroute"],
  },
  {
    title: "محلل الرابط",
    items: ["Threat Score", "SSL", "WHOIS", "Blacklist", "Redirects", "Reputation", "Virus Scan", "Domain Age", "AI Risk", "Screenshot", "Technology Detection"],
  },
  {
    title: "محلل البريد",
    items: ["SPF", "DKIM", "DMARC", "Spoofing", "Header Analysis", "Links", "Attachments", "Phishing Detection", "AI Risk Score"],
  },
  {
    title: "أمان كلمة المرور",
    items: ["Strength Meter", "Entropy", "Dictionary Detection", "Length", "Leaks", "Recommendations", "Generate Strong Password"],
  },
  {
    title: "فاحص الملفات",
    items: ["Drag & Drop", "PDF", "Office", "ZIP", "APK", "EXE", "Scripts", "Macros", "DLL", "ELF", "Malware", "Trojan", "Backdoor", "Spyware", "Ransomware", "YARA Rules", "AI Detection", "Virus Engines"],
  },
  {
    title: "مراقبة التسريبات",
    items: ["Search", "Email", "Phone", "Username", "Display", "Breach Count", "Risk Level", "Source", "Date"],
  },
  {
    title: "المساعد السيبراني",
    items: ["Chat Interface", "Analyze Reports", "Explain Threats", "Analyze URLs", "Analyze Files", "Generate Security Policies", "Incident Response", "Recommend Solutions", "Security Awareness"],
  },
];

function Globe() {
  return (
    <Canvas camera={{ position: [0, 0, 4] }}>
      <ambientLight intensity={0.4} />
      <pointLight position={[5, 5, 5]} intensity={2} color="#39FF14" />
      <Float speed={1.2} rotationIntensity={0.4} floatIntensity={0.6}>
        <mesh>
          <sphereGeometry args={[1.1, 64, 64]} />
          <meshStandardMaterial
            color="#0b1a0b"
            metalness={0.9}
            roughness={0.15}
            emissive="#143d14"
            emissiveIntensity={0.9}
          />
        </mesh>
      </Float>
      <Stars radius={60} depth={25} count={1200} factor={3} saturation={0} fade speed={1} />
      <OrbitControls enableZoom={false} enablePan={false} autoRotate autoRotateSpeed={0.8} />
    </Canvas>
  );
}

function Gauge({ value = 92 }: { value?: number }) {
  const stroke = 12;
  const radius = 84;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - (value / 100) * circumference;

  return (
    <div className="relative flex h-56 w-56 items-center justify-center rounded-full border border-white/10 bg-white/5 shadow-[0_0_50px_rgba(57,255,20,0.15)] backdrop-blur-3xl">
      <svg className="absolute inset-0 h-full w-full -rotate-90">
        <circle cx="112" cy="112" r={radius} stroke="rgba(255,255,255,0.08)" strokeWidth={stroke} fill="none" />
        <motion.circle
          cx="112"
          cy="112"
          r={radius}
          stroke="#39FF14"
          strokeWidth={stroke}
          fill="none"
          strokeLinecap="round"
          strokeDasharray={circumference}
          initial={{ strokeDashoffset: circumference }}
          animate={{ strokeDashoffset: offset }}
          transition={{ duration: 1.4, ease: "easeOut" }}
        />
      </svg>
      <div className="relative text-center">
        <div className="text-5xl font-semibold text-white">{value}%</div>
        <div className="mt-2 text-sm tracking-[0.4em] text-[#9FA7A7]">AI POWERED</div>
        <div className="mt-3 inline-flex rounded-full border border-[#39FF14]/30 bg-[#39FF14]/10 px-4 py-1 text-xs text-[#39FF14]">
          ممتاز
        </div>
      </div>
    </div>
  );
}

export default function F3F3AIPage() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);

  const clock = useMemo(() => {
    return {
      time: time.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", second: "2-digit" }),
      date: time.toLocaleDateString("en-US", { day: "2-digit", month: "short", year: "numeric" }),
      weekday: time.toLocaleDateString("en-US", { weekday: "long" }),
    };
  }, [time]);

  return (
    <div dir="rtl" className="relative min-h-screen overflow-hidden bg-[#050505] text-white">
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(57,255,20,0.10),transparent_35%),linear-gradient(180deg,rgba(255,255,255,0.03),transparent)]" />
      <div className="pointer-events-none absolute inset-0 opacity-20 mix-blend-screen [background-image:linear-gradient(rgba(57,255,20,0.08)_1px,transparent_1px),linear-gradient(90deg,rgba(57,255,20,0.08)_1px,transparent_1px)] [background-size:48px_48px]" />
      <div className="pointer-events-none absolute inset-0 bg-[repeating-linear-gradient(180deg,transparent_0,transparent_3px,rgba(255,255,255,0.02)_4px)] opacity-20" />

      <header className="sticky top-0 z-50 border-b border-white/10 bg-black/35 backdrop-blur-3xl">
        <div className="mx-auto flex max-w-[1600px] items-center justify-between px-6 py-4">
          <div className="flex items-center gap-3">
            <div className="h-10 w-10 rounded-2xl bg-[#39FF14] shadow-[0_0_30px_rgba(57,255,20,0.4)]" />
            <div className="text-right">
              <div className="text-sm font-semibold tracking-[0.3em] text-[#39FF14]">F3F3 AI</div>
              <div className="text-xs text-[#9FA7A7]">منصة الأمن السيبراني بالذكاء الاصطناعي</div>
            </div>
          </div>

          <nav className="hidden items-center gap-6 text-sm text-[#9FA7A7] lg:flex">
            {["الرئيسية", "أدوات الذكاء", "التهديدات", "التقارير", "API", "المطورون", "الأسعار", "المدونة", "من نحن", "تواصل"].map((item) => (
              <a key={item} href="#" className="transition hover:text-white">
                {item}
              </a>
            ))}
          </nav>

          <div className="flex items-center gap-3 text-sm text-[#9FA7A7]">
            <button className="rounded-full border border-white/10 bg-white/5 px-4 py-2">تسجيل الدخول</button>
            <button className="rounded-full bg-[#39FF14] px-4 py-2 font-semibold text-black shadow-[0_0_30px_rgba(57,255,20,0.35)]">
              إنشاء حساب
            </button>
          </div>
        </div>
      </header>

      <main className="relative z-10 mx-auto max-w-[1600px] px-6 py-10">
        <section className="grid gap-10 lg:grid-cols-2 lg:items-center">
          <div className="text-right">
            <div className="mb-6 inline-flex rounded-full border border-[#39FF14]/20 bg-white/5 px-4 py-2 text-xs tracking-[0.3em] text-[#A7FF83] backdrop-blur-3xl">
              مركز عمليات الأمن السيبراني العالمي
            </div>
            <h1 className="max-w-4xl text-5xl font-semibold leading-tight md:text-7xl">
              احمِ حياتك الرقمية <span className="text-[#39FF14]">بالذكاء الاصطناعي</span>
            </h1>
            <p className="mt-6 max-w-2xl text-lg leading-8 text-[#9FA7A7]">
              منصة متقدمة لتحليل الروابط والملفات والبريد والأجهزة والشبكات، مع اكتشاف فوري للتهديدات السيبرانية في الوقت الحقيقي.
            </p>
            <div className="mt-8 flex flex-wrap gap-4 justify-end">
              <button className="rounded-full bg-[#39FF14] px-6 py-3 font-semibold text-black">ابدأ فحصًا مجانيًا</button>
              <button className="rounded-full border border-white/10 bg-white/5 px-6 py-3 text-white">عرض المزايا</button>
              <button className="rounded-full border border-[#39FF14]/20 bg-transparent px-6 py-3 text-[#A7FF83]">شاهد العرض</button>
            </div>
            <div className="mt-10 text-sm text-[#9FA7A7]">موثوق من</div>
            <div className="mt-3 grid grid-cols-2 gap-3 md:grid-cols-4">
              {["شركة 1", "شركة 2", "شركة 3", "شركة 4"].map((x) => (
                <div
                  key={x}
                  className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-center text-xs tracking-[0.3em] text-white/70 backdrop-blur-3xl"
                >
                  {x}
                </div>
              ))}
            </div>
          </div>

          <div className="relative h-[560px]">
            <div className="absolute inset-0 rounded-[2rem] border border-white/10 bg-white/5 shadow-[0_0_80px_rgba(57,255,20,0.12)] backdrop-blur-3xl" />
            <div className="absolute inset-0">
              <Globe />
            </div>
            <div className="pointer-events-none absolute inset-x-8 bottom-8 rounded-3xl border border-[#39FF14]/20 bg-black/50 p-6 backdrop-blur-3xl">
              <div className="text-xs tracking-[0.3em] text-[#9FA7A7]">لوحة الأمن الحية</div>
              <div className="mt-3 grid grid-cols-3 gap-4 text-sm">
                {["1.2M تهديد", "99.98% استقرار", "187 دولة"].map((x) => (
                  <div key={x} className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3">
                    {x}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section className="mt-16 grid gap-6 md:grid-cols-3 xl:grid-cols-4">
          <div className="rounded-[2rem] border border-white/10 bg-white/5 p-6 backdrop-blur-3xl">
            <div className="text-sm text-[#9FA7A7]">الوقت الحالي</div>
            <div className="mt-3 text-4xl font-semibold">{clock.time}</div>
            <div className="mt-2 text-sm text-[#9FA7A7]">
              {clock.weekday} · {clock.date}
            </div>
          </div>
          <div className="rounded-[2rem] border border-white/10 bg-white/5 p-6 backdrop-blur-3xl">
            <div className="text-sm text-[#9FA7A7]">درجة الأمان</div>
            <div className="mt-4 flex justify-center">
              <Gauge value={92} />
            </div>
          </div>
          <div className="rounded-[2rem] border border-white/10 bg-white/5 p-6 backdrop-blur-3xl md:col-span-1 xl:col-span-2">
            <div className="text-sm text-[#9FA7A7]">حالة الـ API</div>
            <div className="mt-4 grid grid-cols-2 gap-4 md:grid-cols-4">
              {["Health", "Latency", "Services", "Uptime"].map((x, i) => (
                <div key={x} className="rounded-2xl border border-white/10 bg-black/30 p-4">
                  <div className="text-xs text-[#9FA7A7]">{x}</div>
                  <div className="mt-2 text-2xl font-semibold text-[#39FF14]">{["OK", "18ms", "24", "99.99%"][i]}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="mt-16 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
          {stats.map((s) => (
            <motion.div key={s.label} whileHover={{ y: -6 }} className="rounded-[1.75rem] border border-white/10 bg-white/5 p-6 backdrop-blur-3xl">
              <div className="text-sm text-[#9FA7A7]">{s.label}</div>
              <div className="mt-3 text-4xl font-semibold">{s.value}</div>
            </motion.div>
          ))}
        </section>

        <section className="mt-16">
          <div className="mb-6 flex items-end justify-between">
            <div className="text-right">
              <div className="text-xs tracking-[0.35em] text-[#A7FF83]">الأدوات</div>
              <h2 className="mt-2 text-3xl font-semibold">وحدات أمن مؤسسية</h2>
            </div>
          </div>
          <div className="grid gap-6 xl:grid-cols-2">
            {tools.map((tool) => (
              <motion.div key={tool.title} whileHover={{ y: -6 }} className="rounded-[2rem] border border-white/10 bg-white/5 p-6 backdrop-blur-3xl">
                <div className="text-xl font-semibold">{tool.title}</div>
                <div className="mt-4 flex flex-wrap gap-2">
                  {tool.items.map((item) => (
                    <span key={item} className="rounded-full border border-white/10 bg-black/30 px-3 py-1 text-xs text-[#9FA7A7]">
                      {item}
                    </span>
                  ))}
                </div>
              </motion.div>
            ))}
          </div>
        </section>

        <section className="mt-16 grid gap-6 xl:grid-cols-3">
          <div className="rounded-[2rem] border border-white/10 bg-white/5 p-6 backdrop-blur-3xl xl:col-span-2">
            <div className="text-xs tracking-[0.35em] text-[#A7FF83]">كونسول SOC</div>
            <div className="mt-4 font-mono text-sm leading-7 text-[#9FA7A7]">
              <div>[12:41:22] تشغيل محرك الكشف</div>
              <div>[12:41:24] اكتمال فحص الرابط</div>
              <div>[12:41:26] عزل مرفق مشبوه</div>
              <div>[12:41:29] تحديث السياسة الذكية</div>
              <div>[12:41:31] انتهاء ربط معلومات التهديدات</div>
            </div>
          </div>
          <div className="rounded-[2rem] border border-white/10 bg-white/5 p-6 backdrop-blur-3xl">
            <div className="text-xs tracking-[0.35em] text-[#A7FF83]">النشاط المباشر</div>
            <div className="mt-4 space-y-3 text-sm text-[#9FA7A7]">
              <div>تنبيه: تم حظر نطاق تصيّد</div>
              <div>فحص: تحليل 3 ملفات</div>
              <div>قرار AI: تم اقتراح MFA</div>
              <div>تقرير: ارتفاع مستوى المخاطرة</div>
            </div>
          </div>
        </section>
      </main>

      <footer className="relative z-10 mt-16 border-t border-white/10 bg-black/30 px-6 py-10 text-sm text-[#9FA7A7] backdrop-blur-3xl">
        <div className="mx-auto flex max-w-[1600px] flex-wrap justify-between gap-4">
          <div>F3F3 AI © 2026</div>
          <div className="flex flex-wrap gap-4">
            {["GitHub", "Discord", "LinkedIn", "Twitter X", "Documentation", "API Docs", "Privacy Policy", "Terms", "Security", "Status"].map((x) => (
              <a key={x} href="#" className="transition hover:text-white">
                {x}
              </a>
            ))}
          </div>
        </div>
      </footer>
    </div>
  );
}