"use client";

import { useEffect, useState } from "react";
import PlanCard from "@/components/user-panel/PlanCard";
import EmptyState from "@/components/common/EmptyState";
import { useAuth } from "@/context/AuthContext";
import { getPackages, getCurrentPackageInfo, PackageData, CurrentPackageInfo } from "@/services/userPanelService";
import { FiCheckCircle } from "react-icons/fi";

const PlansPage = () => {
  const { token } = useAuth();
  const [packages, setPackages] = useState<PackageData[]>([]);
  const [currentPkg, setCurrentPkg] = useState<CurrentPackageInfo | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const load = async () => {
      const [pkgs, info] = await Promise.all([
        getPackages(),
        token ? getCurrentPackageInfo(token) : Promise.resolve(null),
      ]);
      setPackages(pkgs);
      setCurrentPkg(info);
      setLoading(false);
    };
    load();
  }, [token]);

  if (loading) {
    return (
      <div className="flex-1 flex items-center justify-center py-20">
        <div className="w-8 h-8 border-2 border-[#0092B8] border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  // If no packages from API, show empty state
  const hasApiPackages = packages.length > 0;

  // Sort packages to put Premium in the middle when there are 3 packages
  const sortedPackages = [...packages].sort((a, b) => {
    if (packages.length === 3) {
      // For 3 packages: put premium in middle (index 1)
      if (a.tenantType === 'premium') return 0; // Premium goes to middle
      if (b.tenantType === 'premium') return 0;
      // Put free package first, others after premium
      if (a.price === 0) return -1;
      if (b.price === 0) return 1;
      return a.price - b.price;
    }
    // Default: sort by price ascending
    return a.price - b.price;
  });

  console.log('Packages loaded:', packages.length, packages);

  // Fallback static features
  const visitorFeatures = [
    "التواصل المباشر",
    "التواصل مع الملاك مباشرة",
    "التواصل مع الطلبات التسويق",
    "3 اعلانات مميزة",
    "رفع نسبة المشاهده",
  ];
  const premiumFeatures = [
    'رفع نسبة المشاهده',
    '6 اعلانات مميزة',
    'التواصل المباشر',
    'علامة مميزة لشركتك او مؤسستك',
    'التواصل مع الملاك مباشرة',
    'التواصل مع الطلبات التسويق',
  ];
  const vipFeatures = [
    'التواصل المباشر',
    'التواصل مع الملاك مباشرة',
    'التواصل مع الطلبات التسويق',
    '3 اعلانات مميزة',
    'رفع نسبة المشاهده',
  ];

  return (
    <div>
      <h4 className="mb-2 text-[#1D293D] text-lg font-medium">الباقات</h4>

      {currentPkg?.hasPackage && (
        <div className="mb-4 p-3 bg-[#F0FDF4] rounded-lg flex items-center gap-2 text-[#00A63E] text-sm">
          <FiCheckCircle />
          <span>أنت مشترك حالياً في باقة <strong>{currentPkg.packageName || 'مميزة'}</strong></span>
          {currentPkg.endDate && (
            <span className="text-[#62748E] mr-auto">
              تنتهي: {new Intl.DateTimeFormat('ar-SA', { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(currentPkg.endDate))}
            </span>
          )}
        </div>
      )}

      {hasApiPackages ? (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
          {sortedPackages.map((pkg) => (
            <PlanCard
              key={pkg.id}
              title={pkg.titleAr}
              price={pkg.price === 0 ? "مجاناً" : String(pkg.price)}
              features={
                pkg.features && pkg.features.length > 0
                  ? pkg.features.filter(f => f.available).map(f => f.titleAr)
                  : [pkg.descriptionAr || 'باقة أساسية']
              }
              isPremium={pkg.tenantType === 'premium'}
            />
          ))}
        </div>
      ) : (
        <EmptyState
          title="باقاتنا الجديدة قريباً"
          description="نعمل على تجهيز باقات مميزة لك"
        />
      )}
    </div>
  );
};

export default PlansPage;