"use client";

import { motion } from "framer-motion";
import { useEffect, useState } from "react";
import { ArrowRight, Hash, MessageCircle, Users } from "lucide-react";

interface DiscordMember {
  username: string;
  avatar_url?: string;
  status?: string;
}

interface DiscordData {
  enabled?: boolean;
  data?: {
    id: string;
    name: string;
    presence_count: number;
    members: DiscordMember[];
    instant_invite: string | null;
  } | null;
  inviteUrl?: string;
  banner?: string | null;
  icon?: string | null;
  splash?: string | null;
  memberCount?: number | null;
  description?: string | null;
  error?: string;
}

export default function DiscordWidget() {
  const [info, setInfo] = useState<DiscordData | null>(null);

  useEffect(() => {
    let cancelled = false;
    const tick = () =>
      fetch("/api/discord", { cache: "no-store" })
        .then((r) => r.json())
        .then((data) => {
          if (!cancelled) setInfo(data);
        })
        .catch(() => undefined);

    tick();
    const t = setInterval(tick, 60_000);

    return () => {
      cancelled = true;
      clearInterval(t);
    };
  }, []);

  if (!info?.enabled) return null;
  if (!info.data && !info.banner && !info.icon) return null;

  const name = info.data?.name ?? "Discord Sunucusu";
  const presenceCount = info.data?.presence_count ?? 0;
  const members = info.data?.members ?? [];
  const inviteUrl = info.inviteUrl ?? "";
  const banner = info.banner ?? null;
  const icon = info.icon ?? null;
  const memberCount = info.memberCount ?? null;
  const description = info.description ?? null;

  return (
    <section className="max-w-7xl mx-auto px-6 lg:px-10 mt-24 lg:mt-32">
      <motion.div
        initial={{ opacity: 0, y: 16 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: "-50px" }}
        transition={{ duration: 0.5 }}
        className="text-center mb-8"
      >
        <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full glass text-xs text-brand-200 mb-3">
          <MessageCircle className="w-3.5 h-3.5" style={{ color: "#5865F2" }} />
          Topluluk
        </span>
        <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold heading-gradient">
          Discord Sunucumuza Katıl
        </h2>
        <p className="mt-3 text-brand-300 max-w-xl mx-auto">
          Source Setups topluluğuyla anında iletişim kurun, projelerinizi
          paylaşın.
        </p>
      </motion.div>

      <motion.div
        initial={{ opacity: 0, y: 24 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: "-50px" }}
        transition={{ duration: 0.6 }}
        className="relative max-w-3xl mx-auto"
      >
        {/* Outer glow */}
        <div
          className="absolute -inset-1 rounded-3xl blur-2xl opacity-50 pointer-events-none"
          style={{
            background:
              "linear-gradient(135deg, rgba(88,101,242,0.45), rgba(124,146,174,0.25))",
          }}
        />

        <div
          className="relative rounded-2xl overflow-hidden border"
          style={{
            background:
              "linear-gradient(135deg, rgba(88,101,242,0.16) 0%, rgba(15,22,35,0.9) 60%, rgba(15,22,35,0.95) 100%)",
            borderColor: "rgba(88,101,242,0.35)",
            boxShadow:
              "0 20px 50px rgba(88,101,242,0.18), inset 0 1px 0 rgba(255,255,255,0.04)",
          }}
        >
          {/* Banner — sadece gorsel, uzeri kapali */}
          <div className="relative h-28 sm:h-36 lg:h-40 overflow-hidden bg-gradient-to-br from-[#5865F2]/30 via-[#0c1320] to-[#0c1320]">
            {banner ? (
              <>
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={banner}
                  alt={`${name} banner`}
                  className="absolute inset-0 w-full h-full object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#0c1320]/40 to-[#0c1320]" />
              </>
            ) : (
              <>
                <div
                  className="absolute inset-0 opacity-[0.22]"
                  style={{
                    backgroundImage:
                      "radial-gradient(circle at 20% 30%, rgba(88,101,242,0.85) 0%, transparent 45%), radial-gradient(circle at 80% 70%, rgba(124,146,174,0.65) 0%, transparent 50%)",
                  }}
                />
                <div
                  className="absolute inset-0 opacity-[0.08]"
                  style={{
                    backgroundImage:
                      "linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px)",
                    backgroundSize: "32px 32px",
                  }}
                />
                <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[#0c1320]" />
              </>
            )}
          </div>

          <div className="relative px-5 sm:px-7 pb-6 lg:pb-7">
            {/* Icon (banner'a yari binen) + buton (sag-ust) */}
            <div className="flex items-end justify-between gap-3 -mt-10 sm:-mt-12 mb-4">
              <div
                className="w-20 h-20 sm:w-24 sm:h-24 rounded-2xl flex items-center justify-center shrink-0 overflow-hidden"
                style={{
                  background:
                    "linear-gradient(135deg, #5865F2 0%, #4752c4 100%)",
                  boxShadow:
                    "0 0 0 4px #0c1320, 0 12px 28px rgba(88,101,242,0.5)",
                }}
              >
                {icon ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={icon}
                    alt={name}
                    className="w-full h-full object-cover"
                  />
                ) : (
                  <DiscordLogo />
                )}
              </div>

              {inviteUrl && (
                <a
                  href={inviteUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hidden sm:inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold text-white transition-all hover:scale-105"
                  style={{
                    background:
                      "linear-gradient(135deg, #5865F2 0%, #4752c4 100%)",
                    boxShadow: "0 8px 24px rgba(88,101,242,0.5)",
                  }}
                >
                  <DiscordLogo small />
                  Sunucuya Katıl
                  <ArrowRight className="w-4 h-4" />
                </a>
              )}
            </div>

            {/* Sunucu adi + bilgileri (banner'in tamamen disinda, temiz) */}
            <div>
              <div className="text-[11px] uppercase tracking-wider text-brand-400 inline-flex items-center gap-1">
                <Hash className="w-3 h-3" /> Resmi Sunucu
              </div>
              <h3 className="mt-1 text-xl sm:text-2xl font-bold text-white leading-tight">
                {name}
              </h3>
              <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-brand-200">
                <span className="inline-flex items-center gap-1.5">
                  <span className="relative flex h-2 w-2">
                    <span className="absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75 animate-ping" />
                    <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400" />
                  </span>
                  <span className="font-semibold text-white">
                    {presenceCount}
                  </span>
                  çevrimiçi
                </span>
                {memberCount !== null && (
                  <span className="inline-flex items-center gap-1.5 text-brand-300">
                    <Users className="w-3 h-3" />
                    <span className="font-semibold text-white">
                      {memberCount}
                    </span>
                    üye
                  </span>
                )}
              </div>
              {description && (
                <p className="mt-3 text-sm text-brand-200/90 leading-relaxed">
                  {description}
                </p>
              )}
            </div>

            {/* Mobile katil butonu (tam genislik, kart altinda) */}
            {inviteUrl && (
              <a
                href={inviteUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="sm:hidden mt-4 w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold text-white"
                style={{
                  background:
                    "linear-gradient(135deg, #5865F2 0%, #4752c4 100%)",
                  boxShadow: "0 8px 24px rgba(88,101,242,0.5)",
                }}
              >
                <DiscordLogo small />
                Sunucuya Katıl
                <ArrowRight className="w-4 h-4" />
              </a>
            )}

            {members.length > 0 && (
              <div className="mt-5 pt-5 border-t border-white/5">
                <div className="text-[11px] uppercase tracking-wider text-brand-400 mb-3">
                  Çevrimiçi Üyeler
                </div>
                <div className="flex flex-wrap gap-2">
                  {members.slice(0, 12).map((m, i) => (
                    <div
                      key={`${m.username}-${i}`}
                      className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-white/[0.04] border border-white/[0.06] text-xs text-brand-100"
                      title={m.username}
                    >
                      {m.avatar_url ? (
                        // eslint-disable-next-line @next/next/no-img-element
                        <img
                          src={m.avatar_url}
                          alt=""
                          className="w-4 h-4 rounded-full"
                        />
                      ) : (
                        <span className="w-4 h-4 rounded-full bg-brand-700" />
                      )}
                      <span className="max-w-[120px] truncate">
                        {m.username}
                      </span>
                    </div>
                  ))}
                  {members.length > 12 && (
                    <span className="inline-flex items-center px-2 py-1 rounded-md bg-white/[0.04] text-xs text-brand-300">
                      +{members.length - 12}
                    </span>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      </motion.div>
    </section>
  );
}

function DiscordLogo({ small = false }: { small?: boolean }) {
  const size = small ? 16 : 36;
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="currentColor"
      className="text-white"
    >
      <path d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05 0 .07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12z" />
    </svg>
  );
}