import { motion, useMotionValue, useTransform } from "framer-motion";
import { ArrowUpRight } from "lucide-react";
import { GithubIcon } from "./BrandIcons";
import { useReducedMotion } from "../hooks/useReducedMotion";

export default function ProjectCard({ project, onOpen }) {
  const reduced = useReducedMotion();
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const rotateX = useTransform(y, [-60, 60], [7, -7]);
  const rotateY = useTransform(x, [-60, 60], [-7, 7]);

  function handleMouseMove(e) {
    if (reduced) return;
    const rect = e.currentTarget.getBoundingClientRect();
    x.set(e.clientX - rect.left - rect.width / 2);
    y.set(e.clientY - rect.top - rect.height / 2);
  }

  function handleMouseLeave() {
    x.set(0);
    y.set(0);
  }

  return (
    <motion.div
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      style={reduced ? undefined : { rotateX, rotateY, transformPerspective: 900 }}
      className="glow-border rounded-2xl h-full"
    >
      <div className="glass grain rounded-2xl h-full flex flex-col overflow-hidden group">
        <button
          onClick={() => onOpen(project)}
          className="relative aspect-[16/10] w-full overflow-hidden text-left"
        >
          {project.image && !project.image.startsWith("[") ? (
            <img
              src={project.image}
              alt={project.name}
              className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
            />
          ) : (
            <div className="h-full w-full bg-gradient-to-br from-[color:var(--color-surface)] to-[color:var(--color-bg-soft)] grid place-items-center">
              <span className="font-mono text-xs text-[color:var(--color-muted)]">
                [CAPTURA_{project.id.toUpperCase()}]
              </span>
            </div>
          )}
          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/0 to-black/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
            <span className="inline-flex items-center gap-1.5 text-sm font-medium text-white">
              Ver caso de estudio <ArrowUpRight size={15} />
            </span>
          </div>
        </button>

        <div className="p-6 flex flex-col gap-4 flex-1">
          <div className="flex flex-wrap gap-2">
            {project.categories.map((cat) => (
              <span
                key={cat}
                className="text-[11px] font-mono uppercase tracking-wide px-2.5 py-1 rounded-full border border-[color:var(--color-border)] text-[color:var(--color-muted)]"
              >
                {cat}
              </span>
            ))}
          </div>

          <h3 className="font-display font-medium text-xl leading-snug">{project.name}</h3>
          <p className="text-sm text-[color:var(--color-muted)] leading-relaxed line-clamp-3">
            {project.short}
          </p>

          <div className="mt-auto flex flex-wrap gap-1.5 pt-2">
            {project.tech.slice(0, 4).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="flex items-center gap-4 pt-2 border-t border-[color:var(--color-border)]">
            <button
              onClick={() => onOpen(project)}
              className="text-sm font-medium text-[color:var(--color-ink)] hover:text-[color:var(--color-accent)] transition-colors inline-flex items-center gap-1"
            >
              Detalles <ArrowUpRight size={14} />
            </button>
            <a
              href={project.links.demo}
              className="text-sm text-[color:var(--color-muted)] hover:text-[color:var(--color-accent)] transition-colors inline-flex items-center gap-1"
            >
              Demo
            </a>
            <a
              href={project.links.code}
              className="text-sm text-[color:var(--color-muted)] hover:text-[color:var(--color-accent)] transition-colors inline-flex items-center gap-1 ml-auto"
            >
              <GithubIcon size={14} /> Código
            </a>
          </div>
        </div>
      </div>
    </motion.div>
  );
}
