// Start of Selection
"use client";
import { Logo } from "@/components/logo";
import { Section } from "@/components/section";
import SWA from "@/components/transitions/wrapper";
import { motion } from "@/lib/motion";
import { cn, Easings } from "@/lib/utils";
import { animate, LayoutGroup, stagger } from "framer-motion";
import Link from "next/link";
import { useEffect, useState } from "react";
import styles from "@/components/main-navigation/main-navigation.module.css";

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { TooltipArrow, TooltipPortal } from "@radix-ui/react-tooltip";
import React from "react";
import { Separator } from "@/components/ui/separator";
import PortfolioDialog from "@/components/PortfolioDialog";
import ArcCarousel from "./demo";
import { Button } from "@/components/ui/button";
import {
  ArrowBigRight,
  ArrowBigRightDash,
  ArrowRight,
  ArrowUpRight,
  Play,
} from "lucide-react";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogDescription,
  DialogHeader,
} from "@/components/ui/dialog";
import { usePathname } from "next/navigation";

const AUTHOR_NAME = "Kunal Phalak";

function CentralLinkedinFilledOffStroke2Radius3(
  props: JSX.IntrinsicElements["svg"],
) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M19.65 3H4.35C3.99196 3 3.64858 3.14223 3.39541 3.39541C3.14223 3.64858 3 3.99196 3 4.35V19.65C3 20.008 3.14223 20.3514 3.39541 20.6046C3.64858 20.8578 3.99196 21 4.35 21H19.65C20.008 21 20.3514 20.8578 20.6046 20.6046C20.8578 20.3514 21 20.008 21 19.65V4.35C21 3.99196 20.8578 3.64858 20.6046 3.39541C20.3514 3.14223 20.008 3 19.65 3ZM8.4 18.3H5.7V10.2H8.4V18.3ZM7.05 8.625C6.74056 8.61616 6.4406 8.51632 6.18758 8.33797C5.93456 8.15962 5.7397 7.91066 5.62737 7.6222C5.51503 7.33374 5.49019 7.01857 5.55595 6.71607C5.6217 6.41358 5.77515 6.13716 5.9971 5.92138C6.21906 5.70559 6.49968 5.55999 6.80391 5.50278C7.10814 5.44556 7.42248 5.47927 7.70766 5.59969C7.99284 5.7201 8.23622 5.92189 8.40737 6.17983C8.57853 6.43778 8.66987 6.74044 8.67 7.05C8.66289 7.47331 8.4885 7.8766 8.18495 8.17173C7.88139 8.46685 7.47335 8.62982 7.05 8.625ZM18.3 18.3H15.6V14.034C15.6 12.756 15.06 12.297 14.358 12.297C14.1522 12.3107 13.9511 12.3649 13.7663 12.4566C13.5815 12.5482 13.4166 12.6755 13.2811 12.831C13.1457 12.9866 13.0422 13.1674 12.9768 13.363C12.9114 13.5586 12.8853 13.7652 12.9 13.971C12.8955 14.0129 12.8955 14.0551 12.9 14.097V18.3H10.2V10.2H12.81V11.37C13.0733 10.9695 13.435 10.6433 13.8605 10.4227C14.286 10.2021 14.761 10.0944 15.24 10.11C16.635 10.11 18.264 10.884 18.264 13.404L18.3 18.3Z"
        fill="currentColor"
      />
    </svg>
  );
}

function CentralGithubFilledOffStroke2Radius3(
  props: JSX.IntrinsicElements["svg"],
) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M12 1.95068C17.525 1.95068 22 6.42568 22 11.9507C21.9995 14.0459 21.3419 16.0883 20.1198 17.7902C18.8977 19.4922 17.1727 20.768 15.1875 21.4382C14.6875 21.5382 14.5 21.2257 14.5 20.9632C14.5 20.6257 14.5125 19.5507 14.5125 18.2132C14.5125 17.2757 14.2 16.6757 13.8375 16.3632C16.0625 16.1132 18.4 15.2632 18.4 11.4257C18.4 10.3257 18.0125 9.43818 17.375 8.73818C17.475 8.48818 17.825 7.46318 17.275 6.08818C17.275 6.08818 16.4375 5.81318 14.525 7.11318C13.725 6.88818 12.875 6.77568 12.025 6.77568C11.175 6.77568 10.325 6.88818 9.525 7.11318C7.6125 5.82568 6.775 6.08818 6.775 6.08818C6.225 7.46318 6.575 8.48818 6.675 8.73818C6.0375 9.43818 5.65 10.3382 5.65 11.4257C5.65 15.2507 7.975 16.1132 10.2 16.3632C9.9125 16.6132 9.65 17.0507 9.5625 17.7007C8.9875 17.9632 7.55 18.3882 6.65 16.8757C6.4625 16.5757 5.9 15.8382 5.1125 15.8507C4.275 15.8632 4.775 16.3257 5.125 16.5132C5.55 16.7507 6.0375 17.6382 6.15 17.9257C6.35 18.4882 7 19.5632 9.5125 19.1007C9.5125 19.9382 9.525 20.7257 9.525 20.9632C9.525 21.2257 9.3375 21.5257 8.8375 21.4382C6.8458 20.7752 5.11342 19.502 3.88611 17.799C2.65881 16.096 1.9989 14.0498 2 11.9507C2 6.42568 6.475 1.95068 12 1.95068Z"
        fill="currentColor"
      />
    </svg>
  );
}

function CentralEmail2FilledOnStroke2Radius3(
  props: JSX.IntrinsicElements["svg"],
) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M2.13886 6.95139C2.59957 5.25088 4.15371 4 6 4H18C19.8463 4 21.4004 5.25088 21.8611 6.95139L12.8944 11.4348C12.3314 11.7163 11.6686 11.7163 11.1056 11.4348L2.13886 6.95139Z"
        fill="currentColor"
      />
      <path
        d="M2 9.11804V16C2 18.2091 3.79086 20 6 20H18C20.2091 20 22 18.2091 22 16V9.11803L13.7888 13.2236C12.6627 13.7867 11.3372 13.7867 10.2111 13.2236L2 9.11804Z"
        fill="currentColor"
      />
    </svg>
  );
}

function CentralXFilledOnStroke2Radius3(props: JSX.IntrinsicElements["svg"]) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M17.4033 3.5H20.2852L13.989 10.701L21.396 20.5H15.5964L11.054 14.557L5.85637 20.5H2.97269L9.70709 12.7977L2.60156 3.5H8.54839L12.6544 8.93215L17.4033 3.5ZM16.3918 18.7738H17.9887L7.68067 5.13549H5.96702L16.3918 18.7738Z"
        fill="currentColor"
      />
    </svg>
  );
}

interface NavigationLink {
  name: string;
  href: string;
  icon?: React.ReactNode;
  targetBlank?: boolean;
  triggerDialog?: boolean;
  customDialog?: React.ReactNode; // New prop for custom dialog component
}

interface NavigationLinksProps {
  links: NavigationLink[];
  showName?: boolean; // Default: true
  showTooltip?: boolean; // Default: true
  layoutGroupId: string; // Default: "main-navigation-link"
}

const NavigationLinks: React.FC<NavigationLinksProps> = ({
  links,
  showName = true,
  showTooltip = true,
  layoutGroupId = "main-navigation-link",
}) => {
  const [activeIndex, setActiveIndex] = useState<number | undefined>(undefined);
  const pathname = usePathname();

  return (
    <LayoutGroup id={layoutGroupId}>
      <motion.nav
        layout
        layoutRoot
        className={cn(
          "relative flex h-11 items-center justify-center rounded-2xl border bg-background p-[0.1875rem] shadow-sm",
        )}
      >
        <TooltipProvider>
          {links.map((link, index) =>
            showTooltip ? (
              <NavigationLinkComponent
                key={index}
                link={link}
                index={index}
                totalLinks={links.length}
                activeIndex={activeIndex}
                setActiveIndex={setActiveIndex}
                showName={showName}
                showTooltip={showTooltip}
                active={pathname === link.href}
              />
            ) : (
              <NavigationLinkComponent
                key={index}
                link={link}
                index={index}
                totalLinks={links.length}
                activeIndex={activeIndex}
                setActiveIndex={setActiveIndex}
                showName={showName}
                showTooltip={showTooltip}
                active={pathname === link.href}
              />
            ),
          )}
        </TooltipProvider>
      </motion.nav>
    </LayoutGroup>
  );
};

interface NavigationLinkProps {
  link: NavigationLink;
  index: number;
  totalLinks: number;
  activeIndex: number | undefined;
  setActiveIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
  showName: boolean;
  showTooltip: boolean;
  active: boolean;
}

const NavigationLinkComponent: React.FC<NavigationLinkProps> = ({
  link,
  index,
  totalLinks,
  activeIndex,
  setActiveIndex,
  showName,
  showTooltip,
  active,
}) => {
  const [dialogOpen, setDialogOpen] = useState(false);

  const handleDialogOpenChange = (open: boolean) => {
    setDialogOpen(open);
  };

  const LinkContent = (
    <Link
      href={link.href}
      target={link.targetBlank ? "_blank" : undefined}
      className={cn(
        styles.link,
        "link relative flex h-full items-center justify-center px-2 text-muted-foreground/60 no-underline transition-all",
        index === 0
          ? "rounded-l-lg rounded-r-xs"
          : index === totalLinks - 1
            ? "rounded-l-xs rounded-r-lg"
            : "rounded-sm",
        active || activeIndex === index
          ? "text-foreground opacity-100 before:opacity-0 hover:text-foreground [&.link+.link]:before:opacity-0"
          : "hover:text-foreground/60",
      )}
      onMouseEnter={() => setActiveIndex(index)}
      onMouseLeave={() => setActiveIndex(undefined)}
      onClick={(e) => {
        if (link.triggerDialog) {
          e.preventDefault();
          setDialogOpen(true);
        }
      }}
    >
      <span className="link-name z-10 flex items-center gap-2">
        {link.icon && link.icon}
        {showName && <span>{link.name}</span>}
      </span>
      {(active || activeIndex === index) && (
        <motion.span
          layoutId="main-navigation-link"
          layout
          initial={false}
          animate={{
            borderTopRightRadius: index === totalLinks - 1 ? "12px" : "6px",
            borderBottomRightRadius: index === totalLinks - 1 ? "12px" : "6px",
            borderTopLeftRadius: index === 0 ? "12px" : "6px",
            borderBottomLeftRadius: index === 0 ? "12px" : "6px",
          }}
          transition={{
            type: "spring",
            bounce: 0.26,
            duration: 0.4,
          }}
          className={cn(
            "absolute inset-0 z-[1] bg-accent transition-colors",
            index === 0
              ? "rounded-l-lg rounded-r-xs"
              : index === totalLinks - 1
                ? "rounded-l-xs rounded-r-lg"
                : "rounded-sm",
          )}
        ></motion.span>
      )}
    </Link>
  );

  return (
    <>
      <Tooltip>
        <TooltipTrigger asChild>{LinkContent}</TooltipTrigger>
        {showTooltip && !showName && (
          <TooltipContent>
            <span className="link-name z-10 flex items-center gap-2">
              {link.name}
            </span>
            <TooltipArrow asChild>
              <Arrow className="-translate-y-0.5" />
            </TooltipArrow>
          </TooltipContent>
        )}
      </Tooltip>
      {link.triggerDialog && (
        <>
          {link.customDialog ? (
            React.cloneElement(link.customDialog as React.ReactElement, {
              open: dialogOpen,
              onOpenChange: handleDialogOpenChange,
            })
          ) : (
            <Dialog open={dialogOpen} onOpenChange={handleDialogOpenChange}>
              <DialogContent>
                <>
                  <DialogHeader>
                    <DialogTitle>{link.name}</DialogTitle>
                    <DialogDescription>
                      This is a custom dialog for {link.name}
                    </DialogDescription>
                  </DialogHeader>
                  {/* Add your default dialog content here */}
                </>
              </DialogContent>
            </Dialog>
          )}
        </>
      )}
    </>
  );
};

const Arrow = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
  (props, ref) => (
    <svg
      width="24"
      height="12"
      viewBox="0 0 24 12"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
      ref={ref}
    >
      <rect width="24" height="2" fill="white" />
      <path d="M0 0L24 0" strokeWidth="0" strokeLinejoin="round" />
    </svg>
  ),
);

export default function MaintenancePage() {
  const [iframeLoaded, setIframeLoaded] = useState(false);
  const [dialogOpen, setDialogOpen] = useState(false);

  useEffect(() => {
    animate([
      [
        ".author-name-char",
        {
          opacity: 0,
          filter: "blur(2px)",
          transform: "rotateX(90deg) scale(0.98)",
        },
        {
          type: "tween",
          duration: 0.14,
          delay: stagger(0.034),
        },
      ],
      [
        ".author-name-char",
        {
          opacity: [0, 0.5, 1],
          filter: ["blur(4px)", "blur(0px)"],
          transform: ["rotateX(90deg) scale(0.98)", "rotateX(0deg) scale(1)"],
        },
        {
          type: "tween",
          duration: 0.24,
          delay: stagger(0.024),
        },
      ],
      [".author-name-char", {}],
      [".author-name-char", { opacity: 1 }, { delay: 1 }],
      [
        ".author-name-char",
        {
          opacity: [null, 0.45, 1],
        },
        {
          type: "tween",
          duration: 0.24,
          delay: stagger(0.024),
        },
      ],
    ]);
  }, []);

  const footerLinks: NavigationLink[] = [
    {
      name: "GitHub",
      href: "https://github.com/kunal-phalak",
      icon: <CentralGithubFilledOffStroke2Radius3 width={16} height={16} />,
      targetBlank: true,
    },
    {
      name: "LinkedIn",
      href: <PRESIDIO_ANONYMIZED_URL>,
      icon: <CentralLinkedinFilledOffStroke2Radius3 width={16} height={16} />,
      targetBlank: true,
    },
    {
      name: "X",
      href: "https://x.com/kunalphalak_",
      icon: <CentralXFilledOnStroke2Radius3 width={16} height={16} />,
      targetBlank: true,
    },
    {
      name: "Email Me",
      href: "mailto:<PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>",
      icon: <CentralEmail2FilledOnStroke2Radius3 width={16} height={16} />,
      targetBlank: true,
    },
  ];

  const pageLinks: NavigationLink[] = [
    {
      name: "Recent Project",
      href: "/maintenance",
      targetBlank: false,
    },
    {
      name: "Experiments",
      href: "/maintenance/experiments",
      targetBlank: false,
      // triggerDialog: true,
      // customDialog: (
      //   <Dialog>
      //     <DialogContent className="m-4 flex h-[calc(100vh-2rem)] w-[calc(100vw-2rem)] max-w-none flex-col items-center justify-center rounded-lg p-0">
      //       <DialogHeader className="absolute left-0 right-0 top-0 rounded-t-lg bg-background/80 p-4 text-center backdrop-blur-sm">
      //         <DialogTitle>Experiments</DialogTitle>
      //         <DialogDescription>
      //           This is a custom dialog for Experiments
      //         </DialogDescription>
      //       </DialogHeader>
      //       <div className="flex h-full w-full items-center justify-center overflow-auto pt-16">
      //         {/* Centered content goes here */}
      //       </div>
      //     </DialogContent>
      //   </Dialog>
      // ),
    },
  ];

  const handleDialogOpenChange = (open: boolean) => {
    setDialogOpen(open);
    if (open) {
      setIframeLoaded(false);
    }
  };

  return (
    <LayoutGroup>
      <Section
        as="section"
        className="flex h-dvh flex-col items-center justify-between overflow-x-clip"
      >
        <Section
          as="section"
          className="prose prose-sm flex flex-col items-center justify-between gap-8 py-8"
        >
          <div className="flex flex-row items-center gap-2">
            <SWA
              className="flex flex-row items-center gap-2 text-center"
              startDelay={0.4}
            >
              <Link
                href={"/"}
                className="flex size-full flex-row items-center justify-center gap-2"
              >
                <nav className="not-prose group/inner flex aspect-square size-11 items-center justify-between rounded-2xl border bg-card p-[0.1875rem] shadow-sm transition-all duration-300 ease-out-cubic hover:p-0 active:p-[0.1875rem] active:duration-75 active:ease-in">
                  <Logo className="rounded-lg transition-all group-hover/inner:rounded-[15px] group-active/inner:rounded-lg" />
                </nav>
                <Separator
                  orientation="vertical"
                  className={cn("h-[18px] transition-opacity")}
                />

                <motion.h3
                  className="prose m-0 font-medium text-muted-foreground transition-colors group-hover/outer:text-foreground"
                  style={{
                    perspective: "800px",
                  }}
                >
                  {AUTHOR_NAME.split("").map((char, index) => (
                    <motion.span
                      key={index}
                      className="author-name-char inline-block leading-none opacity-0"
                      style={{
                        transformStyle: "preserve-3d",
                        originY: "top",
                      }}
                    >
                      {char === " " ? <>&nbsp;</> : char}
                    </motion.span>
                  ))}
                </motion.h3>
              </Link>
            </SWA>
          </div>
          <div className="flex w-full flex-col items-center justify-between">
            <SWA startDelay={0.6} className="w-full">
              <Separator className="bg-transparent bg-gradient-to-r from-transparent via-muted-foreground/20 to-transparent" />
            </SWA>
            <Section
              as="section"
              className="prose prose-sm flex flex-col items-center justify-between py-0"
            >
              <div className="relative">
                <motion.h1
                  className="absolute inset-0 my-8 font-serif font-light italic text-neutral-500/80 blur"
                  initial={{
                    opacity: 0,
                    filter: "blur(0px) saturate(180%)",
                    scale: 0.9,
                  }}
                  animate={{
                    opacity: [0, 0, 0.9, 1, 0.8, 0.7, 0, 0],
                    filter: "blur(36px) saturate(280%)",
                    scale: [0.9, 1.1, 1],
                  }}
                  transition={{
                    type: "tween",
                    ease: Easings.easeInOutSine,
                    delay: 1,
                    duration: 1.5,
                    repeat: Infinity,
                    repeatType: "loop",
                    repeatDelay: 0.8,
                  }}
                >
                  Site under construction
                </motion.h1>
                <SWA className="relative text-center" startDelay={0.6}>
                  <h1 className="my-8 font-serif font-light italic text-neutral-400">
                    Site under construction
                  </h1>
                  <h1 className="absolute inset-0 left-[0.5px] top-[0.5px] mb-8 text-nowrap font-serif font-light italic text-neutral-300 bg-blend-screen">
                    Site under construction
                  </h1>
                </SWA>
              </div>
            </Section>
            <SWA startDelay={0.6} className="w-full">
              <Separator className="bg-transparent bg-gradient-to-r from-transparent via-muted-foreground/20 to-transparent" />
            </SWA>
          </div>
        </Section>

        <SWA startDelay={0.8}>
          <nav className="flex flex-row items-center justify-between gap-2">
            <NavigationLinks
              layoutGroupId="main-navigation-link"
              links={pageLinks}
              showName={true}
            />
          </nav>
        </SWA>

        <Section
          as="section"
          className="prose prose-sm flex flex-col items-center justify-between gap-6 py-8"
        >
          <SWA
            startDelay={0.9}
            className="flex flex-col items-center justify-between gap-6"
          >
            <Section
              as="div"
              className="flex flex-col items-center justify-between pb-12 pt-4"
            >
              <ArcCarousel />
            </Section>
            <div className="flex flex-col items-center justify-between gap-6">
              <span className="prose m-0 font-medium text-neutral-400">
                Personalized Fashion Platform
              </span>
            </div>
            <div className="flex flex-row items-center gap-2">
              <Button
                asChild
                variant="secondary"
                className="flex flex-row items-center gap-2"
              >
                <Link
                  href="https://www.behance.net/kunalphalak"
                  target="_blank"
                  className="flex flex-row items-center gap-2 no-underline"
                >
                  View Project
                  <ArrowUpRight className="size-4" />
                </Link>
              </Button>
              <Dialog open={dialogOpen} onOpenChange={handleDialogOpenChange}>
                <DialogTrigger asChild>
                  <Button
                    variant="outline"
                    className="flex flex-row items-center gap-2"
                    size="icon"
                  >
                    <Play className="size-4" />
                  </Button>
                </DialogTrigger>
                <DialogContent className="max-w-[393px] p-0">
                  <div className="h-[852px] w-[393px] overflow-hidden rounded-lg">
                    {!iframeLoaded && (
                      <div className="absolute inset-0 flex items-center justify-center bg-background">
                        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
                      </div>
                    )}
                    <iframe
                      src="https://cloud.protopie.io/p/1e5cee55a415031435f45a9e?touchHint=true&ui=false&scaleToFit=true&enableHotspotHints=true&cursorType=touch&mockup=true&bgColor=%23FFFFFF&bgImage=%23FFFFFF&playSpeed=1&playerAppPopup=false"
                      scrolling="no"
                      className="h-full w-full border-0"
                      onLoad={() => setIframeLoaded(true)}
                      onError={() => {
                        console.error("Failed to load ProtoPie iframe");
                        setIframeLoaded(false);
                      }}
                    ></iframe>
                  </div>
                </DialogContent>
              </Dialog>
            </div>
          </SWA>
        </Section>

        <Section
          as="section"
          className="prose prose-sm flex flex-col items-center justify-between py-8"
        >
          <SWA startDelay={0.8}>
            <NavigationLinks
              layoutGroupId="footer-navigation-link"
              links={footerLinks}
              showName={false}
            />
          </SWA>
        </Section>
      </Section>
    </LayoutGroup>
  );
}

separate each section as they can be migrated to different page easily. provide full code in single file in end - don't skip any code.