/**
 * PublicEligibilityCheckView - Dedicated page for guest internet eligibility check
 *
 * Two clear paths:
 * 1. "Create Account & Submit" (primary) → OTP → Complete Account → Success
 * 2. "Just Submit Request" (secondary) → SF Account + Case → Success
 *
 * Uses EligibilityCheckFlow for the multi-step form logic.
 */

"use client";

import Link from "next/link";
import { CheckCircle, MapPin, Mail, Lock } from "lucide-react";
import { ServicesBackLink } from "@/features/services/components/base/ServicesBackLink";
import { useServicesBasePath } from "@/features/services/hooks/useServicesBasePath";
import { EligibilityCheckFlow } from "@/features/services/components/eligibility-check";
import { useEligibilityCheckStore } from "@/features/services/stores/eligibility-check.store";
import type { EligibilityCheckStep } from "@/features/services/stores/eligibility-check.store";

// Step metadata for header display
const stepMeta: Record<
  EligibilityCheckStep,
  { title: string; description: string; icon: "form" | "otp" | "account" | "success" }
> = {
  form: {
    title: "Check Availability",
    description: "Enter your details to check if internet service is available at your address.",
    icon: "form",
  },
  otp: {
    title: "Verify Email",
    description: "Enter the 6-digit verification code to continue.",
    icon: "otp",
  },
  "complete-account": {
    title: "Create Account",
    description: "Complete your account setup to check availability and order services.",
    icon: "account",
  },
  success: {
    title: "Request Submitted",
    description: "Your availability check request has been submitted.",
    icon: "success",
  },
};

function StepIcon({ icon }: { icon: "form" | "otp" | "account" | "success" }) {
  switch (icon) {
    case "form":
      return <MapPin className="h-7 w-7 text-primary" />;
    case "otp":
      return <Mail className="h-7 w-7 text-primary" />;
    case "account":
      return <Lock className="h-7 w-7 text-primary" />;
    case "success":
      return <CheckCircle className="h-7 w-7 text-success" />;
  }
}

export function PublicEligibilityCheckView() {
  const servicesBasePath = useServicesBasePath();
  const { step, hasAccount } = useEligibilityCheckStore();

  // Dynamic title for success step based on account status
  const currentMeta = stepMeta[step];
  const title =
    step === "success" ? (hasAccount ? "Account Created" : "Request Submitted") : currentMeta.title;
  const description =
    step === "success"
      ? hasAccount
        ? "Your account is ready and eligibility check is in progress."
        : "Your availability check request has been submitted."
      : currentMeta.description;

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

      {/* Header */}
      <div className="mt-8 mb-8 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">
            <StepIcon icon={currentMeta.icon} />
          </div>
        </div>
        <h1 className="text-2xl md:text-3xl font-bold text-foreground mb-2">{title}</h1>
        <p className="text-muted-foreground max-w-md mx-auto text-sm">{description}</p>
      </div>

      {/* Card with Flow */}
      <div className="bg-card border border-border rounded-2xl p-6 sm:p-8 shadow-[var(--cp-shadow-1)]">
        <EligibilityCheckFlow />
      </div>

      {/* Help text */}
      {step === "form" && (
        <p className="text-center text-xs text-muted-foreground mt-6">
          Already have an account?{" "}
          <Link href="/auth/login" className="text-primary hover:underline">
            Sign in
          </Link>{" "}
          to check availability faster.
        </p>
      )}
    </div>
  );
}

export default PublicEligibilityCheckView;
