"use client";

import type { LucideIcon } from "lucide-react";
import {
  ChevronLeftIcon,
  Chrome,
  LayoutGrid,
  Leaf,
  Lock,
  Puzzle,
  Shield,
  Sparkles,
  Star,
  User,
  Workflow,
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useState } from "react";

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";

interface IconListItem {
  icon: LucideIcon;
  title: string;
}

interface StepDef {
  title: string;
  description: string | IconListItem[];
  className?: string;
  isBlocking?: boolean;
  component: React.ComponentType<StepComponentProps>;
  secondaryCta?: React.ComponentType;
  cta?: React.ComponentType<StepCtaProps>;
}

const Background = () => {
  return (
    <div className="flex h-[100dvh] w-full items-start">
      <div className="h-full w-64 shrink-0 border-r">
        <div className="flex h-14 w-full items-center border-b p-4">
          <img
            src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo-word.png"
            className="w-40 dark:invert"
            alt="logo"
          />
        </div>
        <ul className="space-y-2 p-4">
          {Array.from({ length: 5 }).map((_, index) => {
            return (
              <li
                key={`dummy-link-${index}`}
                className="block h-8 w-50 rounded-md bg-muted"
              />
            );
          })}
        </ul>
      </div>
      <div className="flex h-14 w-full items-center border-b p-4">
        <span className="block h-8 w-full max-w-50 rounded-md bg-muted" />
      </div>
    </div>
  );
};

interface StepIndicatorProps {
  totalSteps: number;
  currentStep: number;
}

const StepIndicator = ({ totalSteps, currentStep }: StepIndicatorProps) => {
  return (
    <div className="flex items-center justify-center gap-2">
      {Array.from({ length: totalSteps }).map((_, i) => {
        return (
          <span
            key={`step-indicator-${i}`}
            className={cn(
              "block size-2 rounded-full transition-colors",
              currentStep >= i ? "bg-primary" : "border bg-muted",
            )}
          />
        );
      })}
    </div>
  );
};

interface FadeContainerProps {
  children: React.ReactNode;
  condition: boolean;
  className?: string;
}

const FadeContainer = ({
  children,
  condition,
  className,
}: FadeContainerProps) => {
  const fadeVariants = {
    initial: {
      opacity: 0,
      filter: "blur(4px)",
    },
    animate: {
      opacity: 1,
      filter: "blur(0px)",
    },
    exit: {
      opacity: 0,
      filter: "blur(4px)",
    },
  };

  return (
    <AnimatePresence mode="popLayout">
      {condition && (
        <motion.div
          variants={fadeVariants}
          initial="initial"
          animate="animate"
          exit="exit"
          className={className}
        >
          {children}
        </motion.div>
      )}
    </AnimatePresence>
  );
};

interface StepDescriptionCardProps {
  title: string;
  description: string | IconListItem[];
}

const StepDescriptionCard = ({
  title,
  description,
}: StepDescriptionCardProps) => {
  return (
    <div className="space-y-2 md:space-y-4">
      <h3 className="text-xl font-semibold md:text-xl">{title}</h3>
      <div className="text-sm leading-tight text-muted-foreground md:text-base">
        {typeof description === "string" ? (
          <p>{description}</p>
        ) : (
          <ul className="space-y-4">
            {description?.map((item, i) => {
              return (
                <li key={`step-${i}`} className="flex items-center gap-2">
                  <item.icon className="size-4 shrink-0" />
                  <p>{item.title}</p>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </div>
  );
};

interface StepComponentProps {
  stepIndex: number;
  onValidationChange: (stepIndex: number, isValid: boolean) => void;
}

interface StepCtaProps {
  onClick: () => void;
  disabled?: boolean;
}

const StepOneComponent = () => {
  return (
    <form
      onSubmit={(e) => e.preventDefault()}
      className="grid grid-cols-2 gap-2 md:gap-4"
    >
      <div className="space-y-2">
        <Label>نام</Label>
        <Input type="text" placeholder="نام" className="bg-background" />
      </div>
      <div className="space-y-2">
        <Label>نام خانوادگی</Label>
        <Input type="text" placeholder="نام خانوادگی" className="bg-background" />
      </div>
      <div className="col-span-2 space-y-2">
        <Label>کجا کار میکنید؟</Label>
        <Input type="text" placeholder="رویش مارکت" className="bg-background" />
      </div>
      <div className="col-span-2 space-y-2">
        <Label>در چه حوزه ای فعالیت میکنید؟</Label>
        <Select>
          <SelectTrigger className="w-full bg-background">
            <SelectValue placeholder="حوزه را انتخاب کنید" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="technology">تکنولوژی</SelectItem>
            <SelectItem value="finance">مالی</SelectItem>
            <SelectItem value="healthcare">بهداشت و درمان</SelectItem>
            <SelectItem value="retail">خرده فروشی</SelectItem>
            <SelectItem value="other">سایر</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="col-span-2 space-y-2">
        <Label>چند نفر در تیم شما هستن؟</Label>
        <Select>
          <SelectTrigger className="w-full bg-background">
            <SelectValue placeholder="سایز تیم شما" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="solo">فقط خودم</SelectItem>
            <SelectItem value="small">2-10 نفر</SelectItem>
            <SelectItem value="medium">11-50 نفر</SelectItem>
            <SelectItem value="large">51-200 نفر</SelectItem>
            <SelectItem value="enterprise">200+ نفر</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="col-span-2 space-y-2">
        <Label>چه چیزی نقش شما رو به بهترین نحو توصیف میکند؟</Label>
        <Select>
          <SelectTrigger className="w-full bg-background">
            <SelectValue placeholder="نقش را انتخاب کنید" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="founder">موسس</SelectItem>
            <SelectItem value="sales">فروش</SelectItem>
            <SelectItem value="marketing">بازاریابی</SelectItem>
            <SelectItem value="operations">عملیات</SelectItem>
            <SelectItem value="other">سایر</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </form>
  );
};

const StepTwoComponent = () => {
  const goalOptions = [
    { value: "close-deals", label: "بستن معاملات بیشتر" },
    { value: "grow-network", label: "شبکه ام را رشد بده" },
    { value: "track-pipeline", label: "خط لوله من را دنبال کنید" },
    { value: "automate-outreach", label: "دسترسی خودکار" },
    { value: "team-collaboration", label: "همکاری با تیم" },
    { value: "find-prospects", label: "چشم انداز جدید پیدا کنید" },
    { value: "retain-customers", label: "حفظ مشتریان" },
    { value: "analyze-performance", label: "تجزیه و تحلیل عملکرد" },
    { value: "streamline-workflow", label: "گردش کار را ساده کنید" },
    { value: "other", label: "یک چیز دیگر" },
  ];

  const [selectedGoals, setSelectedGoals] = useState<string[]>([]);

  const toggleGoal = (goalValue: string, checked: boolean) => {
    setSelectedGoals((prev) =>
      checked
        ? [...prev, goalValue]
        : prev.filter((value) => value !== goalValue),
    );
  };

  return (
    <form
      onSubmit={(e) => e.preventDefault()}
      className="grid grid-cols-2 gap-6 pb-2 lg:gap-8"
    >
      {goalOptions.map((goal) => {
        const isSelected = selectedGoals.includes(goal.value);
        return (
          <Label htmlFor={goal.value} key={goal.value}>
            <div
              role="button"
              className={cn(
                "flex w-full cursor-pointer items-center gap-2 rounded-full md:px-6 md:py-4",
                selectedGoals.includes(goal.value)
                  ? "md:bg-muted"
                  : "md:bg-muted/50",
              )}
            >
              <Checkbox
                id={goal.value}
                checked={isSelected}
                onCheckedChange={(checked) =>
                  toggleGoal(goal.value, checked === true)
                }
                className="bg-background"
              />
              {goal.label}
            </div>
          </Label>
        );
      })}
    </form>
  );
};

const StepThreeComponent = ({
  stepIndex,
  onValidationChange,
}: StepComponentProps) => {
  const [isConnected, setIsConnected] = useState<string | boolean>(false);

  const handleConnectButtonClick = (provider: string) => {
    setIsConnected(provider);
    onValidationChange(stepIndex, true);
  };

  return (
    <div className="flex flex-col items-center justify-center gap-4 md:min-h-[40.5dvh]">
      <Button
        variant="outline"
        onClick={() => handleConnectButtonClick("gmail")}
        disabled={!!isConnected}
      >
        <img
          src="/block-media/shadcnblocks/block/logos/google-icon.svg"
          className="size-4"
          alt="Google"
        />
        {isConnected === "gmail" ? "Connected" : "ادامه با گوگل"}
      </Button>
      <Button
        variant="outline"
        onClick={() => handleConnectButtonClick("facebook")}
        disabled={!!isConnected}
      >
        <img
          src="/block-media/shadcnblocks/block/logos/facebook-icon.svg"
          className="size-4"
          alt="Facebook"
        />
        {isConnected === "facebook" ? "Connected" : "Continue with Facebook"}
      </Button>
      <Button
        variant="link"
        onClick={() => handleConnectButtonClick("manual")}
        disabled={!!isConnected}
      >
        {isConnected === "manual" ? "Skipped" : "فعلاً رد شوید"}
      </Button>
    </div>
  );
};

const StepFourComponent = () => {
  return (
    <div className="flex h-full flex-col items-center justify-between md:min-h-[40.5dvh]">
      <img
        src="/block-media/shadcnblocks/block/dashboard-placeholder.png"
        className="w-full"
        style={{
          maskImage: "linear-gradient(to bottom, black 0%, transparent 100%)",
        }}
        alt="Dashboard placeholder"
      />
      <div className="flex w-full items-center justify-between">
        <div className="flex items-center gap-2">
          <Leaf className="size-4 fill-primary stroke-green-200" />
          <p>50k+ active users</p>
        </div>
        <div className="flex items-center gap-2">
          <p>امتیاز ۴٫۹ از ۵</p>
          <div className="flex items-center gap-1">
            {Array.from({ length: 5 }).map((_, i) => {
              return <Star key={i} className="size-4 fill-primary" />;
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

const StepFourSecondaryCta = () => {
  return (
    <Button className="w-full" size="lg">
      Get the Extension
    </Button>
  );
};

const StepFourCta = ({ onClick, disabled }: StepCtaProps) => {
  return (
    <Button
      className="w-full"
      size="lg"
      variant="ghost"
      onClick={onClick}
      disabled={disabled}
    >
      شاید بعداً
    </Button>
  );
};

const StepFiveComponent = () => {
  const premiumFeatures = [
    {
      icon: LayoutGrid,
      title: "Custom Views",
      description: "Organize your data exactly how you want it",
    },
    {
      icon: Workflow,
      title: "Automation",
      description: "Set up triggers and actions to save time",
    },
    {
      icon: Chrome,
      title: "Web Clipper",
      description: "Save contacts from any website instantly",
    },
    {
      icon: Sparkles,
      title: "AI Insights",
      description: "Get smart suggestions and auto-complete data",
    },
    {
      icon: Puzzle,
      title: "App Connections",
      description: "Sync with 2000+ tools you already use",
    },
    {
      icon: Star,
      title: "پشتیبانی اولویت‌دار",
      description: "Dedicated help and راه‌اندازی اولیه assistance",
    },
  ];

  return (
    <ul className="space-y-4 md:space-y-6">
      {premiumFeatures.map((feature) => (
        <li key={feature.title} className="flex items-start gap-2">
          <feature.icon className="mt-0.5 size-5 shrink-0" />
          <div className="space-y-0.5">
            <p className="text-sm leading-tight font-medium md:text-base">
              {feature.title}
            </p>
            <p className="text-xs text-muted-foreground md:text-sm">
              {feature.description}
            </p>
          </div>
        </li>
      ))}
    </ul>
  );
};

const StepFiveCta = ({ onClick, disabled }: StepCtaProps) => {
  return (
    <Button className="w-full" size="lg" onClick={onClick} disabled={disabled}>
      Activate Trial
    </Button>
  );
};

interface Onboarding2Props {
  steps: StepDef[];
  className?: string;
}

const Onboarding2 = ({
  steps = [
    {
      title: " درمورد خودتون به ما بگویید",
      description: "چند سوال سریع در مورد تجربه ی شخصیتون",
      className: "bg-orange-200",
      component: StepOneComponent,
    },
    {
      title: "چی میخوای به دست بیاری؟",
      description:
        "انتخاب همه که اعمال می‌شوند. این به ما کمک می‌کند داشبورد و پیشنهادهای شما را متناسب‌ سازی کنیم",
      className: "bg-blue-200",
      component: StepTwoComponent,
    },
    {
      title: "لینک اکانت شما",
      description: [
        {
          icon: User,
          title:
            "مخاطبین و جلسات و گفتگوهای خود رو به‌ صورت خودکار همگام‌سازی کنید",
        },
        {
          icon: Shield,
          title: "دیتا شما ایمن و خصوصی میماند",
        },
        {
          icon: Lock,
          title: "رمزنگاری با استاندارد سازمانی",
        },
      ],
      className: "bg-pink-200",
      isBlocking: true,
      component: StepThreeComponent,
    },
    {
      title: "به وب‌گردی خود سرعت و قدرت ببخشید",
      description:
        "افزونه ما به شما این امکان را می‌دهد که با یک کلیک، از هر وب‌سایتی که هستید مخاطبین را ذخیره کنید و یادداشت بردارید",
      className: "bg-green-200",
      component: StepFourComponent,
      secondaryCta: StepFourSecondaryCta,
      cta: StepFourCta,
    },
    {
      title: "تجربه کامل رو باز کنید ( دسترسی به تمام امکانات )",
      description:
        "دوره آزمایشی ۱۴ روزه خود را آغاز کرده و تمامی ویژگی‌ها را تجربه کنید نیاز به کارت اعتباری نیست.",
      className: "bg-purple-200",
      component: StepFiveComponent,
      cta: StepFiveCta,
    },
  ],
  className,
}: Onboarding2Props) => {
  const [currentStep, setCurrentStep] = useState(0);
  const [stepValidation, setStepValidation] = useState<Record<number, boolean>>(
    {},
  );

  const handleStepValidChange = (stepIndex: number, isValid: boolean) => {
    setStepValidation((prev) => ({ ...prev, [stepIndex]: isValid }));
  };

  const canProceed = () => {
    const step = steps[currentStep];

    if (!step.component || !step.isBlocking) return true;

    return stepValidation[currentStep] === true;
  };

  const handleNext = () => {
    if (currentStep < steps.length - 1) {
      setCurrentStep(currentStep + 1);
    }
  };

  const handlePrevious = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1);
    }
  };

  const step = steps[currentStep];

  return (
    <section>
      <Background />

      <Dialog open={true}>
        <DialogContent
          showCloseButton={false}
          className={cn(
            "flex items-center justify-center overflow-hidden rounded-none p-0 md:max-w-3xl md:items-stretch lg:max-w-5xl",
            className,
          )}
        >
          <DialogHeader className="sr-only">
            <DialogTitle>راه‌اندازی اولیه</DialogTitle>
            <DialogDescription>راهنمای شروع کار</DialogDescription>
          </DialogHeader>

          <div className="flex min-h-[40dvh] w-full flex-col-reverse items-start tracking-tighter md:flex-row">
            <div className="flex h-full w-full flex-col justify-between gap-4 p-6 pb-6 md:flex-[45%] md:gap-6 lg:p-12">
              <div className="space-y-2">
                <FadeContainer condition={currentStep > 0}>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={handlePrevious}
                    disabled={currentStep === 0}
                  >
                    <ChevronLeftIcon />
                    بازگشت
                  </Button>
                </FadeContainer>
                <StepDescriptionCard
                  title={step.title}
                  description={step.description}
                />
              </div>

              <div className="space-y-4 md:space-y-6">
                <FadeContainer condition={canProceed()} className="space-y-2">
                  {step.cta ? (
                    <step.cta onClick={handleNext} disabled={!canProceed()} />
                  ) : (
                    <Button
                      size="lg"
                      className="w-full"
                      onClick={handleNext}
                      disabled={
                        currentStep === steps.length - 1 || !canProceed()
                      }
                    >
                      ادامه
                    </Button>
                  )}
                  {step.secondaryCta && <step.secondaryCta />}
                </FadeContainer>

                <StepIndicator
                  totalSteps={steps.length}
                  currentStep={currentStep}
                />
              </div>
            </div>

            <div
              className={cn(
                "flex h-full w-full flex-[55%] shrink-0 items-center justify-center p-6 transition-colors lg:p-12",
                step.className || "bg-foreground/30",
              )}
            >
              <step.component
                stepIndex={currentStep}
                onValidationChange={handleStepValidChange}
              />
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </section>
  );
};

export { Onboarding2 };