"use client";

import { Check, X } from "lucide-react";
import type { PricingTier } from "@/lib/types/pricing";
import { FEATURE_MATRIX } from "@/lib/config/pricing-features";

interface PricingComparisonProps {
  tiers: PricingTier[];
  isAr: boolean;
}

export default function PricingComparison({
  tiers,
  isAr,
}: PricingComparisonProps) {
  return (
    <div className="max-w-7xl mx-auto">
      {/* Section Header */}
      <div className="mb-12">
        <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
          {isAr ? "مقارنة تفصيلية للباقات" : "Detailed Plan Comparison"}
        </h2>
        <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
          {isAr
            ? "قارن بين جميع المميزات واختر الباقة المناسبة لك"
            : "Compare all features and choose the right plan for you"}
        </p>
      </div>

      {/* Table Container */}
      <div className="overflow-x-auto border border-slate-200 bg-white">
        <table className="w-full">
          {/* Header */}
          <thead>
            <tr className="border-b border-slate-200">
              <th className="px-6 py-5 text-left font-semibold text-sm text-[#64748B] uppercase tracking-wider sticky left-0 bg-white z-10 min-w-[200px] border-r border-slate-200">
                {isAr ? "الميزة" : "Feature"}
              </th>
              {tiers.map((tier, idx) => (
                <th
                  key={tier.id}
                  className={`px-6 py-5 text-center font-semibold text-sm min-w-[140px] ${
                    tier.popular ? "bg-[#10B981]/5" : "bg-white"
                  }`}
                >
                  <div className="flex flex-col items-center gap-2">
                    <span className="text-[#10B981] font-mono text-xs">
                      {String(idx + 1).padStart(2, "0")}
                    </span>
                    {tier.popular && (
                      <span className="text-xs bg-[#10B981] text-white px-2 py-0.5 font-bold">
                        {isAr ? "الأفضل" : "Best"}
                      </span>
                    )}
                    <span className="text-[#1E293B] text-base">
                      {isAr ? tier.nameAr : tier.nameEn}
                    </span>
                  </div>
                </th>
              ))}
            </tr>
          </thead>

          {/* Body */}
          <tbody className="divide-y divide-slate-100">
            {FEATURE_MATRIX.filter((feature) =>
              feature.availability.some((tid) =>
                tiers.some((t) => t.id === tid),
              ),
            ).map((feature, idx) => (
              <tr
                key={idx}
                className="group hover:bg-[#FAFAFA] transition-colors"
              >
                <td className="px-6 py-4 font-medium text-[#1E293B] sticky left-0 bg-white group-hover:bg-[#FAFAFA] z-10 border-r border-slate-100 transition-colors">
                  <div className="flex items-center gap-3">
                    <span className="text-[#10B981] font-mono text-xs">
                      {String(idx + 1).padStart(2, "0")}
                    </span>
                    <span>{isAr ? feature.ar : feature.en}</span>
                  </div>
                </td>
                {tiers.map((tier) => {
                  const isIncluded = feature.availability.includes(tier.id);
                  return (
                    <td
                      key={tier.id}
                      className={`px-6 py-4 text-center ${
                        tier.popular
                          ? "bg-[#10B981]/[0.03] group-hover:bg-[#10B981]/[0.08]"
                          : ""
                      }`}
                    >
                      {isIncluded ? (
                        <span className="inline-flex items-center justify-center w-6 h-6">
                          <div className="w-1.5 h-1.5 bg-[#10B981]" />
                        </span>
                      ) : (
                        <span className="inline-flex items-center justify-center w-6 h-6">
                          <X className="w-4 h-4 text-slate-300" />
                        </span>
                      )}
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Mobile hint */}
      <p className="mt-4 text-sm text-[#64748B] md:hidden">
        {isAr ? "اسحب لليسار لرؤية المزيد" : "Scroll horizontally to see more"}
      </p>
    </div>
  );
}