import { AnimatePresence, motion } from "framer-motion";
import { X, ArrowUpRight } from "lucide-react";
import { GithubIcon } from "./BrandIcons";
import { useEffect } from "react";

const caseFields = [
  { key: "problem", label: "El problema" },
  { key: "idea", label: "La idea" },
  { key: "solution", label: "La solución" },
  { key: "contribution", label: "Mi aporte" },
  { key: "result", label: "Resultado" },
  { key: "learning", label: "Aprendizaje" },
];

export default function ProjectModal({ project, onClose }) {
  useEffect(() => {
    if (!project) return;
    document.body.style.overflow = "hidden";
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", onKey);
    };
  }, [project, onClose]);

  return (
    <AnimatePresence>
      {project && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-[60] flex items-start sm:items-center justify-center overflow-y-auto bg-black/70 backdrop-blur-sm p-4 sm:p-8"
          onClick={onClose}
        >
          <motion.div
            initial={{ opacity: 0, y: 24, scale: 0.98 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 12, scale: 0.98 }}
            transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
            onClick={(e) => e.stopPropagation()}
            className="glass grain relative w-full max-w-3xl my-8 rounded-3xl p-6 sm:p-10"
          >
            <button
              onClick={onClose}
              aria-label="Cerrar"
              className="absolute top-5 right-5 grid place-items-center h-9 w-9 rounded-full border border-[color:var(--color-border)] hover:border-[color:var(--color-accent)] hover:text-[color:var(--color-accent)] transition-colors"
            >
              <X size={18} />
            </button>

            <p className="font-mono text-xs uppercase tracking-widest text-[color:var(--color-accent)] mb-2">
              Proyecto
            </p>
            <h3 className="font-display text-2xl sm:text-3xl font-semibold pr-10">{project.name}</h3>

            <div className="flex flex-wrap gap-2 mt-4">
              {project.tech.map((t) => (
                <span
                  key={t}
                  className="text-[11px] px-2 py-1 rounded-md bg-[color:var(--color-accent)]/10 text-[color:var(--color-accent)]"
                >
                  {t}
                </span>
              ))}
            </div>

            <div className="mt-8 grid gap-6 sm:grid-cols-2">
              {caseFields.map(({ key, label }) => (
                <div key={key}>
                  <p className="text-xs uppercase tracking-widest text-[color:var(--color-muted)] mb-1.5">
                    {label}
                  </p>
                  <p className="text-sm text-[color:var(--color-ink)]/90 leading-relaxed">
                    {project[key]}
                  </p>
                </div>
              ))}
            </div>

            <div className="mt-8">
              <p className="text-xs uppercase tracking-widest text-[color:var(--color-muted)] mb-2">
                Funcionalidades
              </p>
              <ul className="grid sm:grid-cols-2 gap-2">
                {project.features.map((f) => (
                  <li key={f} className="text-sm text-[color:var(--color-ink)]/90 flex gap-2">
                    <span className="text-[color:var(--color-accent)]">▸</span>
                    {f}
                  </li>
                ))}
              </ul>
            </div>

            <div className="mt-9 flex flex-wrap gap-4 pt-6 border-t border-[color:var(--color-border)]">
              <a
                href={project.links.demo}
                className="inline-flex items-center gap-2 rounded-full bg-[color:var(--color-accent)] text-[#05070d] font-medium px-5 py-2.5 hover:-translate-y-0.5 transition-transform"
              >
                Ver demo <ArrowUpRight size={16} />
              </a>
              <a
                href={project.links.code}
                className="inline-flex items-center gap-2 text-sm font-medium hover:text-[color:var(--color-accent)] transition-colors"
              >
                <GithubIcon size={16} /> Ver código
              </a>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}
