/**
 * Feature Upgrade Tab — Reusable "Upgrade to Pro" marketing tab
 *
 * Use this component inside any feature's settings page to give Free users
 * a single, brand-consistent place to learn what Pro unlocks for that feature.
 *
 * Usage:
 *   <FeatureUpgradeTab
 *     featureTitle="Currency Switcher"
 *     headline="Unlock the Full Power of Currency Switcher"
 *     description="Upgrade to Swift Commerce Pro and supercharge your multi-currency store."
 *     features={[
 *       { icon: Globe, title: "Geo-Location Detection", description: "..." },
 *     ]}
 *     checklist={["Unlimited currencies", "Auto exchange rates"]}
 *   />
 */

import { Card, CardContent } from "@/components/ui/card"
import { SettingsGrid } from "@/components/settings-layout"
import {
  Crown,
  Check,
  ExternalLink,
  type LucideIcon,
} from "lucide-react"
import { usePro } from "@/contexts/pro-context"

/** Brand color — single source of truth */
const BRAND = "#002269"

export interface ProFeatureItem {
  icon: LucideIcon
  title: string
  description: string
}

export interface FeatureUpgradeTabProps {
  /** Headline displayed below the Crown hero icon */
  headline: string
  /** Sub-headline paragraph */
  description: string
  /** Grid of highlighted Pro features with icons */
  features: ProFeatureItem[]
  /** "Everything in Free, plus:" checklist items */
  checklist: string[]
  /** Override the CTA button label (defaults to "Upgrade to Pro") */
  ctaLabel?: string
  /** Override the sub-CTA guarantee text */
  guaranteeText?: string
}

export function FeatureUpgradeTab({
  headline,
  description,
  features,
  checklist,
  ctaLabel = "Upgrade to Pro",
  guaranteeText = "30-day money-back guarantee · Cancel anytime",
}: FeatureUpgradeTabProps) {
  const { upgradeUrl } = usePro()

  return (
    <SettingsGrid>
      <Card className="border-0 shadow-none bg-[#002269]/[0.04] dark:bg-[#002269]/10">
        <CardContent className="pt-10 pb-10">
          <div className="max-w-2xl mx-auto space-y-8">
            {/* Hero Section */}
            <div className="text-center space-y-4">
              <div
                className="inline-flex items-center justify-center w-20 h-20 rounded-2xl shadow-lg"
                style={{ backgroundColor: BRAND }}
              >
                <Crown className="h-10 w-10 text-white" />
              </div>
              <div className="space-y-2">
                <h2 className="text-2xl font-bold tracking-tight">
                  {headline}
                </h2>
                <p className="text-muted-foreground text-base max-w-md mx-auto">
                  {description}
                </p>
              </div>
            </div>

            {/* Features Grid */}
            <div className="grid gap-4 sm:grid-cols-2">
              {features.map((feature) => (
                <div
                  key={feature.title}
                  className="flex items-start gap-3 rounded-xl bg-white/80 dark:bg-white/5 p-4 border border-black/5 dark:border-white/10"
                >
                  <div className="flex-shrink-0 mt-0.5">
                    <feature.icon className="h-5 w-5" style={{ color: BRAND }} />
                  </div>
                  <div>
                    <p className="font-medium text-sm">{feature.title}</p>
                    <p className="text-xs text-muted-foreground mt-0.5">
                      {feature.description}
                    </p>
                  </div>
                </div>
              ))}
            </div>

            {/* What's included */}
            <div className="rounded-xl bg-white/60 dark:bg-white/5 border border-black/5 dark:border-white/10 p-6">
              <h3 className="font-semibold text-sm mb-3">
                Everything in Free, plus:
              </h3>
              <div className="grid gap-2 sm:grid-cols-2">
                {checklist.map((item) => (
                  <div key={item} className="flex items-center gap-2">
                    <Check
                      className="h-4 w-4 flex-shrink-0"
                      style={{ color: BRAND }}
                    />
                    <span className="text-sm">{item}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* CTA */}
            <div className="text-center space-y-3">
              {upgradeUrl && (
                <a
                  href={upgradeUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 px-8 py-3 rounded-xl text-white font-medium transition-all shadow-lg hover:shadow-xl no-underline hover:opacity-90"
                  style={{ backgroundColor: BRAND, color: '#ffffff' }}
                >
                  <Crown className="h-4 w-4" />
                  {ctaLabel}
                  <ExternalLink className="h-3.5 w-3.5 ml-1 opacity-70" />
                </a>
              )}
              <p className="text-xs text-muted-foreground">
                {guaranteeText}
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </SettingsGrid>
  )
}