"use client";

import { useState } from "react";
import { Wrench, Sparkles, Network, ChevronDown, ChevronUp, HelpCircle } from "lucide-react";
import { cn } from "@/shared/utils";

interface PlanGuideItemProps {
  tier: "Silver" | "Gold" | "Platinum";
  icon: React.ReactNode;
  title: string;
  idealFor: string;
  description: string;
  highlight?: boolean;
}

const tierColors = {
  Silver: {
    bg: "bg-muted/30",
    border: "border-muted-foreground/20",
    icon: "bg-muted text-muted-foreground border-muted-foreground/20",
    title: "text-muted-foreground",
  },
  Gold: {
    bg: "bg-warning-soft/30",
    border: "border-warning/30",
    icon: "bg-warning-soft text-warning border-warning/30",
    title: "text-warning",
  },
  Platinum: {
    bg: "bg-info-soft/30",
    border: "border-primary/30",
    icon: "bg-info-soft text-primary border-primary/30",
    title: "text-primary",
  },
};

function PlanGuideItem({
  tier,
  icon,
  title,
  idealFor,
  description,
  highlight,
}: PlanGuideItemProps) {
  const colors = tierColors[tier];

  return (
    <div
      className={cn(
        "rounded-xl border p-4 transition-all duration-200",
        colors.bg,
        colors.border,
        highlight && "ring-2 ring-warning/30"
      )}
    >
      <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",
            colors.icon
          )}
        >
          {icon}
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex flex-wrap items-center gap-2 mb-1">
            <h4 className={cn("font-bold", colors.title)}>{title}</h4>
            {highlight && (
              <span className="text-xs bg-success-bg text-success px-2 py-0.5 rounded-full border border-success-border">
                Most Popular
              </span>
            )}
          </div>
          <p className="text-sm font-medium text-foreground mb-1">{idealFor}</p>
          <p className="text-sm text-muted-foreground leading-relaxed">{description}</p>
        </div>
      </div>
    </div>
  );
}

export function PlanComparisonGuide() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <section className="bg-card rounded-xl border border-border shadow-[var(--cp-shadow-1)] overflow-hidden">
      {/* Collapsible header */}
      <button
        type="button"
        onClick={() => setIsExpanded(!isExpanded)}
        className="w-full px-4 py-3.5 flex items-center justify-between gap-3 text-left hover:bg-muted/30 transition-colors"
      >
        <div className="flex items-center gap-3">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-info-soft/50 text-info border border-info/20 flex-shrink-0">
            <HelpCircle className="h-4 w-4" />
          </div>
          <div>
            <h3 className="text-sm font-bold text-foreground">Which tier is right for you?</h3>
            <p className="text-xs text-muted-foreground">
              Same speeds across all tiers—difference is equipment & support
            </p>
          </div>
        </div>
        <div className="flex items-center gap-1.5 flex-shrink-0">
          <span className="text-xs text-muted-foreground hidden sm:inline">
            {isExpanded ? "Hide" : "Compare tiers"}
          </span>
          {isExpanded ? (
            <ChevronUp className="h-4 w-4 text-muted-foreground" />
          ) : (
            <ChevronDown className="h-4 w-4 text-muted-foreground" />
          )}
        </div>
      </button>

      {/* Expandable content */}
      {isExpanded && (
        <div className="px-4 pb-4 border-t border-border pt-4">
          <div className="space-y-3">
            <PlanGuideItem
              tier="Silver"
              icon={<Wrench className="h-5 w-5" />}
              title="Silver"
              idealFor="Tech-savvy users with their own router"
              description="You get the NTT modem and ISP connection. Bring your own WiFi router and configure the network yourself."
            />

            <PlanGuideItem
              tier="Gold"
              icon={<Sparkles className="h-5 w-5" />}
              title="Gold"
              idealFor="Most customers—hassle-free setup"
              description="We provide everything: NTT modem, WiFi router, and pre-configured ISP. Just plug in and connect. Optional range extender available."
              highlight
            />

            <PlanGuideItem
              tier="Platinum"
              icon={<Network className="h-5 w-5" />}
              title="Platinum"
              idealFor="Larger homes needing custom coverage"
              description="For residences where one router isn't enough. We design a custom mesh network with Netgear INSIGHT routers, cloud management, and professional setup."
            />
          </div>

          <div className="mt-4 p-3 bg-info-soft/30 border border-primary/20 rounded-lg">
            <p className="text-sm text-muted-foreground">
              <span className="font-semibold text-primary">About Platinum:</span> After verifying
              your address, we'll assess your space and create a tailored proposal. Final pricing
              depends on your specific setup requirements.
            </p>
          </div>
        </div>
      )}
    </section>
  );
}
