"use client";

import { useSearchParams } from "next/navigation";
import { WifiIcon, ClockIcon, EnvelopeIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
import { ServicesBackLink } from "@/features/services/components/base/ServicesBackLink";
import { InlineAuthSection } from "@/features/auth/components/InlineAuthSection/InlineAuthSection";
import { useServicesBasePath } from "@/features/services/hooks/useServicesBasePath";
import { usePublicInternetPlan } from "@/features/services/hooks";
import { CardPricing } from "@/features/services/components/base/CardPricing";
import { Skeleton } from "@/components/atoms/loading-skeleton";

/**
 * Public Internet Configure View
 *
 * Clean signup flow - auth form is the focus, "what happens next" is secondary info.
 */
export function PublicInternetConfigureView() {
  const servicesBasePath = useServicesBasePath();
  const searchParams = useSearchParams();
  const planSku = searchParams?.get("planSku");
  const { plan, isLoading } = usePublicInternetPlan(planSku || undefined);

  const redirectTo = planSku
    ? `/account/services/internet?autoEligibilityRequest=1&planSku=${encodeURIComponent(planSku)}`
    : "/account/services/internet?autoEligibilityRequest=1";

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

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

      {/* Header */}
      <div className="mt-6 mb-6 text-center">
        <div className="flex justify-center mb-4">
          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 border border-primary/20">
            <WifiIcon className="h-7 w-7 text-primary" />
          </div>
        </div>
        <h1 className="text-2xl md:text-3xl font-bold text-foreground mb-2">
          Check Internet Service Availability
        </h1>
        <p className="text-muted-foreground max-w-md mx-auto text-sm">
          Create an account to see what&apos;s available at your address
        </p>
      </div>

      {/* Plan Summary Card - only if plan is selected */}
      {plan && (
        <div className="mb-6 bg-card border border-border rounded-xl p-4 shadow-[var(--cp-shadow-1)]">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 border border-primary/20 flex-shrink-0">
              <WifiIcon className="h-5 w-5 text-primary" />
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-center justify-between gap-3 flex-wrap">
                <div>
                  <p className="text-xs text-muted-foreground">Selected plan</p>
                  <h3 className="text-sm font-semibold text-foreground">{plan.name}</h3>
                </div>
                <CardPricing monthlyPrice={plan.monthlyPrice} size="sm" alignment="right" />
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Auth Section - Primary focus */}
      <InlineAuthSection
        title="Create your account"
        description="Enter your details including service address to get started."
        redirectTo={redirectTo}
      />

      {/* What happens next - Below auth, secondary info */}
      <div className="mt-8 border-t border-border pt-6">
        <h3 className="text-sm font-semibold text-foreground mb-4">What happens next</h3>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
          <div className="flex items-start gap-3">
            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-bold flex-shrink-0">
              1
            </div>
            <div>
              <p className="text-xs font-medium text-foreground">We verify your address</p>
              <p className="text-xs text-muted-foreground flex items-center gap-1 mt-0.5">
                <ClockIcon className="h-3 w-3" />
                1-2 business days
              </p>
            </div>
          </div>
          <div className="flex items-start gap-3">
            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-muted text-muted-foreground text-xs font-bold flex-shrink-0">
              2
            </div>
            <div>
              <p className="text-xs font-medium text-foreground">You get notified</p>
              <p className="text-xs text-muted-foreground flex items-center gap-1 mt-0.5">
                <EnvelopeIcon className="h-3 w-3" />
                Email when ready
              </p>
            </div>
          </div>
          <div className="flex items-start gap-3">
            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-muted text-muted-foreground text-xs font-bold flex-shrink-0">
              3
            </div>
            <div>
              <p className="text-xs font-medium text-foreground">Complete your order</p>
              <p className="text-xs text-muted-foreground flex items-center gap-1 mt-0.5">
                <CheckCircleIcon className="h-3 w-3" />
                Choose plan & schedule
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default PublicInternetConfigureView;
