"use client";

import type { Lang } from "@/lib/config";
import { PRICING_TIERS } from "@/lib/config/pricing-tiers";
import type { DashboardSubscriptionDetails } from "../types";

interface PlanSnapshotProps {
  lang: Lang;
  subscriptionData: DashboardSubscriptionDetails | null;
  loading: boolean;
  onUpgrade: () => void;
  onViewBilling: () => void;
}

const STATUS_COLORS: Record<string, string> = {
  active: "text-emerald-700 bg-emerald-100",
  trialing: "text-sky-700 bg-sky-100",
  past_due: "text-amber-700 bg-amber-100",
  canceled: "text-slate-600 bg-slate-100",
};

export function PlanSnapshot({
  lang,
  subscriptionData,
  loading,
  onUpgrade,
  onViewBilling,
}: PlanSnapshotProps) {
  const isAr = lang === "ar";

  if (loading) {
    return (
      <div className="rounded-2xl border border-slate-100 bg-white p-5 shadow-sm">
        <div className="animate-pulse space-y-3">
          <div className="h-4 w-1/3 rounded bg-slate-200" />
          <div className="h-6 w-1/2 rounded bg-slate-200" />
          <div className="h-20 rounded bg-slate-100" />
        </div>
      </div>
    );
  }

  if (!subscriptionData) {
    return (
      <div className="rounded-2xl border border-dashed border-slate-200 bg-white p-5 text-center shadow-sm">
        <p className="text-sm text-slate-600">
          {isAr ? "لا توجد خطة مفعلة حالياً." : "No active plan yet."}
        </p>
        <button
          onClick={onUpgrade}
          className="mt-4 rounded-lg bg-brand-green px-4 py-2 text-sm font-semibold text-white hover:bg-brand-greenHover"
        >
          {isAr ? "اختر خطة" : "Choose a plan"}
        </button>
      </div>
    );
  }

  const { subscription } = subscriptionData;
  const tierMeta = PRICING_TIERS.find(
    (tier) => tier.id === subscription.tierId,
  );
  const tierName = tierMeta
    ? isAr
      ? tierMeta.nameAr
      : tierMeta.nameEn
    : subscription.tierId;
  const statusBadge =
    STATUS_COLORS[subscription.status] || STATUS_COLORS.active;
  const renewalDate = new Date(
    subscription.currentPeriodEnd,
  ).toLocaleDateString(isAr ? "ar-SA" : "en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  });
  const methodLabel = subscription.paymentMethod
    ? `${subscription.paymentMethod.brand?.toUpperCase() || "CARD"} •••• ${subscription.paymentMethod.lastFour}`
    : isAr
      ? "لا توجد بطاقة محفوظة"
      : "No card on file";

  const featureList = tierMeta
    ? isAr
      ? tierMeta.featuresAr
      : tierMeta.featuresEn
    : [];

  return (
    <div className="rounded-2xl border border-slate-100 bg-white p-5 shadow-sm">
      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
        <div>
          <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
            {isAr ? "الخطة الحالية" : "Current plan"}
          </p>
          <div className="mt-2 flex items-center gap-3">
            <h3 className="text-2xl font-bold text-slate-900">{tierName}</h3>
            <span
              className={`rounded-full px-3 py-1 text-xs font-semibold ${statusBadge}`}
            >
              {subscription.status}
            </span>
          </div>
          <p className="mt-1 text-sm text-slate-600">
            {subscription.billingPeriod === "monthly"
              ? isAr
                ? "فوترة شهرية"
                : "Billed monthly"
              : isAr
                ? "فوترة سنوية"
                : "Billed yearly"}
            {" • "}
            {isAr ? "تجدد في " : "Renews on "}
            {renewalDate}
          </p>
        </div>
        <div className="flex flex-wrap gap-2">
          <button
            onClick={onUpgrade}
            className="rounded-lg bg-brand-green px-4 py-2 text-sm font-semibold text-white hover:bg-brand-greenHover"
          >
            {isAr ? "ترقية الخطة" : "Upgrade plan"}
          </button>
          <button
            onClick={onViewBilling}
            className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:border-brand-green hover:text-brand-green"
          >
            {isAr ? "عرض الفواتير" : "View billing"}
          </button>
        </div>
      </div>

      <div className="mt-4 grid gap-4 text-sm text-slate-600 sm:grid-cols-2">
        <div className="rounded-xl border border-slate-100 bg-slate-50/60 p-4">
          <p className="text-xs text-slate-500">
            {isAr ? "طريقة الدفع" : "Payment method"}
          </p>
          <p className="mt-1 font-semibold text-slate-900">{methodLabel}</p>
          {subscription.paymentFailureCount > 0 && (
            <p className="mt-1 text-xs text-amber-600">
              {isAr
                ? "تم رصد مشاكل في الدفع."
                : "We detected recent payment issues."}
            </p>
          )}
        </div>
        <div className="rounded-xl border border-slate-100 bg-slate-50/60 p-4">
          <p className="text-xs text-slate-500">
            {isAr ? "الفوائد الرئيسية" : "Key benefits"}
          </p>
          <ul className="mt-1 list-disc space-y-1 pl-4 text-xs text-slate-600">
            {featureList.slice(0, 3).map((feature) => (
              <li key={feature}>{feature}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}