import {
  Blocks,
  ChartPie,
  ChevronRight,
  Layout,
  Target,
  type LucideIcon,
} from "lucide-react";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

const features: {
  id: number;
  header: string;
  excerpt: string;
  icon: LucideIcon;
  title: string;
  description: string;
  image: string;
}[] = [
  {
    id: 1,
    header: "داده سازمانی",
    excerpt:
      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
    icon: Target,
    title: "گزارش‌ساز",
    description:
      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
  },
  {
    id: 2,
    header: "هوش تجاری",
    excerpt:
      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
    icon: Layout,
    title: "Pivot تعاملی",
    description:
      "داده پراکنده را در یک مدل واحد ساختاردهی کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
  },
  {
    id: 3,
    header: "گزارش‌گیری",
    excerpt:
      "تحلیل پیشرفته",
    icon: Blocks,
    title: "داشبورد مدیریتی",
    description:
      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
  },
  {
    id: 4,
    header: "داده سازمانی",
    excerpt:
      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
    icon: ChartPie,
    title: "اتصال منبع",
    description:
      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
  },
];

interface Feature106Props {
  className?: string;
}

const Feature106 = ({ className }: Feature106Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <Accordion
          type="single"
          collapsible
          defaultValue="1"
          dir="rtl"
          className="overflow-hidden rounded-xl border lg:hidden"
        >
          {features.map((feature, index) => (
            <AccordionItem
              key={feature.id}
              value={feature.id.toString()}
              className={cn(
                "border-0 bg-muted/50 px-6 py-4 data-[state=open]:bg-background",
                index !== features.length - 1 && "border-b",
              )}
            >
              <AccordionTrigger className="items-start text-right hover:no-underline">
                <div className="flex flex-col gap-2 text-right">
                  <div className="flex items-center gap-1.5">
                    <feature.icon className="h-auto w-5" />
                    <span className="text-base font-semibold">
                      {feature.header}
                    </span>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    {feature.excerpt}
                  </p>
                </div>
              </AccordionTrigger>
              <AccordionContent className="!h-auto pt-4 [&>div]:!h-auto">
                <div className="flex flex-col gap-5 rounded-xl border bg-muted/50 p-5 text-right">
                  <div>
                    <h2 className="mb-2 font-medium">{feature.title}</h2>
                    <p className="text-sm text-muted-foreground">
                      {feature.description}
                    </p>
                  </div>
                  <img
                    src={feature.image}
                    alt={`نمای ${feature.header}`}
                    className="aspect-video max-h-[450px] rounded-xl border object-cover"
                  />
                </div>
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
        <Tabs
          dir="rtl"
          defaultValue="1"
          className="hidden grid-cols-3 overflow-hidden rounded-xl border lg:grid"
        >
          <TabsList
            variant="line"
            className="!h-auto !w-full flex-col !gap-0 !rounded-none !border-e !border-border !bg-muted/50 !p-0"
          >
            {features.map((feature, index) => (
              <TabsTrigger
                key={feature.id}
                value={feature.id.toString()}
                className={cn(
                  "group relative !h-auto !w-full !flex-col !items-start !justify-start gap-2.5 !rounded-none !border-0 !bg-muted/50 !px-6 !py-6 !whitespace-normal !text-foreground !shadow-none !ring-0 transition-colors duration-300 after:!hidden after:!bg-transparent after:!opacity-0 data-[state=active]:!border-0 data-[state=active]:!bg-background data-[state=active]:!shadow-none data-[state=active]:!ring-0 data-[state=active]:after:!hidden data-[state=active]:after:!bg-transparent data-[state=active]:after:!opacity-0",
                  index !== features.length - 1 &&
                    "!border-b-[1px] !border-b-border data-[state=active]:!border-b-[1px] data-[state=active]:!border-b-border",
                )}
              >
                <span className="absolute start-0 top-0 bottom-0 h-full w-[3px] bg-primary transition-opacity duration-300 group-data-[state=inactive]:opacity-0" />
                <div className="flex w-full items-center justify-between gap-2">
                  <div className="flex items-center gap-1.5">
                    <feature.icon className="h-auto w-5" />
                    <span className="text-base font-semibold">
                      {feature.header}
                    </span>
                  </div>
                  <ChevronRight className="h-auto w-4 shrink-0 rtl:rotate-180" />
                </div>
                <p className="w-full text-right text-sm text-muted-foreground">
                  {feature.excerpt}
                </p>
              </TabsTrigger>
            ))}
          </TabsList>
          {features.map((feature) => (
            <TabsContent
              value={feature.id.toString()}
              key={feature.id}
              className="col-span-2 flex flex-col gap-7 bg-background p-10 text-right data-[state=inactive]:hidden"
            >
              <div>
                <h2 className="mb-2 text-xl font-medium">{feature.title}</h2>
                <p className="text-muted-foreground">{feature.description}</p>
              </div>
              <img
                src={feature.image}
                alt={`نمای ${feature.header}`}
                className="aspect-video max-h-[450px] rounded-xl object-cover"
              />
            </TabsContent>
          ))}
        </Tabs>
      </div>
    </section>
  );
};

export { Feature106 };