"use client";

import { useEffect, useState } from "react";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import {
  WhatsappLogo, FacebookLogo, InstagramLogo, TiktokLogo, SnapchatLogo, TwitterLogo,
  PhoneCall, EnvelopeSimple, MapPin,
} from "@phosphor-icons/react";
import { ArrowRight } from "lucide-react";
import { useLanguage } from "@/lib/i18n/context";
import type { ContactInfo } from "@/app/api/contact-info/route";

const DEFAULT_CONTACT: ContactInfo = {
  phone:    "+222 41 28 44 79",
  whatsapp: "22241284479",
  email:    "njuumaan@gmail.com",
  socials: [
    { platform: "facebook",  label: "Asli-Food",   href: "https://www.facebook.com/p/Asli-Food-61578120753965/" },
    { platform: "facebook",  label: "Njuumaan",    href: "https://web.facebook.com/Njuumaan" },
    { platform: "instagram", label: "@asli_food",  href: "https://www.instagram.com/asli_food/" },
    { platform: "instagram", label: "@njuumaan",   href: "https://www.instagram.com/njuumaan" },
    { platform: "tiktok",    label: "@asli__food", href: "https://www.tiktok.com/@asli__food" },
    { platform: "snapchat",  label: "@njuumaan",   href: "https://www.snapchat.com/@njuumaan" },
    { platform: "twitter",   label: "@Njuumaan",   href: "https://x.com/Njuumaan" },
  ],
};

function PlatformIcon({ platform, size = 14 }: { platform: string; size?: number }) {
  const props = { size, weight: "bold" as const };
  switch (platform) {
    case "instagram": return <InstagramLogo {...props} />;
    case "tiktok":    return <TiktokLogo    {...props} />;
    case "snapchat":  return <SnapchatLogo  {...props} />;
    case "twitter":   return <TwitterLogo   {...props} />;
    case "whatsapp":  return <WhatsappLogo  {...props} />;
    default:          return <FacebookLogo  {...props} />;
  }
}

function platformSub(platform: string) {
  switch (platform) {
    case "instagram": return "Instagram";
    case "tiktok":    return "TikTok";
    case "snapchat":  return "Snapchat";
    case "twitter":   return "Twitter / X";
    case "whatsapp":  return "WhatsApp";
    default:          return "Facebook";
  }
}

export default function ContactPage() {
  const { t } = useLanguage();
  const [contact, setContact] = useState<ContactInfo>(DEFAULT_CONTACT);

  useEffect(() => {
    fetch("/api/contact-info")
      .then(r => r.json())
      .then((data: ContactInfo) => { if (data && !("error" in data)) setContact(data); })
      .catch(() => {});
  }, []);

  const whatsappUrl = `https://wa.me/${contact.whatsapp}?text=Bonjour%2C%20je%20souhaite%20vous%20contacter.`;
  const phoneHref   = `tel:${contact.phone.replace(/\s+/g, "")}`;

  return (
    <>
      <Navbar />

      {/* Hero */}
      <section className="bg-brand-sand-light pt-40 pb-4 px-6">
        <div className="max-w-4xl mx-auto text-center space-y-6">
          <span className="inline-block bg-brand-dark text-brand-yellow px-4 py-2 rounded-full text-[11px] font-bold tracking-[0.22em] uppercase">
            {t.contact.badge}
          </span>
          <h1
            className="text-6xl lg:text-8xl font-bold leading-none tracking-tight text-brand-dark"
            style={{ fontFamily: "var(--font-space, sans-serif)" }}
          >
            {t.contact.line1}
            <span className="block text-stroke">{t.contact.line2}</span>
          </h1>
          <p className="text-brand-dark/55 text-lg leading-relaxed max-w-xl mx-auto">
            {t.contact.desc}
          </p>
        </div>
      </section>

      {/* Contact cards */}
      <section className="bg-brand-sand-light py-6 px-6">
        <div className="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-5">

          {/* WhatsApp */}
          {contact.whatsapp && (
            <a
              href={whatsappUrl}
              target="_blank" rel="noopener noreferrer"
              className="group bg-brand-dark rounded-3xl p-8 flex flex-col gap-4 hover:scale-[1.02] transition-transform duration-300"
            >
              <div className="w-12 h-12 rounded-2xl bg-brand-yellow/15 flex items-center justify-center">
                <WhatsappLogo size={24} weight="fill" className="text-brand-yellow" />
              </div>
              <div>
                <p className="text-white font-bold text-lg" style={{ fontFamily: "var(--font-space, sans-serif)" }}>WhatsApp</p>
                <p className="text-white/45 text-sm mt-1">{contact.phone}</p>
              </div>
              <span className="mt-auto inline-flex items-center gap-1.5 text-brand-yellow text-xs font-bold tracking-wide group-hover:gap-3 transition-all duration-300">
                {t.contact.whatsapp} <ArrowRight size={13} strokeWidth={2.5} />
              </span>
            </a>
          )}

          {/* Phone */}
          {contact.phone && (
            <a
              href={phoneHref}
              className="group bg-white rounded-3xl p-8 flex flex-col gap-4 border border-brand-dark/8 hover:scale-[1.02] transition-transform duration-300"
            >
              <div className="w-12 h-12 rounded-2xl bg-brand-dark/8 flex items-center justify-center">
                <PhoneCall size={24} weight="bold" className="text-brand-dark" />
              </div>
              <div>
                <p className="text-brand-dark font-bold text-lg" style={{ fontFamily: "var(--font-space, sans-serif)" }}>{t.contact.phone}</p>
                <p className="text-brand-dark/45 text-sm mt-1">{contact.phone}</p>
              </div>
              <span className="mt-auto inline-flex items-center gap-1.5 text-brand-dark text-xs font-bold tracking-wide group-hover:gap-3 transition-all duration-300">
                {t.contact.callNow} <ArrowRight size={13} strokeWidth={2.5} />
              </span>
            </a>
          )}

          {/* Email */}
          {contact.email && (
            <a
              href={`mailto:${contact.email}`}
              className="group bg-white rounded-3xl p-8 flex flex-col gap-4 border border-brand-dark/8 hover:scale-[1.02] transition-transform duration-300"
            >
              <div className="w-12 h-12 rounded-2xl bg-brand-dark/8 flex items-center justify-center">
                <EnvelopeSimple size={24} weight="bold" className="text-brand-dark" />
              </div>
              <div>
                <p className="text-brand-dark font-bold text-lg" style={{ fontFamily: "var(--font-space, sans-serif)" }}>Email</p>
                <p className="text-brand-dark/45 text-sm mt-1">{contact.email}</p>
              </div>
              <span className="mt-auto inline-flex items-center gap-1.5 text-brand-dark text-xs font-bold tracking-wide group-hover:gap-3 transition-all duration-300">
                {t.contact.sendEmail} <ArrowRight size={13} strokeWidth={2.5} />
              </span>
            </a>
          )}

        </div>
      </section>

      {/* Location + Socials */}
      <section className="bg-brand-off-white py-20 px-6">
        <div className="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12">

          {/* Location */}
          <div>
            <h2 className="text-2xl font-bold text-brand-dark mb-2" style={{ fontFamily: "var(--font-space, sans-serif)" }}>
              {t.contact.findUs}
            </h2>
            <p className="text-brand-dark/50 text-sm mb-6">{t.contact.findUsDesc}</p>
            <div className="flex items-start gap-3">
              <MapPin size={20} weight="bold" className="text-brand-yellow mt-0.5 flex-shrink-0" />
              <p className="text-brand-dark/70 text-sm leading-relaxed">
                {t.contact.location}
              </p>
            </div>
            <a
              href="/#boutiques"
              className="inline-flex items-center gap-2 mt-6 bg-brand-dark text-brand-yellow font-bold px-6 py-3 rounded-full text-sm tracking-wide hover:scale-105 transition-transform duration-300"
            >
              {t.contact.viewMap}
            </a>
          </div>

          {/* Socials */}
          <div>
            <h2 className="text-2xl font-bold text-brand-dark mb-2" style={{ fontFamily: "var(--font-space, sans-serif)" }}>
              {t.contact.socials}
            </h2>
            <p className="text-brand-dark/50 text-sm mb-6">{t.contact.socialsDesc}</p>
            <div className="flex flex-wrap gap-2">
              {contact.socials.map((s, i) => (
                <a
                  key={i}
                  href={s.href}
                  target="_blank" rel="noopener noreferrer"
                  className="flex items-center gap-2 bg-brand-dark hover:bg-brand-yellow group rounded-2xl px-3 py-2 transition-colors duration-300"
                >
                  <span className="text-brand-yellow group-hover:text-brand-dark transition-colors duration-300 flex-shrink-0">
                    <PlatformIcon platform={s.platform} size={14} />
                  </span>
                  <div>
                    <p className="text-white group-hover:text-brand-dark text-xs font-semibold leading-none transition-colors duration-300">{s.label}</p>
                    <p className="text-white/45 group-hover:text-brand-dark/60 text-[10px] mt-0.5 transition-colors duration-300">{platformSub(s.platform)}</p>
                  </div>
                </a>
              ))}
            </div>
          </div>

        </div>
      </section>

      <Footer />
    </>
  );
}