"use client";

import { BoltIcon } from "@heroicons/react/24/outline";
import { Button } from "@/components/atoms/button";
import { CardBadge } from "@/features/services/components/base/CardBadge";
import { cn } from "@/shared/utils";
import type { TierInfo } from "@/features/services/components/internet/InternetOfferingCard";
import { InternetModalShell } from "@/features/services/components/internet/InternetModalShell";

interface InternetTierPricingModalProps {
  isOpen: boolean;
  onClose: () => void;
  offeringTitle: string;
  offeringSubtitle?: string;
  tiers: TierInfo[];
  setupFee: number;
  ctaHref: string;
}

const tierStyles = {
  Silver: {
    card: "border-muted-foreground/20 bg-card",
    accent: "text-muted-foreground",
  },
  Gold: {
    card: "border-warning/30 bg-warning-soft/20",
    accent: "text-warning",
  },
  Platinum: {
    card: "border-primary/30 bg-info-soft/20",
    accent: "text-primary",
  },
} as const;

export function InternetTierPricingModal({
  isOpen,
  onClose,
  offeringTitle,
  offeringSubtitle,
  tiers,
  setupFee,
  ctaHref,
}: InternetTierPricingModalProps) {
  return (
    <InternetModalShell
      isOpen={isOpen}
      onClose={onClose}
      title={`Tier pricing — ${offeringTitle}`}
      description="Pricing shown is for reference. Your actual options will be confirmed after address verification."
      size="lg"
    >
      <div className="space-y-5">
        {offeringSubtitle ? (
          <div className="rounded-xl border border-border bg-muted/20 p-4">
            <div className="text-sm text-foreground font-medium">{offeringTitle}</div>
            <div className="text-xs text-muted-foreground mt-1">{offeringSubtitle}</div>
          </div>
        ) : null}

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {tiers.map(tier => (
            <div
              key={tier.tier}
              className={cn(
                "rounded-xl border p-4 flex flex-col shadow-[var(--cp-shadow-1)]",
                tierStyles[tier.tier].card,
                tier.recommended && "ring-2 ring-warning/30"
              )}
            >
              <div className="flex items-center gap-2 mb-3">
                <span className={cn("font-bold", tierStyles[tier.tier].accent)}>{tier.tier}</span>
                {tier.recommended ? (
                  <CardBadge text="Recommended" variant="recommended" size="xs" />
                ) : null}
              </div>

              <div className="mb-2">
                <div className="flex items-baseline gap-1">
                  <span className="text-2xl font-bold text-foreground">
                    ¥{tier.monthlyPrice.toLocaleString()}
                  </span>
                  <span className="text-sm text-muted-foreground">/mo</span>
                </div>
                {tier.pricingNote ? (
                  <p className="text-xs text-warning mt-1">{tier.pricingNote}</p>
                ) : null}
              </div>

              <p className="text-sm text-muted-foreground mb-3">{tier.description}</p>

              <ul className="space-y-1.5 flex-grow">
                {tier.features.map((feature, index) => (
                  <li key={index} className="flex items-start gap-2 text-sm">
                    <BoltIcon className="h-3.5 w-3.5 text-success flex-shrink-0 mt-0.5" />
                    <span className="text-muted-foreground text-xs leading-relaxed">{feature}</span>
                  </li>
                ))}
              </ul>

              <div className="mt-4 pt-3 border-t border-border/50">
                <p className="text-[11px] text-muted-foreground text-center">
                  + ¥{setupFee.toLocaleString()} setup
                </p>
              </div>
            </div>
          ))}
        </div>

        <div className="flex flex-col sm:flex-row gap-3 sm:justify-end">
          <Button type="button" variant="outline" onClick={onClose}>
            Close
          </Button>
          <Button as="a" href={ctaHref}>
            Check availability
          </Button>
        </div>
      </div>
    </InternetModalShell>
  );
}
