"use client";

import { useSearchParams } from "next/navigation";
import { CheckCircle, Clock } from "lucide-react";
import { Button } from "@/components/atoms/button";
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";
import { ServicesBackLink } from "@/features/services/components/base/ServicesBackLink";
import { useServicesBasePath } from "@/features/services/hooks/useServicesBasePath";
import { useInternetEligibility } from "@/features/services/hooks";

export function InternetEligibilityRequestSubmittedView() {
  const servicesBasePath = useServicesBasePath();
  const searchParams = useSearchParams();
  const requestIdFromQuery = searchParams?.get("requestId")?.trim() || null;

  const eligibilityQuery = useInternetEligibility();

  const requestId = requestIdFromQuery ?? eligibilityQuery.data?.requestId ?? null;
  const status = eligibilityQuery.data?.status;

  const isPending = status === "pending";
  const isEligible = status === "eligible";
  const isIneligible = status === "ineligible";

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

      <div className="mt-8 bg-card border border-border rounded-2xl p-8 shadow-[var(--cp-shadow-1)]">
        <div className="flex items-start gap-4">
          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-success/10 border border-success/20 flex-shrink-0">
            <CheckCircle className="h-6 w-6 text-success" />
          </div>
          <div className="flex-1 min-w-0">
            <h1 className="text-2xl font-bold text-foreground">Availability request submitted</h1>
            <p className="text-sm text-muted-foreground mt-2">
              We&apos;ll verify NTT service availability for your address. This typically takes 1-2
              business days.
            </p>

            {requestId && (
              <div className="mt-4">
                <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
                  Request ID
                </div>
                <div className="text-sm text-foreground mt-1 font-mono">{requestId}</div>
              </div>
            )}

            <div className="mt-6">
              <Button as="a" href={`${servicesBasePath}/internet`} variant="default">
                View Internet status
              </Button>
            </div>
          </div>
        </div>

        {(isPending || isEligible || isIneligible) && (
          <div className="mt-6">
            {isPending && (
              <AlertBanner variant="info" title="Review in progress" elevated>
                <div className="flex items-center gap-2">
                  <Clock className="h-4 w-4 text-info" />
                  <span>
                    We&apos;ll email you once our team completes the manual serviceability check.
                  </span>
                </div>
              </AlertBanner>
            )}
            {isEligible && (
              <AlertBanner variant="success" title="You're eligible" elevated>
                Your address is eligible. You can now choose a plan and complete your order.
              </AlertBanner>
            )}
            {isIneligible && (
              <AlertBanner variant="warning" title="Service not available" elevated>
                It looks like service isn&apos;t available at your address. Please contact support
                if you think this is incorrect.
              </AlertBanner>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

export default InternetEligibilityRequestSubmittedView;
