"use client";

import { Download } from "lucide-react";
import { FaApple, FaGooglePlay, FaLinux, FaWindows } from "react-icons/fa";
import { SiDebian } from "react-icons/si";

import { GlareCard } from "@/components/aceternity/glare-card";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const platformLabels: Record<string, { label: string; dir?: "ltr" }> = {
  ios: { label: "iOS", dir: "ltr" },
  android: { label: "اندروید" },
  windows: { label: "Windows", dir: "ltr" },
  mac: { label: "macOS", dir: "ltr" },
  linux: { label: "Linux", dir: "ltr" },
};

type DownloadVariant = {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  dir?: "ltr";
};

const downloadData: Record<string, DownloadVariant[]> = {
  ios: [{ icon: FaApple, label: "اپ استور" }],
  android: [
    { icon: FaGooglePlay, label: "گوگل پلی" },
    { icon: Download, label: "APK مستقیم", dir: "ltr" },
  ],
  windows: [
    { icon: FaWindows, label: "نصب‌کننده (.exe)", dir: "ltr" },
    { icon: Download, label: "نسخه قابل‌حمل (.zip)", dir: "ltr" },
  ],
  mac: [
    { icon: FaApple, label: "DMG", dir: "ltr" },
    { icon: Download, label: "Universal (.zip)", dir: "ltr" },
  ],
  linux: [
    { icon: FaLinux, label: "AppImage", dir: "ltr" },
    { icon: SiDebian, label: "Debian (.deb)", dir: "ltr" },
    { icon: Download, label: "Tarball (.tar.gz)", dir: "ltr" },
  ],
};

interface Download8Props {
  className?: string;
}

const Download8 = ({ className }: Download8Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center justify-center gap-11">
          <div className="[&>div]:aspect-square [&>div]:size-56 sm:[&>div]:size-64 [&>div>div]:border-border">
            <GlareCard className="flex flex-col items-center justify-center bg-primary dark:bg-background">
              <div className="absolute inset-0 flex h-full w-full items-center justify-center p-8">
                <img
                  className="object-cover opacity-85 invert"
                  alt="لوگو"
                  src="/block-media/shadcnblocks/block/block-1.svg"
                />
              </div>
            </GlareCard>
          </div>
          <h1 className="text-xl font-semibold sm:text-2xll" dir="rtl">
            اپلیکیشن فروش
          </h1>
        </div>
        <div className="mt-11 flex flex-col items-center justify-center gap-4">
          <Button size="lg" className="inline-flex items-center gap-2">
            دانلود (تشخیص سیستم‌عامل)
            <Download />
          </Button>
          <p className="text-sm text-muted-foreground">
            آخرین به‌روزرسانی: ۲۳ شهریور ۱۴۰۴
          </p>
        </div>
        <div className="mt-8">
          <div className="mx-auto max-w-2xl">
            <div className="divide-y divide-border rounded-lg border border-border">
              {Object.entries(downloadData).map(([platform, variants]) => {
                const platformMeta = platformLabels[platform];
                return (
                  <div
                    key={platform}
                    className="grid grid-cols-2 gap-4 px-4 py-3"
                  >
                    <span
                      className="text-sm font-medium"
                      dir={platformMeta?.dir}
                    >
                      {platformMeta?.label ?? platform}
                    </span>
                    <div className="flex flex-col gap-2">
                      {variants.map((variant, variantIdx) => {
                        const IconComponent = variant.icon;
                        return (
                          <Button
                            key={variantIdx}
                            size="sm"
                            variant="outline"
                            dir={variant.dir}
                            className="inline-flex cursor-pointer items-center gap-2"
                          >
                            {variant.label}
                            <IconComponent className="size-4 shrink-0" />
                          </Button>
                        );
                      })}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Download8 };