"use client";

import { useState } from "react";
import { FiAward } from "react-icons/fi";
import { COLORS, TEXT } from "@/branding";
import { cn } from "@/lib/utils";
import type { MembershipSubscription } from "@/types";
import { getBenefitLabels } from "./benefitLabels";

interface CurrentMembershipCardProps {
  subscription: MembershipSubscription;
  cancelling: boolean;
  onCancel: () => void;
}

export default function CurrentMembershipCard({
  subscription,
  cancelling,
  onCancel,
}: CurrentMembershipCardProps) {
  const [showConfirm, setShowConfirm] = useState(false);
  const isCancelling = subscription.cancel_at_period_end === "1";
  const benefitLabels = getBenefitLabels(subscription.benefits);

  const formatDate = (d: string) =>
    new Date(d).toLocaleDateString("en-IN", { day: "2-digit", month: "short", year: "numeric" });

  return (
    <>
      <div
        className="relative rounded-2xl overflow-hidden shadow-card-hover"
        style={{
          background: `linear-gradient(135deg, ${COLORS.primary[900]} 0%, ${COLORS.primary[700]} 55%, ${COLORS.secondary[600]} 135%)`,
        }}
      >
        <div
          className="absolute inset-0 opacity-[0.08] pointer-events-none"
          style={{ background: `radial-gradient(circle at 88% -10%, ${COLORS.secondary[400]}, transparent 55%)` }}
        />

        <div className="relative px-6 py-6">
          <div className="flex items-start justify-between mb-5 gap-3">
            <div className="flex items-center gap-3 min-w-0">
              <div className="w-10 h-10 rounded-full bg-white/15 flex items-center justify-center flex-shrink-0">
                <FiAward size={18} className="text-secondary-300" />
              </div>
              <div className="min-w-0">
                <p className="text-[10px] font-black uppercase tracking-wider text-secondary-300">
                  {TEXT.membership.title}
                </p>
                <h3 className="font-display text-lg font-bold text-white leading-tight truncate">
                  {subscription.membership_plan_name ?? TEXT.membership.yourPlan}
                </h3>
              </div>
            </div>
            <span
              className={cn(
                "px-2.5 py-1 rounded-full text-[10px] font-black tracking-wide flex-shrink-0",
                isCancelling ? "bg-white/15 text-white" : "bg-secondary-500 text-primary-900",
              )}
            >
              {isCancelling ? TEXT.membership.cancellingBadge : TEXT.membership.currentPlanBadge}
            </span>
          </div>

          <div className="flex items-center gap-6 text-xs">
            <div>
              <p className="text-white/50 mb-0.5">{TEXT.membership.memberSince}</p>
              <p className="font-semibold text-white">{formatDate(subscription.current_period_start)}</p>
            </div>
            <div>
              <p className="text-white/50 mb-0.5">
                {isCancelling ? TEXT.membership.accessUntil : TEXT.membership.validTill}
              </p>
              <p className="font-semibold text-white">{formatDate(subscription.current_period_end)}</p>
            </div>
          </div>

          {benefitLabels.length > 0 && (
            <div className="flex flex-wrap gap-1.5 mt-4">
              {benefitLabels.map((b) => (
                <span
                  key={b}
                  className="px-2.5 py-1 rounded-full bg-white/10 text-[11px] text-white/90 font-medium"
                >
                  {b}
                </span>
              ))}
            </div>
          )}

          {isCancelling ? (
            <p className="mt-5 text-xs text-white/70">
              {TEXT.membership.cancelScheduledNotice(formatDate(subscription.current_period_end))}
            </p>
          ) : (
            <button
              onClick={() => setShowConfirm(true)}
              className="mt-5 text-xs font-bold text-white/70 hover:text-white transition-colors underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-white/40 rounded"
            >
              {TEXT.membership.cancelPlan}
            </button>
          )}
        </div>
      </div>

      {showConfirm && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4 animate-fade-in"
          onClick={() => setShowConfirm(false)}
        >
          <div
            className="bg-white dark:bg-dm-surface rounded-2xl w-full max-w-sm p-6 text-center animate-bounce-in"
            onClick={(e) => e.stopPropagation()}
          >
            <h3 className="text-base font-bold text-gray-800 dark:text-dm-text mb-2">
              {TEXT.membership.cancelConfirmTitle}
            </h3>
            <p className="text-sm text-gray-500 dark:text-dm-muted mb-6">
              {TEXT.membership.cancelConfirmMsg}
            </p>
            <div className="flex gap-3">
              <button
                onClick={() => setShowConfirm(false)}
                className="flex-1 py-3 rounded-xl border-2 border-gray-200 dark:border-dm-border text-gray-700 dark:text-dm-text text-sm font-bold hover:bg-gray-50 dark:hover:bg-dm-surface2 transition-colors focus:outline-none focus:ring-2"
              >
                {TEXT.membership.keepPlan}
              </button>
              <button
                onClick={() => {
                  setShowConfirm(false);
                  onCancel();
                }}
                disabled={cancelling}
                className="flex-1 py-3 rounded-xl bg-red-500 text-white text-sm font-bold hover:bg-red-600 transition-colors focus:outline-none focus:ring-2 disabled:opacity-60"
              >
                {cancelling ? TEXT.membership.cancelling : TEXT.membership.cancelPlan}
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}