import Link from "next/link";
import Image from "next/image";
import {
  Mail,
  MapPin,
  Phone,
  Clock,
  Compass,
} from "lucide-react";
import { getSiteSettings } from "@/services/settings.service";
import { makeWhatsAppUrl } from "@/lib/formatters/phone";
import type { SiteSettings } from "@/types/common";
import ScrollToTopButton from "./ScrollToTopButton";
import styles from "./Footer.module.css";

// Dipakai hanya kalau /superadmin/settings belum diisi admin atau API gagal
// diambil — nilai sebenarnya datang dari SettingwebsiteController (backend),
// sama seperti yang sudah dipakai halaman /kontak.
const FALLBACK_SETTINGS: SiteSettings = {
  app_name: "PPT Adventure",
  whatsapp_number: "628123456789",
  instagram_handle: "pptadventure",
  youtube_handle: "pptadventure",
  tiktok_handle: "pptadventure",
  email: "info@pptadventure.com",
  address: "Indonesia",
  business_hours: "Senin - Sabtu, 08.00 - 17.00 WIB",
};

const NAV_LINKS = [
  { href: "/", label: "Beranda" },
  { href: "/open-trip", label: "Open Trip" },
  { href: "/tentang-kami", label: "Tentang Kami" },
  { href: "/faq", label: "FAQ" },
  { href: "/syarat-ketentuan", label: "Syarat & Ketentuan" },
  { href: "/karier", label: "Karier" },
  { href: "/kontak", label: "Kontak" },
];

const TRIP_LINKS = [
  { href: "/open-trip?type=WEEKEND", label: "Trip Weekend" },
  { href: "/open-trip?type=WEEKDAY", label: "Trip Weekday" },
  { href: "/open-trip", label: "Semua Jadwal" },
  { href: "/karier", label: "Bergabung Sebagai Crew" },
];

export default async function Footer() {
  const year = new Date().getFullYear();

  let settings = FALLBACK_SETTINGS;
  try {
    settings = await getSiteSettings();
  } catch {
    // gunakan info kontak fallback
  }

  const whatsappNumber = settings.whatsapp_number || FALLBACK_SETTINGS.whatsapp_number!;
  const emailAddress = settings.email || FALLBACK_SETTINGS.email!;
  const instagramHandle = settings.instagram_handle || FALLBACK_SETTINGS.instagram_handle!;
  const youtubeHandle = settings.youtube_handle || FALLBACK_SETTINGS.youtube_handle!;
  const tiktokHandle = settings.tiktok_handle || FALLBACK_SETTINGS.tiktok_handle!;
  const address = settings.address || FALLBACK_SETTINGS.address!;
  const businessHours = settings.business_hours || FALLBACK_SETTINGS.business_hours!;

  return (
    <footer className={styles.footer} role="contentinfo">
      {/* ── 1. MAIN FOOTER (Dark Forest Green) ──────────────────────── */}
      <div className={styles.mainFooter}>
        {/* Background Mountain & Pine Tree Silhouette (Bottom Left) */}
        <div className={styles.bgSilhouetteWrap} aria-hidden="true">
          <svg
            className={styles.bgSilhouetteSvg}
            viewBox="0 0 450 180"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            {/* Mountain Ridge */}
            <path
              d="M0 180L40 130L90 150L160 85L230 145L310 100L380 155L450 180H0Z"
              fill="rgba(0, 0, 0, 0.15)"
            />
            {/* Pine Trees Silhouettes */}
            <path
              d="M15 180L25 150L20 150L28 135L24 135L30 120L36 135L32 135L40 150L35 150L45 180H15Z"
              fill="rgba(255, 255, 255, 0.05)"
            />
            <path
              d="M35 180L45 145L40 145L48 130L44 130L50 115L56 130L52 130L60 145L55 145L65 180H35Z"
              fill="rgba(255, 255, 255, 0.06)"
            />
            <path
              d="M60 180L72 140L66 140L75 125L70 125L78 105L86 125L81 125L90 140L84 140L96 180H60Z"
              fill="rgba(255, 255, 255, 0.07)"
            />
            <path
              d="M95 180L108 145L102 145L112 128L106 128L115 110L124 128L118 128L128 145L122 145L135 180H95Z"
              fill="rgba(255, 255, 255, 0.06)"
            />
            <path
              d="M130 180L145 148L139 148L150 132L144 132L152 118L160 132L154 132L165 148L159 148L174 180H130Z"
              fill="rgba(255, 255, 255, 0.05)"
            />
          </svg>

          {/* Handwritten badge over the trees */}
          <div className={styles.treeBadge}>
            <span className={styles.treeBadgeText}>
              Good People<br />Great Adventure
            </span>
            <svg
              className={styles.treeBadgeLine}
              viewBox="0 0 100 12"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 7C25 2 65 3 98 10"
                stroke="var(--ppt-primary, #269436)"
                strokeWidth="2"
                strokeLinecap="round"
              />
            </svg>
          </div>
        </div>

        <div className={`container ${styles.mainFooterInner}`}>
          {/* Column 1: Brand & Social */}
          <div className={styles.brandCol}>
            <Link href="/" className={styles.brandLogo} aria-label="PPT Adventure — Beranda">
              <Image
                src="/brand/ppt-logo.png"
                alt="PPT Adventure"
                width={54}
                height={45}
                className={styles.brandLogoImg}
              />
              <span className={styles.brandLogoText}>
                PPT <span className={styles.brandLogoAccent}>Adventure</span>
              </span>
            </Link>

            <p className={styles.brandDesc}>
              Penikmat Privat Trip. Pendakian gunung yang lebih terencana, aman,
              dan berkesan bersama pemandu berpengalaman.
            </p>

            {/* 4 Circular Social Media Buttons */}
            <div className={styles.socialRow} aria-label="Media Sosial PPT Adventure">
              <a
                href={`https://instagram.com/${instagramHandle}`}
                target="_blank"
                rel="noopener noreferrer"
                className={styles.socialBtn}
                aria-label="Instagram PPT Adventure"
              >
                <svg
                  viewBox="0 0 24 24"
                  width={18}
                  height={18}
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  aria-hidden="true"
                >
                  <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                  <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
                </svg>
              </a>
              <a
                href={makeWhatsAppUrl(whatsappNumber, "Halo PPT Adventure, saya ingin bertanya seputar trip.")}
                target="_blank"
                rel="noopener noreferrer"
                className={styles.socialBtn}
                aria-label="WhatsApp PPT Adventure"
              >
                <Phone size={17} aria-hidden="true" />
              </a>
              <a
                href={`https://youtube.com/@${youtubeHandle}`}
                target="_blank"
                rel="noopener noreferrer"
                className={styles.socialBtn}
                aria-label="YouTube PPT Adventure"
              >
                <svg
                  viewBox="0 0 24 24"
                  width={19}
                  height={19}
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33zM9.75 15.02V8.48l5.75 3.27-5.75 3.27z" />
                </svg>
              </a>
              <a
                href={`https://tiktok.com/@${tiktokHandle}`}
                target="_blank"
                rel="noopener noreferrer"
                className={styles.socialBtn}
                aria-label="TikTok PPT Adventure"
              >
                {/* TikTok SVG Icon */}
                <svg
                  viewBox="0 0 24 24"
                  width={17}
                  height={17}
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.88 2.89 2.89 0 0 1-2.88-2.88 2.89 2.89 0 0 1 2.88-2.88c.28 0 .55.04.81.11v-3.52a6.37 6.37 0 0 0-.81-.05A6.34 6.34 0 0 0 3 15.67 6.34 6.34 0 0 0 9.34 22a6.34 6.34 0 0 0 6.34-6.33V9.05c1.23.83 2.7 1.32 4.29 1.36v-3.52c-.13 0-.26-.07-.38-.2z" />
                </svg>
              </a>
            </div>
          </div>

          {/* Column 2: Navigasi */}
          <div className={styles.navCol}>
            <div className={styles.colHeader}>
              <h3 className={styles.colTitle}>NAVIGASI</h3>
              <span className={styles.colUnderline} aria-hidden="true" />
            </div>
            <ul className={styles.linkList}>
              {NAV_LINKS.map((link) => (
                <li key={link.href}>
                  <Link href={link.href} className={styles.navLink}>
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Column 3: Open Trip */}
          <div className={styles.navCol}>
            <div className={styles.colHeader}>
              <h3 className={styles.colTitle}>OPEN TRIP</h3>
              <span className={styles.colUnderline} aria-hidden="true" />
            </div>
            <ul className={styles.linkList}>
              {TRIP_LINKS.map((link) => (
                <li key={link.href}>
                  <Link href={link.href} className={styles.navLink}>
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Column 4: Informasi */}
          <div className={styles.infoCol}>
            <div className={styles.colHeader}>
              <h3 className={styles.colTitle}>INFORMASI</h3>
              <span className={styles.colUnderline} aria-hidden="true" />
            </div>
            <ul className={styles.infoList}>
              <li className={styles.infoItem}>
                <MapPin size={17} className={styles.infoIcon} aria-hidden="true" />
                <span>{address}</span>
              </li>
              <li className={styles.infoItem}>
                <Mail size={17} className={styles.infoIcon} aria-hidden="true" />
                <span>{emailAddress}</span>
              </li>
              <li className={styles.infoItem}>
                <Phone size={17} className={styles.infoIcon} aria-hidden="true" />
                <span>{whatsappNumber}</span>
              </li>
              <li className={styles.infoItem}>
                <Clock size={17} className={styles.infoIcon} aria-hidden="true" />
                <span>{businessHours}</span>
              </li>
            </ul>
          </div>

          {/* Column 5: Quote & Compass Area */}
          <div className={styles.quoteCol}>
            <div className={styles.quoteVerticalDivider} aria-hidden="true" />
            <div className={styles.quoteContent}>
              <div className={styles.compassWrapper} aria-hidden="true">
                <Compass size={32} strokeWidth={1.8} className={styles.compassIcon} />
              </div>
              <blockquote className={styles.quoteText}>
                &ldquo;Jelajah lebih jauh, temukan versi terbaik dari dirimu.&rdquo;
              </blockquote>
              <svg
                className={styles.quoteUnderline}
                viewBox="0 0 100 12"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                aria-hidden="true"
              >
                <path
                  d="M2 7C25 2 65 3 98 10"
                  stroke="var(--ppt-primary, #269436)"
                  strokeWidth="2"
                  strokeLinecap="round"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>

      {/* ── 3. BOTTOM BAR ───────────────────────────────────────────── */}
      <div className={styles.bottomBar}>
        <div className={`container ${styles.bottomBarInner}`}>
          <p className={styles.copyright}>
            &copy; {year} PPT Adventure. Seluruh hak dilindungi.
          </p>

          <div className={styles.bottomRight}>
            <div className={styles.legalLinks}>
              <Link href="/kebijakan-privasi" className={styles.legalLink}>
                Kebijakan Privasi
              </Link>
              <span className={styles.legalDivider} aria-hidden="true">|</span>
              <Link href="/syarat-ketentuan" className={styles.legalLink}>
                Syarat &amp; Ketentuan
              </Link>
              <span className={styles.legalDivider} aria-hidden="true">|</span>
              <Link href="/faq" className={styles.legalLink}>
                FAQ
              </Link>
            </div>

            {/* Scroll-to-Top Button */}
            <ScrollToTopButton />
          </div>
        </div>
      </div>
    </footer>
  );
}