"use client";

import { ShieldCheck, Zap, CreditCard, Play, Globe, Package, ArrowLeft } from "lucide-react";
import { ServicesHero } from "@/features/services/components/base/ServicesHero";
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 } 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";

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",
  },
];

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;
}

function VpnLoadingSkeleton({ servicesBasePath }: { servicesBasePath: string }) {
  return (
    <div className="max-w-5xl mx-auto px-4 pb-16 pt-6">
      <ServicesBackLink href={servicesBasePath} label="Back to Services" />
      <div className="text-center mb-10 pt-6">
        <Skeleton className="h-8 w-72 mx-auto mb-3" />
        <Skeleton className="h-5 w-96 max-w-full mx-auto" />
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-5 max-w-3xl mx-auto">
        {Array.from({ length: 2 }).map((_, i) => (
          <div key={i} className="bg-card rounded-xl border border-border p-5">
            <div className="flex items-start gap-3 mb-4">
              <Skeleton className="h-10 w-10 rounded-lg" />
              <div className="flex-1">
                <Skeleton className="h-5 w-28 mb-1.5" />
                <Skeleton className="h-3.5 w-20" />
              </div>
            </div>
            <Skeleton className="h-7 w-32 mb-4" />
            <div className="space-y-2 mb-5">
              {Array.from({ length: 4 }).map((_, j) => (
                <Skeleton key={j} className="h-3.5 w-full" />
              ))}
            </div>
            <Skeleton className="h-9 w-full rounded-md" />
          </div>
        ))}
      </div>
    </div>
  );
}

function VpnPlansSection({
  plans,
  activationFees,
  servicesBasePath,
}: {
  plans: VpnCatalogProduct[];
  activationFees: VpnCatalogProduct[];
  servicesBasePath: string;
}) {
  if (plans.length === 0) {
    return (
      <div className="text-center py-10">
        <ShieldCheck className="h-10 w-10 text-muted-foreground mx-auto mb-3" />
        <h3 className="text-base font-medium text-foreground mb-1.5">No VPN Plans Available</h3>
        <p className="text-sm text-muted-foreground mb-5">
          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>
    );
  }

  return (
    <section
      id="plans"
      className="animate-in fade-in slide-in-from-bottom-8 duration-700"
      style={{ animationDelay: "500ms" }}
    >
      <div className="text-center mb-5">
        <p className="text-xs font-semibold text-primary uppercase tracking-wider mb-1.5">
          Choose Your Region
        </p>
        <h2 className="text-xl sm:text-2xl font-bold leading-tight tracking-tight text-foreground">
          Available Plans
        </h2>
        <p className="text-xs text-muted-foreground mt-1.5">Select one region per router rental</p>
      </div>

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

      {activationFees.length > 0 && (
        <AlertBanner variant="info" className="mt-5 max-w-3xl mx-auto" title="Activation Fee">
          A one-time activation fee of ¥3,000 applies per router rental. Tax (10%) not included.
        </AlertBanner>
      )}
    </section>
  );
}

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

  if (isLoading) {
    return <VpnLoadingSkeleton servicesBasePath={servicesBasePath} />;
  }

  if (error) {
    const errorMessage = error instanceof Error ? error.message : "An unexpected error occurred";
    return (
      <div className="max-w-5xl mx-auto px-4 pb-16 pt-6">
        <ServicesBackLink href={servicesBasePath} label="Back to Services" />
        <div className="rounded-xl bg-destructive/10 border border-destructive/20 p-8 text-center mt-6">
          <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" />

      <ServicesHero
        title="Stream Content from Abroad"
        description="Access US and UK streaming services using a pre-configured VPN router. No technical setup required."
        eyebrow={
          <span className="inline-flex items-center gap-1.5 rounded-full bg-violet-500/10 border border-violet-500/15 px-3 py-1 text-xs text-violet-600 dark:text-violet-400 font-medium">
            <ShieldCheck className="h-3.5 w-3.5" />
            VPN Router Service
          </span>
        }
      >
        {variant === "public" && (
          <div className="flex justify-center">
            <div className="bg-success-soft border border-success/20 rounded-lg px-3 py-2">
              <div className="flex items-center gap-1.5 justify-center">
                <Zap className="h-3.5 w-3.5 text-success flex-shrink-0" />
                <p className="text-xs 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>
        )}
      </ServicesHero>

      <ServiceHighlights features={VPN_FEATURES} />

      <VpnPlansSection
        plans={plans}
        activationFees={activationFees}
        servicesBasePath={servicesBasePath}
      />

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

      {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" });
            },
          }}
        />
      )}

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

      <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>

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

export default VpnPlansContent;
