import { useState } from 'react';
import type { CSSProperties } from 'react';

interface Project {
  id: string;
  title: string;
  subtitle?: string;
  description: string;
  image?: string;
  category: string;
  status: string;
  url?: string;
  stack: string[];
  featured?: boolean;
}

interface Props {
  project: Project;
  index: number;
  bpm?: number;
}

function statusInfo(status: string) {
  switch (status) {
    case 'live':
      return { label: 'LIVE', color: 'var(--color-acid)' };
    case 'archived':
      return { label: 'ARCHIVED', color: 'var(--color-text-dim)' };
    case 'private':
      return { label: 'DUBPLATE', color: 'var(--color-magenta)' };
    case 'wip':
      return { label: 'WIP', color: 'var(--color-violet)' };
    default:
      return { label: status.toUpperCase(), color: 'var(--color-cyan)' };
  }
}

export default function SkeudCard({ project, index, bpm }: Props) {
  const [hover, setHover] = useState(false);
  const status = statusInfo(project.status);
  const bpmValue = bpm ?? 120 + ((index * 13) % 80);
  const isArchived = project.status === 'archived';
  const isPrivate = project.status === 'private';
  const clickable = Boolean(project.url) && !isArchived && !isPrivate;
  const orderLabel = `#${String(index + 1).padStart(2, '0')}`;

  const Wrap = clickable ? 'a' : 'div';
  const wrapProps = clickable
    ? { href: project.url, target: '_blank', rel: 'noopener noreferrer' }
    : {};

  return (
    <Wrap
      {...wrapProps}
      className="group relative block w-[260px] sm:w-[300px] md:w-[340px] flex-shrink-0"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ perspective: 1200 } as CSSProperties}
    >
      {/* Order number en filigrane derrière */}
      <span
        className="absolute -top-8 sm:-top-10 -left-2 stencil text-5xl sm:text-7xl leading-none text-[color:var(--color-border)] select-none pointer-events-none"
        aria-hidden="true"
      >
        {orderLabel}
      </span>

      {/* Cover / pochette */}
      <div
        className="relative aspect-square bg-[color:var(--color-surface)] border border-[color:var(--color-border)] rounded-sm overflow-hidden transition-all duration-500"
        style={{
          transform: hover ? 'rotateY(-3deg) rotateX(2deg)' : 'rotateY(0) rotateX(0)',
          transformStyle: 'preserve-3d',
          boxShadow: hover
            ? '0 30px 60px -20px rgba(0, 240, 255, 0.25), 0 0 1px rgba(0, 240, 255, 0.4)'
            : '0 10px 30px -10px rgba(0,0,0,0.5)',
          filter: isArchived ? 'grayscale(0.7)' : 'none',
        }}
      >
        {project.image ? (
          <img
            src={project.image}
            alt={project.title}
            className="w-full h-full object-cover"
            style={{
              transform: hover ? 'scale(1.04)' : 'scale(1)',
              transition: 'transform 0.6s cubic-bezier(0.22, 1, 0.36, 1)',
            }}
          />
        ) : (
          <div className="w-full h-full flex flex-col items-center justify-center gap-4 warehouse-bg">
            <span className="stencil text-4xl uppercase text-[color:var(--color-text-muted)]">
              {project.title.slice(0, 1)}
            </span>
            <span className="font-mono text-[9px] uppercase tracking-widest text-[color:var(--color-text-dim)]">
              // no cover
            </span>
          </div>
        )}

        {/* Stickers overlay */}
        <div className="absolute top-3 left-3 flex flex-col gap-1.5">
          <span
            className="sticker"
            style={{ color: status.color, transform: 'rotate(-3deg)' }}
          >
            <span
              className="led mr-1.5"
              style={{ background: status.color, boxShadow: `0 0 6px ${status.color}` }}
            />
            {status.label}
          </span>
          <span
            className="sticker text-[color:var(--color-cyan)]"
            style={{ transform: 'rotate(1deg)' }}
          >
            {bpmValue} BPM
          </span>
        </div>

        {/* Scanlines overlay */}
        <div className="absolute inset-0 scanlines opacity-40 pointer-events-none"></div>
      </div>

      {/* Vinyle qui sort par la droite */}
      <div
        aria-hidden="true"
        className="absolute top-0 right-0 w-[88%] aspect-square pointer-events-none transition-transform duration-500 ease-out"
        style={{
          transform: hover
            ? 'translate(42%, 0) rotate(360deg)'
            : 'translate(6%, 0) rotate(0)',
          transitionProperty: 'transform',
          transitionDuration: hover ? '1.4s' : '0.5s',
          zIndex: -1,
        }}
      >
        <div
          className="w-full h-full rounded-full"
          style={{
            background:
              'radial-gradient(circle at center, transparent 18%, #050508 19%, #0E0E14 55%, #050508 85%, #00000000 100%)',
            boxShadow:
              '0 0 0 1px rgba(255,255,255,0.04) inset, 0 15px 40px -8px rgba(0,0,0,0.8)',
          }}
        >
          {/* Grooves */}
          <svg viewBox="0 0 100 100" className="w-full h-full">
            {[40, 35, 30, 25, 20].map((r, i) => (
              <circle
                key={i}
                cx="50"
                cy="50"
                r={r}
                fill="none"
                stroke="rgba(255,255,255,0.04)"
                strokeWidth="0.4"
              />
            ))}
            <circle
              cx="50"
              cy="50"
              r="11"
              fill={hover ? 'var(--color-acid)' : 'var(--color-magenta)'}
              style={{ transition: 'fill 0.4s' }}
            />
            <circle cx="50" cy="50" r="1" fill="#000" />
          </svg>
        </div>
      </div>

      {/* Infos en bas */}
      <div className="mt-5 space-y-2">
        <div className="flex items-center justify-between gap-2">
          <h3
            className="font-display text-lg font-semibold group-hover:text-[color:var(--color-cyan)] transition-colors"
          >
            {project.title}
          </h3>
          <span className="font-mono text-[10px] text-[color:var(--color-text-dim)] uppercase tracking-widest">
            [{project.category}]
          </span>
        </div>
        {project.subtitle && (
          <p className="font-mono text-[10px] text-[color:var(--color-text-dim)] uppercase tracking-widest">
            {project.subtitle}
          </p>
        )}
        <p className="text-xs text-[color:var(--color-text-muted)] line-clamp-2">
          {project.description}
        </p>
        {project.stack.length > 0 && (
          <div className="flex flex-wrap gap-1 pt-1">
            {project.stack.slice(0, 4).map((tech) => (
              <span
                key={tech}
                className="font-mono text-[9px] uppercase tracking-wider px-1.5 py-0.5 text-[color:var(--color-text-muted)] border border-[color:var(--color-border)] rounded-sm"
              >
                {tech}
              </span>
            ))}
            {project.stack.length > 4 && (
              <span className="font-mono text-[9px] uppercase tracking-wider px-1.5 py-0.5 text-[color:var(--color-text-dim)]">
                +{project.stack.length - 4}
              </span>
            )}
          </div>
        )}
      </div>
    </Wrap>
  );
}
