import { ChevronRight } from "lucide-react";
import { Fragment } from "react/jsx-runtime";

import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

type FooterLink = {
  text: string;
  link?: string;
};

type SocialIcon = {
  title: string;
  light: string;
  dark: string;
};

type SocialLink = {
  link: string;
  icon: SocialIcon;
};

type HomeLink = {
  logo: {
    light: string;
    dark?: string;
  };
  link: string;
  alt?: string;
};

type StoreLink = {
  name: string;
  link: string;
  address?: string;
};

type FooterLinksSection = {
  title: string;
  items: FooterLink[];
};

type AppSection = {
  title?: string;
  description?: string;
  links?: {
    link: string;
    badge: string;
    alt?: string;
  }[];
};

interface FooterHomeSectionProps {
  home: HomeLink;
  description?: string;
  socialMediaLinks?: SocialLink[];
}

type AppPromoSectionProps = AppSection;

interface EcommerceFooter9Props {
  className?: string;
  stores?: StoreLink[];
  home: HomeLink;
  description?: string;
  socialMediaLinks?: SocialLink[];
  links?: FooterLinksSection[];
  app?: AppSection;
  paymentMethods: string[];
}

const FOOTER_DATA = {
  stores: [
    {
      name: "شعبه پرچمدار تهران",
      link: "#",
      address: "میدان ونک، خیابان ملاصدرا، تهران",
    },
    {
      name: "شعبه اصفهان",
      link: "#",
      address: "خیابان چهارباغ عباسی، اصفهان",
    },
    {
      name: "شعبه شیراز",
      link: "#",
      address: "خیابان زند، شیراز",
    },
    {
      name: "شعبه مشهد",
      link: "#",
      address: "بلوار سجاد، مشهد",
    },
  ],
  home: {
    logo: {
      light:
        "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark.svg",
      dark: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark-white.svg",
    },
    alt: "لوگو",
    link: "#",
  },
  description:
    "محصولاتی با طراحی دقیق برای ارتقای زندگی روزمره. مواد باکیفیت، استایل ماندگار و راحتی بی‌دردسر.",
  links: [
    {
      title: "مجموعه‌ها",
      items: [
        {
          text: "تازه‌ها",
          link: "#",
        },
        {
          text: "پرفروش‌ترین‌ها",
          link: "#",
        },
        {
          text: "پیشنهادهای فصلی",
          link: "#",
        },
        {
          text: "محصولات ضروری",
          link: "#",
        },
      ],
    },
    {
      title: "راهنما",
      items: [
        {
          text: "تماس با ما",
          link: "#",
        },
        {
          text: "سؤالات متداول",
          link: "#",
        },
        {
          text: "ارسال و پیگیری",
          link: "#",
        },
        {
          text: "مرجوعی و تعویض",
          link: "#",
        },
      ],
    },
    {
      title: "اطلاعات",
      items: [
        {
          text: "شرایط و ضوابط",
          link: "#",
        },
        {
          text: "حریم خصوصی",
          link: "#",
        },
        {
          text: "سیاست ضمانت",
          link: "#",
        },
        {
          text: "شرایط استفاده",
          link: "#",
        },
      ],
    },
  ],
  paymentMethods: [
    "/block-media/shadcnblocks/block/ecommerce/payment-methods/amazonpay.svg",
    "/block-media/shadcnblocks/block/ecommerce/payment-methods/applepay.svg",
    "/block-media/shadcnblocks/block/ecommerce/payment-methods/mastercard.svg",
    "/block-media/shadcnblocks/block/ecommerce/payment-methods/paypal.svg",
    "/block-media/shadcnblocks/block/ecommerce/payment-methods/visa.svg",
    "/block-media/shadcnblocks/block/ecommerce/payment-methods/discover.svg",
  ],
  app: {
    title: "خرید در هر مکان",
    description:
      "اپلیکیشن ما را دانلود کنید تا از پیشنهادهای ویژه، دسترسی زودهنگام به محصولات جدید و پرداخت آسان بهره‌مند شوید.",
    links: [
      {
        link: "#",
        badge:
          "/block-media/shadcnblocks/block/badges/googleplay.svg",
        alt: "گوگل پلی",
      },
      {
        link: "#",
        badge:
          "/block-media/shadcnblocks/block/badges/appstore.svg",
        alt: "اپ استور",
      },
    ],
  },
  socialMediaLinks: (() => {
    const SOCIAL_ICONS = {
      facebook: {
        title: "Facebook",
        light:
          "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
        dark: "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
      },
      x: {
        title: "X",
        light:
          "/block-media/shadcnblocks/block/logos/x.svg",
        dark: "/block-media/shadcnblocks/block/logos/x.svg",
      },
      instagram: {
        title: "Instagram",
        light:
          "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
        dark: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
      },
    } as const;
    return [
      { icon: SOCIAL_ICONS.facebook, link: "#" },
      { icon: SOCIAL_ICONS.x, link: "#" },
      { icon: SOCIAL_ICONS.instagram, link: "#" },
    ];
  })(),
};

const EcommerceFooter9 = ({
  className,
  stores = FOOTER_DATA.stores,
  home = FOOTER_DATA.home,
  description = FOOTER_DATA.description,
  socialMediaLinks = FOOTER_DATA.socialMediaLinks,
  links = FOOTER_DATA.links,
  app = FOOTER_DATA.app,
  paymentMethods = FOOTER_DATA.paymentMethods,
}: EcommerceFooter9Props) => {
  return (
    <footer dir="rtl" lang="fa" className={cn("py-10", className)}>
      <div className="container">
        <div className="py-10">
          <FooterStoresLinks links={stores} />
        </div>
        <Separator />
        <div className="py-10">
          <div className="grid grid-cols-1 gap-7.5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-7">
            <div className="sm:col-span-2">
              <FooterHomeSection
                home={home}
                description={description}
                socialMediaLinks={socialMediaLinks}
              />
            </div>
            <FooterLinksSection links={links} />
            <div className="lg:col-span-2">
              <AppPromoSection
                title={app.title}
                description={app.description}
                links={app.links}
              />
            </div>
          </div>
        </div>
        <Separator />
        <div className="flex flex-col items-center justify-between gap-5 py-5 md:flex-row">
          <p className="text-xs text-muted-foreground">
            © ۲۲۶ ساخته‌شده با ❤️ توسط <b>ری یو آی</b>
          </p>
          <PaymentMethods cards={paymentMethods} />
        </div>
      </div>
    </footer>
  );
};

const FooterHomeSection = ({
  home,
  description,
  socialMediaLinks,
}: FooterHomeSectionProps) => {
  return (
    <div className="space-y-5">
      <HomeLink home={home} />
      {description && (
        <p className="text-sm leading-relaxed text-balance text-muted-foreground">
          {description}
        </p>
      )}
      <div className="space-y-2.5">
        <div className="text-xl leading-relaxed font-semibold">ما را دنبال کنید</div>
        <SocialMediaSection links={socialMediaLinks} />
      </div>
    </div>
  );
};

const FooterStoresLinks = ({ links }: { links: StoreLink[] }) => {
  if (!links) return;

  return (
    <ul className="grid grid-cols-1 gap-7.5 md:grid-cols-2 lg:grid-cols-4">
      {links.map(({ name, address, link }, index) => (
        <li key={index} className="space-y-1">
          <Button
            asChild
            className="gap-4 p-0 text-base hover:bg-background"
            variant="ghost"
          >
            <a href={link}>
              {name}
              <div className="flex size-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
                <ChevronRight className="rtl:rotate-180" />
              </div>
            </a>
          </Button>
          <p className="text-sm text-muted-foreground">{address}</p>
        </li>
      ))}
    </ul>
  );
};

const HomeLink = ({ home }: { home: HomeLink }) => {
  return (
    <a href={home.link} className="inline-block">
      <div className="max-w-50">
        <img
          className="w-full dark:hidden"
          src={home.logo.light}
          alt={home.alt ?? "لوگو"}
        />
        {home.logo.dark && (
          <img
            className="hidden w-full dark:inline-block"
            src={home.logo.dark}
            alt={home.alt ?? "لوگو"}
          />
        )}
      </div>
    </a>
  );
};

const SocialMediaSection = ({ links }: { links?: SocialLink[] }) => {
  if (!links) return;

  return (
    <ul className="flex flex-wrap gap-4">
      {links.map(({ icon, link }) => (
        <li key={crypto.randomUUID()}>
          <Button size="icon-sm" asChild className="rounded-full">
            <a href={link}>
              <img
                className="size-3.5 dark:hidden"
                alt={icon.title}
                src={icon.light}
              />
              <img
                className="hidden size-3.5 dark:block"
                alt={icon.title}
                src={icon.dark}
              />
            </a>
          </Button>
        </li>
      ))}
    </ul>
  );
};

const FooterLinksSection = ({ links }: { links?: FooterLinksSection[] }) => {
  if (!links) return;

  return (
    <Fragment>
      {links.map(({ title, items }, i) => (
        <div key={i} className="space-y-4">
          <h2 className="text-base leading-normal font-semibold">{title}</h2>
          <div>
            {items.map(({ link, text }, j) => (
              <a
                key={`${i}-${j}`}
                className="block py-2 text-sm leading-normal text-muted-foreground"
                href={link}
              >
                {text}
              </a>
            ))}
          </div>
        </div>
      ))}
    </Fragment>
  );
};

const AppPromoSection = ({
  title,
  description,
  links,
}: AppPromoSectionProps) => {
  if (!links) return;

  return (
    <div className="space-y-5">
      {title && (
        <h2 className="text-base leading-normal font-semibold">{title}</h2>
      )}
      {description && (
        <p className="text-sm leading-relaxed text-balance text-muted-foreground">
          {description}
        </p>
      )}
      <div className="flex flex-wrap items-center gap-3">
        {links.map(({ link, badge, alt }, index) => (
          <a
            className="block flex-1 shrink-0 grow-0 basis-33"
            href={link}
            key={index}
          >
            <img src={badge} alt={alt} />
          </a>
        ))}
      </div>
    </div>
  );
};

const PaymentMethods = ({ cards }: { cards: string[] }) => {
  return (
    <ul className="flex flex-wrap items-center gap-3">
      {cards.map((card) => (
        <li key={crypto.randomUUID()}>
          <img className="w-9.5" src={card} alt="روش پرداخت" />
        </li>
      ))}
    </ul>
  );
};

export { EcommerceFooter9 };