"use client";

import { useSearchParams } from "next/navigation";
import { ShieldCheck, CheckIcon, BoltIcon } from "lucide-react";
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
import { ServicesBackLink } from "@/features/services/components/base/ServicesBackLink";
import { useServicesBasePath } from "@/features/services/hooks/useServicesBasePath";
import { usePublicVpnPlan } from "@/features/services/hooks";
import { InlineGetStartedSection } from "@/features/get-started";
import { CardPricing } from "@/features/services/components/base/CardPricing";
import { Skeleton } from "@/components/atoms/loading-skeleton";
import { getVpnRegionConfig } from "@/features/services/utils";
import { cn } from "@/shared/utils/cn";

/**
 * Public VPN Configure View
 *
 * Shows selected VPN plan information and prompts for authentication.
 * Simplified design focused on quick signup-to-order flow.
 */
export function PublicVpnConfigureView() {
  const servicesBasePath = useServicesBasePath();
  const searchParams = useSearchParams();
  const planSku = searchParams?.get("planSku");
  const { plan, isLoading } = usePublicVpnPlan(planSku || undefined);

  const redirectTarget = planSku
    ? `/account/services/vpn/configure?planSku=${encodeURIComponent(planSku)}`
    : "/account/services/vpn";

  if (isLoading) {
    return (
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
        <ServicesBackLink href={`${servicesBasePath}/vpn`} label="Back to VPN plans" />
        <div className="mt-8 space-y-6">
          <Skeleton className="h-10 w-96 mx-auto" />
          <Skeleton className="h-32 w-full" />
        </div>
      </div>
    );
  }

  if (!plan) {
    return (
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
        <ServicesBackLink href={`${servicesBasePath}/vpn`} label="Back to VPN plans" />
        <AlertBanner variant="error" title="Plan not found">
          The selected plan could not be found. Please go back and select a plan.
        </AlertBanner>
      </div>
    );
  }

  const region = getVpnRegionConfig(plan.name);
  const isUS = region.accent === "blue";
  const isUK = region.accent === "red";

  return (
    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
      <ServicesBackLink href={`${servicesBasePath}/vpn`} label="Back to VPN plans" />

      {/* Header */}
      <div className="mt-6 mb-8 text-center">
        <div className="flex justify-center mb-4">
          <div
            className={cn(
              "flex h-16 w-16 items-center justify-center rounded-2xl border shadow-lg",
              isUS &&
                "bg-gradient-to-br from-blue-500/20 to-blue-500/5 border-blue-500/20 shadow-blue-500/10",
              isUK &&
                "bg-gradient-to-br from-red-500/20 to-red-500/5 border-red-500/20 shadow-red-500/10",
              !isUS &&
                !isUK &&
                "bg-gradient-to-br from-purple-500/20 to-purple-500/5 border-purple-500/20 shadow-purple-500/10"
            )}
          >
            <ShieldCheck
              className={cn(
                "h-8 w-8",
                isUS && "text-blue-500",
                isUK && "text-red-500",
                !isUS && !isUK && "text-purple-500"
              )}
            />
          </div>
        </div>
        <h1 className="text-2xl md:text-3xl font-bold text-foreground mb-3">
          Order Your VPN Router
        </h1>
        <p className="text-muted-foreground max-w-lg mx-auto">
          Create an account to complete your order. Your pre-configured router ships upon
          confirmation.
        </p>
      </div>

      {/* Plan Summary Card */}
      <div className="mb-8 bg-card border border-border rounded-2xl p-6 shadow-[var(--cp-shadow-1)]">
        <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">
          Selected Plan
        </div>
        <div className="flex items-start gap-4">
          <div className="flex-shrink-0">
            <div
              className={cn(
                "flex h-12 w-12 items-center justify-center rounded-xl text-2xl",
                isUS && "bg-blue-500/10 border border-blue-500/20",
                isUK && "bg-red-500/10 border border-red-500/20",
                !isUS && !isUK && "bg-primary/10 border border-primary/20"
              )}
              role="img"
              aria-label={region.flagAlt}
            >
              {region.flag}
            </div>
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-start justify-between gap-4 flex-wrap">
              <div>
                <h3 className="text-lg font-semibold text-foreground">{plan.name}</h3>
                <p className="text-sm text-muted-foreground mt-1">{region.location}</p>
                <div className="flex flex-wrap gap-2 mt-3">
                  <span
                    className={cn(
                      "inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium border",
                      isUS && "bg-blue-500/10 text-blue-600 border-blue-500/20",
                      isUK && "bg-red-500/10 text-red-600 border-red-500/20",
                      !isUS && !isUK && "bg-purple-500/10 text-purple-600 border-purple-500/20"
                    )}
                  >
                    VPN Router
                  </span>
                  <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-info/10 text-info border border-info/20">
                    {region.region}
                  </span>
                </div>
              </div>
              <div className="text-right">
                <CardPricing
                  monthlyPrice={plan.monthlyPrice}
                  oneTimePrice={plan.oneTimePrice}
                  size="md"
                  alignment="right"
                />
              </div>
            </div>
          </div>
        </div>

        {/* Plan Details */}
        <div className="border-t border-border pt-4 mt-4">
          <ul className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {region.features.map((feature, index) => (
              <li key={index} className="flex items-center gap-2">
                <CheckIcon
                  className={cn(
                    "h-4 w-4 flex-shrink-0",
                    isUS && "text-blue-500",
                    isUK && "text-red-500",
                    !isUS && !isUK && "text-success"
                  )}
                />
                <span className="text-sm text-muted-foreground">{feature}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* Order process info */}
      <div className="mb-8 bg-info/10 border border-info/25 rounded-xl p-4">
        <div className="flex items-start gap-3">
          <BoltIcon className="h-5 w-5 text-info mt-0.5 flex-shrink-0" />
          <div>
            <p className="text-sm font-medium text-foreground">How ordering works</p>
            <p className="text-sm text-muted-foreground mt-1">
              After signup, add a payment method and confirm your order. Your pre-configured router
              will be shipped and ready to use — just plug it in and connect your devices.
            </p>
          </div>
        </div>
      </div>

      {/* Auth Section */}
      <InlineGetStartedSection
        title="Create your account to order"
        description="Verify your email to get started with your VPN order."
        serviceContext={{ type: "vpn", planSku: planSku || undefined }}
        redirectTo={redirectTarget}
      />
    </div>
  );
}

export default PublicVpnConfigureView;
