"use client";

import React from "react";
import Link from "next/link";
import moment from "moment";
import { ArrowRight, CreditCard } from "lucide-react";

import { IUserSubscription } from "@/api/types/auth";
import { SUBSCRIPTION_STATUS } from "@/api/constant";
import { useAppSelector } from "@/redux/hooks";

interface SubscriptionSummaryCardProps {
  userSubscription?: IUserSubscription | null;
  // When viewing another member's profile this card is informational only:
  // active state comes from their subscription record (not the logged-in
  // user's premium flag) and the manage/upgrade CTAs are hidden.
  readOnly?: boolean;
}

// Compact subscription status shown in the right rail of the My Account tab.
// Mirrors the mockup: active plan name + renewal date, or an empty state with
// an "Explore Plans" CTA that jumps to the Subscription tab.
const SubscriptionSummaryCard = ({
  userSubscription,
  readOnly = false,
}: SubscriptionSummaryCardProps) => {
  const { user } = useAppSelector((state) => state.auth);
  // Own card: trust the logged-in premium flag. Read-only card: reflect the
  // viewed member's subscription status instead.
  const isActive = readOnly
    ? userSubscription?.status === SUBSCRIPTION_STATUS.ACTIVE
    : (user?.isPremium ?? false);

  return (
    <div className="bg-white rounded-2xl border border-[#E2E2E2] overflow-hidden">
      <div className="px-5 py-4 border-b border-coolgray-100 flex items-center gap-2">
        <CreditCard className="h-4 w-4 text-coolgray-400" />
        <h3 className="text-sm font-bold text-coolgray-700 uppercase tracking-wide">
          Subscription
        </h3>
      </div>

      {isActive ? (
        <div className="px-5 py-6 flex flex-col gap-2">
          <p className="text-sm font-semibold text-coolgray-700">
            {userSubscription?.planData?.name ?? "Active plan"}
          </p>
          {userSubscription?.currentPeriodEnd && (
            <p className="text-xs text-coolgray-400">
              Ends on{" "}
              {moment(userSubscription.currentPeriodEnd).format(
                "MMM D, YYYY, h:mm A",
              )}
            </p>
          )}
          {!readOnly && (
            <Link
              href="/my-account?current-section=subscription"
              className="mt-2 gap-0.5 inline-flex items-center text-xs text-blue-light hover:underline font-semibold no-underline"
            >
              Manage subscription <ArrowRight className="h-3.5 w-3.5" />
            </Link>
          )}
        </div>
      ) : (
        <div className="px-5 py-8 flex flex-col items-center text-center gap-3">
          <div className="h-12 w-12 rounded-full bg-coolgray-50 flex items-center justify-center">
            <CreditCard className="h-6 w-6 text-coolgray-300" />
          </div>
          <div>
            <p className="text-sm font-semibold text-coolgray-700">
              No active subscription
            </p>
            {!readOnly && (
              <p className="text-xs text-coolgray-400 mt-1">
                Upgrade to Pro to unlock all Q&amp;A answers and premium
                content.
              </p>
            )}
          </div>
          {!readOnly && (
            <Link
              href="/my-account?current-section=subscription"
              className="mt-1 px-5 py-2 rounded-xl bg-[#3b82f6] hover:bg-blue-light-hover text-white text-sm font-semibold transition-colors no-underline"
            >
              Explore Plans
            </Link>
          )}
        </div>
      )}
    </div>
  );
};

export default SubscriptionSummaryCard;