'use client';

import { motion } from 'framer-motion';
import { MessageCircle } from 'lucide-react';
import { toast } from 'sonner';

const currentYear = new Date().getFullYear();

const footerData = {
  sections: [
    {
      title: 'Server',
      links: [
        { text: 'Home', href: '/' },
        { text: 'Status', href: '/#server-status' },
      ],
    },
    {
      title: 'Community',
      links: [
        { text: 'Discord', href: 'https://discord.gg/58FnVzmzrS', external: true },
        { text: 'Server IP', href: '#', isButton: true },
      ],
    },
    {
      title: 'Info',
      links: [
        { text: 'Version: 1.21.x', href: '#', isStatic: true },
        { text: 'Difficulty: Hard', href: '#', isStatic: true },
      ],
    },
  ],
  title: 'BiohazardVFX',
  subtitle: 'Minecraft SMP Server',
  copyright: `©${currentYear} BiohazardVFX. All rights reserved.`,
};

export function CustomFooter() {
  const handleCopyIP = async () => {
    try {
      await navigator.clipboard.writeText('minecraft.biohazardvfx.com');
      toast.success('Server IP copied to clipboard!');
    } catch {
      toast.error('Failed to copy IP address');
    }
  };

  return (
    <div className="relative h-[70vh]" style={{ clipPath: 'polygon(0% 0, 100% 0%, 100% 100%, 0 100%)' }}>
      <div className="relative h-[calc(100vh+70vh)] -top-[100vh]">
        <div className="h-[70vh] sticky top-[calc(100vh-70vh)]">
          <motion.div
            initial="hidden"
            animate="visible"
            variants={{
              hidden: { opacity: 0, y: 50 },
              visible: {
                opacity: 1,
                y: 0,
                transition: {
                  duration: 0.8,
                  ease: 'easeOut',
                  staggerChildren: 0.1,
                },
              },
            }}
            className="bg-background/96 backdrop-blur-xl border-t border-white/10 py-8 sm:py-10 lg:py-12 px-6 sm:px-10 lg:px-14 h-full w-full flex flex-col justify-between relative overflow-hidden"
          >

            {/* Navigation Section */}
            <motion.div className="relative z-10">
              <div className="grid grid-cols-2 md:grid-cols-3 gap-6 md:gap-12 lg:gap-20">
                {footerData.sections.map((section, index) => (
                  <motion.div
                    key={section.title}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.3 + index * 0.1, duration: 0.6 }}
                    className="flex flex-col gap-2"
                  >
                    <h3 className="mb-2 uppercase text-muted-foreground text-xs font-semibold tracking-[0.35em] border-b border-white/10 pb-1 hover:text-foreground transition-colors duration-300">
                      {section.title}
                    </h3>
                    {section.links.map((link, linkIndex) => {
                      if ('external' in link && link.external) {
                        return (
                          <motion.a
                            key={linkIndex}
                            href={link.href}
                            target="_blank"
                            rel="noopener noreferrer"
                            whileHover={{ x: 8 }}
                            className="text-muted-foreground hover:text-foreground transition-colors duration-300 text-xs md:text-sm group relative"
                          >
                            <span className="relative">
                              {link.text}
                              <motion.span
                                className="absolute bottom-0 left-0 h-0.5 bg-primary"
                                initial={{ width: 0 }}
                                whileHover={{ width: '100%' }}
                                transition={{ duration: 0.3 }}
                              />
                            </span>
                          </motion.a>
                        );
                      } else if ('isButton' in link && link.isButton) {
                        return (
                          <motion.button
                            key={linkIndex}
                            onClick={handleCopyIP}
                            whileHover={{ x: 8 }}
                            className="text-muted-foreground hover:text-foreground transition-colors duration-300 text-xs md:text-sm text-left group relative"
                          >
                            <span className="relative">
                              {link.text}
                              <motion.span
                                className="absolute bottom-0 left-0 h-0.5 bg-primary"
                                initial={{ width: 0 }}
                                whileHover={{ width: '100%' }}
                                transition={{ duration: 0.3 }}
                              />
                            </span>
                          </motion.button>
                        );
                      } else if ('isStatic' in link && link.isStatic) {
                        return (
                          <span
                            key={linkIndex}
                            className="text-muted-foreground text-xs md:text-sm"
                          >
                            {link.text}
                          </span>
                        );
                      } else {
                        return (
                          <motion.a
                            key={linkIndex}
                            href={link.href}
                            whileHover={{ x: 8 }}
                            className="text-muted-foreground hover:text-foreground transition-colors duration-300 text-xs md:text-sm group relative"
                          >
                            <span className="relative">
                              {link.text}
                              <motion.span
                                className="absolute bottom-0 left-0 h-0.5 bg-primary"
                                initial={{ width: 0 }}
                                whileHover={{ width: '100%' }}
                                transition={{ duration: 0.3 }}
                              />
                            </span>
                          </motion.a>
                        );
                      }
                    })}
                  </motion.div>
                ))}
              </div>
            </motion.div>

            {/* Footer Bottom Section */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.8, duration: 0.8 }}
              className="flex flex-col md:flex-row justify-between items-start md:items-end relative z-10 gap-4 md:gap-6 mt-6"
            >
              <div className="flex-1">
                <motion.h1
                  initial={{ opacity: 0, x: -50 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 1, duration: 0.8 }}
                  whileHover={{ scale: 1.02 }}
                  className="text-[12vw] md:text-[10vw] lg:text-[8vw] xl:text-[6vw] leading-[0.8] text-foreground cursor-default"
                >
                  {footerData.title}
                </motion.h1>
                <motion.div
                  initial={{ opacity: 0, width: 0 }}
                  animate={{ opacity: 1, width: 'auto' }}
                  transition={{ delay: 1.2, duration: 0.6 }}
                  className="flex items-center gap-3 md:gap-4 mt-3 md:mt-4"
                >
                  <motion.div
                    className="w-8 md:w-12 h-0.5 bg-gradient-to-r from-primary to-secondary"
                    animate={{ scaleX: [1, 1.2, 1] }}
                    transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, ease: 'easeInOut' }}
                  />
                  <motion.p
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ delay: 1.4, duration: 0.5 }}
                    className="text-muted-foreground text-xs md:text-sm hover:text-foreground transition-colors duration-300"
                  >
                    {footerData.subtitle}
                  </motion.p>
                </motion.div>
              </div>

              <motion.div
                initial={{ opacity: 0, x: 50 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 1.6, duration: 0.6 }}
                className="text-left md:text-right"
              >
                <motion.p
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ delay: 1.8, duration: 0.5 }}
                  className="text-muted-foreground text-xs md:text-sm mb-2 md:mb-3 hover:text-foreground transition-colors duration-300"
                >
                  {footerData.copyright}
                </motion.p>
                <motion.a
                  href="https://discord.gg/58FnVzmzrS"
                  target="_blank"
                  rel="noopener noreferrer"
                  whileHover={{ scale: 1.1 }}
                  whileTap={{ scale: 0.9 }}
                  className="inline-flex items-center gap-2 w-8 h-8 md:w-10 md:h-10 rounded-full border border-white/10 bg-background/50 hover:bg-primary hover:border-primary/50 transition-all duration-300 justify-center backdrop-blur-sm"
                  aria-label="Join Discord"
                >
                  <MessageCircle className="h-4 w-4 md:h-5 md:w-5 text-muted-foreground group-hover:text-primary-foreground transition-colors duration-300" />
                </motion.a>
              </motion.div>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </div>
  );
}
