"use client";

import { useEffect, useMemo, useState } from "react";
import { createPortal } from "react-dom";
import { motion, AnimatePresence } from "framer-motion";
import { X, ShieldCheck, FileText, CalendarDays, Loader2 } from "lucide-react";
import { useBodyScrollLock } from "@/src/lib/hooks/useBodyScrollLock";

interface PrivacyPolicyModalProps {
  isOpen: boolean;
  onClose: () => void;
  heading?: string;
  effectiveDate?: string;
  content?: string;
  isLoading?: boolean;
  linkLabel?: string;
}

export default function PrivacyPolicyModal({
  isOpen,
  onClose,
  heading,
  effectiveDate,
  content,
  isLoading = false,
  linkLabel,
}: PrivacyPolicyModalProps) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  // Lock background scroll without jumping the page to the top.
  useBodyScrollLock(isOpen);

  useEffect(() => {
    if (!isOpen) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [isOpen, onClose]);

  const displayHeading = heading || linkLabel || "Privacy Policy";
  const isTerms = /terms/i.test(displayHeading) || /terms/i.test(linkLabel || "");
  const HeaderIcon = isTerms ? FileText : ShieldCheck;

  // Split the copy into blocks; a block starting with "N. Title" becomes a
  // bold, themed heading followed by its body text.
  const blocks = useMemo(() => {
    return (content || "")
      .split(/\n\s*\n/)
      .map((b) => b.trim())
      .filter(Boolean)
      .map((block) => {
        const lines = block.split(/\r?\n/);
        const match = lines[0].match(/^\s*(\d+)\.\s+(.+?)\s*$/);
        if (match) {
          return {
            type: "section" as const,
            heading: `${match[1]}. ${match[2]}`,
            body: lines.slice(1).join("\n").trim(),
          };
        }
        return { type: "para" as const, heading: "", body: block };
      });
  }, [content]);

  const modal = (
    <AnimatePresence>
      {isOpen && (
        <div className="fixed inset-0 z-[2147483647] overflow-y-auto">
          {/* Backdrop */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
            className="fixed inset-0 bg-[#00294A]/60 backdrop-blur-[3px]"
          />

          {/* Centering wrapper — the whole overlay scrolls when content is tall */}
          <div className="relative min-h-full flex items-start sm:items-center justify-center p-0 sm:p-4 sm:py-10">
            {/* Dialog */}
            <motion.div
              initial={{ opacity: 0, y: 24, scale: 0.98 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: 24, scale: 0.98 }}
              transition={{ type: "spring", damping: 26, stiffness: 320 }}
              onClick={(e) => e.stopPropagation()}
              role="dialog"
              aria-modal="true"
              aria-label={displayHeading}
              className="relative w-full sm:max-w-2xl min-h-[100dvh] sm:min-h-0 bg-white sm:rounded-[24px] shadow-[0_30px_80px_-20px_rgba(0,41,74,0.55)] ring-1 ring-black/5 overflow-hidden flex flex-col"
            >
            {/* Header */}
            <div className="relative flex-shrink-0 bg-gradient-to-br from-[#0097DC] to-[#00639A] px-5 md:px-7 pt-6 pb-6">
              {/* subtle decorative glow */}
              <div className="pointer-events-none absolute -top-16 -right-10 w-48 h-48 rounded-full bg-white/10 blur-2xl" />

              <button
                type="button"
                onClick={onClose}
                aria-label="Close"
                className="absolute top-4 right-4 z-20 grid place-items-center w-9 h-9 rounded-full bg-white/15 hover:bg-white/25 text-white transition-colors cursor-pointer"
              >
                <X size={18} />
              </button>

              <div className="relative flex items-center gap-3.5 pr-10">
                <div className="flex-shrink-0 grid place-items-center w-12 h-12 rounded-2xl bg-white/15 ring-1 ring-white/25">
                  <HeaderIcon size={24} className="text-white" />
                </div>
                <div className="min-w-0 text-white">
                  <h2 className="text-[20px] md:text-[26px] font-bold font-[Signika] leading-tight break-words">
                    {displayHeading}
                  </h2>
                  {effectiveDate && !isLoading && (
                    <div className="inline-flex items-center gap-1.5 mt-2 bg-white/15 rounded-full px-2.5 py-1">
                      <CalendarDays size={13} className="flex-shrink-0" />
                      <span className="text-[11px] md:text-[12.5px] font-medium font-[Signika]">
                        Effective {effectiveDate}
                      </span>
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* Body */}
            <div className="flex-1 px-5 md:px-8 py-6 md:py-7">
              {isLoading ? (
                <div className="flex flex-col items-center justify-center gap-3 py-20 text-[#0097DC]">
                  <Loader2 className="animate-spin" size={30} />
                  <span className="text-sm font-[Signika] text-[#6B7280]">Loading…</span>
                </div>
              ) : blocks.length > 0 ? (
                <div className="space-y-5">
                  {blocks.map((block, i) =>
                    block.type === "section" ? (
                      <div key={i} className="space-y-1.5">
                        <h3 className="text-[#0097DC] font-bold font-[Signika] text-[16px] md:text-[18px] leading-snug">
                          {block.heading}
                        </h3>
                        {block.body && (
                          <p className="text-[#4B4B4D] font-[Signika] text-[14.5px] md:text-[16px] leading-[1.85] whitespace-pre-line break-words">
                            {block.body}
                          </p>
                        )}
                      </div>
                    ) : (
                      <p
                        key={i}
                        className="text-[#4B4B4D] font-[Signika] text-[14.5px] md:text-[16px] leading-[1.85] whitespace-pre-line break-words"
                      >
                        {block.body}
                      </p>
                    ),
                  )}
                </div>
              ) : (
                <p className="text-[#6B7280] font-[Signika] text-[15px] leading-relaxed">
                  No {displayHeading.toLowerCase()} content is available at this time.
                </p>
              )}
            </div>

            {/* Footer */}
            <div className="flex-shrink-0 flex items-center justify-between gap-4 px-5 md:px-8 py-4 border-t border-[#EEF3F7] bg-white">
              <p className="hidden sm:block text-[12px] text-[#9AA5B1] font-[Signika]">
                Young Engineers
              </p>
              <button
                type="button"
                onClick={onClose}
                className="ml-auto px-7 py-2.5 bg-gradient-to-r from-[#0097DC] to-[#0077B6] hover:shadow-[0_8px_20px_-6px_rgba(0,151,220,0.7)] active:scale-[0.98] text-white font-semibold font-[Signika] text-sm rounded-full transition-all duration-200 cursor-pointer"
              >
                Got it
              </button>
            </div>
            </motion.div>
          </div>
        </div>
      )}
    </AnimatePresence>
  );

  if (!mounted) return null;
  return createPortal(modal, document.body);
}