"use client";

import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import Image from "next/image";
import { ArrowUpRight, X } from "lucide-react";
import { cn } from "@/lib/cn";
import type { Leader } from "@/lib/content";

const TILE_CLS: Record<Leader["tile"], string> = {
  navy: "bg-navy text-white",
  brand: "bg-brand text-white",
  amber: "bg-accent text-navy",
};

/* Premium leader profile dialog — portaled, scroll-locked, Escape to close. */
export default function LeaderModal({
  leader,
  onClose,
}: {
  leader: Leader;
  onClose: () => void;
}) {
  const [mounted] = useState(() => typeof document !== "undefined");

  useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prev;
      document.removeEventListener("keydown", onKey);
    };
  }, [onClose]);

  if (!mounted) return null;

  return createPortal(
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-navy/60 p-4 sm:p-6"
      role="dialog"
      aria-modal="true"
      aria-label={`About ${leader.name}`}
      onMouseDown={(e) => {
        if (e.target === e.currentTarget) onClose();
      }}
    >
      <div className="flex max-h-[88dvh] w-full max-w-[620px] flex-col overflow-hidden rounded-2xl bg-white text-ink">
        {/* Header */}
        <div className="relative flex items-center gap-4 bg-navy px-6 py-5 sm:px-7">
          <span
            aria-hidden="true"
            className={cn(
              "grid size-13 shrink-0 place-items-center rounded-2xl font-display text-[22px] font-bold tracking-tight",
              TILE_CLS[leader.tile]
            )}
          >
            {leader.initials}
          </span>
          <div className="min-w-0">
            <h3 className="font-display text-[20px] font-bold leading-tight text-white">
              {leader.name}
            </h3>
            <p className="mt-0.5 text-[13px] font-semibold text-brand-light">
              {leader.role}
            </p>
          </div>
          <button
            type="button"
            onClick={onClose}
            aria-label="Close"
            className="absolute right-4 top-4 grid size-9 place-items-center rounded-lg text-white/70 hover:bg-white/10 hover:text-white"
          >
            <X size={19} aria-hidden="true" />
          </button>
        </div>

        {/* Body */}
        <div className="space-y-4 overflow-y-auto px-6 py-6 sm:px-7">
          <p className="rounded-xl bg-canvas px-4 py-3 text-[13.5px] font-medium leading-relaxed text-body">
            {leader.summary}
          </p>
          {leader.bio.map((p, i) => (
            <p key={i} className="text-[14px] leading-relaxed text-body">
              {p}
            </p>
          ))}
          {leader.blocks.map((b) => (
            <div key={b.heading}>
              <h4 className="font-display text-[15px] font-bold text-ink">
                {b.heading}
              </h4>
              <ul className="mt-2 space-y-2">
                {b.paras.map((p, i) => (
                  <li
                    key={i}
                    className="border-l-2 border-brand/30 pl-3 text-[13.5px] italic leading-relaxed text-muted"
                  >
                    {p}
                  </li>
                ))}
              </ul>
            </div>
          ))}
          {leader.iiml && (
            <div className="rounded-2xl border border-line p-5">
              <div className="flex items-center gap-4">
                <Image
                  src="/IIMLIncubator_Logo.avif"
                  alt="IIM Lucknow Incubator logo"
                  width={120}
                  height={48}
                  className="h-12 w-auto shrink-0"
                />
                <p className="font-mono text-[10px] font-semibold tracking-[0.14em] text-muted">
                  IIML-INCUBATOR · IIM LUCKNOW
                </p>
              </div>
              <p className="mt-3 text-[13.5px] leading-relaxed text-body">
                {leader.iiml.text}
              </p>
              <a
                href={leader.iiml.href}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-4 inline-flex min-h-[42px] items-center gap-1.5 rounded-lg bg-brand px-5 text-[13px] font-semibold text-white hover:bg-brand-dark"
              >
                VIEW IIML INCUBATOR
                <ArrowUpRight size={15} aria-hidden="true" />
              </a>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="border-t border-line px-6 py-4 sm:px-7">
          <button
            type="button"
            onClick={onClose}
            className="inline-flex min-h-[44px] w-full items-center justify-center rounded-xl bg-navy px-5 text-sm font-semibold text-white hover:bg-brand-dark"
          >
            Close
          </button>
        </div>
      </div>
    </div>,
    document.body
  );
}