"use client";

import Link from "next/link";
import { useEffect } from "react";
import { useTranslation } from "@/hooks/useTranslation";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { slugify } from "@/lib/utils/slugify";
import {
  fetchSocialLinks,
  selectSocialLinks,
  selectSocialLoaded,
  type SocialLink,
} from "@/store/slices/socialSlice";
import Image from "next/image";
import { images } from "@/branding";

// Map platform name → inline SVG path
function SocialIcon({ name }: { name: string }) {
  const n = name.toLowerCase();
  if (n.includes("facebook"))
    return (
      <svg className="icn-16" viewBox="0 0 24 24">
        <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
      </svg>
    );
  if (n.includes("instagram"))
    return (
      <svg className="icn-16" viewBox="0 0 24 24">
        <rect x="3" y="3" width="18" height="18" rx="5" />
        <circle cx="12" cy="12" r="4" />
        <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" />
      </svg>
    );
  if (n.includes("youtube"))
    return (
      <svg className="icn-16" viewBox="0 0 24 24">
        <rect x="2" y="5" width="20" height="14" rx="3" />
        <polygon
          points="10 9 16 12 10 15"
          fill="currentColor"
          strokeLinejoin="round"
        />
      </svg>
    );
  if (n.includes("twitter") || n.includes(" x ") || n === "x")
    return (
      <svg className="icn-16" viewBox="0 0 24 24">
        <path d="M4 4l16 16M20 4L4 20" />
      </svg>
    );
  if (n.includes("whatsapp"))
    return (
      <svg className="icn-16" viewBox="0 0 24 24">
        <path d="M21 12a9 9 0 1 1-3.4-7L21 4l-1 3.4A9 9 0 0 1 21 12z" />
      </svg>
    );
  if (n.includes("linkedin"))
    return (
      <svg className="icn-16" viewBox="0 0 24 24">
        <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z" />
        <circle cx="4" cy="4" r="2" />
      </svg>
    );
  // Generic globe for unknown platforms
  return (
    <svg className="icn-16" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="10" />
      <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
    </svg>
  );
}

interface FooterProps {
  locale: string;
}

export default function Footer({ locale: _locale }: FooterProps) {
  const { t } = useTranslation("common");
  const href = (path: string) => path;
  const dispatch = useAppDispatch();
  const socialLinks = useAppSelector(selectSocialLinks);
  const socialLoaded = useAppSelector(selectSocialLoaded);
  const categories = useAppSelector((s) => s.navCategories.items);

  useEffect(() => {
    if (!socialLoaded) {
      dispatch(fetchSocialLinks());
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-brand">
            <Link href={href("/")} className="logo">
              <Image
                src={images.appLogo}
                alt="DTNews"
                width={120}
                height={50}
                priority
                style={{ objectFit: "contain", height: 50, width: "auto" }}
              />
            </Link>
            <p>{t("footer.tagline")}</p>
            <div className="foot-store">
              <Link href={href("#")} className="pill">
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path d="M17.5 12.5a4.5 4.5 0 0 1 2.2-3.8 4.6 4.6 0 0 0-3.6-2c-1.5-.2-3 .9-3.8.9-.8 0-2-.9-3.3-.9A4.8 4.8 0 0 0 5 9c-1.7 3-.4 7.4 1.2 9.8.8 1.2 1.7 2.5 3 2.5s1.7-.8 3.3-.8 2 .8 3.3.8 2.3-1.2 3.1-2.4a10 10 0 0 0 1.4-2.9 4.4 4.4 0 0 1-2.8-3.5zM15 5.4A4.5 4.5 0 0 0 16 2a4.5 4.5 0 0 0-3 1.5 4.2 4.2 0 0 0-1 3.3 3.7 3.7 0 0 0 3-1.4z" />
                </svg>
                <div>
                  <span className="label">{t("footer.download_on")}</span>
                  <span className="name">{t("footer.app_store")}</span>
                </div>
              </Link>
              <Link href={href("#")} className="pill">
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path d="M3.6 2.4 14 12.7 3.6 23a1 1 0 0 1-.6-.9V3.3c0-.4.2-.7.6-.9zM15.4 13.7l3 3-11.2 5.7L15.4 13.7zM18.4 7.3l-3 3-7.8-8.7 11.2 5.7zM20.7 10.7 22 11.6c.6.4.6 1.5 0 1.9l-1.4.8-3.4-3.4 3.5-2.2z" />
                </svg>
                <div>
                  <span className="label">{t("footer.get_it_on")}</span>
                  <span className="name">{t("footer.google_play")}</span>
                </div>
              </Link>
            </div>
          </div>

          <div className="foot-col">
            <h5>{t("labels.categories")}</h5>
            <ul>
              {categories.length > 0 ? (
                categories.map((cat) => (
                  <li key={cat.id}>
                    <Link href={href(`/category/${slugify(cat.name)}`)}>
                      {cat.name}
                    </Link>
                  </li>
                ))
              ) : (
                <>
                  <li>
                    <Link href={href("/category/politics")}>
                      {t("footer.cat_politics")}
                    </Link>
                  </li>
                  <li>
                    <Link href={href("/category/world")}>
                      {t("footer.cat_world")}
                    </Link>
                  </li>
                  <li>
                    <Link href={href("/category/technology")}>
                      {t("footer.cat_technology")}
                    </Link>
                  </li>
                  <li>
                    <Link href={href("/category/business")}>
                      {t("footer.cat_business")}
                    </Link>
                  </li>
                  <li>
                    <Link href={href("/category/sports")}>
                      {t("footer.cat_sports")}
                    </Link>
                  </li>
                </>
              )}
            </ul>
          </div>

          <div className="foot-col">
            <h5>{t("labels.company")}</h5>
            <ul>
              <li>
                <Link href={href("/company/about")}>{t("footer.about")}</Link>
              </li>
              <li>
                <Link href={href("/contact")}>{t("footer.editorial")}</Link>
              </li>
              <li>
                <Link href={href("/company/contact")}>
                  {t("footer.corrections")}
                </Link>
              </li>
              <li>
                <Link href={href("/company/careers")}>
                  {t("footer.careers")}
                </Link>
              </li>
              <li>
                <Link href={href("/contact")}>{t("footer.advertise")}</Link>
              </li>
              <li>
                <Link href={href("/company/contact")}>
                  {t("footer.contact")}
                </Link>
              </li>
            </ul>
          </div>

          <div className="foot-col">
            <h5>{t("labels.get_app")}</h5>
            <ul>
              <li>
                <Link href="#">{t("footer.ios")}</Link>
              </li>
              <li>
                <Link href="#">{t("footer.android")}</Link>
              </li>
              <li>
                <Link href={href("/newsletters")}>
                  {t("footer.newsletters")}
                </Link>
              </li>
              <li>
                <Link href={href("/notifications")}>{t("footer.push")}</Link>
              </li>
              <li>
                <Link href={href("/whatsapp")}>{t("footer.whatsapp")}</Link>
              </li>
              <li>
                <Link href={href("/rss")}>{t("footer.rss")}</Link>
              </li>
            </ul>
          </div>
        </div>

        <div className="foot-bottom">
          <div className="cr">{t("footer.copyright")}</div>
          {socialLinks.length > 0 && (
            <div className="socials">
              {socialLinks.map((s) => (
                <a
                  key={s.id}
                  href={s.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={s.name}
                >
                  <SocialIcon name={s.name} />
                </a>
              ))}
            </div>
          )}
        </div>
      </div>
    </footer>
  );
}