"use client";

import { ChevronUp, Flag, Pyramid, Users, Workflow, Zap } from "lucide-react";
import { useState } from "react";

import { Button } from "@/components/ui/button";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

const FEATURES = [
  {
    title: "گزارش‌ساز",
    description: "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "گزارش‌ساز",
    icon: <Workflow />,
  },
  {
    title: "Pivot تعاملی",
    description: "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "تحلیل داده سازمان",
    icon: <Users />,
  },
  {
    title: "داشبورد مدیریتی",
    description: "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "داشبورد هوش تجاری",
    icon: <Flag />,
  },
];

interface Feature184Props {
  className?: string;
}

const Feature184 = ({ className }: Feature184Props) => {
  const [activeTab, setActiveTab] = useState(FEATURES[0].title);

  const activeFeature = FEATURES.find((f) => f.title === activeTab);

  return (
    <section dir="rtl" lang="fa" className={cn("py-20 md:py-32", className)}>
      <div className="container mx-auto flex flex-col items-center px-4 sm:px-6 lg:px-8">
        <div className="mb-12 max-w-3xl text-center">
          <h2 className="text-xl leading-tight font-semibold tracking-tight text-balance sm:text-3xl md:text-xl lg:text-2xll">
            تصمیم استراتژیک را داده‌محور کنید
          </h2>
        </div>

        <div className="grid gap-8 lg:grid-cols-2">
          <div className="relative h-[300px] overflow-hidden rounded-xl sm:h-[420px]">
            <img
              src={activeFeature?.image}
              alt={activeFeature?.imageAlt ?? activeTab}
              className="h-full w-full object-cover"
            />
          </div>

          <div className="relative flex flex-col justify-between">
            <Tabs
              defaultValue={FEATURES[0].title}
              onValueChange={(value) => setActiveTab(value)}
              className="h-full w-full"
            >
              <TabsList className="flex !h-full w-full flex-col gap-4 rounded-xl border-none bg-transparent p-0">
                {FEATURES.map((feature) => (
                  <TabsTrigger
                    key={feature.title}
                    value={feature.title}
                    className={cn(
                      "group relative flex h-full w-full flex-col items-start rounded-xl p-6 text-start transition-all",
                      "border border-border/50 bg-card hover:border-primary/50",
                      "data-[state=active]:z-20 data-[state=active]:scale-[1.02] data-[state=active]:border-primary data-[state=active]:bg-primary/95 data-[state=active]:shadow-lg",
                    )}
                  >
                    <div className="flex w-full items-center justify-between">
                      <div className="flex items-center gap-6">
                        <div
                          className={cn(
                            "rounded-lg bg-muted p-4 transition-colors",
                            "group-data-[state=active]:bg-background",
                          )}
                        >
                          {feature.icon}
                        </div>
                        <div className="flex flex-col gap-2 text-start">
                          <h3
                            className={cn(
                              "text-xl font-medium",
                              "group-data-[state=active]:text-primary-foreground",
                            )}
                          >
                            {feature.title}
                          </h3>
                          <span
                            className={cn(
                              "text-sm text-muted-foreground transition-colors",
                              "group-data-[state=active]:text-primary-foreground/90",
                            )}
                          >
                            {feature.description}
                          </span>
                        </div>
                      </div>
                      <div className="ps-8">
                        <ChevronUp
                          className={cn(
                            "size-5 text-muted-foreground transition-all duration-300",
                            "group-data-[state=active]:rotate-180 group-data-[state=active]:text-primary-foreground",
                          )}
                        />
                      </div>
                    </div>
                  </TabsTrigger>
                ))}
              </TabsList>
            </Tabs>
          </div>
        </div>

        <div className="mt-12 flex flex-col items-center justify-center gap-4 sm:flex-row">
          <Button className="w-full gap-2 sm:w-auto">
            <Zap className="size-4" />
            شروع کنید
          </Button>
          <Button variant="outline" className="w-full gap-2 sm:w-auto">
            <Pyramid className="size-4" />
            داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
          </Button>
        </div>
      </div>
    </section>
  );
};

export { Feature184 };