"use client";

import { useState, useEffect, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  Users, TrendingUp, TrendingDown, Eye, ArrowUpDown,
  Trophy, Target, BarChart2, Loader2, RefreshCw,
  Globe, Shield, Zap, AlertCircle, ChevronDown,
  Search, Filter
} from "lucide-react";
import { cn } from "@/lib/utils";

// ─── Types ───────────────────────────────────────────────────────────────────
interface Competitor {
  displayDomain: string;
  impressionShare: number;
  overlapRate: number;
  positionAboveRate: number;
  topImpressionPercentage: number;
  outRankingShare: number;
}

interface YourMetrics {
  impressionShare: number;
  averagePosition: number;
  topImpressionPercentage: number;
}

// ─── Helper Functions ────────────────────────────────────────────────────────
function formatPercent(val: number): string {
  return `${(val * 100).toFixed(1)}%`;
}

function getStatusColor(val: number, threshold: number = 0.5): string {
  if (val >= threshold) return "text-red-400";
  if (val >= threshold * 0.6) return "text-amber-400";
  return "text-emerald-400";
}

function getThreatLevel(competitor: Competitor): { label: string; color: string; bg: string } {
  const avgThreat = (competitor.impressionShare + competitor.overlapRate + competitor.positionAboveRate) / 3;
  if (avgThreat >= 0.6) return { label: "تهديد عالٍ", color: "text-red-400", bg: "bg-red-500/10 border-red-500/20" };
  if (avgThreat >= 0.35) return { label: "تهديد متوسط", color: "text-amber-400", bg: "bg-amber-500/10 border-amber-500/20" };
  return { label: "تهديد منخفض", color: "text-emerald-400", bg: "bg-emerald-500/10 border-emerald-500/20" };
}

export default function CompetitorsPage() {
  const [competitors, setCompetitors] = useState<Competitor[]>([]);
  const [yourMetrics, setYourMetrics] = useState<YourMetrics | null>(null);
  const [loading, setLoading] = useState(true);
  const [mode, setMode] = useState<"live" | "mock">("mock");
  const [notice, setNotice] = useState<string | null>(null);
  const [sortBy, setSortBy] = useState<keyof Competitor>("impressionShare");
  const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
  const [selectedCompetitor, setSelectedCompetitor] = useState<Competitor | null>(null);
  const [searchQuery, setSearchQuery] = useState("");

  const fetchCompetitors = useCallback(async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/google-ads/competitors");
      const data = await res.json();
      if (data.success) {
        setCompetitors(data.competitors || []);
        setYourMetrics(data.yourMetrics || null);
        setMode(data.mode || "mock");
        setNotice(data.notice || null);
      }
    } catch (err) {
      console.error("Failed to fetch competitors:", err);
      // Use inline mock data as last fallback
      setCompetitors([
        { displayDomain: "noon.com", impressionShare: 0.72, overlapRate: 0.85, positionAboveRate: 0.35, topImpressionPercentage: 0.68, outRankingShare: 0.42 },
        { displayDomain: "amazon.sa", impressionShare: 0.65, overlapRate: 0.78, positionAboveRate: 0.28, topImpressionPercentage: 0.55, outRankingShare: 0.38 },
        { displayDomain: "jarir.com", impressionShare: 0.58, overlapRate: 0.65, positionAboveRate: 0.42, topImpressionPercentage: 0.48, outRankingShare: 0.55 },
        { displayDomain: "extra.com", impressionShare: 0.45, overlapRate: 0.52, positionAboveRate: 0.15, topImpressionPercentage: 0.35, outRankingShare: 0.22 },
        { displayDomain: "namshi.com", impressionShare: 0.38, overlapRate: 0.48, positionAboveRate: 0.22, topImpressionPercentage: 0.28, outRankingShare: 0.18 },
      ]);
      setMode("mock");
      setNotice("فشل الاتصال - هذه بيانات تجريبية");
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchCompetitors();
  }, [fetchCompetitors]);

  // Sort and filter competitors
  const filteredCompetitors = competitors
    .filter((c) => c.displayDomain.toLowerCase().includes(searchQuery.toLowerCase()))
    .sort((a, b) => {
      const aVal = a[sortBy];
      const bVal = b[sortBy];
      return sortDir === "desc" ? (bVal as number) - (aVal as number) : (aVal as number) - (bVal as number);
    });

  function handleSort(key: keyof Competitor) {
    if (sortBy === key) {
      setSortDir(sortDir === "desc" ? "asc" : "desc");
    } else {
      setSortBy(key);
      setSortDir("desc");
    }
  }

  // ─── Your Performance Stats Cards ──────────────────────────────────────
  const yourStats = yourMetrics ? [
    {
      label: "حصتك من الظهور",
      value: formatPercent(yourMetrics.impressionShare),
      icon: Eye,
      color: "text-blue-400",
      bg: "bg-blue-500/8",
      border: "border-blue-500/15",
      trend: yourMetrics.impressionShare >= 0.5 ? "up" : "down",
    },
    {
      label: "متوسط ترتيبك",
      value: `#${yourMetrics.averagePosition.toFixed(1)}`,
      icon: Trophy,
      color: "text-amber-400",
      bg: "bg-amber-500/8",
      border: "border-amber-500/15",
      trend: yourMetrics.averagePosition <= 3 ? "up" : "down",
    },
    {
      label: "أعلى الصفحة",
      value: formatPercent(yourMetrics.topImpressionPercentage),
      icon: TrendingUp,
      color: "text-emerald-400",
      bg: "bg-emerald-500/8",
      border: "border-emerald-500/15",
      trend: yourMetrics.topImpressionPercentage >= 0.4 ? "up" : "down",
    },
    {
      label: "عدد المنافسين",
      value: String(competitors.length),
      icon: Users,
      color: "text-purple-400",
      bg: "bg-purple-500/8",
      border: "border-purple-500/15",
      trend: "neutral",
    },
  ] : [];

  return (
    <div className="p-6 max-w-6xl mx-auto space-y-6" dir="rtl">
      
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white flex items-center gap-2.5">
            <Users className="w-6 h-6 text-red-400" />
            تحليل المنافسين
          </h1>
          <p className="text-[#8a8380] text-sm mt-1">
            مراقبة وتحليل أداء المنافسين في المزادات الإعلانية ومقارنة أداء حملاتك بهم
          </p>
        </div>

        <div className="flex items-center gap-2">
          {mode === "mock" && (
            <span className="text-[9px] font-bold bg-amber-500/10 text-amber-400 border border-amber-500/20 px-2.5 py-1 rounded-full flex items-center gap-1">
              <AlertCircle className="w-3 h-3" />
              وضع تجريبي
            </span>
          )}
          <button
            onClick={fetchCompetitors}
            disabled={loading}
            className="flex items-center gap-1.5 text-xs text-gray-400 hover:text-white bg-[#161b27] border border-gray-800 px-3 py-2 rounded-xl transition-colors disabled:opacity-50"
          >
            <RefreshCw className={cn("w-3.5 h-3.5", loading && "animate-spin")} />
            تحديث
          </button>
        </div>
      </div>

      {/* Notice */}
      {notice && (
        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-amber-500/5 border border-amber-500/15 rounded-xl p-3 flex items-center gap-2 text-xs text-amber-400"
        >
          <AlertCircle className="w-4 h-4 flex-shrink-0" />
          {notice}
        </motion.div>
      )}

      {/* Loading Skeleton */}
      {loading ? (
        <div className="flex flex-col items-center gap-4 py-16">
          <Loader2 className="w-10 h-10 text-purple-400 animate-spin" />
          <p className="text-gray-500 text-sm">جاري تحليل المنافسين...</p>
        </div>
      ) : (
        <>
          {/* Your Performance Stats */}
          {yourStats.length > 0 && (
            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
              {yourStats.map((stat, i) => (
                <motion.div
                  key={stat.label}
                  initial={{ opacity: 0, y: 15 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: i * 0.08 }}
                  className={cn("p-4 rounded-xl border", stat.bg, stat.border)}
                >
                  <div className="flex items-center justify-between mb-2">
                    <stat.icon className={cn("w-4.5 h-4.5", stat.color)} />
                    {stat.trend === "up" && <TrendingUp className="w-3.5 h-3.5 text-emerald-400" />}
                    {stat.trend === "down" && <TrendingDown className="w-3.5 h-3.5 text-red-400" />}
                  </div>
                  <p className="text-xl font-bold text-white">{stat.value}</p>
                  <p className="text-[10px] text-gray-500 mt-0.5">{stat.label}</p>
                </motion.div>
              ))}
            </div>
          )}

          {/* Competitive Landscape Chart (Visual Bar Comparison) */}
          <motion.div
            initial={{ opacity: 0, y: 15 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
            className="bg-[#101010] border border-gray-800 rounded-2xl p-5"
          >
            <div className="flex items-center justify-between mb-5">
              <h3 className="text-sm font-bold text-white flex items-center gap-2">
                <BarChart2 className="w-4 h-4 text-purple-400" />
                خريطة المنافسة - نسبة ظهور الإعلانات
              </h3>
              <span className="text-[10px] text-gray-600">مقارنة حصتك مع أعلى 5 منافسين</span>
            </div>

            <div className="space-y-3">
              {/* Your bar */}
              {yourMetrics && (
                <div className="flex items-center gap-3">
                  <span className="text-xs text-emerald-400 font-bold w-28 truncate flex items-center gap-1.5">
                    <Zap className="w-3.5 h-3.5" />
                    أنت
                  </span>
                  <div className="flex-1 h-7 bg-[#161b27] rounded-lg overflow-hidden relative">
                    <motion.div
                      initial={{ width: 0 }}
                      animate={{ width: `${yourMetrics.impressionShare * 100}%` }}
                      transition={{ duration: 1, ease: "easeOut" }}
                      className="h-full bg-gradient-to-l from-emerald-500 to-emerald-600 rounded-lg"
                    />
                    <span className="absolute inset-y-0 flex items-center right-2 text-[10px] font-bold text-white">
                      {formatPercent(yourMetrics.impressionShare)}
                    </span>
                  </div>
                </div>
              )}

              {/* Competitor bars */}
              {filteredCompetitors.slice(0, 5).map((c, idx) => {
                const threat = getThreatLevel(c);
                return (
                  <div key={c.displayDomain} className="flex items-center gap-3">
                    <span className="text-xs text-[#8a8380] font-medium w-28 truncate flex items-center gap-1.5">
                      <Globe className="w-3 h-3 text-gray-600" />
                      {c.displayDomain}
                    </span>
                    <div className="flex-1 h-7 bg-[#161b27] rounded-lg overflow-hidden relative">
                      <motion.div
                        initial={{ width: 0 }}
                        animate={{ width: `${c.impressionShare * 100}%` }}
                        transition={{ duration: 1, delay: (idx + 1) * 0.1, ease: "easeOut" }}
                        className={cn(
                          "h-full rounded-lg",
                          c.impressionShare >= 0.6 ? "bg-gradient-to-l from-red-500/80 to-red-600/80" :
                          c.impressionShare >= 0.4 ? "bg-gradient-to-l from-amber-500/80 to-amber-600/80" :
                          "bg-gradient-to-l from-blue-500/60 to-blue-600/60"
                        )}
                      />
                      <span className="absolute inset-y-0 flex items-center right-2 text-[10px] font-bold text-white/90">
                        {formatPercent(c.impressionShare)}
                      </span>
                    </div>
                  </div>
                );
              })}
            </div>
          </motion.div>

          {/* Search and Sort Controls */}
          <div className="flex items-center gap-3 flex-wrap">
            <div className="relative flex-1 min-w-[200px]">
              <Search className="w-3.5 h-3.5 absolute right-3 top-1/2 -translate-y-1/2 text-gray-600" />
              <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="بحث عن منافس..."
                className="w-full bg-[#101010] border border-gray-800 text-white rounded-xl py-2.5 pr-9 pl-3 text-xs outline-none focus:border-purple-500 transition-colors"
              />
            </div>
          </div>

          {/* Competitors Table */}
          <motion.div
            initial={{ opacity: 0, y: 15 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4 }}
            className="bg-[#101010] border border-gray-800 rounded-2xl overflow-hidden"
          >
            <div className="overflow-x-auto">
              <table className="w-full text-xs">
                <thead>
                  <tr className="border-b border-gray-800">
                    <th className="text-right p-3.5 text-gray-500 font-semibold">#</th>
                    <th className="text-right p-3.5 text-gray-500 font-semibold">المنافس</th>
                    <th className="text-right p-3.5 text-gray-500 font-semibold">مستوى التهديد</th>
                    <th 
                      className="text-right p-3.5 text-gray-500 font-semibold cursor-pointer hover:text-white transition-colors"
                      onClick={() => handleSort("impressionShare")}
                    >
                      <span className="flex items-center gap-1">
                        حصة الظهور
                        <ArrowUpDown className="w-3 h-3" />
                      </span>
                    </th>
                    <th 
                      className="text-right p-3.5 text-gray-500 font-semibold cursor-pointer hover:text-white transition-colors"
                      onClick={() => handleSort("overlapRate")}
                    >
                      <span className="flex items-center gap-1">
                        معدل التداخل
                        <ArrowUpDown className="w-3 h-3" />
                      </span>
                    </th>
                    <th 
                      className="text-right p-3.5 text-gray-500 font-semibold cursor-pointer hover:text-white transition-colors"
                      onClick={() => handleSort("positionAboveRate")}
                    >
                      <span className="flex items-center gap-1">
                        ظهور فوقك
                        <ArrowUpDown className="w-3 h-3" />
                      </span>
                    </th>
                    <th 
                      className="text-right p-3.5 text-gray-500 font-semibold cursor-pointer hover:text-white transition-colors"
                      onClick={() => handleSort("topImpressionPercentage")}
                    >
                      <span className="flex items-center gap-1">
                        أعلى الصفحة
                        <ArrowUpDown className="w-3 h-3" />
                      </span>
                    </th>
                    <th 
                      className="text-right p-3.5 text-gray-500 font-semibold cursor-pointer hover:text-white transition-colors"
                      onClick={() => handleSort("outRankingShare")}
                    >
                      <span className="flex items-center gap-1">
                        التفوق عليك
                        <ArrowUpDown className="w-3 h-3" />
                      </span>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {filteredCompetitors.map((c, idx) => {
                    const threat = getThreatLevel(c);
                    return (
                      <motion.tr
                        key={c.displayDomain}
                        initial={{ opacity: 0, x: 15 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ delay: idx * 0.05 }}
                        onClick={() => setSelectedCompetitor(selectedCompetitor?.displayDomain === c.displayDomain ? null : c)}
                        className={cn(
                          "border-b border-gray-800/50 hover:bg-[#161b27]/50 transition-all cursor-pointer",
                          selectedCompetitor?.displayDomain === c.displayDomain && "bg-purple-500/5"
                        )}
                      >
                        <td className="p-3.5 text-gray-600 font-bold">{idx + 1}</td>
                        <td className="p-3.5">
                          <div className="flex items-center gap-2">
                            <div className="w-7 h-7 rounded-lg bg-[#161b27] border border-gray-800 flex items-center justify-center">
                              <Globe className="w-3.5 h-3.5 text-gray-500" />
                            </div>
                            <span className="text-white font-semibold">{c.displayDomain}</span>
                          </div>
                        </td>
                        <td className="p-3.5">
                          <span className={cn("text-[10px] font-bold px-2 py-0.5 rounded-full border", threat.bg, threat.color)}>
                            {threat.label}
                          </span>
                        </td>
                        <td className={cn("p-3.5 font-bold", getStatusColor(c.impressionShare, 0.6))}>
                          {formatPercent(c.impressionShare)}
                        </td>
                        <td className={cn("p-3.5 font-bold", getStatusColor(c.overlapRate, 0.7))}>
                          {formatPercent(c.overlapRate)}
                        </td>
                        <td className={cn("p-3.5 font-bold", getStatusColor(c.positionAboveRate, 0.3))}>
                          {formatPercent(c.positionAboveRate)}
                        </td>
                        <td className={cn("p-3.5 font-bold", getStatusColor(c.topImpressionPercentage, 0.5))}>
                          {formatPercent(c.topImpressionPercentage)}
                        </td>
                        <td className={cn("p-3.5 font-bold", getStatusColor(c.outRankingShare, 0.4))}>
                          {formatPercent(c.outRankingShare)}
                        </td>
                      </motion.tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </motion.div>

          {/* Selected Competitor Details Panel */}
          <AnimatePresence>
            {selectedCompetitor && (
              <motion.div
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: "auto" }}
                exit={{ opacity: 0, height: 0 }}
                className="bg-[#101010] border border-purple-500/20 rounded-2xl p-5 overflow-hidden"
              >
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-sm font-bold text-white flex items-center gap-2">
                    <Target className="w-4 h-4 text-purple-400" />
                    تحليل تفصيلي - {selectedCompetitor.displayDomain}
                  </h3>
                  <button
                    onClick={() => setSelectedCompetitor(null)}
                    className="text-gray-500 hover:text-white text-xs"
                  >
                    إغلاق
                  </button>
                </div>

                <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
                  {[
                    { label: "حصة الظهور", value: selectedCompetitor.impressionShare, desc: "نسبة ظهور إعلاناتهم من إجمالي المزادات" },
                    { label: "معدل التداخل", value: selectedCompetitor.overlapRate, desc: "كم مرة ظهرتم معاً في نفس المزاد" },
                    { label: "ظهور فوقك", value: selectedCompetitor.positionAboveRate, desc: "كم مرة ظهر إعلانهم فوق إعلانك" },
                    { label: "أعلى الصفحة", value: selectedCompetitor.topImpressionPercentage, desc: "نسبة ظهورهم في أعلى نتائج البحث" },
                    { label: "التفوق عليك", value: selectedCompetitor.outRankingShare, desc: "نسبة تفوقهم عليك في المزادات" },
                  ].map((item) => (
                    <div key={item.label} className="bg-[#161b27] rounded-xl p-3 border border-gray-800">
                      <p className="text-[10px] text-gray-500 mb-1">{item.label}</p>
                      <p className="text-lg font-bold text-white">{formatPercent(item.value)}</p>
                      <div className="mt-2 h-1.5 bg-gray-800 rounded-full overflow-hidden">
                        <motion.div
                          initial={{ width: 0 }}
                          animate={{ width: `${item.value * 100}%` }}
                          className={cn(
                            "h-full rounded-full",
                            item.value >= 0.6 ? "bg-red-500" : item.value >= 0.35 ? "bg-amber-500" : "bg-emerald-500"
                          )}
                        />
                      </div>
                      <p className="text-[9px] text-gray-600 mt-1.5 leading-relaxed">{item.desc}</p>
                    </div>
                  ))}
                </div>

                {/* AI Recommendations */}
                <div className="mt-4 bg-purple-500/5 border border-purple-500/15 rounded-xl p-4 space-y-2.5">
                  <h4 className="text-xs font-bold text-purple-400 flex items-center gap-1.5">
                    <Zap className="w-3.5 h-3.5" />
                    توصيات ذكية للتفوق على {selectedCompetitor.displayDomain}
                  </h4>
                  <ul className="space-y-1.5 text-[11px] text-[#b8b3b0] leading-relaxed">
                    {selectedCompetitor.positionAboveRate > 0.3 && (
                      <li className="flex items-start gap-2">
                        <span className="text-purple-400 mt-0.5">▸</span>
                        <span>ارفع عرض السعر (CPC) بنسبة 15-25% للتنافس على المراتب الأعلى ضد هذا المنافس</span>
                      </li>
                    )}
                    {selectedCompetitor.overlapRate > 0.6 && (
                      <li className="flex items-start gap-2">
                        <span className="text-purple-400 mt-0.5">▸</span>
                        <span>أضف كلمات مفتاحية سلبية لتقليل التداخل غير المفيد وتوفير الميزانية</span>
                      </li>
                    )}
                    {selectedCompetitor.impressionShare > 0.5 && (
                      <li className="flex items-start gap-2">
                        <span className="text-purple-400 mt-0.5">▸</span>
                        <span>وسّع استهدافك الجغرافي والزمني لزيادة حصتك من الظهور أمام هذا المنافس</span>
                      </li>
                    )}
                    <li className="flex items-start gap-2">
                      <span className="text-purple-400 mt-0.5">▸</span>
                      <span>حسّن جودة إعلاناتك (Quality Score) بتحسين صفحات الهبوط ونصوص الإعلانات لخفض تكلفة النقرة</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-purple-400 mt-0.5">▸</span>
                      <span>استخدم إضافات الإعلانات (Sitelinks, Callouts) لزيادة مساحة إعلانك وجذب انتباه أكبر</span>
                    </li>
                  </ul>
                </div>
              </motion.div>
            )}
          </AnimatePresence>

          {/* Competitive Intelligence Tips */}
          <motion.div
            initial={{ opacity: 0, y: 15 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5 }}
            className="bg-[#101010] border border-gray-800 rounded-2xl p-5"
          >
            <h3 className="text-sm font-bold text-white flex items-center gap-2 mb-4">
              <Shield className="w-4 h-4 text-indigo-400" />
              دليل فهم مؤشرات المنافسة
            </h3>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
              {[
                { label: "حصة الظهور", desc: "النسبة المئوية لعدد مرات ظهور إعلان المنافس مقارنة بإجمالي المزادات المؤهلة.", icon: Eye, color: "text-blue-400" },
                { label: "معدل التداخل", desc: "كم مرة ظهر إعلان المنافس في نفس المزاد مع إعلانك في نفس الوقت.", icon: Users, color: "text-purple-400" },
                { label: "ظهور فوقك", desc: "النسبة المئوية التي ظهر فيها إعلان المنافس في موقع أعلى من إعلانك.", icon: TrendingUp, color: "text-amber-400" },
                { label: "أعلى الصفحة", desc: "نسبة ظهور إعلان المنافس في الجزء العلوي من صفحة نتائج البحث.", icon: Trophy, color: "text-emerald-400" },
                { label: "نسبة التفوق", desc: "كم مرة ظهر إعلان المنافس في موقع أعلى أو ظهر بدلاً من إعلانك.", icon: Target, color: "text-red-400" },
                { label: "استراتيجية المواجهة", desc: "حلل نقاط الضعف والقوة لكل منافس واستثمر ميزانيتك بذكاء لتحقيق أقصى عائد.", icon: Zap, color: "text-indigo-400" },
              ].map((item) => (
                <div key={item.label} className="bg-[#161b27]/40 border border-gray-850 rounded-xl p-3 space-y-1.5">
                  <div className="flex items-center gap-2">
                    <item.icon className={cn("w-3.5 h-3.5", item.color)} />
                    <p className="text-[11px] font-bold text-white">{item.label}</p>
                  </div>
                  <p className="text-[10px] text-gray-500 leading-relaxed">{item.desc}</p>
                </div>
              ))}
            </div>
          </motion.div>
        </>
      )}
    </div>
  );
}