"use client"

import * as React from "react"
import { motion } from "framer-motion"
import { staggerContainer } from "@/lib/motion"
import { Button } from "@/components/ui/button"
import { Check, Minus } from "lucide-react"

interface FeatureItem {
  text: string
  included: boolean
}

interface TierItem {
  name: string
  desc?: string
  description?: string
  priceMonthly?: string
  priceAnnual?: string
  price?: string
  billingNote: string
  ctaText?: string
  buttonText?: string
  isPopular?: boolean
  features: FeatureItem[]
}

interface PlansData {
  badge: string
  title: string
  billingToggle: {
    monthly: string
    annual: string
    discount: string
  }
  tiers: TierItem[]
}

export function DataOnePlans({ data }: { data: PlansData }) {
  const [isAnnual, setIsAnnual] = React.useState(false)

  if (!data) return null

  return (
    <section id="plans" className="bg-[#F7F6F3] py-18 pb-20 border-b border-hairline scroll-mt-[70px]">
      <div className="max-w-[1240px] mx-auto px-7">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={staggerContainer}
          className="space-y-8"
        >
          {/* Header */}
          <div className="text-center max-w-[620px] mx-auto space-y-3">
            <div className="text-[11px] font-bold tracking-wider uppercase text-gold">
              {data.badge}
            </div>
            <h2 className="font-display text-[34px] md:text-[36px] leading-[1.12] tracking-[-0.3px] text-ink m-0">
              {data.title}
            </h2>
          </div>

          {/* Billing Toggle */}
          <div className="flex items-center justify-center gap-3 select-none">
            <span 
              onClick={() => setIsAnnual(false)}
              className={`text-[13.5px] font-semibold cursor-pointer transition-colors ${
                !isAnnual ? "text-[#0A0D14]" : "text-[#9A968E]"
              }`}
            >
              {data.billingToggle.monthly}
            </span>
            <div 
              onClick={() => setIsAnnual(!isAnnual)}
              className="w-11.5 h-6.5 rounded-full bg-navy relative cursor-pointer flex items-center transition-all duration-200"
            >
              <div 
                className="w-5 h-5 rounded-full bg-white absolute transition-all duration-200 shadow-sm"
                style={{ left: isAnnual ? "21px" : "3px" }}
              />
            </div>
            <span 
              onClick={() => setIsAnnual(true)}
              className={`text-[13.5px] font-semibold cursor-pointer transition-colors ${
                isAnnual ? "text-[#0A0D14]" : "text-[#9A968E]"
              }`}
            >
              {data.billingToggle.annual}{" "}
              <span className="text-[11.5px] text-[#1A7340] font-bold">
                &middot; {data.billingToggle.discount}
              </span>
            </span>
          </div>

          {/* Pricing Grid */}
          <div className="grid md:grid-cols-3 gap-[18px] items-start pt-2">
            {data.tiers.map((tier, idx) => {
              const isPopular = !!tier.isPopular
              
              const renderPrice = () => {
                if (tier.price === "Custom") {
                  return (
                    <div className="font-display text-[38px] text-ink leading-none">
                      {tier.price}
                    </div>
                  )
                }
                const activePrice = isAnnual ? tier.priceAnnual : tier.priceMonthly
                return (
                  <div className="flex items-baseline gap-1.5 leading-none">
                    <span className={`font-display text-[38px] ${isPopular ? 'text-white' : 'text-ink'}`}>
                      ${activePrice}
                    </span>
                    <span className={`text-[13px] ${isPopular ? 'text-white/50' : 'text-[#9A968E]'}`}>
                      / mo
                    </span>
                  </div>
                )
              }

              const renderBillingNote = () => {
                if (tier.price === "Custom") {
                  return (
                    <div className={`text-[11.5px] ${isPopular ? 'text-white/45' : 'text-[#9A968E]'}`}>
                      {tier.billingNote}
                    </div>
                  )
                }
                const note = tier.billingNote.includes("seats")
                  ? (isAnnual ? "billed annually &middot; 5 seats included" : "billed monthly &middot; 5 seats included")
                  : (isAnnual ? "billed annually" : "billed monthly")
                return (
                  <div 
                    className={`text-[11.5px] ${isPopular ? 'text-white/45' : 'text-[#9A968E]'}`}
                    dangerouslySetInnerHTML={{ __html: note }}
                  />
                )
              }

              return (
                <div
                  key={idx}
                  className={`border border-[#E2DDD6] rounded-[8px] p-[30px_28px] relative ${
                    isPopular
                      ? "bg-navy border-navy text-white shadow-[0_18px_44px_rgba(13,43,85,0.22)] md:-translate-y-1.5"
                      : "bg-white"
                  }`}
                >
                  {isPopular && (
                    <span className="absolute top-[-12.5px] left-7 bg-gold text-ink text-[10.5px] font-bold tracking-[0.06em] uppercase px-3 py-1.2 rounded-[3px]">
                      Most popular
                    </span>
                  )}

                  <div className={`text-[13px] font-bold tracking-[0.04em] uppercase mb-2 ${
                    isPopular ? "text-gold" : "text-navy"
                  }`}>
                    {tier.name}
                  </div>

                  <p className={`text-[13px] leading-[1.6] font-light mb-5 min-h-[54px] ${
                    isPopular ? "text-white/60" : "text-[#6B6760]"
                  }`}>
                    {tier.desc || tier.description}
                  </p>

                  <div className="mb-1">
                    {renderPrice()}
                  </div>

                  <div className="mb-5">
                    {renderBillingNote()}
                  </div>

                  <Button
                    variant={isPopular ? 'default' : 'outline'}
                    className={`w-full py-[11px] rounded-[3px] text-sm font-semibold mb-5.5 ${
                      isPopular
                        ? "bg-gold hover:bg-gold/90 text-ink border-none"
                        : "bg-transparent text-navy border-1.5 border-navy hover:bg-navy/5"
                    }`}
                  >
                    {tier.ctaText || tier.buttonText}
                  </Button>

                  <div className="flex flex-col gap-3">
                    {tier.features.map((feat, fIdx) => (
                      <div 
                        key={fIdx} 
                        className={`flex gap-2.5 items-start text-[13px] leading-normal ${
                          !feat.included && !isPopular
                            ? "text-[#9A968E]"
                            : (isPopular ? "text-white/85" : "text-[#46433E]")
                        }`}
                      >
                        {feat.included ? (
                          <Check className={`size-4 shrink-0 mt-0.5 ${
                            isPopular ? "text-gold" : "text-[#1A7340]"
                          }`} />
                        ) : (
                          <Minus className={`size-4 shrink-0 mt-0.5 ${
                            isPopular ? "text-white/40" : "text-[#C8C3BA]"
                          }`} />
                        )}
                        <span>{feat.text}</span>
                      </div>
                    ))}
                  </div>

                </div>
              )
            })}
          </div>

        </motion.div>
      </div>
    </section>
  )
}