import { useState, useEffect } from "react";

const glitchKeyframes = `
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap');

@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.4; }
  94% { opacity: 1; }
  96% { opacity: 0.6; }
  97% { opacity: 1; }
}

@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes inkBleed {
  0% { opacity: 0; transform: scale(0.95) translateY(8px); filter: blur(6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

@keyframes orbPulse {
  0%, 100% { box-shadow: 0 0 20px #8b2fc9, 0 0 60px #8b2fc940, inset 0 0 20px #8b2fc930; }
  50% { box-shadow: 0 0 40px #c77dff, 0 0 100px #8b2fc960, inset 0 0 40px #8b2fc960; }
}

@keyframes borderGlow {
  0%, 100% { border-color: #8b2fc950; }
  50% { border-color: #c77dff90; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

@keyframes reveal {
  from { width: 0%; }
  to { width: 100%; }
}

@keyframes statFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes particleDrift {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; }
  50% { opacity: 1; }
  100% { transform: translateY(-60px) translateX(20px) scale(0); opacity: 0; }
}
`;

const stats = [
  { label: "Visual Perception", value: 95, icon: "◈" },
  { label: "Shadow Manipulation", value: 88, icon: "◆" },
  { label: "Form Conjuring", value: 92, icon: "◉" },
  { label: "Ink Sorcery", value: 79, icon: "✦" },
  { label: "Dimensional Sight", value: 85, icon: "⬡" },
];

const abilities = [
  {
    name: "Void Canvas",
    desc: "Summons a tear in reality and paints what lies beyond.",
    cost: "★★★",
  },
  {
    name: "Penumbra Stroke",
    desc: "A single line that drinks light, casting areas into permanent shadow.",
    cost: "★★",
  },
  {
    name: "Ink Wraith",
    desc: "Breathes life into drawn figures, commanding them as shadowed scouts.",
    cost: "★★★★",
  },
  {
    name: "The Unseen Eye",
    desc: "Perceives hidden layers of reality invisible to ordinary sight.",
    cost: "★",
  },
];

const Particle = ({ style }) => (
  <div
    style={{
      position: "absolute",
      width: "3px",
      height: "3px",
      borderRadius: "50%",
      background: "#c77dff",
      animation: `particleDrift ${2 + Math.random() * 3}s ease-out infinite`,
      animationDelay: `${Math.random() * 4}s`,
      ...style,
    }}
  />
);

export default function CharacterProfile() {
  const [activeAbility, setActiveAbility] = useState(null);
  const [statsVisible, setStatsVisible] = useState(false);
  const [hovered, setHovered] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setStatsVisible(true), 800);
    return () => clearTimeout(timer);
  }, []);

  const particles = Array.from({ length: 12 }, (_, i) => ({
    left: `${10 + i * 7}%`,
    top: `${20 + (i % 4) * 20}%`,
    animationDelay: `${i * 0.4}s`,
  }));

  return (
    <>
      <style>{glitchKeyframes}</style>
      <div
        style={{
          minHeight: "100vh",
          background: "#080810",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          padding: "40px 20px",
          fontFamily: "'Cormorant Garamond', serif",
          position: "relative",
          overflow: "hidden",
        }}
      >
        {/* Background texture */}
        <div
          style={{
            position: "fixed",
            inset: 0,
            backgroundImage: `
              radial-gradient(ellipse at 20% 50%, #1a0a2e 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, #0d0020 0%, transparent 50%),
              radial-gradient(ellipse at 60% 80%, #120a1e 0%, transparent 50%)
            `,
            pointerEvents: "none",
          }}
        />

        {/* Scanline effect */}
        <div
          style={{
            position: "fixed",
            inset: 0,
            background:
              "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px)",
            pointerEvents: "none",
            zIndex: 1,
          }}
        />

        {/* Particles */}
        {particles.map((p, i) => (
          <Particle key={i} style={p} />
        ))}

        {/* Main card */}
        <div
          style={{
            position: "relative",
            zIndex: 2,
            width: "100%",
            maxWidth: "680px",
            animation: "inkBleed 1.2s ease-out forwards",
          }}
        >
          {/* Top ornament */}
          <div
            style={{
              textAlign: "center",
              marginBottom: "4px",
              color: "#8b2fc9",
              fontSize: "11px",
              letterSpacing: "6px",
              fontFamily: "'Cinzel Decorative', serif",
            }}
          >
            ✦ CODEX OF THE UNSEEN ✦
          </div>

          {/* Card border */}
          <div
            style={{
              border: "1px solid #8b2fc950",
              background:
                "linear-gradient(145deg, #0e0a1a 0%, #080810 50%, #0a0615 100%)",
              padding: "2px",
              animation: "borderGlow 3s ease-in-out infinite",
              boxShadow:
                "0 0 80px #8b2fc920, 0 40px 80px rgba(0,0,0,0.8), inset 0 1px 0 #8b2fc930",
            }}
          >
            <div
              style={{
                border: "1px solid #8b2fc920",
                padding: "40px 44px",
              }}
            >
              {/* Header */}
              <div
                style={{
                  display: "flex",
                  alignItems: "flex-start",
                  gap: "28px",
                  marginBottom: "36px",
                }}
              >
                {/* Avatar orb */}
                <div
                  onMouseEnter={() => setHovered(true)}
                  onMouseLeave={() => setHovered(false)}
                  style={{
                    width: "100px",
                    height: "100px",
                    borderRadius: "50%",
                    background:
                      "radial-gradient(circle at 35% 35%, #2d1b4e, #0d0618)",
                    border: "1px solid #8b2fc970",
                    animation: "orbPulse 3s ease-in-out infinite, float 4s ease-in-out infinite",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontSize: "40px",
                    flexShrink: 0,
                    cursor: "default",
                    transition: "transform 0.3s ease",
                    transform: hovered ? "scale(1.08)" : "scale(1)",
                  }}
                >
                  🎨
                </div>

                {/* Name block */}
                <div style={{ flex: 1 }}>
                  <div
                    style={{
                      fontSize: "9px",
                      letterSpacing: "5px",
                      color: "#8b2fc9",
                      fontFamily: "'Cinzel Decorative', serif",
                      marginBottom: "8px",
                    }}
                  >
                    SUBJECT CLASSIFICATION
                  </div>
                  <div
                    style={{
                      fontFamily: "'Cinzel Decorative', serif",
                      fontSize: "26px",
                      color: "#e8d5ff",
                      lineHeight: 1.1,
                      fontWeight: 700,
                      textShadow: "0 0 30px #8b2fc960",
                      marginBottom: "10px",
                    }}
                  >
                    The Penumbra
                    <br />
                    <span style={{ color: "#c77dff" }}>Architect</span>
                  </div>
                  <div
                    style={{
                      display: "flex",
                      gap: "10px",
                      flexWrap: "wrap",
                    }}
                  >
                    {["Shadow Class", "Tier Ω", "Visual Arts"].map((tag) => (
                      <span
                        key={tag}
                        style={{
                          fontSize: "9px",
                          letterSpacing: "2px",
                          color: "#c77dff",
                          border: "1px solid #8b2fc950",
                          padding: "3px 10px",
                          fontFamily: "'Cinzel Decorative', serif",
                          background: "#8b2fc910",
                        }}
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
              </div>

              {/* Divider */}
              <div
                style={{
                  height: "1px",
                  background:
                    "linear-gradient(to right, transparent, #8b2fc960, transparent)",
                  marginBottom: "28px",
                }}
              />

              {/* Lore text */}
              <div
                style={{
                  fontSize: "15px",
                  lineHeight: 1.9,
                  color: "#b89ec4",
                  fontStyle: "italic",
                  marginBottom: "32px",
                  borderLeft: "2px solid #8b2fc950",
                  paddingLeft: "20px",
                }}
              >
                "They do not merely <em style={{ color: "#e8d5ff" }}>draw</em>{" "}
                — they excavate. Each stroke peels away the surface of the
                visible world, revealing the{" "}
                <em style={{ color: "#e8d5ff" }}>breathing darkness</em>{" "}
                beneath. What others see as blank space, they see as a doorway."
              </div>

              {/* Stats */}
              <div style={{ marginBottom: "32px" }}>
                <div
                  style={{
                    fontSize: "9px",
                    letterSpacing: "5px",
                    color: "#8b2fc9",
                    fontFamily: "'Cinzel Decorative', serif",
                    marginBottom: "16px",
                  }}
                >
                  POWER INDEX
                </div>
                {stats.map((s, i) => (
                  <div
                    key={s.label}
                    style={{ marginBottom: "12px" }}
                  >
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        marginBottom: "5px",
                        fontSize: "12px",
                        color: "#9d7bbf",
                        letterSpacing: "1px",
                      }}
                    >
                      <span>
                        <span style={{ color: "#c77dff", marginRight: "8px" }}>
                          {s.icon}
                        </span>
                        {s.label}
                      </span>
                      <span style={{ color: "#e8d5ff" }}>{s.value}</span>
                    </div>
                    <div
                      style={{
                        height: "3px",
                        background: "#1a1025",
                        overflow: "hidden",
                      }}
                    >
                      <div
                        style={{
                          height: "100%",
                          width: `${s.value}%`,
                          background: `linear-gradient(to right, #4a1a7a, #c77dff)`,
                          transformOrigin: "left",
                          transform: statsVisible ? "scaleX(1)" : "scaleX(0)",
                          transition: `transform 1s ease ${0.1 * i + 0.8}s`,
                          boxShadow: "0 0 8px #c77dff80",
                        }}
                      />
                    </div>
                  </div>
                ))}
              </div>

              {/* Divider */}
              <div
                style={{
                  height: "1px",
                  background:
                    "linear-gradient(to right, transparent, #8b2fc960, transparent)",
                  marginBottom: "28px",
                }}
              />

              {/* Abilities */}
              <div>
                <div
                  style={{
                    fontSize: "9px",
                    letterSpacing: "5px",
                    color: "#8b2fc9",
                    fontFamily: "'Cinzel Decorative', serif",
                    marginBottom: "16px",
                  }}
                >
                  DARK ABILITIES
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px" }}>
                  {abilities.map((a, i) => (
                    <div
                      key={a.name}
                      onClick={() =>
                        setActiveAbility(activeAbility === i ? null : i)
                      }
                      style={{
                        border: `1px solid ${activeAbility === i ? "#c77dff60" : "#8b2fc930"}`,
                        padding: "14px",
                        cursor: "pointer",
                        background:
                          activeAbility === i ? "#8b2fc915" : "transparent",
                        transition: "all 0.25s ease",
                        position: "relative",
                        overflow: "hidden",
                      }}
                    >
                      <div
                        style={{
                          display: "flex",
                          justifyContent: "space-between",
                          alignItems: "center",
                          marginBottom: activeAbility === i ? "8px" : "0",
                        }}
                      >
                        <span
                          style={{
                            fontSize: "12px",
                            color: activeAbility === i ? "#e8d5ff" : "#c77dff",
                            fontFamily: "'Cinzel Decorative', serif",
                            letterSpacing: "0.5px",
                          }}
                        >
                          {a.name}
                        </span>
                        <span
                          style={{ fontSize: "9px", color: "#8b2fc9" }}
                        >
                          {a.cost}
                        </span>
                      </div>
                      {activeAbility === i && (
                        <div
                          style={{
                            fontSize: "12px",
                            color: "#9d7bbf",
                            fontStyle: "italic",
                            lineHeight: 1.6,
                          }}
                        >
                          {a.desc}
                        </div>
                      )}
                    </div>
                  ))}
                </div>
                <div style={{ fontSize: "10px", color: "#4a3460", textAlign: "center", marginTop: "10px", letterSpacing: "2px" }}>
                  TAP AN ABILITY TO REVEAL ITS SECRET
                </div>
              </div>

              {/* Bottom */}
              <div
                style={{
                  marginTop: "32px",
                  paddingTop: "20px",
                  borderTop: "1px solid #8b2fc920",
                  display: "flex",
                  justifyContent: "space-between",
                  fontSize: "10px",
                  color: "#4a3460",
                  letterSpacing: "3px",
                  fontFamily: "'Cinzel Decorative', serif",
                }}
              >
                <span>CODEX №∞</span>
                <span style={{ animation: "flicker 4s infinite" }}>
                  ◈ ACTIVE
                </span>
                <span>CLASSIFIED</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}