import { ReactNode } from "react";
import { Link } from "wouter";
import { Phone, Apple, Play } from "lucide-react";
import { Header } from "./Header";
import { useLanguage } from "../../contexts/LanguageContext";

function XIcon({ className = "" }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={className}>
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z" />
    </svg>
  );
}

interface FooterLink {
  label: string;
  href: string;
  internal?: boolean;
}

export function AppLayout({ children }: { children: ReactNode }) {
  const { t } = useLanguage();
  const f = t.footer;

  const overviewLinks: FooterLink[] = [
    { label: f.overviewAbout, href: "/about", internal: true },
    { label: f.overviewCommittees, href: "/about/committees", internal: true },
    { label: f.overviewSms, href: "#" },
    { label: f.overviewSitemap, href: "#" },
  ];

  const supportLinks: FooterLink[] = [
    { label: f.supportComplaints, href: "#" },
    { label: f.supportSla, href: "#" },
    { label: f.supportFaq, href: "#" },
    { label: f.supportPrivacy, href: "#" },
    { label: f.supportAccessibility, href: "#" },
  ];

  const renderLink = (link: FooterLink) => {
    const cls =
      "text-sm text-white/80 transition-colors hover:text-white";
    if (link.internal) {
      return (
        <Link key={link.label} href={link.href} className={cls}>
          {link.label}
        </Link>
      );
    }
    return (
      <a key={link.label} href={link.href} className={cls}>
        {link.label}
      </a>
    );
  };

  return (
    <div className="min-h-[100dvh] flex flex-col bg-background font-sans">
      <Header />
      <main className="flex-1">
        {children}
      </main>
      <footer className="mt-auto bg-[#14573A] text-white">
        <div className="container mx-auto px-4 py-12">
          <div className="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
            {/* Overview */}
            <nav aria-label={f.overviewTitle} className="flex flex-col items-center gap-4 text-center lg:items-start lg:text-start">
              <h3 className="text-base font-bold">{f.overviewTitle}</h3>
              <div className="flex flex-col gap-3">{overviewLinks.map(renderLink)}</div>
            </nav>

            {/* Support */}
            <nav aria-label={f.supportTitle} className="flex flex-col items-center gap-4 text-center lg:items-start lg:text-start">
              <h3 className="text-base font-bold">{f.supportTitle}</h3>
              <div className="flex flex-col gap-3">{supportLinks.map(renderLink)}</div>
            </nav>

            {/* Contact + App download */}
            <div className="flex flex-col items-center gap-6 text-center sm:col-span-2 lg:col-span-1 lg:items-start lg:text-start">
              <div className="flex flex-col items-center gap-4 lg:items-start">
                <h3 className="text-base font-bold">{f.contactTitle}</h3>
                <div className="flex items-center gap-3">
                  <a
                    href="#"
                    aria-label={f.phoneLabel}
                    className="flex h-10 w-10 items-center justify-center rounded-full border border-white/40 text-white transition-colors hover:bg-white hover:text-[#14573A]"
                  >
                    <Phone className="h-4 w-4" aria-hidden="true" />
                  </a>
                  <a
                    href="#"
                    aria-label={f.xLabel}
                    className="flex h-10 w-10 items-center justify-center rounded-full border border-white/40 text-white transition-colors hover:bg-white hover:text-[#14573A]"
                  >
                    <XIcon className="h-3.5 w-3.5" />
                  </a>
                </div>
              </div>

              <div className="flex flex-col items-center gap-4 lg:items-start">
                <h3 className="text-base font-bold">{f.downloadTitle}</h3>
                <div className="flex items-center gap-3">
                  <a
                    href="#"
                    aria-label={f.appStoreLabel}
                    className="flex h-10 w-10 items-center justify-center rounded-lg border border-white/40 text-white transition-colors hover:bg-white hover:text-[#14573A]"
                  >
                    <Apple className="h-5 w-5" aria-hidden="true" />
                  </a>
                  <a
                    href="#"
                    aria-label={f.googlePlayLabel}
                    className="flex h-10 w-10 items-center justify-center rounded-lg border border-white/40 text-white transition-colors hover:bg-white hover:text-[#14573A]"
                  >
                    <Play className="h-5 w-5" aria-hidden="true" />
                  </a>
                </div>
              </div>
            </div>
          </div>

          {/* Bottom bar */}
          <div className="mt-10 flex flex-col items-center gap-6 border-t border-white/15 pt-6 sm:flex-row sm:justify-between">
            <div className="flex items-center gap-6">
              <div className="flex flex-col leading-tight">
                <span className="text-lg font-extrabold tracking-wide">SDAIA</span>
                <span className="text-[10px] text-white/70">{f.sdaiaSubtitle}</span>
              </div>
              <div className="h-8 w-px bg-white/20" aria-hidden="true" />
              <div className="flex flex-col leading-tight">
                <span className="text-sm font-bold tracking-[0.2em]">{f.visionLine1}</span>
                <span className="text-xl font-extrabold tracking-tight">{f.visionLine2}</span>
              </div>
            </div>
            <p className="text-xs text-white/70">
              {f.rights} &copy; {new Date().getFullYear()}
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
}