"use client";

import clsx from "clsx";
import {
  ChevronDown,
  ChevronUp,
  GanttChartSquareIcon,
  GitBranch,
  Sparkles,
  SwatchBook,
} from "lucide-react";
import { useState } from "react";

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const integrations = [
  {
    title: "مدیریت دارایی",
    description:
      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
    image: <SwatchBook className="h-8 w-8" />,
    color: "bg-red-400",
    tags: [
      "یکپارچگی",
      "عملیات",
      "عملیات سازمان را یکپارچه کنید",
      "ERP",
      "از خرید تا فروش در یک سیستم",
    ],
  },
  {
    title: "ERP",
    description:
      "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
    image: <GitBranch className="h-8 w-8" />,
    color: "bg-blue-400",
    tags: [
      "ERP",
      "مدیریت سازمان",
      "ERP",
      "ERP",
      "ERP",
      "ERP",
    ],
  },
  {
    title: "بودجه‌بندی",
    description:
      "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
    image: <Sparkles className="h-8 w-8" />,
    color: "bg-yellow-400",
    tags: [
      "ERP",
      "ERP",
      "فرایندهای پشت‌صحنه را شفاف کنید",
      "ERP",
      "ERP",
    ],
  },
  {
    title: "مدیریت مالی",
    description:
      "ورود و خروج کالا را لحظه‌ای ثبت کنید و اختلاف انبار را کم کنید.",
    image: <GanttChartSquareIcon className="h-8 w-8" />,
    color: "bg-green-400",
    tags: [
      "ERP",
      "ERP",
      "ERP",
      "ERP",
      "ERP",
    ],
  },
];

interface Feature65Props {
  className?: string;
}

const Feature65 = ({ className }: Feature65Props) => {
  const [activeTabId, setActiveTabId] = useState<number | null>(null);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 gap-2 lg:grid-cols-4">
          {integrations.map((item, index) => (
            <div
              key={item.title}
              className="flex h-full flex-col justify-between gap-2"
            >
              <div className="flex items-center justify-between rounded-xl bg-muted-foreground/5 p-6">
                <div className="flex items-center gap-3">
                  <div className={clsx("h-16 w-3 rounded-md", item.color)} />
                  <h3 className="text-xl font-bold">{item.title}</h3>
                </div>
                <div className="flex items-center gap-6">
                  {item.image}
                  <button
                    type="button"
                    className="flex h-12 w-12 items-center justify-center rounded-lg bg-background lg:hidden"
                    aria-label={
                      activeTabId === index
                        ? `بستن ${item.title}`
                        : `باز کردن ${item.title}`
                    }
                    onClick={() =>
                      setActiveTabId(activeTabId === index ? null : index)
                    }
                  >
                    {activeTabId === index ? (
                      <ChevronUp className="h-8" />
                    ) : (
                      <ChevronDown className="h-8" />
                    )}
                  </button>
                </div>
              </div>
              <div
                className={` ${activeTabId === index ? "flex" : "hidden"} h-full flex-col items-start justify-between gap-64 rounded-xl bg-muted-foreground/5 p-6 transition-all duration-300 lg:flex`}
              >
                <div className="text-xl font-medium text-muted-foreground/90">
                  {item.description}
                </div>
                <div className="flex flex-col items-start gap-4">
                  {item.tags.map((tag, tagIndex) => (
                    <Badge
                      variant="outline"
                      className={`${tagIndex === 0 ? "bg-muted/5" : "bg-background"} rounded-2xl border-0 px-4 py-3 text-base font-medium`}
                      key={tag}
                    >
                      {tag}
                    </Badge>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature65 };