"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import { motion } from "motion/react";
import { ArrowRight, Loader2, Headset } from "lucide-react";
import { cn } from "@/lib/utils";

const DiscordLogo = ({ className }: { className?: string }) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36" className={className} fill="currentColor">
    <path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.11,77.11,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1,105.25,105.25,0,0,0,32.19-16.14c2.64-27.38-4.66-53.23-18.9-72.13ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" />
  </svg>
);

type DiscordMember = { id: string; username: string; avatar_url: string; status: "online" | "idle" | "dnd"; };
type DiscordWidget = { name: string; instant_invite: string; presence_count: number; members: DiscordMember[]; };


export default function DiscordSection() {
  const [data, setData]       = useState<DiscordWidget | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState(false);

  useEffect(() => {
    fetch(`https://discord.com/api/guilds/${process.env.NEXT_PUBLIC_DISCORD_GUILD_ID}/widget.json`)
      .then((res) => res.json())
      .then((json) => {
        if (json.code) { setError(true); return; }
        setData(json);
      })
      .catch(() => setError(true))
      .finally(() => setLoading(false));
  }, []);

  const activeMembers  = data?.members?.filter((m) => m.status !== "dnd") || [];
  const displayMembers = activeMembers.slice(0, 14);

  return (
    <section className="relative w-full py-24 md:py-32 px-6 lg:px-12 overflow-hidden font-sans border-t border-border/80">
      <div className="max-w-7xl mx-auto relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center">

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, ease: "easeOut" }}
        >
          <div className="flex items-center gap-3 mb-6">
            <span className="block h-0.5 w-6 bg-accent-hover rounded-full" />
            <p className="text-xs font-bold text-accent-text uppercase tracking-widest">Community</p>
          </div>
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-[1.1] tracking-tight mb-6">
            Join the <br />
            <span className="text-accent-text">community.</span>
          </h2>
          <p className="text-content-dim max-w-md text-[1rem] md:text-lg leading-relaxed mb-8">
            Exclusive vouchers, maintenance updates, giveaways, and direct technical help from{" "}
            {!loading && !error && data?.presence_count != null ? (
              <span className="text-white font-medium">{data.presence_count} members online right now.</span>
            ) : (
              <span>our growing community.</span>
            )}
          </p>
          <motion.a
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.97 }}
            href={data?.instant_invite || "/discord"}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2.5 px-6 py-3.5 rounded-xl bg-[#5865F2] hover:bg-[#4752C4] text-gray-50 font-semibold text-sm shadow-[0_4px_0_rgba(20,30,100,0.6),inset_0_1px_0_rgba(255,255,255,0.12)] hover:shadow-[0_6px_0_rgba(20,30,100,0.6),inset_0_1px_0_rgba(255,255,255,0.12)] transition-all duration-150"
          >
            <DiscordLogo className="w-4 h-4" />
            Join Discord
            <ArrowRight className="w-4 h-4" />
          </motion.a>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, x: 20 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.1, ease: "easeOut" }}
          className="flex justify-center lg:justify-end"
        >
          <div className="w-full max-w-[360px] rounded-2xl border border-border/80 bg-surface overflow-hidden">
            <div className="flex items-center gap-3 p-4 border-b border-border/80">
              <div className="relative w-10 h-10 shrink-0">
                <Image
                  src="/asset/sonata.png"
                  alt="Server Logo"
                  fill
                  className="object-contain rounded-xl"
                />
                <div className="absolute -bottom-1 -right-1 w-3.5 h-3.5 bg-emerald-500 border-2 border-surface rounded-full" />
              </div>
              <div className="flex-1 min-w-0">
                <h3 className="text-white font-semibold text-sm truncate">{data?.name ?? "Discord Server"}</h3>
                <p className="text-xs text-content-muted">
                  <span className="text-emerald-400 font-semibold">
                    {loading ? "..." : data?.presence_count}
                  </span>{" "}
                  Online Now
                </p>
              </div>
            </div>

            <div className="p-4">
              <p className="text-[10px] font-bold text-content-subtle uppercase tracking-widest mb-3">Active Members</p>
              {loading ? (
                <div className="flex justify-center py-6">
                  <Loader2 className="w-5 h-5 animate-spin text-[#5865F2]" />
                </div>
              ) : error || displayMembers.length === 0 ? (
                <p className="text-xs text-content-subtle py-4 text-center">
                  Join to see who&apos;s online right now.
                </p>
              ) : (
                <div className="grid grid-cols-5 gap-2.5">
                  {displayMembers.map((member, idx) => (
                    <motion.div
                      key={member.id}
                      initial={{ opacity: 0, scale: 0.8 }}
                      whileInView={{ opacity: 1, scale: 1 }}
                      viewport={{ once: true }}
                      transition={{ duration: 0.3, delay: idx * 0.03 }}
                      className="relative group w-9 h-9"
                    >
                      <div className="w-full h-full rounded-full overflow-hidden bg-zinc-900 border border-border">
                        <Image
                          src={member.avatar_url}
                          alt={member.username}
                          fill
                          className="object-cover rounded-full group-hover:opacity-80 transition-opacity"
                          unoptimized
                        />
                      </div>
                      <div className={cn(
                        "absolute -bottom-0.5 -right-0.5 w-3 h-3 border-2 border-surface rounded-full",
                        member.status === "online" ? "bg-emerald-500" : member.status === "idle" ? "bg-amber-400" : "bg-rose-500"
                      )} />
                      <div className="absolute -top-7 left-1/2 -translate-x-1/2 bg-zinc-900 border border-border text-white text-[9px] px-1.5 py-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-20 font-medium">
                        {member.username}
                      </div>
                    </motion.div>
                  ))}
                  {activeMembers.length > 14 && (
                    <div className="w-9 h-9 rounded-full bg-zinc-900 border border-border flex items-center justify-center text-[9px] font-bold text-content-muted">
                      +{activeMembers.length - 14}
                    </div>
                  )}
                </div>
              )}
            </div>

            <div className="px-4 pb-4">
              <div className="flex items-center gap-2.5 p-3 rounded-xl bg-zinc-900/60 border border-border/80">
                <div className="w-7 h-7 rounded-lg bg-zinc-900 border border-border flex items-center justify-center shrink-0">
                  <Headset className="w-3.5 h-3.5 text-content-dim" />
                </div>
                <p className="text-[11px] text-content-muted leading-tight">
                  Need help?{" "}
                  <span className="text-zinc-300 font-medium cursor-pointer hover:text-white transition-colors">
                    Open a ticket.
                  </span>
                </p>
              </div>
            </div>
          </div>
        </motion.div>

      </div>
    </section>
  );
}