"use client";

import { ShieldCheck, Zap, CreditCard, Play, Globe, Package, ArrowLeft } from "lucide-react";
import { Skeleton } from "@/components/atoms/loading-skeleton";
import { Button } from "@/components/atoms/button";
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
import type { VpnCatalogProduct } from "@customer-portal/domain/services";
import { ServicesBackLink } from "@/features/services/components/base/ServicesBackLink";
import { useServicesBasePath } from "@/features/services/hooks/useServicesBasePath";
import {
  ServiceHighlights,
  type HighlightFeature,
} from "@/features/services/components/base/ServiceHighlights";
import { HowItWorks, type HowItWorksStep } from "@/features/services/components/base/HowItWorks";
import { ServiceCTA } from "@/features/services/components/base/ServiceCTA";
import { ServiceFAQ, type FAQItem } from "@/features/services/components/base/ServiceFAQ";
import { VpnPlanCard } from "./VpnPlanCard";
import { VPN_FEATURES } from "@/features/services/utils";

// Steps for HowItWorks
const vpnSteps: HowItWorksStep[] = [
  {
    icon: <CreditCard className="h-6 w-6" />,
    title: "Sign Up",
    description: "Create your account to get started",
  },
  {
    icon: <Globe className="h-6 w-6" />,
    title: "Choose Region",
    description: "Select US (San Francisco) or UK (London)",
  },
  {
    icon: <Package className="h-6 w-6" />,
    title: "Place Order",
    description: "Complete checkout and receive router",
  },
  {
    icon: <Play className="h-6 w-6" />,
    title: "Connect & Stream",
    description: "Plug in, connect devices, enjoy",
  },
];

// FAQ items for VPN
const vpnFaqItems: FAQItem[] = [
  {
    question: "Which streaming services can I access?",
    answer:
      "Our VPN establishes a network connection that virtually locates you in the designated server location (US or UK). This can help access region-specific content on services like Netflix, Hulu, BBC iPlayer, and others. However, not all services can be unblocked, and we cannot guarantee access to any specific streaming platform.",
  },
  {
    question: "How fast is the VPN connection?",
    answer:
      "The VPN connection speed depends on your existing internet connection. For HD streaming, we recommend at least 10Mbps download speed. The VPN router is optimized for streaming and should provide smooth playback for most content.",
  },
  {
    question: "Can I use multiple devices at once?",
    answer:
      "Yes! Any device connected to the VPN router's WiFi network will be routed through the VPN. This includes smart TVs, streaming boxes, gaming consoles, and more. Your regular internet devices can stay on your normal WiFi.",
  },
  {
    question: "What happens if I need help with setup?",
    answer:
      "We provide full English support for setup and troubleshooting. The router comes pre-configured, so most users just need to plug it in. If you encounter any issues, our support team can assist via email or phone.",
  },
  {
    question: "Is there a contract or commitment period?",
    answer:
      "The VPN service is a monthly rental with no long-term contract required. You can cancel at any time. The one-time activation fee covers initial setup and router preparation.",
  },
];

interface VpnPlansContentProps {
  variant: "public" | "account";
  plans: VpnCatalogProduct[];
  activationFees: VpnCatalogProduct[];
  isLoading: boolean;
  error: unknown;
}

export function VpnPlansContent({
  variant,
  plans,
  activationFees,
  isLoading,
  error,
}: VpnPlansContentProps) {
  const servicesBasePath = useServicesBasePath();

  // Convert VPN_FEATURES to the HighlightFeature type expected by ServiceHighlights
  const vpnFeatures: HighlightFeature[] = VPN_FEATURES;

  if (isLoading) {
    return (
      <div className="max-w-6xl mx-auto px-4 pb-16 pt-8">
        <ServicesBackLink href={servicesBasePath} label="Back to Services" />
        <div className="text-center mb-12 pt-8">
          <Skeleton className="h-10 w-80 mx-auto mb-4" />
          <Skeleton className="h-6 w-96 max-w-full mx-auto" />
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
          {Array.from({ length: 2 }).map((_, i) => (
            <div key={i} className="bg-card rounded-2xl border border-border p-6">
              <div className="flex items-start gap-4 mb-5">
                <Skeleton className="h-14 w-14 rounded-xl" />
                <div className="flex-1">
                  <Skeleton className="h-6 w-32 mb-2" />
                  <Skeleton className="h-4 w-24" />
                </div>
              </div>
              <div className="mb-5 space-y-2">
                <Skeleton className="h-8 w-36" />
                <Skeleton className="h-4 w-28" />
              </div>
              <div className="space-y-2 mb-6">
                {Array.from({ length: 4 }).map((_, j) => (
                  <Skeleton key={j} className="h-4 w-full" />
                ))}
              </div>
              <Skeleton className="h-10 w-full rounded-md" />
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (error) {
    const errorMessage = error instanceof Error ? error.message : "An unexpected error occurred";
    return (
      <div className="max-w-6xl mx-auto px-4 pb-16 pt-8">
        <ServicesBackLink href={servicesBasePath} label="Back to Services" />
        <div className="rounded-xl bg-destructive/10 border border-destructive/20 p-8 text-center mt-8">
          <div className="text-destructive font-medium text-lg mb-2">Failed to load VPN plans</div>
          <div className="text-destructive/80 text-sm mb-6">{errorMessage}</div>
          <Button as="a" href={servicesBasePath} leftIcon={<ArrowLeft className="w-4 h-4" />}>
            Back to Services
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-8 pb-16">
      <ServicesBackLink href={servicesBasePath} label="Back to Services" />

      {/* Hero Section */}
      <div className="text-center py-6">
        <div
          className="animate-in fade-in slide-in-from-bottom-4 duration-500"
          style={{ animationDelay: "0ms" }}
        >
          <span className="inline-flex items-center gap-2 rounded-full bg-purple-500/10 border border-purple-500/20 px-4 py-1.5 text-sm text-purple-600 dark:text-purple-400 font-medium mb-4">
            <ShieldCheck className="h-4 w-4" />
            VPN Router Service
          </span>
        </div>
        <h1
          className="text-display-md md:text-display-lg font-display text-foreground tracking-tight animate-in fade-in slide-in-from-bottom-6 duration-700"
          style={{ animationDelay: "100ms" }}
        >
          Stream Content from Abroad
        </h1>
        <p
          className="text-lg text-muted-foreground mt-3 max-w-xl mx-auto leading-relaxed animate-in fade-in slide-in-from-bottom-8 duration-700"
          style={{ animationDelay: "200ms" }}
        >
          Access US and UK streaming services using a pre-configured VPN router. No technical setup
          required.
        </p>

        {/* Order info banner - public variant only */}
        {variant === "public" && (
          <div
            className="inline-flex mt-6 animate-in fade-in slide-in-from-bottom-8 duration-700"
            style={{ animationDelay: "300ms" }}
          >
            <div className="bg-success-soft border border-success/25 rounded-xl px-4 py-3">
              <div className="flex items-center gap-2 justify-center">
                <Zap className="h-4 w-4 text-success flex-shrink-0" />
                <p className="text-sm text-foreground">
                  <span className="font-medium">Order today</span>
                  <span className="text-muted-foreground">
                    {" "}
                    — create account, add payment, and your router ships upon confirmation.
                  </span>
                </p>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Service Highlights */}
      <section>
        <ServiceHighlights features={vpnFeatures} />
      </section>

      {/* Plans Section */}
      {plans.length > 0 ? (
        <section
          id="plans"
          className="animate-in fade-in slide-in-from-bottom-8 duration-700"
          style={{ animationDelay: "500ms" }}
        >
          <div className="text-center mb-6">
            <p className="text-sm font-semibold text-primary uppercase tracking-wider mb-2">
              Choose Your Region
            </p>
            <h2 className="text-display-sm font-display text-foreground">Available Plans</h2>
            <p className="text-sm text-muted-foreground mt-2">
              Select one region per router rental
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
            {plans.map(plan => (
              <VpnPlanCard key={plan.id} plan={plan} />
            ))}
          </div>

          {activationFees.length > 0 && (
            <AlertBanner variant="info" className="mt-6 max-w-4xl mx-auto" title="Activation Fee">
              A one-time activation fee of ¥3,000 applies per router rental. Tax (10%) not included.
            </AlertBanner>
          )}
        </section>
      ) : (
        <div className="text-center py-12">
          <ShieldCheck className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
          <h3 className="text-lg font-medium text-foreground mb-2">No VPN Plans Available</h3>
          <p className="text-muted-foreground mb-6">
            We couldn&apos;t find any VPN plans available at this time.
          </p>
          <ServicesBackLink
            href={servicesBasePath}
            label="Back to Services"
            align="center"
            className="mt-4 mb-0"
          />
        </div>
      )}

      {/* How It Works */}
      <HowItWorks steps={vpnSteps} eyebrow="Simple Setup" title="How It Works" />

      {/* CTA Section - public variant only */}
      {variant === "public" && (
        <ServiceCTA
          eyebrow="Get started today"
          headline="Ready to unlock your content?"
          description="Choose your region and get your pre-configured router shipped to you"
          primaryAction={{
            label: "View Plans",
            href: "#plans",
            onClick: e => {
              e.preventDefault();
              document.getElementById("plans")?.scrollIntoView({ behavior: "smooth" });
            },
          }}
        />
      )}

      {/* FAQ Section */}
      <ServiceFAQ
        items={vpnFaqItems}
        eyebrow="Common Questions"
        title="Frequently Asked Questions"
      />

      {/* Disclaimer */}
      <AlertBanner variant="warning" title="Important Disclaimer">
        <p className="text-sm">
          Content subscriptions are NOT included in the VPN package. Our VPN service establishes a
          network connection that virtually locates you in the designated server location. Not all
          services can be unblocked. We do not guarantee access to any specific website or streaming
          service quality.
        </p>
      </AlertBanner>

      {/* Footer Note */}
      <div className="text-center text-sm text-muted-foreground">
        <p>All prices exclude 10% consumption tax.</p>
      </div>
    </div>
  );
}

export default VpnPlansContent;
