"use client";

import { ArrowLeftIcon } from "@heroicons/react/24/outline";
import { Button } from "@/components/atoms/button";
import { CardBadge } from "@/features/services/components/base/CardBadge";
import type { BadgeVariant } from "@/features/services/components/base/CardBadge";
import { parsePlanName } from "@/features/services/components/internet/utils/planName";
import type { InternetPlanCatalogItem } from "@customer-portal/domain/services";

interface PlanHeaderProps {
  plan: InternetPlanCatalogItem;
  backHref?: string;
  backLabel?: string;
  title?: string;
  className?: string;
}

export function PlanHeader({
  plan,
  backHref,
  backLabel = "Back to Internet Plans",
  title = "Configure your plan",
  className = "",
}: PlanHeaderProps) {
  const { baseName: planBaseName, detail: planDetail } = parsePlanName(plan);

  return (
    <div className={`text-center mb-8 animate-in fade-in duration-300 ${className}`}>
      {backHref && (
        <Button
          as="a"
          href={backHref}
          variant="ghost"
          size="sm"
          leftIcon={<ArrowLeftIcon className="w-4 h-4" />}
          className="mb-6 text-muted-foreground hover:text-foreground"
        >
          {backLabel}
        </Button>
      )}

      <h1 className="text-2xl md:text-3xl font-bold text-foreground mb-5">{title}</h1>
      <span className="sr-only">
        {planBaseName}
        {planDetail ? ` (${planDetail})` : ""}
      </span>

      <div className="inline-flex flex-wrap items-center justify-center gap-3 bg-card px-6 py-3 rounded-full border border-border shadow-sm text-sm">
        {plan.internetPlanTier ? (
          <CardBadge
            text={plan.internetPlanTier}
            variant={getTierBadgeVariant(plan.internetPlanTier)}
            size="sm"
          />
        ) : null}
        {planDetail ? <CardBadge text={planDetail} variant="family" size="sm" /> : null}
        {plan.monthlyPrice && plan.monthlyPrice > 0 ? (
          <span className="inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-sm font-semibold text-primary">
            ¥{plan.monthlyPrice.toLocaleString()}/month
          </span>
        ) : null}
      </div>
    </div>
  );
}

function getTierBadgeVariant(tier?: string | null): BadgeVariant {
  switch (tier) {
    case "Gold":
      return "gold";
    case "Platinum":
      return "platinum";
    case "Silver":
      return "silver";
    case "Recommended":
      return "recommended";
    default:
      return "default";
  }
}
