"use client";

import Image from "next/image";
import LocaleLink from "@/components/ui/LocaleLink";
import { JSX, useCallback, useState } from "react";
import { FacebookIcon, InstagramIcon, MailIcon, YoutubeIcon } from "lucide-react";

import { ConfigModel } from "@/models";
import { FooterModalKey } from "@/types/modal";
import Modal from "./Modal";

function TikTokIcon({ className }: { className?: string }) {
    return (
        <svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden="true">
            <path d="M16.6 5.82c-.9-.85-1.46-2.03-1.5-3.42h-3.13v13.4c0 1.53-1.24 2.77-2.77 2.77a2.77 2.77 0 0 1-2.77-2.77 2.77 2.77 0 0 1 2.77-2.77c.28 0 .55.04.8.12V9.9a6.02 6.02 0 0 0-.8-.05A5.92 5.92 0 0 0 3.28 15.77 5.92 5.92 0 0 0 9.2 21.7a5.92 5.92 0 0 0 5.92-5.92V9.01a8.35 8.35 0 0 0 4.88 1.57V7.44a5 5 0 0 1-3.4-1.62Z" />
        </svg>
    );
}

type ModalConfig = Record<FooterModalKey, { title: string; content: JSX.Element }>;

type FooterLink = { label: string; href: string };

const MODAL_CONTENT: ModalConfig = {
    terms: {
        title: "Terms of Use",
        content: <p>Terms of Use content</p>,
    },
    privacy: {
        title: "Privacy Policy",
        content: <p>Privacy Policy content</p>,
    },
    detail: {
        title: "Detail Aplikasi",
        content: <p>Detail aplikasi content</p>,
    },
};

const ABOUT_LINKS: FooterLink[] = [
    { label: "Tentang Kami", href: "#" },
    { label: "Karier", href: "#" },
    { label: "Regulasi", href: "/regulations" },
    { label: "Informasi Lomba", href: "/competition-infos" },
];

const READER_LINKS: FooterLink[] = [
    { label: "Genre", href: "/novel" },
    { label: "Top Up Koin", href: "/reward" },
    { label: "Library", href: "/user/library" },
    { label: "Riwayat Baca", href: "/user/history" },
];

const WRITER_LINKS: FooterLink[] = [
    { label: "Materi Kepenulisan", href: "/writing-materials" },
    { label: "Gabung Jadi Penulis", href: "/user/novel/create" },
    { label: "Panduan Royalti", href: "#" },
];

function FooterColumn({ title, links }: { title: string; links: FooterLink[] }) {
    return (
        <div className="min-w-37.5">
            <div className="text-xs font-bold tracking-[0.06em] uppercase text-kb-muted mb-4">
                {title}
            </div>
            <div className="flex flex-col gap-2.5">
                {links.map((link) => (
                    <LocaleLink
                        key={link.label}
                        href={link.href}
                        className="text-[13.5px] text-kb-ink hover:text-primary-600 transition-colors"
                    >
                        {link.label}
                    </LocaleLink>
                ))}
            </div>
        </div>
    );
}

const Footer = ({ config }: { config?: ConfigModel | null }) => {
    const [activeModal, setActiveModal] = useState<FooterModalKey | null>(null);

    const openModal = useCallback((key: FooterModalKey) => setActiveModal(key), []);
    const closeModal = useCallback(() => setActiveModal(null), []);

    const modalData = activeModal ? MODAL_CONTENT[activeModal] : null;

    const socialLinks = [
        { label: "Facebook", href: "https://www.facebook.com/kutubuku.offc/", Icon: FacebookIcon },
        { label: "Instagram", href: "https://www.instagram.com/kutubuku_official?igsh=YnhtdTcwcHJzZ2t6", Icon: InstagramIcon },
        { label: "TikTok", href: "https://www.tiktok.com/@kutubuku.official?_r=1&_t=ZS-97tK0kTUP28", Icon: TikTokIcon },
        { label: "YouTube", href: "https://www.youtube.com/@kutubukuoffc", Icon: YoutubeIcon },
        { label: "Email", href: "mailto:kutubuku951@gmail.com", Icon: MailIcon },
    ];

    return (
        <footer className="bg-kb-paper-alt border-t border-kb-line">
            <div className="max-w-340 mx-auto px-4 sm:px-6 lg:px-10 pt-14 pb-7">
                <div className="flex gap-16 flex-wrap mb-11">
                    <div className="flex-1 min-w-60">
                        <Image
                            src="/assets/Main/Logo/logo kutubuku.png"
                            alt="KutuBuku"
                            width={150}
                            height={52}
                            className="h-13 w-auto mb-3.5"
                        />
                        <p className="text-[13.5px] text-kb-muted max-w-70 leading-relaxed mb-5">
                            Rumah bagi pembaca dan penulis novel Indonesia. Baca sepuasnya, tulis karyamu, dan dapatkan benefit dari setiap cerita.
                        </p>

                        <div className="flex items-center gap-2.5 mb-5">
                            {socialLinks.map(({ label, href, Icon }) => (
                                <a
                                    key={label}
                                    href={href}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    aria-label={label}
                                    className="w-9 h-9 rounded-full bg-white border border-kb-line flex items-center justify-center text-kb-ink hover:text-primary-600 hover:border-primary-500 transition-colors"
                                >
                                    <Icon className="w-4.5 h-4.5" />
                                </a>
                            ))}
                        </div>

                        <a
                            href={config?.link_playstore || "#"}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-kb-ink text-white text-xs font-semibold hover:brightness-110 transition"
                        >
                            <span className="text-left leading-tight">
                                <span className="block text-[9px] opacity-70">Unduh di</span>
                                <span className="block text-[12.5px] font-bold">Google Play</span>
                            </span>
                        </a>
                    </div>

                    <FooterColumn title="Tentang" links={ABOUT_LINKS} />
                    <FooterColumn title="Pembaca" links={READER_LINKS} />
                    <FooterColumn title="Penulis" links={WRITER_LINKS} />
                </div>

                <div className="border-t border-kb-line pt-5.5 flex justify-between flex-wrap gap-3">
                    <span className="text-[12.5px] text-kb-muted">
                        © {new Date().getFullYear()} KutuBuku. Seluruh hak cipta dilindungi.
                    </span>
                    <div className="flex items-center gap-4">
                        <button
                            onClick={() => openModal("privacy")}
                            className="text-[12.5px] text-kb-muted hover:text-primary-600 cursor-pointer"
                        >
                            Kebijakan Privasi
                        </button>
                        <button
                            onClick={() => openModal("terms")}
                            className="text-[12.5px] text-kb-muted hover:text-primary-600 cursor-pointer"
                        >
                            Syarat &amp; Ketentuan
                        </button>
                    </div>
                </div>
            </div>

            {modalData && (
                <Modal open onClose={closeModal} width="w-[600px]" title={modalData.title}>
                    <div className="p-4 text-sm text-gray-700">
                        {modalData.content}
                    </div>
                </Modal>
            )}
        </footer>
    );
};

export default Footer;