"use client";

import { Download, ExternalLink } from "lucide-react";
import { useState } from "react";
import { FaLinux, FaWindows } from "react-icons/fa";

import {
  Snippet,
  SnippetCopyButton,
  SnippetHeader,
  SnippetTabsContent,
  SnippetTabsList,
  SnippetTabsTrigger,
} from "@/components/kibo-ui/snippet";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { TabsContent } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

interface Download5Props {
  className?: string;
}

const Download5 = ({ className }: Download5Props) => {
  const [linuxVersion, setLinuxVersion] = useState("stable");

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-16 md:flex-row md:items-start">
          <div className="rounded-lg border border-border bg-background p-1.5">
            <div className="rounded-md border border-border bg-primary p-8">
              <img
                src="/block-media/shadcnblocks/block/block-1.svg"
                alt="لوگو"
                className="w-32 invert"
              />
            </div>
          </div>
          <div className="flex flex-1 flex-col gap-4">
            <div>
              <div className="flex flex-col gap-1">
                <h1 className="text-3xl font-medium tracking-tighter">
                  نصب نسخه پایدار
                </h1>
                <time
                  dateTime="2025-08-22"
                  className="text-sm text-muted-foreground"
                >
                  ۲۲ مرداد ۱۴۰۴
                </time>
              </div>
            </div>
            <div className="grid gap-4 lg:grid-cols-2">
              <div className="grid gap-2">
                <div className="flex items-center gap-2">
                  <FaLinux />
                  <p className="text-sm" dir="rtl">
                    Linux
                  </p>
                </div>
                <Snippet
                  defaultValue="stable"
                  value={linuxVersion}
                  onValueChange={setLinuxVersion}
                >
                  <SnippetHeader>
                    <SnippetTabsList>
                      <SnippetTabsTrigger value="stable">
                        <span>پایدار</span>
                      </SnippetTabsTrigger>
                      <SnippetTabsTrigger value="preview">
                        <span>پیش‌نمایش</span>
                      </SnippetTabsTrigger>
                    </SnippetTabsList>
                    <SnippetCopyButton
                      onCopy={() =>
                        console.log(
                          'دستور "curl -f https://novasales.app/install.sh | bash" در حافظه کپی شد',
                        )
                      }
                      onError={() =>
                        console.error(
                          'کپی دستور "curl -f https://novasales.app/install.sh | bash" ناموفق بود',
                        )
                      }
                      value={
                        linuxVersion === "stable"
                          ? "curl -f https://ShadcnBlocks/install.sh | bash"
                          : "curl -f https://ShadcnBlocks/preview.sh | bash"
                      }
                    />
                  </SnippetHeader>
                  <SnippetTabsContent value="stable" dir="rtl">
                    curl -f https://novasales.app/install.sh | bash
                  </SnippetTabsContent>
                  <SnippetTabsContent value="preview" dir="rtl">
                    curl -f https://novasales.app/preview.sh | bash
                  </SnippetTabsContent>
                </Snippet>
                  <p className="text-xs text-muted-foreground">
                    همچنین می‌توانید بسته نصب را{" "}
                    <a href="https://ShadcnBlocks" className="underline">
                      دستی
                    </a>{" "}
                    دانلود کنید.
                  </p>
              </div>
              <div className="grid gap-2">
                <div className="flex items-center gap-2">
                  <img
                    src="/block-media/shadcnblocks/block/platforms/macos.png"
                    alt="macOS"
                    className="h-4 w-4 grayscale"
                  />
                  <p className="text-sm" dir="rtl">
                    macOS
                  </p>
                </div>
                <Snippet defaultValue="apple-silicon">
                  <SnippetHeader>
                    <SnippetTabsList>
                      <SnippetTabsTrigger value="apple-silicon">
                        <span dir="rtl">پردازنده Apple Silicon</span>
                      </SnippetTabsTrigger>
                      <SnippetTabsTrigger value="intel">
                        <span dir="rtl">پردازنده Intel</span>
                      </SnippetTabsTrigger>
                    </SnippetTabsList>
                  </SnippetHeader>
                  <TabsContent
                    value="apple-silicon"
                    className="mt-0 bg-background text-sm"
                  >
                    <button className="flex h-[52px] w-full items-center justify-between px-4 text-start transition-colors hover:bg-accent">
                      <div className="flex flex-col">
                        <p className="font-bold">دانلود بسته نصب</p>
                        <p className="text-xs" dir="rtl">
                          پردازنده Apple Silicon
                        </p>
                      </div>
                      <div className="flex items-center gap-2">
                        <p className="text-xs">۱۲ گیگابایت</p>
                        <Download className="size-4" />
                      </div>
                    </button>
                  </TabsContent>
                  <TabsContent
                    value="intel"
                    className="mt-0 bg-background text-sm"
                  >
                    <button className="flex h-[52px] w-full items-center justify-between px-4 text-start transition-colors hover:bg-accent">
                      <div className="flex flex-col">
                        <p className="font-bold">دانلود بسته نصب</p>
                        <p className="text-xs" dir="rtl">
                          پردازنده Intel
                        </p>
                      </div>
                      <div className="flex items-center gap-2">
                        <p className="text-xs">۱۲ گیگابایت</p>
                        <Download className="size-4" />
                      </div>
                    </button>
                  </TabsContent>
                </Snippet>
                <p className="text-xs text-muted-foreground">
                  نیاز به نسخه {" "}
                  <span dir="rtl" className="inline-block">
                    10.15
                  </span>{" "}
                  یا جدیدتر
                </p>
              </div>
              <div className="grid gap-2">
                <div className="flex items-center gap-2">
                  <FaWindows />
                  <p className="text-sm" dir="rtl">
                    Windows
                  </p>
                </div>
                <Button variant="outline" className="w-full justify-between">
                  ثبت‌نام در لیست انتظار
                  <ExternalLink className="size-3.5" />
                </Button>
                <p className="text-xs text-muted-foreground">
                  یا می‌توانید از{" "}
                  <a href="#" className="underline">
                    کد منبع
                  </a>{" "}
                  بسازید.
                </p>
              </div>
            </div>
            <div>
              <Separator />
              <p className="mt-4 text-xs text-muted-foreground">
                با دانلود و استفاده از نرم‌افزار ما، با{" "}
                <a href="#" className="underline">
                  شرایط و ضوابط
                </a>{" "}
                آن موافقت می‌کنید.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Download5 };