"use client";

import type { CSSProperties } from "react";
import type { LucideIcon } from "lucide-react";
import { ArrowRight, Eye, ScanFace, Users, View } from "lucide-react";

import { ScrollableTabsList } from "@/components/shadcnblocks/scrollable-tabslist";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

type ImageType = {
  src: string;
  alt: string;
};

type VariantType = "1" | "2" | "3" | "4";

interface TabItem {
  id: string;
  icon: LucideIcon;
  title: string;
  tabName: string;
  summary: string;
  imageComponent: VariantType;
  images: ImageType[];
  link?: {
    name: string;
    href: string;
  };
}

const TAB_LIST: TabItem[] = [
  {
    id: "active-speaker",
    icon: ScanFace,
    title: "خرید و تأمین",
    tabName: "یکپارچگی",
    summary:
      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
    imageComponent: "1",
    images: [
      {
        src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
        alt: "گزارش مالی یکپارچه",
      },
    ],
  },
  {
    id: "eye-contact",
    icon: Eye,
    title: "فاکتور و پرداخت",
    tabName: "ERP",
    summary:
      "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
    imageComponent: "2",
    link: {
      name: "بیشتر بدانید",
      href: "",
    },
    images: [
      {
        src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
        alt: "داشبورد ERP",
      },
      {
        src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
        alt: "مدیریت عملیات",
      },
      {
        src: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
        alt: "گزارش مالی یکپارچه",
      },
      {
        src: "/block-media/shadcnblocks/block/placeholder-dark-4.svg",
        alt: "داشبورد ERP",
      },
    ],
  },
  {
    id: "green-screen",
    icon: View,
    title: "ERP",
    tabName: "ERP",
    summary:
      "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
    imageComponent: "3",
    link: {
      name: "بیشتر بدانید",
      href: "",
    },
    images: [
      {
        src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
        alt: "مدیریت عملیات",
      },
    ],
  },
  {
    id: "multicam",
    icon: Users,
    title: "ERP",
    tabName: "عملیات",
    summary:
      "ورود و خروج کالا را لحظه‌ای ثبت کنید و اختلاف انبار را کم کنید.",
    imageComponent: "4",
    link: {
      name: "بیشتر بدانید",
      href: "",
    },
    images: [
      {
        src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
        alt: "گزارش مالی یکپارچه",
      },
      {
        src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
        alt: "داشبورد ERP",
      },
      {
        src: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
        alt: "مدیریت عملیات",
      },
    ],
  },
];

interface ImagesProps {
  images: ImageType[];
  variant?: VariantType;
}

const POSITIONS: CSSProperties[] = [
  { top: "12%", insetInlineEnd: "36%", rotate: "2.6deg" },
  { top: "12%", insetInlineEnd: "70%", rotate: "-2.4deg" },
  { bottom: "16%", insetInlineEnd: "35%", rotate: "1.6deg" },
  { bottom: "15%", insetInlineEnd: "2%", rotate: "-1.5deg" },
];

const Images = ({ images, variant = "1" }: ImagesProps) => {
  switch (variant) {
    case "1":
      return (
        <div className="ms-auto aspect-[0.930372149] h-full max-h-[38.75rem] overflow-hidden rounded-ts-[0.5rem] rounded-bs-[0.5rem]">
          <img
            className="block size-full object-cover object-center"
            src={images[0].src}
            alt={images[0].alt}
          />
        </div>
      );
    case "2":
      return (
        <div className="size-full ps-4">
          <div className="relative ms-auto aspect-[0.930372149] h-full max-h-[38.75rem] overflow-hidden rounded-[0.625rem]">
            {images.map((img, i) => (
              <div
                style={POSITIONS[i]}
                className="absolute aspect-[0.845360825] w-[30%] overflow-hidden rounded-[0.5rem] shadow-md"
                key={`img-${variant}-${img.src}`}
              >
                <img
                  src={img.src}
                  alt={img.alt}
                  className="block size-full object-cover object-center"
                />
              </div>
            ))}
          </div>
        </div>
      );
    case "3":
      return (
        <div className="relative ms-auto aspect-[0.930372149] h-full max-h-[38.75rem] overflow-hidden rounded-[0.625rem]">
          <div className="absolute start-[5%] top-1/2 aspect-[1.586206897] w-[120%] -translate-y-1/2 overflow-hidden rounded-2xl shadow-xl xl:end-[-22%]">
            <img
              src={images[0].src}
              alt={images[0].alt}
              className="block size-full object-cover object-center"
            />
          </div>
        </div>
      );

    default:
      return (
        <div className="ms-auto aspect-[0.930372149] h-full max-h-[38.75rem] overflow-hidden ps-4 xl:ps-0">
          <div className="grid size-full grid-cols-2 grid-rows-2 gap-[3%]">
            <div className="col-start-1 col-end-2 row-start-1 row-end-2 overflow-hidden rounded-[0.625rem]">
              <img
                src={images[0].src}
                alt={images[0].alt}
                className="block size-full object-cover object-center"
              />
            </div>
            <div className="col-start-1 col-end-2 row-start-2 row-end-3 overflow-hidden rounded-[0.625rem]">
              <img
                src={images[1].src}
                alt={images[1].alt}
                className="block size-full object-cover object-center"
              />
            </div>
            <div className="col-start-2 col-end-3 row-start-1 row-end-3 overflow-hidden rounded-ts-[0.625rem] rounded-bs-[0.625rem]">
              <img
                src={images[2].src}
                alt={images[2].alt}
                className="block size-full object-cover object-center"
              />
            </div>
          </div>
        </div>
      );
  }
};

interface Feature211Props {
  className?: string;
}

const Feature211 = ({ className }: Feature211Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="rounded-xl bg-muted py-11">
          <Tabs
            dir="rtl"
            defaultValue={TAB_LIST[0].tabName}
            className="flex-col-reverse gap-10"
          >
            <ScrollableTabsList>
              <TabsList
                dir="rtl"
                className="mx-auto flex !h-auto justify-start overflow-y-hidden bg-muted px-2 lg:w-max lg:items-center lg:justify-center lg:rounded-full"
              >
                {TAB_LIST.map((tab) => (
                  <TabsTrigger
                    className="shrink-0 rounded-full px-4 py-2 text-sm leading-tight font-medium"
                    key={tab.id}
                    value={tab.tabName}
                  >
                    {tab.tabName}
                  </TabsTrigger>
                ))}
              </TabsList>
            </ScrollableTabsList>
            {TAB_LIST.map((tab) => {
              const Icon = tab.icon;

              return (
                <TabsContent
                  value={tab.tabName}
                  dir="rtl"
                  className="grid w-full grid-cols-1 items-center gap-8 xl:grid-cols-[37.5rem_1fr]"
                  key={tab.id}
                >
                  <div className="flex flex-col items-start gap-4 px-8 text-right xl:ps-18">
                    <div className="flex size-8 rounded-lg bg-primary text-primary-foreground">
                      <Icon className="m-auto size-4" />
                    </div>
                    <h2 className="font-serif text-2xll text-balance xl:text-2xll">
                      {tab.title}
                    </h2>
                    <p className="mt-4 text-xl text-pretty text-foreground">
                      {tab.summary}
                    </p>
                    <div>
                      {tab.link && (
                        <Button asChild size="lg" className="w-full gap-2 md:w-fit">
                          <a href={tab.link.href}>
                            {tab.link.name}
                            <ArrowRight className="size-4 rtl:rotate-180" />
                          </a>
                        </Button>
                      )}
                    </div>
                  </div>
                  <div className="h-full w-full justify-self-end ps-4 md:ps-0">
                    <Images variant={tab.imageComponent} images={tab.images} />
                  </div>
                </TabsContent>
              );
            })}
          </Tabs>
        </div>
      </div>
    </section>
  );
};

export { Feature211 };