"use client";

import Link from "next/link";
import { CalendarDaysIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
import { StatusIndicator, type StatusIndicatorStatus } from "@/components/atoms";
import { cn } from "@/shared/utils";
import { useFormatCurrency } from "@/shared/hooks";
import type { Subscription, SubscriptionStatus } from "@customer-portal/domain/subscriptions";
import { SUBSCRIPTION_STATUS } from "@customer-portal/domain/subscriptions";
import { getBillingCycleLabel } from "@/features/subscriptions/utils/status-presenters";

function mapSubscriptionStatus(status: SubscriptionStatus): StatusIndicatorStatus {
  switch (status) {
    case SUBSCRIPTION_STATUS.ACTIVE:
      return "active";
    case SUBSCRIPTION_STATUS.PENDING:
      return "pending";
    case SUBSCRIPTION_STATUS.SUSPENDED:
    case SUBSCRIPTION_STATUS.CANCELLED:
      return "warning";
    case SUBSCRIPTION_STATUS.TERMINATED:
      return "error";
    default:
      return "inactive";
  }
}

interface SubscriptionGridCardProps {
  subscription: Subscription;
  className?: string;
}

export function SubscriptionGridCard({ subscription, className }: SubscriptionGridCardProps) {
  const { formatCurrency } = useFormatCurrency();
  const statusIndicator = mapSubscriptionStatus(subscription.status);
  const cycleLabel = getBillingCycleLabel(subscription.cycle);
  const isInactive = (
    [
      SUBSCRIPTION_STATUS.COMPLETED,
      SUBSCRIPTION_STATUS.CANCELLED,
      SUBSCRIPTION_STATUS.TERMINATED,
    ] as string[]
  ).includes(subscription.status);

  return (
    <Link
      href={`/account/subscriptions/${subscription.serviceId}`}
      className={cn(
        "group flex flex-col p-4 rounded-xl bg-card border border-border",
        isInactive && "opacity-60",
        "transition-all duration-200",
        "hover:border-border hover:shadow-[var(--cp-shadow-2)] hover:-translate-y-0.5",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
        className
      )}
    >
      {/* Header: name + status */}
      <div className="flex items-start justify-between gap-2 mb-3">
        <div className="min-w-0 flex-1">
          <h3 className="text-sm font-semibold text-foreground truncate group-hover:text-primary transition-colors">
            {subscription.productName}
          </h3>
          <p className="text-xs text-muted-foreground mt-0.5 font-mono">
            #{subscription.serviceId}
          </p>
        </div>
        <StatusIndicator status={statusIndicator} label={subscription.status} size="sm" />
      </div>

      {/* Price */}
      <div className="mb-3">
        <span className="text-lg font-bold text-foreground tabular-nums font-heading">
          {formatCurrency(subscription.amount, subscription.currency)}
        </span>
        {cycleLabel && <span className="text-xs text-muted-foreground ml-1">/{cycleLabel}</span>}
      </div>

      {/* Footer: next due + action */}
      <div className="flex items-center justify-between mt-auto pt-3 border-t border-border/40">
        {subscription.nextDue && (
          <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
            <CalendarDaysIcon className="h-3.5 w-3.5" />
            <span>
              {new Date(subscription.nextDue).toLocaleDateString("en-US", {
                month: "short",
                day: "numeric",
              })}
            </span>
          </div>
        )}
        <span className="inline-flex items-center gap-1 text-xs font-medium text-primary opacity-0 group-hover:opacity-100 transition-opacity duration-200">
          Manage
          <ArrowRightIcon className="h-3 w-3 group-hover:translate-x-0.5 transition-transform" />
        </span>
      </div>
    </Link>
  );
}

export function SubscriptionGridCardSkeleton() {
  return (
    <div className="flex flex-col p-4 rounded-xl bg-card border border-border">
      <div className="flex items-start justify-between gap-2 mb-3">
        <div className="space-y-1.5 flex-1">
          <div className="h-4 cp-skeleton-shimmer rounded w-3/4" />
          <div className="h-3 cp-skeleton-shimmer rounded w-16" />
        </div>
        <div className="h-4 cp-skeleton-shimmer rounded-full w-14" />
      </div>
      <div className="h-6 cp-skeleton-shimmer rounded w-20 mb-3" />
      <div className="pt-3 border-t border-border/40">
        <div className="h-3 cp-skeleton-shimmer rounded w-24" />
      </div>
    </div>
  );
}
