"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  Github,
  Twitter,
  MessageCircle,
  Mail,
  Instagram,
  Youtube,
} from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { useEffect, useState } from "react";

interface PublicSettings {
  contactEmail?: string;
  contactDiscord?: string;
  contactTwitter?: string;
  contactGithub?: string;
  contactInstagram?: string;
  contactYoutube?: string;
}

interface SocialLink {
  href: string;
  label: string;
  icon: LucideIcon;
  external?: boolean;
}

export default function Footer() {
  const pathname = usePathname();
  const [settings, setSettings] = useState<PublicSettings | null>(null);

  useEffect(() => {
    let cancelled = false;
    fetch("/api/settings", { cache: "no-store" })
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => {
        if (!cancelled && data) setSettings(data);
      })
      .catch(() => {});
    return () => {
      cancelled = true;
    };
  }, []);

  if (pathname?.startsWith("/admin")) return null;

  const socials: SocialLink[] = [];
  if (settings?.contactDiscord) {
    socials.push({
      href: settings.contactDiscord,
      label: "Discord",
      icon: MessageCircle,
      external: true,
    });
  }
  if (settings?.contactTwitter) {
    socials.push({
      href: settings.contactTwitter,
      label: "Twitter",
      icon: Twitter,
      external: true,
    });
  }
  if (settings?.contactGithub) {
    socials.push({
      href: settings.contactGithub,
      label: "GitHub",
      icon: Github,
      external: true,
    });
  }
  if (settings?.contactInstagram) {
    socials.push({
      href: settings.contactInstagram,
      label: "Instagram",
      icon: Instagram,
      external: true,
    });
  }
  if (settings?.contactYoutube) {
    socials.push({
      href: settings.contactYoutube,
      label: "YouTube",
      icon: Youtube,
      external: true,
    });
  }
  if (settings?.contactEmail) {
    socials.push({
      href: `mailto:${settings.contactEmail}`,
      label: "E-posta",
      icon: Mail,
    });
  }

  return (
    <footer className="relative z-10 mt-24 border-t border-brand-700/30 bg-[#070b14]/80 backdrop-blur-md">
      <div className="max-w-7xl mx-auto px-6 lg:px-10 py-12 grid gap-10 md:grid-cols-3">
        <div>
          <Link href="/" className="flex items-center gap-3 mb-4">
            <div className="relative w-10 h-10">
              <Image
                src="/logo.png"
                alt="Source Setups"
                fill
                className="object-contain"
              />
            </div>
            <span className="text-lg font-bold" style={{ color: "#7c92ae" }}>
              Source Setups
            </span>
          </Link>
          <p className="text-sm text-brand-300 leading-relaxed max-w-sm">
            Hızlı, kaliteli ve profesyonel tasarımlar ile sunucunuza yön verin.
          </p>
        </div>

        <div>
          <h4 className="text-white font-semibold mb-4">Bağlantılar</h4>
          <ul className="space-y-2 text-sm">
            <li>
              <Link
                href="/"
                className="text-brand-300 hover:text-white transition"
              >
                Ana Sayfa
              </Link>
            </li>
            <li>
              <Link
                href="/portfolio"
                className="text-brand-300 hover:text-white transition"
              >
                Portfolyo
              </Link>
            </li>
            <li>
              <Link
                href="/takimimiz"
                className="text-brand-300 hover:text-white transition"
              >
                Takımımız
              </Link>
            </li>
          </ul>
        </div>

        <div>
          <h4 className="text-white font-semibold mb-4">İletişim</h4>
          {socials.length > 0 ? (
            <div className="flex items-center flex-wrap gap-3">
              {socials.map((s) => {
                const Icon = s.icon;
                return (
                  <a
                    key={s.label}
                    href={s.href}
                    target={s.external ? "_blank" : undefined}
                    rel={s.external ? "noopener noreferrer" : undefined}
                    aria-label={s.label}
                    title={s.label}
                    className="w-10 h-10 rounded-lg glass flex items-center justify-center text-brand-200 hover:text-white hover:border-brand-400 transition"
                  >
                    <Icon className="w-4 h-4" />
                  </a>
                );
              })}
            </div>
          ) : (
            <p className="text-xs text-brand-500">
              {settings === null
                ? "Yükleniyor..."
                : "İletişim bilgileri henüz eklenmemiş."}
            </p>
          )}
          {settings?.contactEmail && (
            <a
              href={`mailto:${settings.contactEmail}`}
              className="mt-3 inline-flex items-center gap-2 text-xs text-brand-300 hover:text-white transition"
            >
              <Mail className="w-3.5 h-3.5" />
              {settings.contactEmail}
            </a>
          )}
        </div>
      </div>

      <div className="border-t border-brand-700/20">
        <div className="max-w-7xl mx-auto px-6 lg:px-10 py-5 flex flex-col md:flex-row items-center justify-between gap-2 text-xs text-brand-400">
          <p className="inline-flex flex-wrap items-center gap-2">
            <span>
              © {new Date().getFullYear()} Source Setups. Tüm hakları saklıdır.
            </span>
            <span className="hidden md:inline text-brand-700">•</span>
            <span>
              <span className="text-brand-300">Tasarım &amp; Geliştirme</span>{" "}
              <span
                className="font-semibold bg-clip-text text-transparent"
                style={{
                  backgroundImage:
                    "linear-gradient(135deg, #7c92ae 0%, #ffffff 100%)",
                }}
              >
                reawerdev
              </span>
            </span>
          </p>
          <Link
            href="/admin/login"
            className="hover:text-brand-200 transition"
          >
            Yönetim Paneli
          </Link>
        </div>
      </div>
    </footer>
  );
}