/**
 * CurrentPackageCard Component Tests
 *
 * Tests for the dashboard current subscription package card component
 *
 * Test Coverage:
 * - Loading state with skeleton UI
 * - No subscription state
 * - Active subscription display
 * - Tier name rendering (English and Arabic)
 * - Monthly/yearly pricing calculations
 * - Features list display
 * - Status badge with colors
 * - Yearly savings calculations
 * - Renewal date formatting
 * - Cancel at period end warning
 * - Setup fee information
 * - Action buttons (Change Plan, Billing History)
 * - Accessibility
 * - Edge cases
 */

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import CurrentPackageCard from "@/app/[lang]/dashboard/components/CurrentPackageCard";
import type { DashboardSubscriptionDetails } from "@/app/[lang]/dashboard/types";
import { PRICING_TIERS } from "@/lib/config/pricing-tiers";

// Mock the PRICING_TIERS config
jest.mock("@/lib/config/pricing-tiers", () => ({
  PRICING_TIERS: [
    {
      id: "tier1",
      nameEn: "Starter",
      nameAr: "المبتدئ",
      priceGBP: 179,
      setupGBP: 199,
      popular: false,
      featuresEn: [
        "AI Agent for FAQ & Auto-Reply",
        "Automated Appointment Booking",
        "Admin Dashboard",
        "WhatsApp Integration",
      ],
      featuresAr: [
        "وكيل ذكي للأسئلة الشائعة",
        "حجز المواعيد الآلي",
        "لوحة تحكم الإدارة",
        "تكامل واتساب",
      ],
    },
    {
      id: "tier2",
      nameEn: "Professional",
      nameAr: "المحترف",
      priceGBP: 209,
      setupGBP: 199,
      popular: true,
      featuresEn: [
        "Everything in Starter",
        "Send & Receive Quotations",
        "CRM Dashboard",
        "Google & Third-Party Integrations",
        "Priority Support",
      ],
      featuresAr: [
        "كل مزايا الباقة المبتدئة",
        "إرسال واستقبال عروض الأسعار",
        "لوحة تحكم CRM",
        "تكاملات جوجل وأطراف ثالثة",
        "دعم ذو أولوية",
      ],
    },
  ],
}));

describe("CurrentPackageCard Component", () => {
  const mockOnChangePlan = jest.fn();
  const mockOnViewHistory = jest.fn();

  const createMockSubscriptionData = (
    overrides?: Partial<DashboardSubscriptionDetails["subscription"]>,
  ): DashboardSubscriptionDetails => ({
    subscription: {
      id: "sub_test123",
      tierId: "tier1",
      status: "active",
      billingPeriod: "monthly",
      currentPeriodEnd: "2025-01-10T00:00:00Z",
      trialEndsAt: null,
      setupFeePaid: true,
      setupFeeAmount: 19900,
      setupFeePaidAt: "2024-12-01T00:00:00Z",
      paymentMethod: {
        brand: "visa",
        lastFour: "4242",
        id: "pm_test",
      },
      stripeCustomerId: "cus_test",
      stripeSubscriptionId: "sub_stripe_test",
      cancelAtPeriodEnd: false,
      lastPaymentDate: "2024-12-10T00:00:00Z",
      paymentFailureCount: 0,
      ...overrides,
    },
    user: {
      id: "user_test",
      email: "test@example.com",
      name: "Test User",
      companyName: "Test Company",
    },
    billingHistory: [],
  });

  beforeEach(() => {
    jest.clearAllMocks();
  });

  describe("Loading State", () => {
    it("should render skeleton when loading is true", () => {
      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={null}
          loading={true}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(container.querySelector(".animate-pulse")).toBeInTheDocument();
    });

    it("should display skeleton placeholders for all sections", () => {
      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={null}
          loading={true}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      // Check for skeleton elements
      const skeletonElements = container.querySelectorAll(
        ".bg-slate-200, .bg-slate-100",
      );
      expect(skeletonElements.length).toBeGreaterThan(0);
    });

    it("should have proper border and shadow when loading", () => {
      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={null}
          loading={true}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const card = container.firstChild;
      expect(card).toHaveClass("shadow-lg", "border", "border-slate-200");
    });

    it("should not call action callbacks when loading", () => {
      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={null}
          loading={true}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(mockOnChangePlan).not.toHaveBeenCalled();
      expect(mockOnViewHistory).not.toHaveBeenCalled();
    });
  });

  describe("No Subscription State", () => {
    it("should render no subscription message when subscriptionData is null", () => {
      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={null}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("No Active Subscription")).toBeInTheDocument();
    });

    it("should display call to action message in English", () => {
      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={null}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(
        screen.getByText(
          "Please choose a plan to start using the Mawidi platform",
        ),
      ).toBeInTheDocument();
    });

    it("should display call to action message in Arabic", () => {
      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={null}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("لا يوجد اشتراك نشط")).toBeInTheDocument();
      expect(
        screen.getByText("يرجى اختيار خطة للبدء في استخدام منصة موعدي"),
      ).toBeInTheDocument();
    });

    it("should render inbox icon when no subscription", () => {
      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={null}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const icon = container.querySelector("svg");
      expect(icon).toBeInTheDocument();
    });

    it("should have gradient background when no subscription", () => {
      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={null}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const card = container.firstChild;
      expect(card).toHaveClass(
        "bg-gradient-to-br",
        "from-slate-50",
        "to-slate-100",
      );
    });
  });

  describe("Tier Name Display", () => {
    it("should render tier name in English", () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Starter")).toBeInTheDocument();
    });

    it("should render tier name in Arabic", () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("المبتدئ")).toBeInTheDocument();
    });

    it('should display "Current Plan" label in English', () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Current Plan")).toBeInTheDocument();
    });

    it('should display "Current Plan" label in Arabic', () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("خطتك الحالية")).toBeInTheDocument();
    });

    it("should show popular badge for popular tier", () => {
      const subscriptionData = createMockSubscriptionData({ tierId: "tier2" });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Most Popular")).toBeInTheDocument();
    });

    it("should show popular badge in Arabic", () => {
      const subscriptionData = createMockSubscriptionData({ tierId: "tier2" });

      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("الأكثر شيوعاً")).toBeInTheDocument();
    });

    it("should not show popular badge for non-popular tiers", () => {
      const subscriptionData = createMockSubscriptionData({ tierId: "tier1" });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.queryByText("Most Popular")).not.toBeInTheDocument();
    });
  });

  describe("Monthly Pricing Display", () => {
    it("should display correct monthly price", () => {
      const subscriptionData = createMockSubscriptionData({
        tierId: "tier1",
        billingPeriod: "monthly",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("£179")).toBeInTheDocument();
      expect(screen.getByText("/ month")).toBeInTheDocument();
    });

    it("should display monthly billing period in Arabic", () => {
      const subscriptionData = createMockSubscriptionData({
        billingPeriod: "monthly",
      });

      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("/ شهرياً")).toBeInTheDocument();
    });

    it("should not display yearly savings for monthly subscription", () => {
      const subscriptionData = createMockSubscriptionData({
        billingPeriod: "monthly",
      });

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.queryByText(/Save/)).not.toBeInTheDocument();
    });
  });

  describe("Yearly Pricing Display", () => {
    it("should display correct yearly price (10 months)", () => {
      const subscriptionData = createMockSubscriptionData({
        tierId: "tier1",
        billingPeriod: "yearly",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      // 179 * 10 = 1790
      expect(screen.getByText("£1790")).toBeInTheDocument();
      expect(screen.getByText("/ year")).toBeInTheDocument();
    });

    it("should display yearly billing period in Arabic", () => {
      const subscriptionData = createMockSubscriptionData({
        billingPeriod: "yearly",
      });

      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("/ سنوياً")).toBeInTheDocument();
    });

    it("should calculate and display yearly savings correctly", () => {
      const subscriptionData = createMockSubscriptionData({
        tierId: "tier1",
        billingPeriod: "yearly",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      // Savings: (179 * 12) - (179 * 10) = 2148 - 1790 = 358
      expect(screen.getByText(/Save £358 per year/)).toBeInTheDocument();
    });

    it("should display yearly savings in Arabic", () => {
      const subscriptionData = createMockSubscriptionData({
        tierId: "tier1",
        billingPeriod: "yearly",
      });

      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText(/توفير £358 سنوياً/)).toBeInTheDocument();
    });

    it("should calculate savings for Professional tier", () => {
      const subscriptionData = createMockSubscriptionData({
        tierId: "tier2",
        billingPeriod: "yearly",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      // Savings: (209 * 12) - (209 * 10) = 2508 - 2090 = 418
      expect(screen.getByText(/Save £418 per year/)).toBeInTheDocument();
    });

    it("should show checkmark icon with savings", () => {
      const subscriptionData = createMockSubscriptionData({
        billingPeriod: "yearly",
      });

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      // Check for SVG path (checkmark in circle)
      const checkIcon = container.querySelector(
        'path[d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"]',
      );
      expect(checkIcon).toBeInTheDocument();
    });
  });

  describe("Features List Display", () => {
    it("should display all features in English", () => {
      const subscriptionData = createMockSubscriptionData({ tierId: "tier1" });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(
        screen.getByText("AI Agent for FAQ & Auto-Reply"),
      ).toBeInTheDocument();
      expect(
        screen.getByText("Automated Appointment Booking"),
      ).toBeInTheDocument();
      expect(screen.getByText("Admin Dashboard")).toBeInTheDocument();
      expect(screen.getByText("WhatsApp Integration")).toBeInTheDocument();
    });

    it("should display all features in Arabic", () => {
      const subscriptionData = createMockSubscriptionData({ tierId: "tier1" });

      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("وكيل ذكي للأسئلة الشائعة")).toBeInTheDocument();
      expect(screen.getByText("حجز المواعيد الآلي")).toBeInTheDocument();
      expect(screen.getByText("لوحة تحكم الإدارة")).toBeInTheDocument();
      expect(screen.getByText("تكامل واتساب")).toBeInTheDocument();
    });

    it("should display features header in English", () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Included Features")).toBeInTheDocument();
    });

    it("should display features header in Arabic", () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("الميزات المضمنة")).toBeInTheDocument();
    });

    it("should render checkmarks for each feature", () => {
      const subscriptionData = createMockSubscriptionData({ tierId: "tier1" });

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      // Should have 4 checkmark icons (one per feature)
      const checkmarks = container.querySelectorAll('path[d="M5 13l4 4L19 7"]');
      expect(checkmarks.length).toBe(4);
    });

    it("should display Professional tier features", () => {
      const subscriptionData = createMockSubscriptionData({ tierId: "tier2" });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Everything in Starter")).toBeInTheDocument();
      expect(screen.getByText("Send & Receive Quotations")).toBeInTheDocument();
      expect(screen.getByText("CRM Dashboard")).toBeInTheDocument();
      expect(screen.getByText("Priority Support")).toBeInTheDocument();
    });
  });

  describe("Status Badge Display", () => {
    it("should display active status in English", () => {
      const subscriptionData = createMockSubscriptionData({ status: "active" });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Active")).toBeInTheDocument();
    });

    it("should display active status in Arabic", () => {
      const subscriptionData = createMockSubscriptionData({ status: "active" });

      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("نشط")).toBeInTheDocument();
    });

    it("should apply emerald color to active status", () => {
      const subscriptionData = createMockSubscriptionData({ status: "active" });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const statusText = screen.getByText("Active");
      const statusBadge = statusText.closest("span");
      expect(statusBadge).toHaveClass(
        "bg-emerald-100",
        "text-emerald-700",
        "border-emerald-200",
      );
    });

    it("should display trialing status", () => {
      const subscriptionData = createMockSubscriptionData({
        status: "trialing",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Trial")).toBeInTheDocument();
    });

    it("should apply blue color to trialing status", () => {
      const subscriptionData = createMockSubscriptionData({
        status: "trialing",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const statusText = screen.getByText("Trial");
      const statusBadge = statusText.closest("span");
      expect(statusBadge).toHaveClass(
        "bg-blue-100",
        "text-blue-700",
        "border-blue-200",
      );
    });

    it("should display past_due status", () => {
      const subscriptionData = createMockSubscriptionData({
        status: "past_due",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Past Due")).toBeInTheDocument();
    });

    it("should apply orange color to past_due status", () => {
      const subscriptionData = createMockSubscriptionData({
        status: "past_due",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const statusText = screen.getByText("Past Due");
      const statusBadge = statusText.closest("span");
      expect(statusBadge).toHaveClass(
        "bg-orange-100",
        "text-orange-700",
        "border-orange-200",
      );
    });

    it("should display canceled status", () => {
      const subscriptionData = createMockSubscriptionData({
        status: "canceled",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Canceled")).toBeInTheDocument();
    });

    it("should apply slate color to canceled status", () => {
      const subscriptionData = createMockSubscriptionData({
        status: "canceled",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const statusText = screen.getByText("Canceled");
      const statusBadge = statusText.closest("span");
      expect(statusBadge).toHaveClass(
        "bg-slate-100",
        "text-slate-700",
        "border-slate-200",
      );
    });

    it("should display unpaid status", () => {
      const subscriptionData = createMockSubscriptionData({ status: "unpaid" });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Unpaid")).toBeInTheDocument();
    });

    it("should apply red color to unpaid status", () => {
      const subscriptionData = createMockSubscriptionData({ status: "unpaid" });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const statusText = screen.getByText("Unpaid");
      const statusBadge = statusText.closest("span");
      expect(statusBadge).toHaveClass(
        "bg-red-100",
        "text-red-700",
        "border-red-200",
      );
    });

    it("should show pulsing indicator on status badge", () => {
      const subscriptionData = createMockSubscriptionData();

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const pulsingDot = container.querySelector(".animate-pulse");
      expect(pulsingDot).toBeInTheDocument();
      expect(pulsingDot).toHaveClass(
        "w-2",
        "h-2",
        "rounded-full",
        "bg-current",
      );
    });
  });

  describe("Renewal Date Formatting", () => {
    it("should format renewal date in English", () => {
      const subscriptionData = createMockSubscriptionData({
        currentPeriodEnd: "2025-03-15T00:00:00Z",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Next renewal on")).toBeInTheDocument();
      // Date formatting may vary by locale, just check it exists
      expect(screen.getByText(/March|15|2025/)).toBeInTheDocument();
    });

    it("should format renewal date in Arabic", () => {
      const subscriptionData = createMockSubscriptionData({
        currentPeriodEnd: "2025-03-15T00:00:00Z",
      });

      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("التجديد التالي في")).toBeInTheDocument();
    });

    it("should display trial end date when in trial", () => {
      const subscriptionData = createMockSubscriptionData({
        trialEndsAt: "2025-01-20T00:00:00Z",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Trial ends on")).toBeInTheDocument();
    });

    it("should display trial end date in Arabic", () => {
      const subscriptionData = createMockSubscriptionData({
        trialEndsAt: "2025-01-20T00:00:00Z",
      });

      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("تنتهي الفترة التجريبية في")).toBeInTheDocument();
    });

    it("should show calendar icon next to renewal date", () => {
      const subscriptionData = createMockSubscriptionData();

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      // Calendar icon path
      const calendarIcon = container.querySelector(
        'path[d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"]',
      );
      expect(calendarIcon).toBeInTheDocument();
    });
  });

  describe("Cancel At Period End Warning", () => {
    it("should display cancellation warning when cancelAtPeriodEnd is true", () => {
      const subscriptionData = createMockSubscriptionData({
        cancelAtPeriodEnd: true,
        currentPeriodEnd: "2025-02-01T00:00:00Z",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Scheduled Cancellation")).toBeInTheDocument();
    });

    it("should display cancellation warning in Arabic", () => {
      const subscriptionData = createMockSubscriptionData({
        cancelAtPeriodEnd: true,
      });

      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("الإلغاء المجدول")).toBeInTheDocument();
    });

    it("should show cancellation date in warning", () => {
      const subscriptionData = createMockSubscriptionData({
        cancelAtPeriodEnd: true,
        currentPeriodEnd: "2025-02-15T00:00:00Z",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(
        screen.getByText(/Your subscription will cancel on/),
      ).toBeInTheDocument();
    });

    it("should show warning icon with cancellation message", () => {
      const subscriptionData = createMockSubscriptionData({
        cancelAtPeriodEnd: true,
      });

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      // Warning triangle icon
      const warningIcon = container.querySelector(
        'path[d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"]',
      );
      expect(warningIcon).toBeInTheDocument();
    });

    it("should have orange background for warning", () => {
      const subscriptionData = createMockSubscriptionData({
        cancelAtPeriodEnd: true,
      });

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const warningBox = container.querySelector(".bg-orange-50");
      expect(warningBox).toBeInTheDocument();
      expect(warningBox).toHaveClass("border-orange-200");
    });

    it("should not show cancellation warning when cancelAtPeriodEnd is false", () => {
      const subscriptionData = createMockSubscriptionData({
        cancelAtPeriodEnd: false,
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(
        screen.queryByText("Scheduled Cancellation"),
      ).not.toBeInTheDocument();
    });
  });

  describe("Setup Fee Information", () => {
    it("should display setup fee when paid", () => {
      const subscriptionData = createMockSubscriptionData({
        setupFeePaid: true,
        setupFeeAmount: 19900,
        setupFeePaidAt: "2024-12-01T00:00:00Z",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Setup Fee Paid")).toBeInTheDocument();
      expect(screen.getByText(/£199.00/)).toBeInTheDocument();
    });

    it("should display setup fee in Arabic", () => {
      const subscriptionData = createMockSubscriptionData({
        setupFeePaid: true,
        setupFeeAmount: 19900,
      });

      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("رسوم الإعداد مدفوعة")).toBeInTheDocument();
    });

    it("should display setup fee payment date", () => {
      const subscriptionData = createMockSubscriptionData({
        setupFeePaid: true,
        setupFeeAmount: 19900,
        setupFeePaidAt: "2024-12-01T00:00:00Z",
      });

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      // Find the setup fee section
      const setupFeeSection = screen.getByText("Setup Fee Paid").closest("div");

      // Check if date is displayed within the setup fee section
      expect(setupFeeSection).toBeTruthy();
      expect(setupFeeSection?.textContent).toMatch(/Dec|December/i);
    });

    it("should show checkmark for paid setup fee", () => {
      const subscriptionData = createMockSubscriptionData({
        setupFeePaid: true,
        setupFeeAmount: 19900,
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("✓")).toBeInTheDocument();
    });

    it("should not display setup fee section when not paid", () => {
      const subscriptionData = createMockSubscriptionData({
        setupFeePaid: false,
        setupFeeAmount: null,
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.queryByText("Setup Fee Paid")).not.toBeInTheDocument();
    });

    it("should not display setup fee when amount is null", () => {
      const subscriptionData = createMockSubscriptionData({
        setupFeePaid: true,
        setupFeeAmount: null,
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.queryByText("Setup Fee Paid")).not.toBeInTheDocument();
    });

    it("should format setup fee amount correctly", () => {
      const subscriptionData = createMockSubscriptionData({
        setupFeePaid: true,
        setupFeeAmount: 29900, // £299.00
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText(/£299.00/)).toBeInTheDocument();
    });
  });

  describe("Action Buttons", () => {
    it("should render Change Plan button", () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Change Plan")).toBeInTheDocument();
    });

    it("should render Change Plan button in Arabic", () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("تغيير الخطة")).toBeInTheDocument();
    });

    it("should call onChangePlan when Change Plan button is clicked", () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const changePlanButton = screen.getByText("Change Plan");
      fireEvent.click(changePlanButton);

      expect(mockOnChangePlan).toHaveBeenCalledTimes(1);
    });

    it("should render Billing History button", () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Billing History")).toBeInTheDocument();
    });

    it("should render Billing History button in Arabic", () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("سجل الفواتير")).toBeInTheDocument();
    });

    it("should call onViewHistory when Billing History button is clicked", () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const billingHistoryButton = screen.getByText("Billing History");
      fireEvent.click(billingHistoryButton);

      expect(mockOnViewHistory).toHaveBeenCalledTimes(1);
    });

    it("should have proper button styling on Change Plan", () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const changePlanButton = screen.getByText("Change Plan");
      expect(changePlanButton).toHaveClass(
        "bg-gradient-to-r",
        "from-brand-green",
        "to-emerald-600",
        "text-white",
      );
    });

    it("should have proper button styling on Billing History", () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const billingHistoryButton = screen.getByText("Billing History");
      expect(billingHistoryButton).toHaveClass(
        "bg-white",
        "border-2",
        "border-slate-300",
      );
    });

    it("should render icons in buttons", () => {
      const subscriptionData = createMockSubscriptionData();

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const buttons = container.querySelectorAll("button");
      buttons.forEach((button) => {
        const icon = button.querySelector("svg");
        expect(icon).toBeInTheDocument();
      });
    });
  });

  describe("Subscription ID Display", () => {
    it("should display subscription ID label in English", () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("Subscription ID:")).toBeInTheDocument();
    });

    it("should display subscription ID label in Arabic", () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="ar"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("معرف الاشتراك:")).toBeInTheDocument();
    });

    it("should display truncated subscription ID", () => {
      const subscriptionData = createMockSubscriptionData({
        id: "sub_test123456789",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("sub_test...")).toBeInTheDocument();
    });

    it("should display subscription ID in monospace font", () => {
      const subscriptionData = createMockSubscriptionData();

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const idElement = screen.getByText(/sub_test.../);
      expect(idElement).toHaveClass("font-mono");
    });
  });

  describe("Styling and Layout", () => {
    it("should have gradient background", () => {
      const subscriptionData = createMockSubscriptionData();

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const card = container.firstChild;
      expect(card).toHaveClass(
        "bg-gradient-to-br",
        "from-white",
        "via-emerald-50/30",
        "to-white",
      );
    });

    it("should have shadow and border", () => {
      const subscriptionData = createMockSubscriptionData();

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const card = container.firstChild;
      expect(card).toHaveClass(
        "shadow-lg",
        "border-2",
        "border-emerald-200/50",
      );
    });

    it("should have hover effect", () => {
      const subscriptionData = createMockSubscriptionData();

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const card = container.firstChild;
      expect(card).toHaveClass("hover:shadow-xl", "transition-shadow");
    });

    it("should have rounded corners", () => {
      const subscriptionData = createMockSubscriptionData();

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const card = container.firstChild;
      expect(card).toHaveClass("rounded-2xl");
    });

    it("should have proper padding", () => {
      const subscriptionData = createMockSubscriptionData();

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const card = container.firstChild;
      expect(card).toHaveClass("p-8");
    });
  });

  describe("Accessibility", () => {
    it("should have semantic structure", () => {
      const subscriptionData = createMockSubscriptionData();

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(container.querySelector("h2")).toBeInTheDocument();
      expect(container.querySelector("h3")).toBeInTheDocument();
    });

    it("should have clickable buttons", () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const changePlanButton = screen
        .getByText("Change Plan")
        .closest("button");
      const billingHistoryButton = screen
        .getByText("Billing History")
        .closest("button");

      expect(changePlanButton).toBeInTheDocument();
      expect(billingHistoryButton).toBeInTheDocument();
    });

    it("should support keyboard navigation", () => {
      const subscriptionData = createMockSubscriptionData();

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const changePlanButton = screen
        .getByText("Change Plan")
        .closest("button");
      expect(changePlanButton?.tagName).toBe("BUTTON");
    });
  });

  describe("Edge Cases", () => {
    it("should handle unknown tier ID gracefully", () => {
      const subscriptionData = createMockSubscriptionData({
        tierId: "unknown_tier" as any,
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("No Active Subscription")).toBeInTheDocument();
    });

    it("should handle unknown status gracefully", () => {
      const subscriptionData = createMockSubscriptionData({
        status: "unknown_status",
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      expect(screen.getByText("unknown_status")).toBeInTheDocument();
    });

    it("should handle very long subscription ID", () => {
      const subscriptionData = createMockSubscriptionData({
        id: "sub_" + "a".repeat(100),
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      // Should truncate to first 8 chars + ...
      expect(screen.getByText(/sub_aaaa.../)).toBeInTheDocument();
    });

    it("should handle null currentPeriodEnd gracefully", () => {
      const subscriptionData = createMockSubscriptionData({
        currentPeriodEnd: null as any,
      });

      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      // Should not crash
      expect(screen.getByText("Starter")).toBeInTheDocument();
    });

    it("should handle empty features array", () => {
      // Mock empty features
      jest.mock("@/lib/config/pricing-tiers", () => ({
        PRICING_TIERS: [
          {
            id: "tier1",
            nameEn: "Starter",
            nameAr: "المبتدئ",
            priceGBP: 179,
            setupGBP: 199,
            popular: false,
            featuresEn: [],
            featuresAr: [],
          },
        ],
      }));

      const subscriptionData = createMockSubscriptionData();

      const { container } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      // Should still render the component
      expect(container.querySelector(".rounded-2xl")).toBeInTheDocument();
    });
  });

  describe("Performance", () => {
    it("should render quickly", () => {
      const subscriptionData = createMockSubscriptionData();

      const startTime = performance.now();
      render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );
      const renderTime = performance.now() - startTime;

      expect(renderTime).toBeLessThan(100);
    });

    it("should handle multiple re-renders efficiently", () => {
      const subscriptionData = createMockSubscriptionData();

      const { rerender } = render(
        <CurrentPackageCard
          lang="en"
          subscriptionData={subscriptionData}
          loading={false}
          onChangePlan={mockOnChangePlan}
          onViewHistory={mockOnViewHistory}
        />,
      );

      const startTime = performance.now();
      for (let i = 0; i < 10; i++) {
        rerender(
          <CurrentPackageCard
            lang="en"
            subscriptionData={subscriptionData}
            loading={false}
            onChangePlan={mockOnChangePlan}
            onViewHistory={mockOnViewHistory}
          />,
        );
      }
      const rerenderTime = performance.now() - startTime;

      expect(rerenderTime).toBeLessThan(500);
    });
  });
});