"use client";

import { useEffect } from "react";
import Image from "next/image";
import { X, Instagram } from "lucide-react";
import type { TeamMember } from "@/types";

interface TeamMemberModalProps {
  member: TeamMember | null;
  onClose: () => void;
}

export function TeamMemberModal({ member, onClose }: TeamMemberModalProps) {
  useEffect(() => {
    if (!member) return;

    document.body.style.overflow = "hidden";

    function handleKeyDown(e: KeyboardEvent) {
      if (e.key === "Escape") onClose();
    }

    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.body.style.overflow = "";
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [member, onClose]);

  if (!member) return null;

  return (
    <div
      className="modal-overlay fixed inset-0 z-50 flex items-end justify-center bg-black/70 backdrop-blur-lg sm:items-center sm:p-4"
      onClick={onClose}
    >
      <div
        className="modal-content relative flex w-full max-h-[90vh] flex-col overflow-hidden rounded-t-3xl bg-white sm:max-w-lg sm:rounded-3xl dark:bg-[#111]"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Hero photo */}
        <div className="relative h-72 w-full shrink-0 sm:h-80">
          <Image
            src={member.image}
            alt={member.name}
            fill
            className="object-cover"
          />
          {/* Gradient overlay */}
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent" />

          {/* Close button */}
          <button
            onClick={onClose}
            className="absolute right-4 top-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-black/40 text-white/80 backdrop-blur-sm transition-all hover:bg-black/60 hover:text-white"
            aria-label="Закрыть"
          >
            <X size={16} />
          </button>

          {/* Name + Instagram on photo */}
          <div className="absolute bottom-0 left-0 right-0 p-6">
            <h3 className="text-2xl font-bold text-white">
              {member.name}
            </h3>
            {member.instagram && (
              <a
                href={member.instagram}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-2 inline-flex items-center gap-2 text-sm text-white/70 transition-colors hover:text-rose-400"
              >
                <Instagram size={15} className="shrink-0" />
                <span>{member.instagram.split("/").filter(Boolean).pop()}</span>
              </a>
            )}
          </div>
        </div>

        {/* Description */}
        {member.description && (
          <div className="overflow-y-auto p-6">
            <p className="text-sm leading-relaxed text-neutral-600 dark:text-neutral-400">
              {member.description}
            </p>
          </div>
        )}
      </div>
    </div>
  );
}
