import { Link } from "@/i18n/navigation";
import type { Locale } from "@/i18n/routing";
import { getSiteContent } from "@/lib/site";
import { getTranslations } from "next-intl/server";
import type { SiteContent } from "@prisma/client";

function addressText(content: SiteContent | null, locale: Locale) {
  if (!content) return "";
  switch (locale) {
    case "ar":
      return content.addressAr;
    case "ru":
      return content.addressRu;
    case "it":
      return content.addressIt;
    default:
      return content.addressEn;
  }
}

type Props = { params: Promise<{ locale: string }> };

export default async function ContactPage({ params }: Props) {
  const { locale } = await params;
  const t = await getTranslations("contact");
  const content = await getSiteContent();
  const address = addressText(content, locale as Locale).trim();
  const embed = content?.mapEmbedUrl?.trim();

  return (
    <div className="mx-auto max-w-6xl px-4 py-12 md:px-6 md:py-16">
      <h1 className="font-[family-name:var(--font-display)] text-4xl text-foreground">
        {t("title")}
      </h1>

      <div className="mt-10 grid gap-10 lg:grid-cols-2">
        <section className="rounded-xl border border-border bg-card/50 p-6">
          <h2 className="font-[family-name:var(--font-display)] text-xl text-gold">
            {t("address")}
          </h2>
          <p className="mt-3 whitespace-pre-wrap text-muted">{address}</p>

          <h2 className="mt-8 font-[family-name:var(--font-display)] text-xl text-gold">
            {t("social")}
          </h2>
          <ul className="mt-3 space-y-2 text-sm text-muted">
            {content?.socialEmail ? (
              <li>
                <span className="text-foreground/80">{t("email")}: </span>
                <a
                  className="text-gold hover:underline"
                  href={`mailto:${content.socialEmail}`}
                >
                  {content.socialEmail}
                </a>
              </li>
            ) : null}
            {content?.socialInstagram ? (
              <li>
                <a
                  className="text-gold hover:underline"
                  href={content.socialInstagram}
                  target="_blank"
                  rel="noreferrer"
                >
                  Instagram
                </a>
              </li>
            ) : null}
            {content?.socialFacebook ? (
              <li>
                <a
                  className="text-gold hover:underline"
                  href={content.socialFacebook}
                  target="_blank"
                  rel="noreferrer"
                >
                  Facebook
                </a>
              </li>
            ) : null}
            {content?.socialTiktok ? (
              <li>
                <a
                  className="text-gold hover:underline"
                  href={content.socialTiktok}
                  target="_blank"
                  rel="noreferrer"
                >
                  TikTok
                </a>
              </li>
            ) : null}
            {content?.socialWhatsapp ? (
              <li>
                <a
                  className="text-gold hover:underline"
                  href={content.socialWhatsapp}
                  target="_blank"
                  rel="noreferrer"
                >
                  WhatsApp
                </a>
              </li>
            ) : null}
          </ul>

          <p className="mt-6 text-sm">
            <Link href="/reserve" className="text-gold hover:underline">
              → {t("reserveLink")}
            </Link>
          </p>
        </section>

        <section className="rounded-xl border border-border bg-card/50 p-6">
          <h2 className="font-[family-name:var(--font-display)] text-xl text-gold">
            {t("map")}
          </h2>
          {embed ? (
            <div className="mt-4 aspect-video w-full overflow-hidden rounded-lg border border-border">
              <iframe
                title="Map"
                src={embed}
                className="h-full w-full border-0"
                loading="lazy"
                allowFullScreen
              />
            </div>
          ) : (
            <p className="mt-4 text-sm text-muted">{t("noMap")}</p>
          )}
        </section>
      </div>
    </div>
  );
}