"use client";

import { Sparkles } from "lucide-react";
import { useState } from "react";

import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

const CATEGORIES = [
  { value: "all", label: "همه" },
  { value: "data", label: "داده" },
  { value: "ai", label: "هوش مصنوعی" },
  { value: "security", label: "امنیت" },
  { value: "news", label: "اخبار" },
] as const;

type BlogCategory = Exclude<(typeof CATEGORIES)[number]["value"], "all">;

const CATEGORY_LABELS: Record<BlogCategory, string> = {
  data: "داده",
  ai: "هوش مصنوعی",
  security: "امنیت",
  news: "اخبار",
};

interface Blog {
  title: string;
  category: BlogCategory;
  date: string;
  author: string[];
  link: string;
}

const blogs: Blog[] = [
  {
    title:
      "کاوش در عمق تکنیک‌ها و کاربردهای تحلیل داده مدرن",
    category: "data",
    date: "۱۴ آذر ۱۴۰۳",
    author: [
      "/block-media/shadcnblocks/block/avatar-1.webp",
      "/block-media/shadcnblocks/block/avatar-2.webp",
      "/block-media/shadcnblocks/block/avatar-3.webp",
    ],
    link: "#",
  },
  {
    title:
      "مسیر در چشم‌انداز پیچیده هوش مصنوعی و یادگیری ماشین پیشرفته",
    category: "ai",
    date: "۱۳ آذر ۱۴۰۳",
    author: [
      "/block-media/shadcnblocks/block/avatar-2.webp",
      "/block-media/shadcnblocks/block/avatar-3.webp",
    ],
    link: "#",
  },
  {
    title:
      "تقویت دفاع دیجیتال: استراتژی‌های پیشرفته امنیت سایبری برای سازمان‌های مدرن",
    category: "security",
    date: "۱۲ آذر ۱۴۰۳",
    author: [
      "/block-media/shadcnblocks/block/avatar-1.webp",
      "/block-media/shadcnblocks/block/avatar-3.webp",
    ],
    link: "#",
  },
  {
    title:
      "درک و کاوش در معماری‌ها و مفاهیم رایانش توزیع‌شده",
    category: "data",
    date: "۱۱ آذر ۱۴۰۳",
    author: ["/block-media/shadcnblocks/block/avatar-2.webp"],
    link: "#",
  },
  {
    title:
      "پیشرفت‌های علمی اخیر در تحقیقات فناوری کوانتومی پیشرفته",
    category: "news",
    date: "۱۰ آذر ۱۴۰۳",
    author: [
      "/block-media/shadcnblocks/block/avatar-1.webp",
      "/block-media/shadcnblocks/block/avatar-2.webp",
    ],
    link: "#",
  },
  {
    title:
      "به‌کارگیری یادگیری ماشین در سناریوها و موارد واقعی کسب‌وکار",
    category: "ai",
    date: "۹ آذر ۱۴۰۳",
    author: [
      "/block-media/shadcnblocks/block/avatar-3.webp",
      "/block-media/shadcnblocks/block/avatar-1.webp",
    ],
    link: "#",
  },
  {
    title:
      "تدوین استراتژی‌های مؤثر برای تنظیم و بهینه‌سازی کارایی پایگاه داده",
    category: "data",
    date: "۸ آذر ۱۴۰۳",
    author: [
      "/block-media/shadcnblocks/block/avatar-2.webp",
      "/block-media/shadcnblocks/block/avatar-3.webp",
    ],
    link: "#",
  },
  {
    title:
      "پیاده‌سازی اصول امنیت Zero Trust در سراسر سازمان",
    category: "security",
    date: "۷ آذر ۱۴۰۳",
    author: ["/block-media/shadcnblocks/block/avatar-1.webp"],
    link: "#",
  },
  {
    title:
      "راهنمای جامع معماری‌ها و توسعه رایانش بدون سرور مدرن",
    category: "ai",
    date: "۶ آذر ۱۴۰۳",
    author: [
      "/block-media/shadcnblocks/block/avatar-2.webp",
      "/block-media/shadcnblocks/block/avatar-3.webp",
    ],
    link: "#",
  },
  {
    title:
      "اخبار صنعت: تازه‌ترین به‌روزرسانی‌ها در نوآوری‌های شبکه و فناوری‌های نوظهور",
    category: "news",
    date: "۵ آذر ۱۴۰۳",
    author: [
      "/block-media/shadcnblocks/block/avatar-1.webp",
      "/block-media/shadcnblocks/block/avatar-2.webp",
      "/block-media/shadcnblocks/block/avatar-3.webp",
    ],
    link: "#",
  },
  {
    title:
      "تحول تحلیل کلان‌داده: از بینش‌های تاریخی تا مدل‌های پیش‌بینی",
    category: "data",
    date: "۴ آذر ۱۴۰۳",
    author: [
      "/block-media/shadcnblocks/block/avatar-1.webp",
      "/block-media/shadcnblocks/block/avatar-2.webp",
    ],
    link: "#",
  },
  {
    title: "روندهای نوظهور در پردازش زبان طبیعی و هوش مصنوعی گفتگومحور",
    category: "ai",
    date: "۳ آذر ۱۴۰۳",
    author: ["/block-media/shadcnblocks/block/avatar-3.webp"],
    link: "#",
  },
  {
    title: "امنیت بلاک‌چین: حفاظت از دارایی‌های دیجیتال در عصر مدرن",
    category: "security",
    date: "۲ آذر ۱۴۰۳",
    author: [
      "/block-media/shadcnblocks/block/avatar-1.webp",
      "/block-media/shadcnblocks/block/avatar-2.webp",
    ],
    link: "#",
  },
  {
    title:
      "خبر فوری: پیشرفت‌های انقلابی در کاربردهای رایانش کوانتومی",
    category: "news",
    date: "۱ آذر ۱۴۰۳",
    author: [
      "/block-media/shadcnblocks/block/avatar-1.webp",
      "/block-media/shadcnblocks/block/avatar-2.webp",
      "/block-media/shadcnblocks/block/avatar-3.webp",
    ],
    link: "#",
  },
  {
    title: "تحلیل بلادرنگ: پردازش و تجسم داده‌های جریانی",
    category: "data",
    date: "۳۰ آبان ۱۴۰۳",
    author: [
      "/block-media/shadcnblocks/block/avatar-2.webp",
      "/block-media/shadcnblocks/block/avatar-3.webp",
    ],
    link: "#",
  },
  {
    title: "معماری‌های یادگیری عمیق برای بینایی ماشین",
    category: "ai",
    date: "۲۹ آبان ۱۴۰۳",
    author: ["/block-media/shadcnblocks/block/avatar-1.webp"],
    link: "#",
  },
  {
    title: "تشخیص پیشرفته تهدید: استفاده از هوش مصنوعی در دفاع سایبری",
    category: "security",
    date: "۲۸ آبان ۱۴۰۳",
    author: [
      "/block-media/shadcnblocks/block/avatar-2.webp",
      "/block-media/shadcnblocks/block/avatar-3.webp",
    ],
    link: "#",
  },
  {
    title: "تازه‌ترین تحولات در فناوری‌های پردازش داده ابری‌بومی",
    category: "news",
    date: "۲۷ آبان ۱۴۰۳",
    author: [
      "/block-media/shadcnblocks/block/avatar-1.webp",
      "/block-media/shadcnblocks/block/avatar-3.webp",
    ],
    link: "#",
  },
  {
    title: "عملیات یادگیری ماشین: ساده‌سازی گردش‌کار توسعه هوش مصنوعی",
    category: "ai",
    date: "۲۶ آبان ۱۴۰۳",
    author: ["/block-media/shadcnblocks/block/avatar-2.webp"],
    link: "#",
  },
  {
    title: "مقررات حریم خصوصی داده: تضمین انطباق در عملیات جهانی",
    category: "security",
    date: "۲۵ آبان ۱۴۰۳",
    author: [
      "/block-media/shadcnblocks/block/avatar-1.webp",
      "/block-media/shadcnblocks/block/avatar-2.webp",
      "/block-media/shadcnblocks/block/avatar-3.webp",
    ],
    link: "#",
  },
];

interface Resources2Props {
  className?: string;
}

const Resources2 = ({ className }: Resources2Props) => {
  const [selectedCategory, setSelectedCategory] = useState("all");

  const filteredBlogs = blogs.filter(
    (blog) =>
      selectedCategory === "all" || blog.category === selectedCategory,
  );

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h1 className="text-start text-xl font-medium sm:text-2xll md:text-2xll">
          منابع و گزارش‌های تخصصی
        </h1>
        <p className="mt-4 text-start text-lg text-muted-foreground">
          دیدگاه‌ها و تحلیل‌های ما درباره موضوعات کلیدی را کشف کنید.
        </p>
        <div className="mt-10 grid grid-cols-1 gap-4 lg:grid-cols-12">
          <a
            href="#"
            className="group relative isolate overflow-hidden rounded-2xl border border-border transition-transform duration-300 hover:-translate-y-0.5 lg:col-span-7 lg:row-span-2"
          >
            <img
              src="/block-media/shadcnblocks/block/photos/simone-hutsch-ba454dc72896-unsplash.jpg"
              alt="شروع کار با پلتفرم‌ها و زیرساخت دیجیتال مدرن"
              className="size-full max-h-[550px] object-cover grayscale-100 transition-all duration-300 group-hover:grayscale-50"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-primary to-transparent" />
            <div className="absolute inset-0 z-10 flex flex-col justify-between p-8 text-start">
              <Badge className="border border-background/20 bg-background/15 backdrop-blur-sm">
                <Sparkles className="size-4" />
                مطلب ویژه
              </Badge>
              <div className="flex flex-col gap-4">
                <h2 className="text-xl font-medium text-background">
                  شروع کار با پلتفرم‌ها و زیرساخت دیجیتال مدرن
                </h2>
                <div className="flex items-center gap-2">
                  <time className="text-sm text-background/80">
                    ۱۴ آذر ۱۴۰۳
                  </time>
                  <div className="flex items-center -space-x-2">
                    <Avatar className="size-6 border border-primary">
                      <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
                    </Avatar>
                    <Avatar className="size-6 border border-primary">
                      <AvatarImage src="/block-media/shadcnblocks/block/avatar-2.webp" />
                    </Avatar>
                    <Avatar className="size-6 border border-primary">
                      <AvatarImage src="/block-media/shadcnblocks/block/avatar-3.webp" />
                    </Avatar>
                    <span className="z-10 grid size-6 place-items-center rounded-full border border-primary bg-primary/90 text-xs text-background backdrop-blur-sm">
                      +۲
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </a>
          <div className="flex flex-col gap-4 lg:col-span-5 lg:row-span-2 lg:flex-col">
            <a
              href="#"
              className="group relative isolate overflow-hidden rounded-2xl border border-border transition-transform duration-300 hover:-translate-y-0.5"
            >
              <img
                src="/block-media/shadcnblocks/block/photos/simone-hutsch-duxeKbu9FDE-unsplash.jpg"
                alt="ساده‌سازی عملیات کسب‌وکار با خودکارسازی گردش کار"
                className="size-full max-h-[267px] object-cover grayscale-100 transition-all duration-300 group-hover:grayscale-50"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-primary to-transparent" />
              <div className="absolute inset-0 z-10 flex flex-col justify-between p-8 text-start">
                <Badge className="border border-background/20 bg-background/15 backdrop-blur-sm">
                  جدیدترین
                </Badge>
                <div className="flex flex-col gap-4">
                  <h2 className="text-xl font-medium text-background">
                    ساده‌سازی عملیات کسب‌وکار با خودکارسازی مؤثر گردش کار
                  </h2>
                  <div className="flex items-center gap-2">
                    <time className="text-sm text-background/80">
                      ۲۳ بهمن ۱۴۲
                    </time>
                    <Avatar className="size-6 border border-primary">
                      <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
                    </Avatar>
                  </div>
                </div>
              </div>
            </a>
            <a
              href="#"
              className="group relative isolate overflow-hidden rounded-2xl border border-border transition-transform duration-300 hover:-translate-y-0.5"
            >
              <img
                src="/block-media/shadcnblocks/block/photos/simone-hutsch-zr8IvMz0OWk-unsplash.jpg"
                alt="بهبود چشمگیر کارایی جستجو"
                className="size-full max-h-[267px] object-cover grayscale-100 transition-all duration-300 group-hover:grayscale-50"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-primary to-transparent" />
              <div className="absolute inset-0 z-10 flex flex-col justify-between p-8 text-start">
                <Badge className="border border-background/20 bg-background/15 backdrop-blur-sm">
                  جدیدترین
                </Badge>
                <div className="flex flex-col gap-4">
                  <h2 className="text-xl font-medium text-background">
                    افزایش کارایی کلی: چگونه کارایی جستجو را به‌طور چشمگیر
                    بهبود دادیم
                  </h2>
                  <div className="flex items-center gap-2">
                    <time className="text-sm text-background/80">
                      ۱۲ فروردین ۱۴۰۴
                    </time>
                    <Avatar className="size-6 border border-primary">
                      <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
                    </Avatar>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
        <div className="mt-24">
          <h2 className="mb-6 text-start text-xl font-medium md:text-3xl">
            آخرین به‌روزرسانی‌ها
          </h2>
          <Tabs
            defaultValue="all"
            className="border-b border-border"
            onValueChange={setSelectedCategory}
          >
            <TabsList className="flex h-auto gap-2 bg-background p-0">
              {CATEGORIES.map((category) => (
                <TabsTrigger
                  key={category.value}
                  value={category.value}
                  className="group relative py-2.5 data-[state=active]:!shadow-none"
                >
                  {category.label}
                  <span className="absolute -bottom-px group-data-[state=active]:h-px group-data-[state=active]:w-full group-data-[state=active]:bg-primary" />
                </TabsTrigger>
              ))}
            </TabsList>
          </Tabs>
          <div className="mt-4">
            {filteredBlogs.map((blog, idx) => (
              <a
                key={idx}
                href={blog.link}
                className="flex flex-col justify-between gap-4 border-b border-border py-6 text-start md:flex-row"
              >
                <h3 className="font-medium md:line-clamp-1">{blog.title}</h3>
                <div className="flex w-full shrink-0 grid-cols-3 justify-between gap-2 md:grid md:max-w-80">
                  <p className="text-sm text-muted-foreground">
                    {CATEGORY_LABELS[blog.category]}
                  </p>
                  <time className="text-sm text-muted-foreground">
                    {blog.date}
                  </time>
                  <div className="hidden items-center justify-end -space-x-2 md:flex">
                    {blog.author.map((author, authorIdx) => (
                      <Avatar
                        key={authorIdx}
                        className="size-6 border border-border"
                      >
                        <AvatarImage src={author} />
                      </Avatar>
                    ))}
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Resources2 };