"use client";

import { motion } from "framer-motion";
import { marked } from "marked";
import Image from "next/image";
import { useEffect, useState } from "react";
import { getContactContent, getMediaUrl } from "../../../lib/strapiClient";
import { gaEvent } from "../../../lib/ga";

const STRAPI_BASE = "https://admin.laskar.pl";

type ContactContent = {
  tytul_sekcji?: string | null;
  opis_sekcji?: string | null;
  adres?: string | null;
  numer_telefonu?: string | null;
  adres_email?: string | null;
  tekst_przycisku?: string | null;
  zdjecie_sekcji?: unknown;
};

function toAbsoluteStrapiUrl(url: string | null): string | null {
  if (!url) return null;
  const trimmed = url.trim();
  if (!trimmed) return null;
  if (/^https?:\/\//i.test(trimmed)) return trimmed;
  if (trimmed.startsWith("/")) return `${STRAPI_BASE}${trimmed}`;
  return `${STRAPI_BASE}/${trimmed}`;
}

function isVideoUrl(url: string): boolean {
  const clean = url.split("?")[0].split("#")[0].toLowerCase();
  return (
      clean.endsWith(".mp4") ||
      clean.endsWith(".webm") ||
      clean.endsWith(".ogg") ||
      clean.endsWith(".mov") ||
      clean.endsWith(".m4v") ||
      clean.endsWith(".m3u8")
  );
}

function safeMediaUrl(input: unknown): string | null {
  const raw = input ? String(getMediaUrl(input as any) || "").trim() : "";
  return toAbsoluteStrapiUrl(raw);
}

function renderMarkdown(md: string): string {
  const html = marked.parse(md ?? "") as unknown;
  return typeof html === "string" ? html : "";
}

export default function ContactModalContent({ locale = "pl" }: { locale?: import("../../../lib/locale").SupportedLocale }) {
  // HOOKS: zawsze w tej samej kolejności
  const [content, setContent] = useState<ContactContent | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = (await getContactContent(locale)) as ContactContent | null;
        setContent(data);
      } catch (err) {
        console.error("Błąd pobierania danych kontaktowych:", err);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  // Track view: tylko gdy mamy dane
  useEffect(() => {
    if (loading) return;
    if (!content) return;

    gaEvent("contact_modal_view", {
      has_phone: Boolean(content.numer_telefonu),
      has_email: Boolean(content.adres_email),
    });
  }, [loading, content]);

  // Zmienne (bez hooków) – bezpiecznie nawet gdy content=null
  const title = content?.tytul_sekcji || "Kontakt";
  const description = content?.opis_sekcji || "";

  const phone = (content?.numer_telefonu || "").trim();
  const email = (content?.adres_email || "").trim();
  const buttonLabel = content?.tekst_przycisku || "Skontaktuj się";

  const mediaUrl = safeMediaUrl(content?.zdjecie_sekcji);
  const mediaIsVideo = mediaUrl ? isVideoUrl(mediaUrl) : false;

  const addressRaw = (content?.adres || "").trim();
  const addressHtml = addressRaw ? renderMarkdown(addressRaw) : "";

  // DOPIERO teraz warunkowe returny (hooki już wywołane)
  if (loading) return <div className="text-white p-6">Ładowanie…</div>;
  if (!content) return <div className="text-red-500 p-6">Brak danych kontaktowych.</div>;

  return (
      <motion.div
          onClick={(e) => e.stopPropagation()}
          className="w-full text-white"
          initial={{ opacity: 0, scale: 0.95, y: 30 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={{ opacity: 0, scale: 0.95, y: 30 }}
          transition={{ duration: 0.3, ease: "easeOut" }}
      >
        <div className="overflow-hidden rounded-2xl border border-white/10 bg-white/5 shadow-2xl">
          {/* HERO */}
          <div className="relative w-full h-48 sm:h-64">
            {mediaUrl ? (
                mediaIsVideo ? (
                    <video
                        src={mediaUrl}
                        autoPlay
                        muted
                        loop
                        playsInline
                        preload="metadata"
                        className="absolute inset-0 w-full h-full object-cover brightness-75"
                    />
                ) : (
                    <Image src={mediaUrl} alt={title} fill priority className="object-cover brightness-75" />
                )
            ) : (
                <div className="absolute inset-0 w-full h-full bg-white/10" />
            )}

            <div className="absolute inset-0 bg-black/50" />
            <div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4">
              <h1 className="text-3xl sm:text-4xl font-bold">{title}</h1>
              {description && (
                  <p className="text-white/70 mt-2 text-sm sm:text-base max-w-md">{description}</p>
              )}
            </div>
          </div>

          {/* CONTENT */}
          <div className="p-6 sm:p-8 space-y-6 text-center">
            <div className="text-sm sm:text-base text-white/80 space-y-2">
              {addressHtml && (
                  <div
                      className="font-medium"
                      dangerouslySetInnerHTML={{ __html: addressHtml }}
                  />
              )}

              {phone && (
                  <p>
                    Telefon:{" "}
                    <a
                        href={`tel:${phone}`}
                        className="text-white underline underline-offset-2 hover:opacity-90"
                        onClick={(e) => {
                          e.stopPropagation();
                          gaEvent("contact_click", { method: "phone", value: phone, placement: "contact_modal" });
                        }}
                    >
                      {phone}
                    </a>
                  </p>
              )}

              {email && (
                  <p>
                    Email:{" "}
                    <a
                        href={`mailto:${email}`}
                        className="text-white underline underline-offset-2 hover:opacity-90"
                        onClick={(e) => {
                          e.stopPropagation();
                          gaEvent("contact_click", { method: "email", value: email, placement: "contact_modal" });
                        }}
                    >
                      {email}
                    </a>
                  </p>
              )}
            </div>

            {email && (
                <a
                    href={`mailto:${email}`}
                    className="inline-block text-sm font-medium text-[#eea71f] border border-[#eea71f] px-5 py-2 rounded-full hover:bg-[#eea71f]/10 transition duration-300 ease-in-out cursor-pointer"
                    onClick={(e) => {
                      e.stopPropagation();
                      gaEvent("contact_cta_click", { method: "email", value: email, placement: "contact_modal_cta" });
                    }}
                >
                  {buttonLabel}
                </a>
            )}
          </div>
        </div>
      </motion.div>
  );
}