"use client";

import { ArrowLeft, ArrowRight, Calendar, MapPin, Tag } from "lucide-react";
import { useEffect, useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import type { CarouselApi } from "@/components/ui/carousel";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

const projects17bProp = [
  {
    id: 1,
    title: "افزایش ۴۰٪ نرخ تبدیل",
    location: "شرکت SaaS B2B",
    year: "۱۴۰۳",
    category: "سامانه مدیریت ارتباط با مشتری",
    description:
      "پیاده‌سازی امتیازدهی لید و اتوماسیون ایمیل که نرخ تبدیل را از ۸٪ به ۲۲٪ رساند.",
    image:
      "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
  },
  {
    id: 2,
    title: "کاهش ۶۰٪ زمان پاسخ",
    location: "تیم پشتیبانی ۵۰ نفره",
    year: "۱۴۰۳",
    category: "پشتیبانی",
    description:
      "یکپارچه‌سازی سامانه مدیریت ارتباط با مشتری با سیستم تیکتینگ و خودکارسازی پاسخ به سوالات متداول.",
    image:
      "/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg",
  },
  {
    id: 3,
    title: "داشبورد فروش یکپارچه",
    location: "استارتاپ فناوری",
    year: "۱۴۰۲",
    category: "تحلیل",
    description:
      "ساخت داشبورد KPI برای نمایش درآمد، قیف فروش و پیش‌بینی فصلی در یک نما.",
    image:
      "/block-media/shadcnblocks/block/photos/ivan-bandura-3QqzCTIfUJI-unsplash.jpg",
  },
  {
    id: 4,
    title: "خودکارسازی کمپین ایمیل",
    location: "آژانس بازاریابی",
    year: "۱۴۰۲",
    category: "بازاریابی",
    description:
      "راه‌اندازی ۱۲ جریان ایمیل هدفمند با نرخ باز شدن ۲۶٪ و کلیک ۸٪.",
    image:
      "/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
  },
  {
    id: 5,
    title: "بهینه‌سازی SEO",
    location: "فروشگاه آنلاین",
    year: "۱۴۰۳",
    category: "سئو",
    description:
      "افزایش ترافیک ارگانیک ۸۵٪ با استراتژی محتوا و بهینه‌سازی فنی در ۶ ماه.",
    image:
      "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
  },
  {
    id: 6,
    title: "گزارش عملکرد فصلی",
    location: "شرکت سازمانی",
    year: "۱۴۰۲",
    category: "گزارش‌گیری",
    description:
      "گزارش تحلیلی سه‌ماهه با بررسی MRR، churn rate و LTV برای هیئت‌مدیره.",
    image:
      "/block-media/shadcnblocks/block/photos/john-murphey-ZWUWSEY6OGk-unsplash.jpg",
  },
];

interface Projects17bProps {
  className?: string;
}

const Projects17b = ({ className }: Projects17bProps) => {
  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
  const [canScrollPrev, setCanScrollPrev] = useState(false);
  const [canScrollNext, setCanScrollNext] = useState(false);

  useEffect(() => {
    if (!carouselApi) return;
    const updateSelection = () => {
      setCanScrollPrev(carouselApi.canScrollPrev());
      setCanScrollNext(carouselApi.canScrollNext());
    };
    updateSelection();
    carouselApi.on("select", updateSelection);
    return () => {
      carouselApi.off("select", updateSelection);
    };
  }, [carouselApi]);

  return (
    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
      <div className="w-full">
        <div className="mb-16 px-8 text-start">
          <h1 className="text-3xl font-medium tracking-tight lg:text-6xl">
            پروژه‌ها
          </h1>
          <p className="mt-4 text-lg text-muted-foreground">
            مطالعات موردی با جزئیات و اطلاعات کامل
          </p>
        </div>
        <div className="relative w-full">
          <Carousel
            dir="rtl"
            setApi={setCarouselApi}
            opts={{
              align: "start",
              direction: "rtl",
              loop: false,
              breakpoints: {
                "(max-width: 768px)": {
                  dragFree: true,
                },
              },
            }}
            className="w-full"
          >
            <CarouselContent className="pe-8">
              {projects17bProp.map((project) => (
                <CarouselItem key={project.id} className="basis-auto ps-8">
                  <div className="w-[calc(100vw-6rem)] sm:w-[350px] md:w-[450px]">
                    <div className="overflow-hidden rounded-xl border bg-card text-start text-card-foreground shadow-sm">
                      <div className="aspect-square overflow-hidden">
                        <img
                          src={project.image || "/placeholder.svg"}
                          alt={project.title}
                          className="h-full w-full object-cover transition-transform duration-300 hover:scale-105"
                        />
                      </div>
                      <div className="space-y-4 p-6">
                        <div className="space-y-3">
                          <div className="flex items-start justify-between gap-3">
                            <h2 className="text-xl leading-tight font-semibold">
                              {project.title}
                            </h2>
                            <Badge variant="secondary" className="shrink-0">
                              <Tag className="me-1 h-3 w-3" />
                              {project.category}
                            </Badge>
                          </div>

                          <div className="flex items-center gap-4 text-sm text-muted-foreground">
                            <div className="flex items-center gap-1">
                              <MapPin className="h-4 w-4" />
                              {project.location}
                            </div>
                            <div className="flex items-center gap-1">
                              <Calendar className="h-4 w-4" />
                              {project.year}
                            </div>
                          </div>
                        </div>

                        <p className="text-sm leading-relaxed text-muted-foreground">
                          {project.description}
                        </p>

                        <div className="pt-2">
                          <Button
                            variant="default"
                            size="sm"
                            className="w-full"
                          >
                            مشاهده جزئیات
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
          <div className="pointer-events-none absolute inset-x-0 inset-y-0 top-60 z-10 flex justify-between px-8">
            <Button
              size="icon"
              variant="outline"
              onClick={() => carouselApi?.scrollPrev()}
              disabled={!canScrollPrev}
              className="pointer-events-auto h-10 w-10 rounded-full border-gray-200 bg-white/90 shadow-lg hover:bg-white"
            >
              <ArrowRight className="h-4 w-4" />
              <span className="sr-only">اسلاید قبلی</span>
            </Button>
            <Button
              size="icon"
              variant="outline"
              onClick={() => carouselApi?.scrollNext()}
              disabled={!canScrollNext}
              className="pointer-events-auto h-10 w-10 rounded-full border-gray-200 bg-white/90 shadow-lg hover:bg-white"
            >
              <ArrowLeft className="h-4 w-4" />
              <span className="sr-only">اسلاید بعدی</span>
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Projects17b };