"use client";

import { useRef, useState } from "react";
import SafeImage from "./SafeImage";

interface Task {
  name: string;
  description: string;
  status: string;
  technologies: string[];
}

interface ProjectLink {
  name: string;
  url: string;
}

interface Project {
  name: string;
  description: string;
  logo?: string;
  links?: ProjectLink[];
  tasks: Task[];
}

interface Experience {
  company: string;
  position: string;
  startDate: string;
  endDate: string;
  logo?: string;
}

interface Education {
  degree: string;
  school: string;
  startDate: string;
  endDate: string;
}

interface HeroProps {
  name: string;
  lastName: string;
  title: string;
  description: string;
  skills: string[];
  projects: Project[];
  experiences: Experience[];
  education: Education[];
  languages: { name: string; level: string }[];
  interests: string[];
  location: string;
}

// ─── BentoCard ───────────────────────────────────────────────────────────────

function BentoCard({
  num,
  label,
  href,
  children,
  accent = false,
  delay = 0,
  className = "",
  style = {},
  onClick,
}: {
  num: string;
  label: string;
  href: string;
  children: React.ReactNode;
  accent?: boolean;
  delay?: number;
  className?: string;
  style?: React.CSSProperties;
  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
}) {
  const cardRef = useRef<HTMLAnchorElement>(null);
  const [mousePosition, setMousePosition] = useState({ x: -1000, y: -1000 });
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseMove = (e: React.MouseEvent<HTMLAnchorElement>) => {
    if (cardRef.current) {
      const rect = cardRef.current.getBoundingClientRect();
      setMousePosition({
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
      });
    }
  };

  return (
    <a
      ref={cardRef}
      href={href}
      onClick={onClick}
      className={`bento-card ${className}`}
      onMouseMove={handleMouseMove}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{
        animationName: "fadeUp",
        animationDuration: "0.7s",
        animationTimingFunction: "ease",
        animationFillMode: "both",
        animationDelay: `${delay}ms`,
        display: "flex",
        flexDirection: "column",
        padding: "1.75rem",
        border: "1px solid rgba(255,255,255,0.05)",
        background: accent ? "rgba(200,169,110,0.03)" : "rgba(14,16,20,0.4)",
        backdropFilter: "blur(12px)",
        textDecoration: "none",
        color: "inherit",
        position: "relative",
        overflow: "hidden",
        cursor: "pointer",
        transition: "border-color 0.4s ease, transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease",
        borderRadius: "16px",
        minHeight: "220px",
        boxShadow: isHovered ? "0 8px 32px rgba(0,0,0,0.4)" : "0 4px 16px rgba(0,0,0,0.2)",
        transform: isHovered ? "translateY(-4px) scale(1.01)" : "translateY(0) scale(1)",
        borderColor: isHovered ? "rgba(200,169,110,0.3)" : "rgba(255,255,255,0.05)",
        ...style,
      }}
    >
      {/* Spotlight Effect */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: `radial-gradient(500px circle at ${mousePosition.x}px ${mousePosition.y}px, rgba(200,169,110,0.12), transparent 40%)`,
          opacity: isHovered ? 1 : 0,
          transition: "opacity 0.4s ease",
          pointerEvents: "none",
          zIndex: 0,
        }}
      />

      <div style={{ position: "relative", zIndex: 1, display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "auto" }}>
        <div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.58rem", letterSpacing: "0.2em", color: "#c8a96e", opacity: 0.8 }}>
          {num} · {label}
        </div>
        <div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.75rem", color: "#c8a96e", opacity: isHovered ? 1 : 0, transition: "opacity 0.3s ease, transform 0.3s ease", transform: isHovered ? "translate(2px, -2px)" : "translate(0, 0)" }}>
          ↗
        </div>
      </div>

      <div style={{ marginTop: "1.25rem", flex: 1, position: "relative", zIndex: 1, display: "flex", flexDirection: "column" }}>{children}</div>
    </a>
  );
}

// ─── Hero ─────────────────────────────────────────────────────────────────────

export default function Hero({
  name,
  lastName,
  title,
  description,
  skills,
  projects,
  experiences,
  education,
  languages,
  interests,
  location,
}: HeroProps) {
  const feat1 = projects.find(p => p.name === "FOON") || projects[0];
  const feat2 = projects.find(p => p.name === "Gazelle") || projects[1];
  const topSkills = skills.slice(0, 10);

  const handleFeatureClick = (projectName: string) => {
    const idx = projects.findIndex((p) => p.name === projectName);
    if (idx !== -1) {
      window.dispatchEvent(new CustomEvent("openProject", { detail: { index: idx } }));
    }
  };

  const levelColor = (level: string) => {
    if (level === "Native") return "#c8a96e";
    if (level === "C2") return "#3a7a5a";
    return "#4a6050";
  };

  return (
    <section
      id="hero"
      className="hero-section"
      style={{ minHeight: "100vh", position: "relative", zIndex: 10 }}
    >
      <style>{`
        .creative-bento-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1.25rem;
          width: 100%;
          position: relative;
        }
        
        .bento-span-2x2 { grid-column: span 2; grid-row: span 2; }
        .bento-span-2x1 { grid-column: span 2; grid-row: span 1; }
        .bento-span-1x1 { grid-column: span 1; grid-row: span 1; }

        @media (max-width: 1024px) {
          .creative-bento-grid {
            grid-template-columns: repeat(2, 1fr);
          }
          .bento-span-2x2 { grid-column: span 2; grid-row: span 2; }
          .bento-span-2x1 { grid-column: span 2; grid-row: span 1; }
          .bento-span-1x1 { grid-column: span 1; grid-row: span 1; }
        }

        @media (max-width: 600px) {
          .creative-bento-grid {
            grid-template-columns: 1fr;
            gap: 1rem;
          }
          .bento-span-2x2, .bento-span-2x1, .bento-span-1x1 {
            grid-column: span 1;
            grid-row: auto;
          }
        }
          
        .glow-text {
          text-shadow: 0 0 24px rgba(200, 169, 110, 0.4);
        }
      `}</style>

      <div style={{ maxWidth: "1200px", margin: "0 auto", position: "relative" }}>

        {/* ── Headline ─────────────────────────────────────────────────── */}
        <div
          className="animate-fade-up delay-1"
          style={{ marginBottom: "2.5rem" }}
        >
          <h1
            style={{
              fontFamily: "var(--font-lora), Georgia, serif",
              fontStyle: "italic",
              fontWeight: 400,
              fontSize: "clamp(3rem, 7vw, 7.5rem)",
              lineHeight: 1.05,
              letterSpacing: "-0.02em",
              color: "#e2e4e9",
              margin: 0,
              userSelect: "none",
            }}
          >
            Let&apos;s bend
            <br />
            <span style={{ color: "#c8a96e" }} className="glow-text">spacetime</span>
          </h1>
        </div>

        {/* ── Name + description strip ──────────────────────────────── */}
        <div className="hero-header-strip animate-fade-up delay-2">
          <div>
            <div
              className="section-label"
              style={{ marginBottom: "0.5rem", display: "flex", alignItems: "center", gap: "0.6rem" }}
            >
              <span style={{ display: "inline-block", width: "24px", height: "1px", background: "#c8a96e" }} />
              {title}
            </div>
            <div
              style={{
                fontFamily: "var(--font-bebas), Impact, sans-serif",
                fontSize: "clamp(1.8rem, 4.5vw, 3.5rem)",
                letterSpacing: "0.04em",
                color: "#6b7280",
                lineHeight: 1,
              }}
            >
              {name}{" "}
              <span style={{ color: "#4a5060" }}>{lastName}</span>
            </div>
          </div>

          <div style={{ maxWidth: "420px" }}>
            <p style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.95rem", lineHeight: 1.75, color: "#8b92a5", margin: 0 }}>
              {description}
            </p>
            <div style={{ display: "flex", alignItems: "center", gap: "0.6rem", marginTop: "1rem" }}>
              <div style={{ width: "8px", height: "8px", borderRadius: "50%", background: "#c8a96e", boxShadow: "0 0 8px #c8a96e" }} />
              <span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.65rem", letterSpacing: "0.15em", color: "#c8a96e", textTransform: "uppercase" }}>
                Based in {location}
              </span>
            </div>
          </div>
        </div>

        {/* ── Divider ───────────────────────────────────────────────── */}
        <div
          className="animate-fade-up delay-3"
          style={{ height: "1px", background: "linear-gradient(90deg, rgba(200,169,110,0.5) 0%, transparent 100%)", marginBottom: "3rem", opacity: 0.3 }}
        />

        {/* ── Creative Bento grid ──────────────────────────────────────── */}
        <div className="creative-bento-grid">

          {/* 01 — FOON (Span 2x2: Large Feature) */}
          <BentoCard 
            num="01" 
            label="Showcase" 
            href="#projects" 
            accent 
            delay={400} 
            className="bento-span-2x2"
            onClick={() => handleFeatureClick(feat1.name)}
          >
            <div style={{ display: "flex", alignItems: "center", gap: "1rem", marginBottom: "1.25rem" }}>
              {feat1.logo && (
                <div style={{ background: "rgba(255,255,255,0.05)", padding: "12px", borderRadius: "12px", backdropFilter: "blur(4px)", border: "1px solid rgba(255,255,255,0.05)" }}>
                  <SafeImage src={feat1.logo} alt={feat1.name} width={40} height={40}
                    style={{ width: "32px", height: "32px", objectFit: "contain", filter: "brightness(1.1)" }}
                  />
                </div>
              )}
              <div>
                <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "2.5rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1 }}>
                  {feat1.name}
                </h3>
                <span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.65rem", color: "#c8a96e", letterSpacing: "0.1em", textTransform: "uppercase" }}>
                  Featured Project
                </span>
              </div>
            </div>
            
            <p style={{ fontFamily: "var(--font-lora), serif", fontSize: "1rem", lineHeight: 1.7, color: "#9ca3af", marginBottom: "1.5rem" }}>
              {feat1.description}
            </p>
            
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "0.75rem", marginBottom: "1.5rem" }}>
              {feat1.tasks.slice(0, 2).map((task) => (
                <div key={task.name} style={{ background: "rgba(0,0,0,0.2)", borderRadius: "8px", padding: "10px 12px", border: "1px solid rgba(255,255,255,0.03)" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "4px" }}>
                    <span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.7rem", color: "#e2e4e9" }}>{task.name}</span>
                    <span className={task.status === "Done" ? "status-done" : "status-progress"} style={{ fontSize: "0.5rem", padding: "2px 4px" }}>{task.status}</span>
                  </div>
                  <div style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.8rem", color: "#6b7280", lineHeight: 1.4 }}>
                    {task.description.length > 80 ? task.description.slice(0, 80) + "..." : task.description}
                  </div>
                </div>
              ))}
            </div>

            <div style={{ display: "flex", flexWrap: "wrap", gap: "0.4rem", marginBottom: "1rem" }}>
              {feat1.tasks.flatMap((t) => t.technologies).filter((v, i, a) => a.indexOf(v) === i).slice(0, 6).map((tech) => (
                <span key={tech} className="tech-tag" style={{ borderRadius: "4px", background: "rgba(200,169,110,0.05)" }}>{tech}</span>
              ))}
            </div>

            {feat1.links && (
              <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap", marginTop: "auto", borderTop: "1px solid rgba(255,255,255,0.05)", paddingTop: "1rem" }}>
                {feat1.links.map((l) => (
                  <span key={l.name} style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.65rem", letterSpacing: "0.1em", color: "#c8a96e", textTransform: "uppercase", display: "flex", alignItems: "center", gap: "4px" }}>
                    ↗ {l.name}
                  </span>
                ))}
              </div>
            )}
          </BentoCard>

          {/* 02 — Gazelle (Span 2x1) */}
          <BentoCard 
            num="02" 
            label="Enterprise" 
            href="#projects" 
            delay={500} 
            className="bento-span-2x1"
            onClick={() => handleFeatureClick(feat2.name)}
          >
            <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", marginBottom: "0.75rem" }}>
              {feat2.logo && (
                <SafeImage src={feat2.logo} alt={feat2.name} width={28} height={28}
                  fallbackLabel={feat2.name.slice(0, 2).toUpperCase()}
                  style={{ width: "24px", height: "24px", objectFit: "contain", filter: "brightness(0.9) grayscale(0.2)" }}
                />
              )}
              <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "2rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1 }}>
                {feat2.name}
              </h3>
            </div>
            <p style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.85rem", lineHeight: 1.65, color: "#8b92a5", marginBottom: "1rem", flex: 1 }}>
              {feat2.description}
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
              {feat2.tasks.slice(0, 4).map((task) => (
                <div key={task.name} style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
                  <span style={{ width: "6px", height: "6px", borderRadius: "50%", background: task.status === "Done" ? "#3a7a5a" : "#c8954a", flexShrink: 0, boxShadow: `0 0 4px ${task.status === "Done" ? "#3a7a5a" : "#c8954a"}` }} />
                  <span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.65rem", color: "#9ca3af", letterSpacing: "0.02em", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                    {task.name}
                  </span>
                </div>
              ))}
            </div>
          </BentoCard>

          {/* 03 — Experience (Span 1x1) */}
          <BentoCard num="03" label="Career" href="#experience" delay={600} className="bento-span-1x1">
            <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "1.8rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1, marginBottom: "1rem" }}>
              Experience
            </h3>
            <div style={{ display: "flex", flexDirection: "column", gap: "0.8rem", flex: 1 }}>
              {experiences.slice(0, 2).map((exp, i) => (
                <div key={exp.company + exp.position} style={{ display: "flex", alignItems: "flex-start", gap: "0.75rem", opacity: i === 0 ? 1 : 0.6 }}>
                  <div style={{ width: "6px", height: "6px", borderRadius: "50%", background: i === 0 ? "#c8a96e" : "transparent", border: i === 0 ? "none" : "1px solid #4a5060", marginTop: "6px", flexShrink: 0 }} />
                  <div>
                    <div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.7rem", color: i === 0 ? "#e2e4e9" : "#8b92a5", letterSpacing: "0.02em", lineHeight: 1.3 }}>
                      {exp.position}
                    </div>
                    <div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.6rem", letterSpacing: "0.1em", color: i === 0 ? "#c8a96e" : "#4a5060", textTransform: "uppercase", marginTop: "2px" }}>
                      {exp.company}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </BentoCard>

          {/* 04 — Education (Span 1x1) */}
          <BentoCard num="04" label="Academic" href="#education" delay={700} className="bento-span-1x1">
            <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "1.8rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1, marginBottom: "1rem" }}>
              Education
            </h3>
            <div style={{ display: "flex", flexDirection: "column", gap: "0.85rem", flex: 1 }}>
              {education.slice(0, 2).map((edu, i) => (
                <div key={edu.degree} style={{ borderLeft: i === 0 ? "2px solid #c8a96e" : "2px solid rgba(255,255,255,0.1)", paddingLeft: "0.75rem" }}>
                  <div style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "1rem", letterSpacing: "0.04em", color: i === 0 ? "#e2e4e9" : "#8b92a5", lineHeight: 1.2, marginBottom: "0.2rem" }}>
                    {edu.degree}
                  </div>
                  <div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.6rem", letterSpacing: "0.08em", color: "#4a5060", textTransform: "uppercase" }}>
                    {edu.school.split(" ").slice(-2).join(" ")}
                  </div>
                </div>
              ))}
            </div>
          </BentoCard>

          {/* 05 — Skills (Span 2x1) */}
          <BentoCard num="05" label="Stack" href="#skills" delay={800} className="bento-span-2x1">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: "1rem" }}>
              <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "2rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1, margin: 0 }}>
                Arsenal
              </h3>
              <span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.65rem", color: "#c8a96e", letterSpacing: "0.1em" }}>
                {skills.length} TECHNOLOGIES
              </span>
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem" }}>
              {topSkills.map((skill, i) => (
                <span key={skill} className="tech-tag" style={{ borderRadius: "6px", padding: "4px 10px", fontSize: "0.7rem", background: i < 3 ? "rgba(200,169,110,0.1)" : "rgba(255,255,255,0.03)", borderColor: i < 3 ? "rgba(200,169,110,0.3)" : "rgba(255,255,255,0.05)", color: i < 3 ? "#e8c887" : "#9ca3af" }}>
                  {skill}
                </span>
              ))}
              {skills.length > 10 && (
                <span className="tech-tag" style={{ borderRadius: "6px", padding: "4px 10px", fontSize: "0.7rem", background: "transparent", borderColor: "dashed 1px rgba(255,255,255,0.1)", color: "#4a5060" }}>
                  +{skills.length - 10} more
                </span>
              )}
            </div>
          </BentoCard>

          {/* 06 — About (Span 2x1) */}
          <BentoCard num="06" label="Profile" href="#contact" accent delay={900} className="bento-span-2x1">
            <h3 style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "2rem", letterSpacing: "0.04em", color: "#e2e4e9", lineHeight: 1, marginBottom: "1.2rem" }}>
              Beyond Code
            </h3>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem" }}>
              <div>
                <div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.6rem", letterSpacing: "0.15em", color: "#6b7280", textTransform: "uppercase", marginBottom: "0.6rem" }}>
                  Languages
                </div>
                <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
                  {languages.map((lang) => (
                    <span key={lang.name} style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.65rem", padding: "3px 8px", borderRadius: "4px", background: `linear-gradient(90deg, ${levelColor(lang.level)}22, transparent)`, borderLeft: `2px solid ${levelColor(lang.level)}`, color: "#e2e4e9", letterSpacing: "0.04em" }}>
                      {lang.name} <span style={{ color: levelColor(lang.level), opacity: 0.8 }}>{lang.level}</span>
                    </span>
                  ))}
                </div>
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.6rem", letterSpacing: "0.15em", color: "#6b7280", textTransform: "uppercase", marginBottom: "0.6rem" }}>
                  Interests
                </div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: "0.4rem" }}>
                  {interests.map((interest) => (
                    <span key={interest} style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.85rem", fontStyle: "italic", color: "#8b92a5", background: "rgba(255,255,255,0.02)", padding: "2px 8px", borderRadius: "12px" }}>
                      {interest}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </BentoCard>
        </div>

        {/* ── Scroll hint ───────────────────────────────────────────── */}
        <div
          className="animate-fade-up delay-6"
          style={{ marginTop: "3rem", display: "flex", alignItems: "center", justifyContent: "center", gap: "1rem" }}
        >
          <div style={{ height: "1px", width: "40px", background: "linear-gradient(90deg, transparent, rgba(200,169,110,0.5))" }} />
          <span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.65rem", letterSpacing: "0.2em", color: "#c8a96e", textTransform: "uppercase", opacity: 0.8 }} className="scroll-indicator">
            Scroll to explore
          </span>
          <div style={{ height: "1px", width: "40px", background: "linear-gradient(-90deg, transparent, rgba(200,169,110,0.5))" }} />
        </div>
      </div>
    </section>
  );
}
