import { ArrowUpRight } from "lucide-react";

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

export type ChangelogEntry = {
  version: string;
  date: string;
  title: string;
  description: string;
  items?: string[];
  image?: string;
  button?: {
    url: string;
    text: string;
  };
};

export interface Changelog1Props {
  className?: string;
  title?: string;
  description?: string;
  entries?: ChangelogEntry[];
}

export const defaultEntries: ChangelogEntry[] = [
  {
    version: "نسخه ۱۳.۰",
    date: "۲۵ آبان ۱۴۰۳",
    title: "داشبورد فروش پیشرفته",
    description:
      "داشبورد فروش بازطراحی شد تا تبدیل قیف، نمودار تعاملی و KPI تیم در یک نما تصمیم‌گیری را سریع‌تر کند.",
    items: [
      "نمودار تبدیل با به‌روزرسانی نزدیک به لحظه",
      "ویجت‌های قابل تنظیم برای داشبورد فروش",
      "خروجی گزارش فروش در قالب جدول، PDF و Excel",
      "قالب گزارش هفته‌ای و ماهانه برای مدیران فروش",
      "فیلتر بهتر بر اساس مرحله قیف، مالک و منبع",
    ],
    image:
      "/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg",
    button: {
      url: "https://ShadcnBlocks",
      text: "مشاهده جزئیات",
    },
  },
  {
    version: "نسخه ۱۲۵",
    date: "۱۶ مهر ۱۴۰۳",
    title: "انتشار اپلیکیشن موبایل",
    description:
      "اپلیکیشن موبایل منتشر شد تا بتوانید در هر زمان و هر مکان به امکانات پلتفرم دسترسی داشته باشید.",
    items: [
      "تجربه بومی موبایل برای بهره‌وری در هر مکان",
      "پشتیبانی از حالت آفلاین برای کار بدون اتصال اینترنت",
      "اعلان‌های فوری برای به‌روزرسانی‌های مهم",
      "احراز هویت بیومتریک برای امنیت بیشتر",
    ],
  },
  {
    version: "نسخه ۱۲۱",
    date: "۲ مهر ۱۴۰۳",
    title: "ویژگی‌های جدید و بهبودها",
    description:
      "در این صفحه، همه قابلیت‌های جدید، بهبودهای عملکرد و رفع اشکال‌های هر نسخه را به‌صورت شفاف منتشر می‌کنیم.",
    items: [
      "افزودن قابلیت خروجی گرفتن از داده‌ها",
      "بهبود عملکرد و سرعت",
      "رفع باگ‌ها و مشکلات جزئی",
      "افزودن قابلیت وارد کردن داده‌ها",
    ],
    image:
      "/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg",
  },
  {
    version: "نسخه ۱۰.۰",
    date: "۱۰ شهریور ۱۴۰۳",
    title: "اولین نسخه پلتفرم",
    description:
      "اولین نسخه پلتفرم با امکانات مدیریت پروژه، همکاری تیمی و پیگیری وظایف منتشر شد و از این پس به‌صورت مستمر توسعه خواهد یافت.",
    image:
      "/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg",
    button: {
      url: "https://ShadcnBlocks",
      text: "مشاهده جزئیات",
    },
  },
];

const Changelog1 = ({
  title = "تاریخچه نسخه‌ها",
  description = "به‌روزرسانی‌های پلتفرم فروش و CRM را دنبال کنید.",
  entries = defaultEntries,
  className,
}: Changelog1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-3xl">
          <h1 className="mb-4 text-3xl font-bold tracking-tight md:text-2xll">
            {title}
          </h1>
          <p className="mb-6 text-base text-muted-foreground md:text-lg">
            {description}
          </p>
        </div>
        <div className="mx-auto mt-16 max-w-3xl space-y-16 md:mt-24 md:space-y-24">
          {entries.map((entry, index) => (
            <div
              key={index}
              className="relative flex flex-col gap-4 md:flex-row md:gap-16"
            >
              <div className="top-8 flex h-min w-64 shrink-0 items-center gap-4 md:sticky">
                <Badge variant="secondary" className="text-xs">
                  {entry.version}
                </Badge>
                <span className="text-xs font-medium text-muted-foreground">
                  {entry.date}
                </span>
              </div>
              <div className="flex flex-col">
                <h2 className="mb-3 text-lg leading-tight font-bold text-foreground/90 md:text-xl">
                  {entry.title}
                </h2>
                <p className="text-sm text-muted-foreground md:text-base">
                  {entry.description}
                </p>
                {entry.items && entry.items.length > 0 && (
                  <ul className="mt-4 ms-4 space-y-1.5 text-sm text-muted-foreground md:text-base">
                    {entry.items.map((item, itemIndex) => (
                      <li key={itemIndex} className="list-disc">
                        {item}
                      </li>
                    ))}
                  </ul>
                )}
                {entry.image && (
                  <img
                    src={entry.image}
                    alt={`تصویر ${entry.title}`}
                    className="mt-8 w-full rounded-lg object-cover"
                  />
                )}
                {entry.button && (
                  <Button variant="link" className="mt-4 self-start" asChild>
                    <a
                      href={entry.button.url}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      {entry.button.text}
                      <ArrowUpRight className="ms-2 size-4 rtl:rotate-180" />
                    </a>
                  </Button>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Changelog1 };