import { Copy, ExternalLink, GitPullRequest, Maximize2 } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

const changes = [
  {
    title: "نسخه ۳.۰.۰: بازطراحی رابط فروش و یکپارچه‌سازی‌های جدید",
    date: "۲۵ اردیبهشت ۱۴۰۴",
    image:
      "/block-media/shadcnblocks/block/placeholder-2.svg",
    excerpt:
      "این انتشار عمده رابط کاربری را از نو طراحی کرده تا تجربه‌ای شهودی‌تر داشته باشید و یکپارچه‌سازی‌های قدرتمند جدید با سرویس‌های شخص ثالث محبوب اضافه شده است.",
    contributors: [
      "/block-media/shadcnblocks/block/avatar-5.webp",
      "/block-media/shadcnblocks/block/avatar-6.webp",
      "/block-media/shadcnblocks/block/avatar-1.webp",
      "/block-media/shadcnblocks/block/avatar-2.webp",
    ],
    link: "#",
    content: (
      <div className="prose dark:prose-invert">
        <h3>تجربه کاربری بازطراحی‌شده</h3>
        <p>
          رابط کاربری بر اساس بازخورد کاربران بازطراحی شده تا استفاده از سامانه سریع‌تر، ساده‌تر و یکپارچه‌تر باشد.
                        </p>
        <p>بهبودهای کلیدی بصری و کاربردی شامل:</p>
        <ul>
          <li>آیکون‌گرافی و تایپوگرافی مدرن</li>
          <li>ناوبری و معماری اطلاعات بهبودیافته</li>
          <li>گزینه‌های سفارشی‌سازی پیشرفته داشبورد</li>
        </ul>
        <h4>یکپارچه‌سازی‌های جدید</h4>
        <p>
          امکان اتصال مستقیم به سرویس‌های پرکاربرد برای خودکارسازی فرایندها و کاهش جابه‌جایی بین ابزارها فراهم شده است.
                        </p>
        <blockquote>
          این تغییرات با هدف افزایش سرعت انجام کارها و بهبود تجربه کاربران ارائه شده‌اند.
        </blockquote>
        <p>
          این تغییرات با هدف افزایش سرعت انجام کارها و بهبود تجربه کاربران ارائه شده‌اند.
                        </p>
        <table>
          <thead>
            <tr>
              <th>یکپارچه‌سازی</th>
              <th>وضعیت</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>پیام‌رسان تیمی</td>
              <td>منتشر شده</td>
            </tr>
            <tr>
              <td>فضای ابری</td>
              <td>منتشر شده</td>
            </tr>
            <tr>
              <td>مدیریت وظایف</td>
              <td>بتا</td>
            </tr>
          </tbody>
        </table>
        <p>
          فهرست کامل تغییرات را در فایل به‌روزشده{" "}
          <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
            RELEASE_NOTES.md
          </code>{" "}
          ببینید.
        </p>
        <p className="small">
          توجه: برخی یکپارچه‌سازی‌ها به‌صورت تدریجی در حال rollout هستند.
        </p>
        <p className="text-sm text-muted-foreground">
          مشتاقیم نظر شما را بشنویم!
        </p>
      </div>
    ),
  },
  {
    title: "نسخه ۲۹.۵: بهبود عملکرد و اتصال هوشمند",
    date: "۱۳ فروردین ۱۴۰۴",
    image:
      "/block-media/shadcnblocks/block/placeholder-3.svg",
    excerpt:
      "این انتشار بر بهبودهای قابل توجه عملکرد در سراسر پلتفرم و endpointهای API جدید برای انعطاف‌پذیری بیشتر توسعه‌دهندگان تمرکز دارد.",
    contributors: [
      "/block-media/shadcnblocks/block/avatar-3.webp",
      "/block-media/shadcnblocks/block/avatar-4.webp",
      "/block-media/shadcnblocks/block/avatar-5.webp",
      "/block-media/shadcnblocks/block/avatar-6.webp",
      "/block-media/shadcnblocks/block/avatar-7.webp",
    ],
    link: "#",
    content: (
      <div className="prose dark:prose-invert">
        <h3>عملکرد فوق‌العاده سریع</h3>
        <p>
          با بهینه‌سازی پردازش‌ها و پایگاه داده، سرعت بارگذاری صفحات و پاسخ‌دهی سامانه به شکل محسوسی افزایش یافته است.
                        </p>
        <p>شاخص‌های کلیدی عملکرد بهبود یافته:</p>
        <ul>
          <li>میانگین زمان بارگذاری صفحه ۳۰٪ کاهش یافت</li>
          <li>زمان پاسخ اتصال هوشمند اکنون ۲ برابر سریع‌تر است</li>
          <li>کاهش مصرف حافظه برای فرآیندهای پس‌زمینه</li>
        </ul>
        <h4>قابلیت‌های گسترده اتصال هوشمند</h4>
        <p>
          اتصال‌های جدید امکان مدیریت کاربران، دسترسی به گزارش‌های تحلیلی و توسعه یکپارچه‌سازی‌های سفارشی را فراهم می‌کنند.
                        </p>
        <blockquote>
          «تلخی کیفیت پایین، مدت‌ها بعد از شیرینی قیمت پایین فراموش
          می‌شود.»  Benjamin Franklin
        </blockquote>
        <p>تعهد ما به کیفیت و عملکرد همچنان پابرجاست.</p>
        <table>
          <thead>
            <tr>
              <th>بخش</th>
              <th>بهبود</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>بارگذاری داشبورد</td>
              <td>سرعت قابل توجه</td>
            </tr>
            <tr>
              <td>خروجی داده</td>
              <td>بهینه‌سازی شده</td>
            </tr>
          </tbody>
        </table>
        <p>
          جزئیات فنی را در پست مهندسی ما بخوانید:{" "}
          <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
            EngineeringDeepDive_v2.9.5.پی‌دی‌اف
          </code>
        </p>
        <p className="small">توجه: تغییرات اتصال هوشمند سازگار با نسخه‌های قبلی است.</p>
        <p className="text-sm text-muted-foreground">
          حمایت مداوم شما، موتور نوآوری ماست.
        </p>
      </div>
    ),
  },
];

interface Changelog6Props {
  className?: string;
}

const Changelog6 = ({ className }: Changelog6Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("overflow-clip py-32", className)}
    >
      <div className="container border-x border-border">
        <div className="relative flex flex-col gap-3 py-8">
          <div className="flex items-center gap-2">
            <GitPullRequest className="size-4" />
            <p className="text-sm font-medium">تاریخچه نسخه‌ها</p>
          </div>
          <h1 className="text-3xl font-medium lg:text-xl">
            جدیدترین بهبودها
            <br /> و اخبار پلتفرم
          </h1>
          <div className="absolute right-0 bottom-0 left-0 h-px w-[200vw] -translate-x-1/2 bg-border" />
          <div className="absolute top-0 right-0 left-0 h-px w-[200vw] -translate-x-1/2 bg-border" />
        </div>
        <div className="flex flex-col">
          {changes.map((change, idx) => (
            <Dialog key={idx}>
              <div className="relative flex w-full flex-col gap-4 py-16 lg:flex-row lg:gap-0">
                <div className="top-2 inset-s-0 mt-2 block h-fit lg:sticky">
                  <time className="w-36 text-sm font-medium text-muted-foreground lg:absolute">
                    {change.date}
                  </time>
                </div>
                <div className="flex max-w-prose flex-col gap-4 lg:mx-auto">
                  <h3 className="text-3xl font-medium lg:text-xl">
                    {change.title}
                  </h3>
                  <DialogTrigger asChild>
                    <img
                      src={change.image}
                      alt={change.title}
                      className="max-h-96 w-full cursor-pointer rounded-lg border border-border object-cover"
                    />
                  </DialogTrigger>
                  <p className="text-sm font-medium text-muted-foreground">
                    {change.excerpt}
                  </p>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-1">
                      <div className="flex items-center -space-x-2 rtl:space-x-reverse">
                        {change.contributors
                          .slice(0, 3)
                          .map((contributor, contributorIdx) => (
                            <img
                              key={contributorIdx}
                              src={contributor}
                              alt="مشارکت‌کننده"
                              className="size-6 rounded-full border border-border"
                            />
                          ))}
                      </div>
                      {change.contributors.length > 3 && (
                        <span className="text-sm font-medium text-muted-foreground">
                          +{change.contributors.length - 3} مشارکت‌کننده
                        </span>
                      )}
                    </div>
                    <div className="flex items-center gap-0.5">
                      <TooltipProvider>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <DialogTrigger asChild>
                              <Button
                                variant="ghost"
                                size="icon"
                                aria-label="نمایش انتشار کامل"
                              >
                                <Maximize2 className="size-4" />
                              </Button>
                            </DialogTrigger>
                          </TooltipTrigger>
                          <TooltipContent>
                            <p>نمایش انتشار کامل</p>
                          </TooltipContent>
                        </Tooltip>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Button
                              variant="ghost"
                              size="icon"
                              aria-label="کپی"
                            >
                              <Copy className="size-4" />
                            </Button>
                          </TooltipTrigger>
                          <TooltipContent>
                            <p>کپی</p>
                          </TooltipContent>
                        </Tooltip>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Button
                              variant="ghost"
                              size="icon"
                              aria-label="باز کردن در تب جدید"
                            >
                              <ExternalLink className="size-4" />
                            </Button>
                          </TooltipTrigger>
                          <TooltipContent>
                            <p>باز کردن در تب جدید</p>
                          </TooltipContent>
                        </Tooltip>
                      </TooltipProvider>
                    </div>
                  </div>
                </div>
                <div className="absolute right-0 bottom-0 left-0 h-px w-[200vw] -translate-x-1/2 bg-border" />
              </div>
              <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-prose">
                <DialogHeader>
                  <DialogTitle className="text-start">
                    {change.title}
                  </DialogTitle>
                  <DialogDescription className="text-start">
                    {change.excerpt}
                  </DialogDescription>
                </DialogHeader>
                <img
                  src={change.image}
                  alt={change.title}
                  className="max-h-96 w-full rounded-lg border border-border object-cover"
                />
                {change.content}
              </DialogContent>
            </Dialog>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Changelog6 };