"use client";

import { Home, Building2, Zap } from "lucide-react";
import { Button } from "@/components/atoms/button";
import { CardBadge } from "@/features/services/components/base/CardBadge";
import { cn } from "@/shared/utils";

interface TierInfo {
  tier: "Silver" | "Gold" | "Platinum";
  planSku: string;
  monthlyPrice: number;
  description: string;
  features: string[];
  recommended?: boolean | undefined;
  pricingNote?: string | undefined;
}

interface InternetOfferingCardProps {
  offeringType: string;
  title: string;
  speedBadge: string;
  description: string;
  iconType: "home" | "apartment";
  startingPrice: number;
  setupFee: number;
  tiers: TierInfo[];
  isPremium?: boolean | undefined;
  ctaPath: string;
  // defaultExpanded is no longer used but kept for prop compatibility if needed upstream
  defaultExpanded?: boolean | undefined;
  disabled?: boolean | undefined;
  disabledReason?: string | undefined;
  previewMode?: boolean | undefined;
}

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 InternetOfferingCard({
  title,
  speedBadge,
  description,
  iconType,
  startingPrice,
  setupFee,
  tiers,
  isPremium = false,
  ctaPath,
  disabled = false,
  disabledReason,
  previewMode = false,
}: InternetOfferingCardProps) {
  const Icon = iconType === "home" ? Home : Building2;
  const resolveTierHref = (basePath: string, planSku: string): string => {
    const joiner = basePath.includes("?") ? "&" : "?";
    return `${basePath}${joiner}planSku=${encodeURIComponent(planSku)}`;
  };

  return (
    <div
      className={cn(
        "rounded-xl border bg-card shadow-[var(--cp-shadow-1)] overflow-hidden",
        isPremium ? "border-primary/30" : "border-border"
      )}
    >
      {/* Header - Always visible */}
      <div className="w-full p-4 flex items-start justify-between gap-3 text-left">
        <div className="flex items-start gap-3">
          <div
            className={cn(
              "flex h-10 w-10 items-center justify-center rounded-lg border flex-shrink-0",
              iconType === "home"
                ? "bg-info-soft/50 text-info border-info/20"
                : "bg-success-soft/50 text-success border-success/20"
            )}
          >
            <Icon className="h-5 w-5" />
          </div>

          <div className="space-y-1">
            <div className="flex flex-wrap items-center gap-2">
              <h3 className="text-base font-bold text-foreground">{title}</h3>
              <CardBadge text={speedBadge} variant={isPremium ? "new" : "default"} size="sm" />
              {isPremium && <span className="text-xs text-muted-foreground">(select areas)</span>}
            </div>
            <p className="text-sm text-muted-foreground">{description}</p>
            <div className="flex items-baseline gap-1 pt-0.5">
              <span className="text-xs text-muted-foreground">From</span>
              <span className="text-lg font-bold text-foreground">
                ¥{startingPrice.toLocaleString()}
              </span>
              <span className="text-sm text-muted-foreground">/mo</span>
              <span className="text-xs text-muted-foreground ml-1.5">
                + ¥{setupFee.toLocaleString()} setup
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Tiers - Always expanded */}
      <div className="border-t border-border px-4 py-4 bg-muted/10">
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
          {tiers.map(tier => (
            <div
              key={tier.tier}
              className={cn(
                "rounded-lg border p-3 transition-all flex flex-col",
                tierStyles[tier.tier].card,
                tier.recommended && "ring-1 ring-warning/30"
              )}
            >
              {/* Header */}
              <div className="flex items-center gap-2 mb-2">
                <span className={cn("font-semibold text-sm", tierStyles[tier.tier].accent)}>
                  {tier.tier}
                </span>
                {tier.recommended && (
                  <CardBadge text="Recommended" variant="recommended" size="xs" />
                )}
              </div>

              {/* Price */}
              {!previewMode && (
                <div className="mb-2">
                  <div className="flex items-baseline gap-0.5 flex-wrap">
                    <span className="text-xl font-bold text-foreground">
                      ¥{tier.monthlyPrice.toLocaleString()}
                    </span>
                    <span className="text-xs text-muted-foreground">/mo</span>
                    {tier.pricingNote && (
                      <span className="text-[10px] text-warning ml-1">{tier.pricingNote}</span>
                    )}
                  </div>
                </div>
              )}

              {/* Description */}
              <p className="text-xs text-muted-foreground mb-2">{tier.description}</p>

              {/* Features */}
              <ul className="space-y-1 flex-grow mb-3">
                {tier.features.slice(0, 3).map((feature, index) => (
                  <li key={index} className="flex items-start gap-1.5 text-xs">
                    <Zap className="h-3 w-3 text-success flex-shrink-0 mt-0.5" />
                    <span className="text-muted-foreground leading-relaxed">{feature}</span>
                  </li>
                ))}
              </ul>

              {/* Button */}
              {previewMode ? (
                <div className="mt-auto pt-2 border-t border-border/50">
                  <p className="text-[10px] text-muted-foreground text-center">
                    See pricing after verification
                  </p>
                </div>
              ) : disabled ? (
                <div className="mt-auto">
                  <Button variant="outline" size="sm" className="w-full" disabled>
                    Unavailable
                  </Button>
                  {disabledReason && (
                    <p className="text-[10px] text-muted-foreground text-center mt-1.5">
                      {disabledReason}
                    </p>
                  )}
                </div>
              ) : (
                <Button
                  as="a"
                  href={resolveTierHref(ctaPath, tier.planSku)}
                  variant={tier.recommended ? "default" : "outline"}
                  size="sm"
                  className="w-full mt-auto"
                >
                  Select
                </Button>
              )}
            </div>
          ))}
        </div>

        {/* Footer */}
        <p className="text-xs text-muted-foreground text-center mt-3 pt-3 border-t border-border/50">
          + ¥{setupFee.toLocaleString()} one-time installation (or 12/24-month installment)
        </p>
      </div>
    </div>
  );
}

export type { InternetOfferingCardProps, TierInfo };
