import Link from "next/link";
import { MessageCircle, Phone, Mail } from "lucide-react";
import type { NavLink } from "@/lib/wp/menus";
import type { SiteSettings } from "@/lib/wp/site";
import { CommercialRegistrationViewer } from "./CommercialRegistrationViewer";
import { FooterBackdrop } from "./FooterBackdrop";
import { localizeHref, type Locale } from "@/lib/i18n/config";

interface SiteFooterProps {
  quickLinks: ReadonlyArray<NavLink>;
  services: ReadonlyArray<NavLink>;
  site: SiteSettings;
  locale: Locale;
}

const ICON_STYLE = { width: 14, height: 14 } as const;

interface BrandIconProps {
  size?: number;
}

function InstagramIcon({ size = 18 }: BrandIconProps) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <rect x="2" y="2" width="20" height="20" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
    </svg>
  );
}

function XIcon({ size = 18 }: BrandIconProps) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
      <path d="M18.244 2H21.5l-7.385 8.43L23 22h-6.86l-5.37-7.026L4.6 22H1.34l7.9-9.02L1 2h7.04l4.86 6.42L18.244 2Zm-1.2 18h1.9L7.05 4H5.07l11.974 16Z" />
    </svg>
  );
}

function YoutubeIcon({ size = 18 }: BrandIconProps) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
      <path d="M23.498 6.186a3.014 3.014 0 0 0-2.122-2.136C19.505 3.5 12 3.5 12 3.5s-7.505 0-9.376.55A3.014 3.014 0 0 0 .502 6.186 31.46 31.46 0 0 0 0 12a31.46 31.46 0 0 0 .502 5.814 3.014 3.014 0 0 0 2.122 2.136C4.495 20.5 12 20.5 12 20.5s7.505 0 9.376-.55a3.014 3.014 0 0 0 2.122-2.136A31.46 31.46 0 0 0 24 12a31.46 31.46 0 0 0-.502-5.814ZM9.546 15.568V8.432L15.818 12l-6.272 3.568Z" />
    </svg>
  );
}

function SnapchatIcon({ size = 18 }: BrandIconProps) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
      <path d="M12 2.2c2.6 0 4.7 1.8 5.2 4.3.2 1.1.1 2.3 0 3.4 0 .2 0 .3.2.4.2.1.5.1.7.2.4.1.7.4.7.8 0 .5-.5.7-1 .9-.6.3-1.2.3-1.4.8-.1.3.1.7.3 1 .8 1.4 2.2 2.1 3.7 2.5.4.1.7.3.7.7 0 .6-1 1-2.3 1.2-.2 0-.2.1-.3.3-.1.2-.1.5-.2.7-.1.3-.3.5-.7.5-.5 0-1-.2-1.6-.3-1.6-.2-2.6.4-3.6 1.2-.9.8-1.9 1.5-3.4 1.5s-2.5-.7-3.4-1.5c-1-.8-2-1.4-3.6-1.2-.6.1-1.1.3-1.6.3-.4 0-.6-.2-.7-.5-.1-.2-.1-.5-.2-.7-.1-.2-.1-.3-.3-.3-1.3-.2-2.3-.6-2.3-1.2 0-.4.3-.6.7-.7 1.5-.4 2.9-1.1 3.7-2.5.2-.3.4-.7.3-1-.2-.5-.8-.5-1.4-.8-.5-.2-1-.4-1-.9 0-.4.3-.7.7-.8.2-.1.5-.1.7-.2.2-.1.2-.2.2-.4-.1-1.1-.2-2.3 0-3.4.5-2.5 2.6-4.3 5.2-4.3z" />
    </svg>
  );
}

export function SiteFooter({ quickLinks, services, site, locale }: SiteFooterProps) {
  const { socials, contact, legal, labels } = site;
  const whatsappUrl = socials.whatsapp_url;

  return (
    <footer className="site-footer" data-screen-label="99 Footer">
      <FooterBackdrop />
      <div className="row">
        <div className="top">
          <div className="brand">
            <div className="brand-mark">
              <img className="logo-img" src="/assets/logo.png" alt="Backyard Tours & Events" />
            </div>
            <div className="brand-copy">
              {site.brand.eyebrow ? (
                <span className="brand-eyebrow">
                  <span className="brand-eyebrow__pip" />
                  {site.brand.eyebrow}
                </span>
              ) : null}
              {site.brand.description ? (
                <p
                  className="brand-tag"
                  dangerouslySetInnerHTML={{ __html: site.brand.description }}
                />
              ) : null}
              <span className="brand-rule" aria-hidden />
            </div>
          </div>
          <div className="socials">
            {socials.instagram_url ? (
              <a href={socials.instagram_url} aria-label="Instagram" target="_blank" rel="noopener noreferrer">
                <InstagramIcon size={17} />
              </a>
            ) : null}
            {whatsappUrl ? (
              <a href={whatsappUrl} aria-label="WhatsApp" target="_blank" rel="noopener noreferrer">
                <MessageCircle width={17} height={17} aria-hidden />
              </a>
            ) : null}
            {socials.twitter_url ? (
              <a href={socials.twitter_url} aria-label="Twitter / X" target="_blank" rel="noopener noreferrer">
                <XIcon size={17} />
              </a>
            ) : null}
            {socials.youtube_url ? (
              <a href={socials.youtube_url} aria-label="YouTube" target="_blank" rel="noopener noreferrer">
                <YoutubeIcon size={17} />
              </a>
            ) : null}
            {socials.snapchat_url ? (
              <a href={socials.snapchat_url} aria-label="Snapchat" target="_blank" rel="noopener noreferrer">
                <SnapchatIcon size={17} />
              </a>
            ) : null}
          </div>
        </div>

        <nav className="grid">
          <div className="col">
            {labels.footer_heading_site ? <h4>{labels.footer_heading_site}</h4> : null}
            <ul>
              {quickLinks.map((item) => (
                <li key={item.href}>
                  <Link href={localizeHref(item.href, locale)}>{item.label}</Link>
                </li>
              ))}
            </ul>
          </div>

          <div className="col">
            {labels.footer_heading_services ? <h4>{labels.footer_heading_services}</h4> : null}
            <ul>
              {services.map((item) => (
                <li key={item.href}>
                  <Link href={localizeHref(item.href, locale)}>{item.label}</Link>
                </li>
              ))}
            </ul>
          </div>

          <div className="col col--contact">
            {labels.footer_heading_contact ? <h4>{labels.footer_heading_contact}</h4> : null}
            <ul>
              {whatsappUrl && labels.whatsapp_label ? (
                <li>
                  <a href={whatsappUrl} target="_blank" rel="noopener noreferrer">
                    <MessageCircle style={ICON_STYLE} aria-hidden /> {labels.whatsapp_label}
                  </a>
                </li>
              ) : null}
              {contact.phone ? (
                <li>
                  <a href={`tel:${contact.phone.replace(/\s+/g, "")}`}>
                    <Phone style={ICON_STYLE} aria-hidden /> {contact.phone}
                  </a>
                </li>
              ) : null}
              {contact.email ? (
                <li>
                  <a href={`mailto:${contact.email}`}>
                    <Mail style={ICON_STYLE} aria-hidden /> {contact.email}
                  </a>
                </li>
              ) : null}
            </ul>
            {legal.commercial_registration_image ? (
              <CommercialRegistrationViewer
                image={legal.commercial_registration_image}
                number={legal.commercial_registration_number}
              />
            ) : null}
          </div>
        </nav>

        <div className="bot">
          {labels.footer_copyright ? <div>{labels.footer_copyright}</div> : <div />}
          <div className="links">
            {labels.legal_privacy ? (
              <Link href={localizeHref("/privacy", locale)}>{labels.legal_privacy}</Link>
            ) : null}
            {labels.legal_terms ? (
              <Link href={localizeHref("/terms", locale)}>{labels.legal_terms}</Link>
            ) : null}
          </div>
        </div>
      </div>
    </footer>
  );
}