import { Link, usePage } from "@inertiajs/react";
import { MapPin, Timer } from "lucide-react";
import React from "react";
import { BsInstagram, BsYoutube } from "react-icons/bs";
import { FaFacebookF, FaHeadphonesSimple } from "react-icons/fa6";
import { MdEmail, MdOutlinePhone } from "react-icons/md";

import { FaFacebook, FaPinterestP } from "react-icons/fa6";
import {
    RiFacebookFill,
    RiLinksLine,
    RiSnapchatLine,
    RiTwitterLine,
    RiYoutubeLine,
} from "react-icons/ri";
import { GrInstagram, GrLocation } from "react-icons/gr";
import { ImLinkedin2 } from "react-icons/im";
import { TbBrandReddit, TbBrandTelegram, TbBrandTiktok } from "react-icons/tb";
import { BsWhatsapp } from "react-icons/bs";
import { AiOutlineDiscord } from "react-icons/ai";
import { FiGithub } from "react-icons/fi";
import { SiThreads } from "react-icons/si";
import { IoMailOutline, IoTimeOutline } from "react-icons/io5";
import { TfiLayoutLineSolid } from "react-icons/tfi";
const socialIcons = {
    RiFacebookFill,
    GrInstagram,
    RiTwitterLine,
    RiYoutubeLine,
    ImLinkedin2,
    TbBrandTiktok,
    TbBrandTelegram,
    BsWhatsapp,
    FaPinterestP,
    RiSnapchatLine,
    AiOutlineDiscord,
    TbBrandReddit,
    FiGithub,
    SiThreads,
    RiLinksLine,
    IoMailOutline,
    IoTimeOutline,
    GrLocation,
    MdOutlinePhone,
    RiLinksLine,
};

export default function Footer() {
    const { footer, siteSetting, paymentMethods } = usePage().props;
    const socialLink = footer ? JSON.parse(footer?.social) : {};
    const contactLink = footer ? JSON.parse(footer?.contact_info) : {};
    const link = footer ? JSON.parse(footer?.link) : {};

    const renderFooterText = (text) => {
        return text?.split("|")?.map((item, index) => {
            const line = item?.trim();

            if (line?.startsWith("#")) {
                return (
                    <h1
                        key={index}
                        className="text-white capitalize font-medium text-sm mb-2"
                    >
                        {line?.replace(/^#\s*/, "")}
                    </h1>
                );
            }

            return (
                <p key={index} className="text-white text-sm font-light">
                    {line}
                </p>
            );
        });
    };

    return (
        <section className="bg-[#000000] w-full">
            <div className="safearea pt-16">
                <div className="border-b border-dashed flex flex-col md:flex-row gap-5 items-start md:items-center md:justify-between border-white/30 pb-10">
                    <img src={siteSetting?.logo} className="h-10 w-auto" />
                    {footer?.phone && (
                        <div className="flex items-center gap-3">
                            <div className="flex items-center gap-3 text-white text-xs">
                                <FaHeadphonesSimple
                                    size={18}
                                    className="text-white/40"
                                />
                                <span>Need help? Call us</span>
                            </div>
                            <a
                                href={`tel:${footer?.phone}`}
                                className="text-lg font-medium text-secondary"
                            >
                                {footer?.phone}
                            </a>
                        </div>
                    )}
                </div>
                <div className="grid grid-cols-1 md:grid-cols-4 gap-9 py-13">
                    <div>
                        {contactLink?.length > 0 && (
                            <>
                                <h1 className="text-white capitalize font-medium text-sm mb-5">
                                    Contact Us
                                </h1>
                                {contactLink?.map((val, i) => {
                                    const Icon = socialIcons[val.icon];
                                    return (
                                        <p
                                            key={i}
                                            className="flex gap-3 text-white text-sm font-light mt-4"
                                        >
                                            {Icon && (
                                                <Icon
                                                    size={20}
                                                    className="text-white/60"
                                                />
                                            )}
                                            <span>{val?.link}</span>
                                        </p>
                                    );
                                })}
                            </>
                        )}
                        {/* social links */}
                        {socialLink?.length > 0 && (
                            <>
                                <h1 className="text-white capitalize font-medium text-sm my-5">
                                    Follow us
                                </h1>
                                <div className="flex flex-wrap items-center gap-2">
                                    {socialLink?.map((item, index) => {
                                        const Icon = socialIcons[item.icon];

                                        return (
                                            <a
                                                key={index}
                                                href={item?.link}
                                                target="_blank"
                                                className="btn btn-circle btn-sm btn-outline btn-secondary"
                                            >
                                                {Icon && <Icon size={12} />}
                                            </a>
                                        );
                                    })}
                                </div>
                            </>
                        )}
                    </div>
                    <div className="space-y-5">
                        {renderFooterText(footer?.content)}
                    </div>
                    {link?.length > 0 && (
                        <div>
                            <h1 className="text-white capitalize font-medium text-sm mb-5">
                                Quick links
                            </h1>
                            {link?.map((val, i) => (
                                <a
                                    key={i}
                                    href={val?.link}
                                    className="flex text-white text-sm font-light mt-2 duration-300 hover:translate-x-2 group"
                                >
                                    {val?.label}
                                </a>
                            ))}
                        </div>
                    )}
                    {paymentMethods?.length > 0 && (
                        <div>
                            <h1 className="text-white capitalize font-medium text-sm mb-5">
                                Payment Methods
                            </h1>
                            <div className="grid grid-cols-4 gap-1">
                                {paymentMethods?.map((image, i) => (
                                    <div
                                        key={i}
                                        className="w-full h-10 overflow-hidden bg-white rounded-box"
                                    >
                                        <img
                                            src={image}
                                            className="h-full w-full object-fill"
                                        />
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}
                </div>
                <div className="border-t border-dashed border-white/30 py-5 flex items-center justify-between">
                    <p className="text-white text-sm text-center">
                        {footer?.copyright}
                    </p>
                    <p className="text-white text-sm text-center">
                        Development by -{" "}
                        <a
                            href="https://www.facebook.com/Ctg.it.soft.bd/"
                            target="_blank"
                            className="link link-hover"
                        >
                            CTGiTSOFT
                        </a>
                    </p>
                </div>
            </div>
        </section>
    );
}