"use client";

import Link from "next/link";
import Image from "next/image";
import { ArrowRight } from "lucide-react";
import { siteConfig } from "@/lib/config/site";
import { useEffect, useState } from "react";

const GithubIcon = ({ className }: { className?: string }) => (
  <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
    <path fillRule="evenodd" clipRule="evenodd" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.44 9.8 8.21 11.39.6.11.82-.26.82-.58v-2.23c-3.34.73-4.04-1.42-4.04-1.42-.55-1.39-1.33-1.76-1.33-1.76-1.09-.74.08-.73.08-.73 1.2.08 1.84 1.24 1.84 1.24 1.07 1.83 2.81 1.3 3.49 1 .11-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.12-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 6.01 0c2.29-1.55 3.3-1.23 3.3-1.23.66 1.66.24 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.82 1.1.82 2.22v3.29c0 .32.19.69.8.58C20.56 21.8 24 17.31 24 12c0-6.63-5.37-12-12-12z" />
  </svg>
);

const YoutubeIcon = ({ className }: { className?: string }) => (
  <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14C19.47 3.5 12 3.5 12 3.5s-7.47 0-9.38.55A3.02 3.02 0 0 0 .5 6.19C0 8.1 0 12 0 12s0 3.9.5 5.81a3.02 3.02 0 0 0 2.12 2.14C4.53 20.5 12 20.5 12 20.5s7.47 0 9.38-.55a3.02 3.02 0 0 0 2.12-2.14C24 15.9 24 12 24 12s0-3.9-.5-5.81zM9.75 15.5V8.5l6.5 3.5-6.5 3.5z" />
  </svg>
);

const LinkedinIcon = ({ className }: { className?: string }) => (
  <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.37V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM3.56 20.45h3.56V9H3.56v11.45zM22.23 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.46c.98 0 1.77-.77 1.77-1.73V1.73C24 .77 23.21 0 22.23 0z" />
  </svg>
);

const InstagramIcon = ({ className }: { className?: string }) => (
  <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z" />
  </svg>
);

const DiscordIcon = ({ className }: { className?: string }) => (
  <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057c.002.022.015.043.03.056a19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
  </svg>
);

const { hosting: hostingLinks, company: companyLinks, legal: legalLinks } = siteConfig.footer.links;

const paymentMethods = [
  { name: "QRIS",       src: "/asset/images/icons/methods/qris.svg" },
  { name: "Visa",       src: "/asset/images/icons/methods/visa.svg" },
  { name: "Mastercard", src: "/asset/images/icons/methods/mastercard.svg" },
  { name: "Dana",       src: "/asset/images/icons/methods/dana.svg" },
  { name: "OVO",        src: "/asset/images/icons/methods/ovo.svg" },
  { name: "BCA",        src: "/asset/images/icons/methods/bca.svg" },
  { name: "GoPay",      src: "/asset/images/icons/methods/gopay.svg" },
  { name: "ShopeePay",  src: "/asset/images/icons/methods/spay.svg" },
  { name: "Indomaret",  src: "/asset/images/icons/methods/indomaret.svg" },
  { name: "Alfamart",   src: "/asset/images/icons/methods/alfamart.svg" },
];

function SystemStatus() {
  const [status, setStatus] = useState<"operational" | "degraded" | "outage" | "loading">("loading");

  useEffect(() => {
    fetch("/api/uptime")
      .then((r) => r.json())
      .then((data) => {
        const monitors: { status: number }[] = data.monitors ?? [];
        if (monitors.length === 0) { setStatus("operational"); return; }
        if (monitors.some((m) => m.status === 9))  { setStatus("outage");      return; }
        if (monitors.some((m) => m.status === 8))  { setStatus("degraded");    return; }
        setStatus("operational");
      })
      .catch(() => setStatus("operational"));
  }, []);

  const map = {
    loading:     { dot: "bg-zinc-500",   ping: "bg-zinc-400",   label: "Checking status…",        text: "text-zinc-400" },
    operational: { dot: "bg-emerald-500", ping: "bg-emerald-400", label: "All Systems Operational", text: "text-zinc-300" },
    degraded:    { dot: "bg-amber-500",   ping: "bg-amber-400",   label: "Degraded Performance",    text: "text-amber-300" },
    outage:      { dot: "bg-rose-500",    ping: "bg-rose-400",    label: "System Outage",           text: "text-rose-300" },
  } as const;

  const s = map[status];

  return (
    <a href="/status" className="flex items-center gap-2.5 w-fit group">
      <span className="relative flex h-2 w-2">
        <span className={`animate-ping absolute inline-flex h-full w-full rounded-full ${s.ping} opacity-75`} />
        <span className={`relative inline-flex rounded-full h-2 w-2 ${s.dot}`} />
      </span>
      <span className={`text-xs font-semibold ${s.text} group-hover:underline underline-offset-2 transition-colors`}>
        {s.label}
      </span>
    </a>
  );
}

function FooterLinkList({
  title,
  links,
  underline,
}: {
  title: string;
  links: readonly { label: string; href: string }[];
  underline?: boolean;
}) {
  return (
    <div>
      <h4 className="text-sm font-bold text-white mb-5 tracking-tight">{title}</h4>
      <ul className="space-y-3">
        {links.map((item) => (
          <li key={item.href}>
            {underline ? (
              <Link
                href={item.href}
                className="text-sm text-content-muted hover:text-zinc-300 hover:underline underline-offset-4 decoration-zinc-700 transition-all duration-200"
              >
                {item.label}
              </Link>
            ) : (
              <Link
                href={item.href}
                className="group flex items-center gap-1.5 text-sm text-content-muted hover:text-accent-text transition-colors duration-200 w-fit"
              >
                <ArrowRight className="w-3 h-3 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200 text-accent-hover" />
                {item.label}
              </Link>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

function SocialLink({
  href,
  icon,
  label,
}: {
  href: string;
  icon: React.ReactNode;
  label: string;
}) {
  return (
    <Link
      href={href}
      target="_blank"
      aria-label={label}
      className="p-2 rounded-lg bg-zinc-900 border border-border/80 text-content-muted hover:bg-zinc-800 hover:text-white hover:border-border-hover transition-all duration-200"
    >
      {icon}
    </Link>
  );
}

export default function Footer() {
  return (
    <footer
      className="w-full pt-20 pb-10 px-6 lg:px-12 relative overflow-hidden border-t border-border/80 font-sans"
      style={{ background: "var(--bg-base)" }}
    >
      <div className="max-w-7xl mx-auto relative z-10">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-10 lg:gap-8 mb-16">

          <div className="lg:col-span-4 space-y-6">
            <Link href="/" className="flex items-center gap-2.5 w-fit group">
              <div className="relative w-8 h-8">
                <Image src={siteConfig.logo} alt={`${siteConfig.name} Logo`} fill className="object-contain" />
              </div>
              <h4 className="text-xl font-bold text-white tracking-tight group-hover:text-accent-text transition-colors duration-200">
                {siteConfig.name}
              </h4>
            </Link>

            <p className="text-sm text-content-muted leading-relaxed max-w-xs">
              {siteConfig.description}
            </p>

            <SystemStatus />
          </div>

          <div className="lg:col-span-3 lg:pl-8">
            <FooterLinkList title="Hosting" links={hostingLinks} />
          </div>
          <div className="lg:col-span-2">
            <FooterLinkList title="Company" links={companyLinks} />
          </div>
          <div className="lg:col-span-3">
            <FooterLinkList title="Legal" links={legalLinks} underline />
          </div>
        </div>

        <div className="pt-8 border-t border-border/80 flex flex-col gap-6">

          <div className="flex flex-wrap items-center justify-center lg:justify-between gap-4">
            <span className="text-xs font-bold text-content-subtle uppercase tracking-widest hidden lg:block">
              Accepted Payments
            </span>
            <div className="flex flex-wrap justify-center gap-4 grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all duration-500">
              {paymentMethods.map((method) => (
                <div
                  key={method.name}
                  className="relative h-6 w-10 md:h-7 md:w-12"
                  title={method.name}
                >
                  <Image
                    src={method.src}
                    alt={method.name}
                    fill
                    className="object-contain"
                  />
                </div>
              ))}
            </div>
          </div>

          <div className="pt-4 border-t border-border/80 flex flex-col sm:flex-row justify-between items-center gap-4">
            <p className="text-xs text-content-subtle">
              &copy; {new Date().getFullYear()} {siteConfig.fullName}. All rights reserved.
            </p>
            <div className="flex gap-2">
              <SocialLink href="/discord"                   icon={<DiscordIcon   className="w-4 h-4" />} label="Discord" />
              <SocialLink href={siteConfig.social.instagram} icon={<InstagramIcon className="w-4 h-4" />} label="Instagram" />
              <SocialLink href={siteConfig.social.youtube}   icon={<YoutubeIcon   className="w-4 h-4" />} label="YouTube" />
              <SocialLink href={siteConfig.social.github}    icon={<GithubIcon    className="w-4 h-4" />} label="GitHub" />
            </div>
          </div>

        </div>
      </div>
    </footer>
  );
}