"use client";

import { useSearchParams } from "next/navigation";
import { DevicePhoneMobileIcon, CheckIcon, BoltIcon } from "@heroicons/react/24/outline";
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
import { ServicesBackLink } from "@/features/services/components/base/ServicesBackLink";
import { useServicesBasePath } from "@/features/services/hooks/useServicesBasePath";
import { usePublicSimPlan } 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";

interface SimPlan {
  name: string;
  description?: string | undefined;
  simPlanType?: string | undefined;
  simDataSize?: string | undefined;
  simHasFamilyDiscount?: boolean | undefined;
  billingCycle?: string | undefined;
  monthlyPrice?: number | undefined;
  oneTimePrice?: number | undefined;
}

function SimPlanSummaryCard({ plan }: { plan: SimPlan }) {
  return (
    <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="flex h-12 w-12 items-center justify-center rounded-xl bg-green-500/10 border border-green-500/20">
            <DevicePhoneMobileIcon className="h-6 w-6 text-green-500" />
          </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>
              {plan.description && (
                <p className="text-sm text-muted-foreground mt-1">{plan.description}</p>
              )}
              <div className="flex flex-wrap gap-2 mt-3">
                {plan.simPlanType && (
                  <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-600 border border-green-500/20">
                    {plan.simPlanType}
                  </span>
                )}
                {plan.simDataSize && (
                  <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">
                    {plan.simDataSize}
                  </span>
                )}
              </div>
            </div>
            <div className="text-right">
              <CardPricing
                monthlyPrice={plan.monthlyPrice}
                oneTimePrice={plan.oneTimePrice}
                size="md"
                alignment="right"
              />
            </div>
          </div>
        </div>
      </div>

      {(plan.simDataSize || plan.simHasFamilyDiscount || plan.billingCycle) && (
        <div className="border-t border-border pt-4 mt-4">
          <ul className="grid grid-cols-2 md:grid-cols-4 gap-3">
            {plan.simDataSize && (
              <li className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-success flex-shrink-0" />
                <span className="text-sm text-muted-foreground">
                  <span className="text-foreground font-medium">{plan.simDataSize}</span> data
                </span>
              </li>
            )}
            {plan.simPlanType && (
              <li className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-success flex-shrink-0" />
                <span className="text-sm text-muted-foreground">{plan.simPlanType}</span>
              </li>
            )}
            {plan.simHasFamilyDiscount && (
              <li className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-success flex-shrink-0" />
                <span className="text-sm text-muted-foreground">Family discount</span>
              </li>
            )}
            {plan.billingCycle && (
              <li className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-success flex-shrink-0" />
                <span className="text-sm text-muted-foreground">{plan.billingCycle} billing</span>
              </li>
            )}
          </ul>
        </div>
      )}
    </div>
  );
}

function OrderProcessInfo() {
  return (
    <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 upload your residence card for verification.
            We'll review your application within 1-2 business days and notify you once approved.
          </p>
        </div>
      </div>
    </div>
  );
}

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

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

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

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

      <div className="mt-6 mb-8 text-center">
        <div className="flex justify-center mb-4">
          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-green-500/20 to-green-500/5 border border-green-500/20 shadow-lg shadow-green-500/10">
            <DevicePhoneMobileIcon className="h-8 w-8 text-green-500" />
          </div>
        </div>
        <h1 className="text-2xl md:text-3xl font-bold text-foreground mb-3">Order Your SIM</h1>
        <p className="text-muted-foreground max-w-lg mx-auto">
          Create an account to complete your order. Physical SIMs ship next business day.
        </p>
      </div>

      <SimPlanSummaryCard plan={plan} />
      <OrderProcessInfo />

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

export default PublicSimConfigureView;
