"use client";

import type { Lang } from "@/lib/config";
import { PRICING_TIERS } from "@/lib/config/pricing-tiers";
import type { BillingPeriod, Currency, TierId } from "@/lib/types/pricing";
import { CurrencyManager } from "@/lib/utils/currency";

interface PlanHighlightsProps {
  lang: Lang;
  currentTierId?: TierId;
  currency: Currency;
  billingPeriod: BillingPeriod;
  onSelectTier: (tierId: TierId) => void;
}

const tierOrder: TierId[] = ["tier1", "tier2", "tier3", "tier4", "tier5"];

export function PlanHighlights({
  lang,
  currentTierId,
  currency,
  billingPeriod,
  onSelectTier,
}: PlanHighlightsProps) {
  const isAr = lang === "ar";
  const currentIndex = currentTierId ? tierOrder.indexOf(currentTierId) : -1;
  const upgradeOptions = PRICING_TIERS.filter(
    (tier) =>
      ["tier1", "tier2", "tier3"].includes(tier.id) &&
      tierOrder.indexOf(tier.id as TierId) > currentIndex,
  ).slice(0, 3);

  if (upgradeOptions.length === 0) {
    return null;
  }

  return (
    <div className="rounded-2xl border border-slate-100 bg-white p-5 shadow-sm">
      <div className="mb-4 flex items-center justify-between">
        <div>
          <h3 className="text-lg font-semibold text-slate-900">
            {isAr ? "طور أداء عيادتك" : "Unlock more for your clinic"}
          </h3>
          <p className="text-sm text-slate-500">
            {isAr
              ? "قارن الباقات الأعلى واختر ما يناسب نموك."
              : "Compare higher tiers and pick the perfect upgrade."}
          </p>
        </div>
      </div>
      <div className="grid gap-4 md:grid-cols-3">
        {upgradeOptions.map((tier) => {
          const price = CurrencyManager.convert(tier.priceGBP, currency);
          const formatted = CurrencyManager.formatPrice(price, currency);
          const features = (isAr ? tier.featuresAr : tier.featuresEn).slice(
            0,
            3,
          );
          const isPopular = tier.popular;

          return (
            <div
              key={tier.id}
              className={`flex flex-col rounded-2xl border ${
                isPopular
                  ? "border-brand-green bg-emerald-50/40"
                  : "border-slate-100 bg-slate-50/40"
              } p-4 shadow-sm`}
            >
              <div className="mb-3 flex items-center justify-between">
                <div>
                  <p className="text-xs uppercase tracking-wide text-slate-500">
                    {isAr ? "الباقة" : "Plan"}
                  </p>
                  <h4 className="text-lg font-semibold text-slate-900">
                    {isAr ? tier.nameAr : tier.nameEn}
                  </h4>
                </div>
                {isPopular && (
                  <span className="rounded-full bg-white/80 px-3 py-1 text-[10px] font-semibold text-brand-green">
                    {isAr ? "الأكثر مبيعاً" : "Most popular"}
                  </span>
                )}
              </div>
              <div className="mb-3">
                <p className="text-2xl font-bold text-slate-900">
                  {formatted}
                  <span className="text-xs font-medium text-slate-500">
                    /
                    {billingPeriod === "monthly"
                      ? isAr
                        ? "شهر"
                        : "mo"
                      : isAr
                        ? "سنة"
                        : "yr"}
                  </span>
                </p>
              </div>
              <ul className="mb-4 flex-1 space-y-1 text-xs text-slate-600">
                {features.map((feature) => (
                  <li key={feature} className="flex items-start gap-2">
                    <span>✅</span>
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>
              <button
                onClick={() => onSelectTier(tier.id as TierId)}
                className="rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-white transition hover:bg-slate-800"
              >
                {isAr ? "اعرف التكلفة الآن" : "See upgrade preview"}
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}