"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { MessageCircle, Mail, Instagram, Youtube, MapPin } from "lucide-react";
import { publicConfigApi } from "@/lib/api/public";
import { buildImageUrl } from "@/lib/utils/image";
import type { Config } from "@/types/config";

const Footer = () => {
  const [config, setConfig] = useState<Config | null>(null);

  useEffect(() => {
    publicConfigApi.getConfig().then((res) => setConfig(res.data)).catch(() => { });
  }, []);

  const logoSrc = config?.logo ? buildImageUrl(config.logo) : "/logoptbmmki.svg";
  const siteName = config?.site_name ?? "PTBMMKI";
  const siteDescription =
    config?.site_description ??
    "Perhimpunan Tim Bantuan Medis Mahasiswa Kedokteran Indonesia";
  const address = config?.location ?? null;
  const instagram = config?.social_media?.instagram ?? null;
  const youtube = config?.social_media?.youtube ?? null;
  const email = config?.social_media?.twitter ?? null;

  const contactItems = [
    config?.social_media?.instagram
      ? {
        icon: MessageCircle,
        label: "Official Line ID",
        text: "@ptbmmki",
        href: "https://line.me/ti/p/331wzjlr",
      }
      : null,
  ].filter(Boolean) as {
    icon: typeof Mail;
    label: string;
    text: string;
    href: string;
  }[];

  const socialLinks = [
    instagram
      ? {
        icon: Instagram,
        label: "Instagram",
        href: instagram.startsWith("http") ? instagram : `https://instagram.com/${instagram}`,
      }
      : null,
    youtube
      ? {
        icon: Youtube,
        label: "YouTube",
        href: youtube.startsWith("http") ? youtube : `https://youtube.com/@${youtube}`,
      }
      : null,
  ].filter(Boolean) as { icon: typeof Instagram; label: string; href: string }[];

  return (
    <footer className="bg-brand text-white">
      <div className="w-full mx-auto px-6 md:px-20 lg:px-36 py-12">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-10 lg:gap-20 mb-8">

          <div className="space-y-4">
            <div className="flex flex-col md:flex-row items-start gap-4">
              <div className="flex-shrink-0">
                <div className="relative w-28 h-28 md:w-36 md:h-36 rounded-xl overflow-hidden flex items-center justify-center">
                  <Image
                    src={logoSrc}
                    alt={`Logo ${siteName}`}
                    width={120}
                    height={120}
                    className="object-contain"
                    unoptimized
                  />
                </div>
              </div>
              <div className="flex-1 text-white">
                <h3 className="text-2xl font-bold mb-2">{siteName}</h3>
                <p className="text-sm mb-4">{siteDescription}</p>
                {address && (
                  <div className="flex items-start gap-2">
                    <MapPin className="w-4 h-4 flex-shrink-0 mt-0.5" />
                    <p className="text-white text-sm">{address}</p>
                  </div>
                )}
              </div>
            </div>
          </div>

          <div>
            <h4 className="text-lg font-semibold text-white mb-4 pb-2 relative after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[3px] after:bg-white/30 after:backdrop-blur-sm">
              MENU CEPAT
            </h4>
            <ul className="space-y-5 lg:space-y-7 text-gray-100">
              {[
                { href: "/", label: "Home" },
                { href: "/about", label: "Tentang PTBMMKI" },
                { href: "/profilorganisasi", label: "Profil Organisasi" },
                { href: "/berita", label: "Berita dan Pengumuman" },
                { href: "/contact", label: "Kontak Kami" },
              ].map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className="hover:text-white transition-colors duration-200 inline-block"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h4 className="text-lg font-semibold text-white mb-4 pb-2 relative after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[3px] after:bg-white/30 after:backdrop-blur-sm">
              KONTAK KAMI
            </h4>

            <div className="space-y-4 mb-6">
              <div className="flex items-start gap-3">
                <MessageCircle className="w-5 h-5 text-white flex-shrink-0 mt-0.5" />
                <div>
                  <a
                    href="https://line.me/ti/p/331wzjlr"
                    className="text-white hover:text-brand transition-colors duration-200"
                  >
                    @331wzjlr
                  </a>
                  <p className="text-gray-100 text-xs mt-1">Official Line ID</p>
                </div>
              </div>

              {config?.social_media && (
                <div className="flex items-start gap-3">
                  <Mail className="w-5 h-5 text-white flex-shrink-0 mt-0.5" />
                  <div>
                    <a
                      href="mailto:officialptbmmki@gmail.com"
                      className="text-white hover:text-brand transition-colors duration-200 break-all"
                    >
                      officialptbmmki@gmail.com
                    </a>
                    <p className="text-gray-100 text-xs mt-1">Email resmi</p>
                  </div>
                </div>
              )}
            </div>

            {socialLinks.length > 0 && (
              <>
                <h4 className="text-lg font-semibold text-white mb-4 pb-2 relative after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[3px] after:bg-white/30 after:backdrop-blur-sm">
                  SOSIAL MEDIA
                </h4>
                <div className="flex flex-col gap-3">
                  {socialLinks.map((social) => (
                    <a
                      key={social.label}
                      href={social.href}
                      className="group relative flex items-center gap-4 p-4 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-2 rounded-xl overflow-hidden"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <div className="absolute inset-0 bg-gradient-to-r from-white/15 via-white/20 to-transparent backdrop-blur-sm border border-white/20 rounded-xl" />
                      <div className="relative z-10">
                        <social.icon className="w-7 h-7 text-white" />
                      </div>
                      <div className="relative z-10 flex-1">
                        <span className="text-white font-medium block">{social.label}</span>
                      </div>
                      <div className="relative z-10 opacity-0 group-hover:opacity-100 translate-x-2 group-hover:translate-x-0 transition-all duration-300">
                        <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
                        </svg>
                      </div>
                    </a>
                  ))}
                </div>
              </>
            )}
          </div>
        </div>

        <div className="pt-8 pb-4 relative after:absolute after:top-0 after:left-0 after:right-0 after:h-[3px] after:bg-white/30 after:backdrop-blur-sm">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            <p className="text-white text-sm text-center md:text-left">
              © {new Date().getFullYear()} {siteName}. All rights reserved. |{" "}
              {siteDescription}
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;