import type { LucideIcon } from "lucide-react";
import { Blend, ChartNoAxesColumn, CircleDot, Diamond } from "lucide-react";

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

type FeatureContent = {
  title: string;
  description: string;
  image: string;
  imageAlt: string;
  className?: string;
};

const MAINLINE_DESCRIPTION =
  "پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.";

const FEATURES: Array<{
  title: string;
  description: string;
  content: FeatureContent;
  icon: LucideIcon;
}> = [
  {
    title: "تاریخچه مشتری",
    description:
      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
    content: {
      title: "صندوق یکپارچه",
      description: MAINLINE_DESCRIPTION,
      image: "/block-media/shadcnblocks/block/placeholder-1.svg",
      imageAlt: "مدیریت تیکت",
    },
    icon: CircleDot,
  },
  {
    title: "اولویت‌بندی تیکت",
    description: "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
    content: {
      title: "پایگاه دانش",
      description: MAINLINE_DESCRIPTION,
      image: "/block-media/shadcnblocks/block/placeholder-2.svg",
      imageAlt: "داشبورد رضایت",
    },
    icon: Blend,
  },
  {
    title: "پاسخ آماده",
    description: "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
    content: {
      title: "SLA هوشمند",
      description: MAINLINE_DESCRIPTION,
      image: "/block-media/shadcnblocks/block/placeholder-3.svg",
      imageAlt: "مرکز پشتیبانی مشتری",
    },
    icon: Diamond,
  },
  {
    title: "نظرسنجی رضایت",
    description: "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
    content: {
      title: "تخصیص خودکار",
      description: MAINLINE_DESCRIPTION,
      image: "/block-media/shadcnblocks/block/placeholder-4.svg",
      imageAlt: "مدیریت تیکت",
    },
    icon: ChartNoAxesColumn,
  },
];

interface Feature175Props {
  className?: string;
}

const Feature175 = ({ className }: Feature175Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex gap-3 text-right max-md:flex-col">
          <h2 className="flex-1 text-3xl leading-tight font-semibold tracking-tight text-balance md:text-xl lg:text-2xll">
            زمان حل مسئله را کوتاه کنید
          </h2>
          <p className="flex-1 self-end text-lg font-medium text-pretty text-muted-foreground">
            رضایت مشتری و زمان حل را پیگیری کنید تا نقاط ضعف فرایند پشتیبانی را بهبود دهید.
          </p>
        </div>

        <Tabs
          dir="rtl"
          defaultValue={FEATURES[0].title}
          orientation="vertical"
          className="border-muted2 mt-8 grid grid-cols-1 gap-4 rounded-xl border p-4 md:mt-12 lg:mt-20 lg:grid-cols-4"
        >
          <TabsList className="flex h-auto w-full flex-col justify-start rounded-xl bg-muted p-1.5">
            {FEATURES.map((feature) => (
              <TabsTrigger
                key={feature.title}
                value={feature.title}
                className="w-full justify-start rounded-lg px-4 py-3 text-right whitespace-normal text-foreground/80 transition-colors duration-300 data-[state=active]:text-foreground data-[state=active]:shadow-xl lg:px-6 lg:py-4 dark:text-muted-foreground dark:data-[state=active]:text-foreground"
              >
                <div className="text-right">
                  <feature.icon className="size-7 md:size-8 lg:size-9" />
                  <h3 className="mt-3 font-semibold">{feature.title}</h3>
                  <p className="mt-1 text-right text-sm text-pretty text-muted-foreground">
                    {feature.description}
                  </p>
                </div>
              </TabsTrigger>
            ))}
          </TabsList>

          {FEATURES.map((feature) => (
            <TabsContent
              className={cn(
                "col-span-1 m-0 overflow-hidden rounded-xl bg-background lg:col-span-3",
                feature.content.className,
              )}
              key={feature.title}
              value={feature.title}
            >
              <div className="max-w-2xl pb-4 text-right text-balance">
                <h4 className="inline font-semibold">
                  {feature.content.title}{" "}
                </h4>
                <span className="mt-2 font-medium text-pretty text-muted-foreground">
                  {feature.content.description}
                </span>
              </div>
              <img
                src={feature.content.image}
                alt={feature.content.imageAlt}
                className="h-[420px] w-full rounded-lg object-cover lg:h-[512px] lg:flex-1"
              />
            </TabsContent>
          ))}
        </Tabs>
      </div>
    </section>
  );
};

export { Feature175 };