"use client";

// Добавили импорт Variants
import { motion, Variants } from "framer-motion";
import { Button } from "@/components/ui/button";
import {
  Monitor,
  Smartphone,
  Terminal,
  Apple,
  Download,
  ExternalLink,
  Bell,
} from "lucide-react";
import { Dictionary } from "@/lib/IDict";

export function DownloadClient({ dict }: { dict: Dictionary["download"] }) {
  const platforms = [
    {
      id: "windows",
      name: "Windows",
      version: dict.platforms.windows,
      icon: <Monitor className="w-8 h-8" />,
      status: "active",
      color: "text-primary",
      shadow: "shadow-[0_0_20px_rgba(0,240,255,0.2)]",
      borderHover: "hover:border-primary/50",
    },
    {
      id: "android",
      name: "Android",
      version: dict.platforms.android,
      icon: <Smartphone className="w-8 h-8" />,
      status: "active",
      color: "text-secondary",
      shadow: "shadow-[0_0_20px_rgba(112,0,255,0.2)]",
      borderHover: "hover:border-secondary/50",
    },
    {
      id: "linux",
      name: "Linux",
      version: dict.platforms.linux,
      icon: <Terminal className="w-8 h-8" />,
      status: "active",
      color: "text-primary",
      shadow: "shadow-[0_0_20px_rgba(0,240,255,0.2)]",
      borderHover: "hover:border-primary/50",
    },
    {
      id: "macos",
      name: "macOS",
      version: dict.platforms.macos,
      icon: <Apple className="w-8 h-8" />,
      status: "dev",
      color: "text-muted-foreground",
      shadow: "shadow-none",
      borderHover: "hover:border-border",
    },
    {
      id: "ios",
      name: "iOS",
      version: dict.platforms.ios,
      icon: <Apple className="w-8 h-8" />,
      status: "dev",
      color: "text-muted-foreground",
      shadow: "shadow-none",
      borderHover: "hover:border-border",
    },
  ];

  // Явно указываем тип Variants
  const containerVariants: Variants = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: { staggerChildren: 0.1 },
    },
  };

  // Явно указываем тип Variants
  const itemVariants: Variants = {
    hidden: { opacity: 0, y: 40 },
    show: {
      opacity: 1,
      y: 0,
      transition: { type: "spring", stiffness: 300, damping: 24 },
    },
  };

  return (
    <div className="min-h-screen pt-32 pb-24 px-4 container mx-auto max-w-5xl relative">
      {/* Декоративное свечение */}
      <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[100vw] md:w-[600px] h-[400px] bg-primary/5 blur-[120px] rounded-full pointer-events-none -z-10" />

      <div className="text-center mb-16">
        <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight mb-4 text-foreground">
          {dict.title}
        </h1>
        <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
          {dict.subtitle}
        </p>
      </div>

      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="show"
        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
      >
        {platforms.map((platform) => (
          <motion.div
            key={platform.id}
            variants={itemVariants}
            className={`bg-card/40 backdrop-blur-xl border border-border/50 rounded-[2rem] p-8 flex flex-col transition-all duration-500 relative overflow-hidden group ${platform.borderHover}`}
          >
            {/* Статус бейдж */}
            <div className="absolute top-6 right-6">
              {platform.status === "active" ? (
                <div className="px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-wider">
                  {dict.badges.active}
                </div>
              ) : (
                <div className="px-3 py-1 rounded-full bg-muted border border-border text-muted-foreground text-xs font-bold uppercase tracking-wider">
                  {dict.badges.dev}
                </div>
              )}
            </div>

            {/* Иконка */}
            <div
              className={`mb-6 p-4 rounded-2xl bg-background/50 inline-flex border border-border/50 ${platform.color} ${platform.shadow} transition-all duration-300`}
            >
              {platform.icon}
            </div>

            <h3 className="text-2xl font-bold text-foreground mb-1">
              {platform.name}
            </h3>
            <p className="text-sm text-muted-foreground mb-8">
              {platform.version}
            </p>

            {/* Кнопки действий */}
            <div className="mt-auto flex flex-col gap-3">
              {platform.status === "active" ? (
                <>
                  <Button className="w-full rounded-xl font-bold gap-2">
                    <Download className="w-4 h-4" />
                    {dict.buttons.direct}
                  </Button>
                  <Button
                    variant="outline"
                    className="w-full rounded-xl gap-2 border-border/50 bg-background/50 text-muted-foreground hover:text-foreground transition-colors"
                  >
                    <ExternalLink className="w-4 h-4" />
                    {platform.id === "android"
                      ? dict.buttons.store
                      : dict.buttons.github}
                  </Button>
                </>
              ) : (
                <Button
                  variant="secondary"
                  disabled
                  className="w-full rounded-xl gap-2 opacity-50 cursor-not-allowed"
                >
                  <Bell className="w-4 h-4" />
                  {dict.buttons.notify}
                </Button>
              )}
            </div>
          </motion.div>
        ))}
      </motion.div>
    </div>
  );
}