import Link from "next/link";
import {
  getBusinessSettings,
  mapsDirectionsUrl,
  mapsEmbedUrl,
  osmEmbedUrl,
} from "@/lib/business-settings";
import { SOCIAL_PLATFORMS } from "@/lib/social-platforms";
import { SocialIcon, socialLabel } from "@/components/social-icons";

// Forces this page to read settings + GOOGLE_MAPS_EMBED_KEY at request time
// instead of baking them in at build time, so admin changes (and adding a
// maps key later) don't require a rebuild to show up.
export const dynamic = "force-dynamic";

export default async function ContactPage() {
  const { address, phone, hours, coords, social } = await getBusinessSettings();
  const hoursLines = hours.split("\n").filter(Boolean);
  const activeSocial = SOCIAL_PLATFORMS.filter(
    (platform) => social[platform].enabled && social[platform].url
  );

  const directionsUrl = mapsDirectionsUrl(address);
  // Prefer a real Google Maps embed if the admin configured an API key;
  // otherwise fall back to a free OpenStreetMap embed (no key needed) using
  // coordinates resolved from the saved address; otherwise a static card.
  const googleEmbedUrl = mapsEmbedUrl(address);
  const fallbackEmbedUrl = coords ? osmEmbedUrl(coords) : null;
  const embedUrl = googleEmbedUrl ?? fallbackEmbedUrl;

  return (
    <div>
      <section className="bg-blush px-6 py-20 text-center">
        <p className="text-xs uppercase tracking-wide-plus text-rose-dark">Get in Touch</p>
        <h1 className="mt-3 font-display text-4xl text-rosewood">Contact</h1>
      </section>

      <section className="px-6 py-16">
        <div className="mx-auto grid max-w-4xl gap-10 sm:grid-cols-2">
          <div>
            <h2 className="text-xs uppercase tracking-wide-plus text-rose-dark">Studio</h2>
            <p className="mt-3 whitespace-pre-line text-sm text-ink/70">{address}</p>
          </div>
          <div>
            <h2 className="text-xs uppercase tracking-wide-plus text-rose-dark">Reach us</h2>
            <p className="mt-3 text-sm text-ink/70">
              hello@hairbynyasia.com
              <br />
              {phone}
            </p>
          </div>
          <div>
            <h2 className="text-xs uppercase tracking-wide-plus text-rose-dark">Hours</h2>
            <p className="mt-3 text-sm text-ink/70">
              {hoursLines.map((line, i) => (
                <span key={line}>
                  {line}
                  {i < hoursLines.length - 1 && <br />}
                </span>
              ))}
            </p>
          </div>
          <div>
            <h2 className="text-xs uppercase tracking-wide-plus text-rose-dark">Ready to book?</h2>
            <div className="mt-3 flex flex-col items-start gap-3">
              <Link
                href="/book"
                className="inline-block rounded-full bg-rosewood px-6 py-2.5 text-xs uppercase tracking-wide-plus text-cream transition hover:bg-rose-dark"
              >
                Book an Appointment
              </Link>
              <a
                href={directionsUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 rounded-full border border-rosewood/40 px-6 py-2.5 text-xs uppercase tracking-wide-plus text-rosewood transition hover:bg-rosewood/10"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-4 w-4"
                  aria-hidden="true"
                >
                  <path d="M21.71 11.29l-9-9a1 1 0 00-1.42 0l-9 9a1 1 0 000 1.42l9 9a1 1 0 001.42 0l9-9a1 1 0 000-1.42zM14 14.5V12h-3v3H9v-4a1 1 0 011-1h4V7.5l3.5 3.5-3.5 3.5z" />
                </svg>
                Get Directions
              </a>
            </div>
          </div>
          {activeSocial.length > 0 && (
            <div>
              <h2 className="text-xs uppercase tracking-wide-plus text-rose-dark">Follow Us</h2>
              <div className="mt-3 flex gap-3">
                {activeSocial.map((platform) => (
                  <a
                    key={platform}
                    href={social[platform].url}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={socialLabel(platform)}
                    className="flex h-9 w-9 items-center justify-center rounded-full bg-blush text-rosewood transition hover:bg-blush-dark"
                  >
                    <SocialIcon platform={platform} className="h-4 w-4" />
                  </a>
                ))}
              </div>
            </div>
          )}
        </div>
      </section>

      <section className="px-6 pb-20">
        <div className="mx-auto max-w-4xl">
          <h2 className="text-xs uppercase tracking-wide-plus text-rose-dark">Find Us</h2>
          <div className="mt-4 overflow-hidden rounded-2xl border border-blush-dark/50">
            {embedUrl ? (
              <iframe
                title="Studio location map"
                src={embedUrl}
                width="100%"
                height="360"
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                className="block"
              />
            ) : (
              <div className="flex h-[360px] flex-col items-center justify-center gap-3 bg-blush px-6 text-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-8 w-8 text-rose-dark"
                  aria-hidden="true"
                >
                  <path d="M12 2C7.86 2 4.5 5.36 4.5 9.5c0 5.5 7.5 12.5 7.5 12.5s7.5-7 7.5-12.5C19.5 5.36 16.14 2 12 2zm0 10.25a2.75 2.75 0 110-5.5 2.75 2.75 0 010 5.5z" />
                </svg>
                <p className="whitespace-pre-line text-sm text-ink/70">{address}</p>
                <p className="max-w-sm text-xs text-ink/50">
                  Save a real address in{" "}
                  <code className="rounded bg-cream px-1.5 py-0.5">/admin/settings</code> to show
                  a free map here automatically &mdash; directions work below either way.
                </p>
              </div>
            )}
          </div>
          <p className="mt-3 text-xs text-ink/50">
            Tap &ldquo;Get Directions&rdquo; to open turn-by-turn navigation from your current
            location in Google Maps.
          </p>
        </div>
      </section>
    </div>
  );
}
