import { debugProps } from '@/lib/debug'

interface AppIconProps {
  size?: number
  className?: string
}

export function AppIcon({ size = 32, className }: AppIconProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 512 512"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      aria-label="Scrum4Me"
      {...debugProps('app-icon')}
    >
      <defs>
        <linearGradient id="s4m-bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor="#90b6dc"/>
          <stop offset="100%" stopColor="#e7e0ff"/>
        </linearGradient>
        <linearGradient id="s4m-nose" x1="256" y1="52" x2="256" y2="210" gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor="#e9d5ff"/>
          <stop offset="100%" stopColor="#7c3aed"/>
        </linearGradient>
        <filter id="s4m-glow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="8" result="blur"/>
          <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
        <filter id="s4m-flame" x="-40%" y="-40%" width="180%" height="180%">
          <feGaussianBlur stdDeviation="6" result="blur"/>
          <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
      </defs>

      {/* Background */}
      <rect width="512" height="512" rx="114" fill="url(#s4m-bg)"/>
      <ellipse cx="256" cy="270" rx="140" ry="160" fill="#c4b5fd" opacity="0.12"/>

      {/* Block 1 — PBI */}
      <rect x="178" y="374" width="156" height="64" rx="14" fill="#dbeafe"/>
      <rect x="178" y="374" width="156" height="64" rx="14" stroke="#8b5cf6" strokeWidth="2" fill="none"/>
      <circle cx="210" cy="406" r="5" fill="#7c3aed" opacity="0.8"/>
      <circle cx="228" cy="406" r="5" fill="#7c3aed" opacity="0.6"/>
      <circle cx="246" cy="406" r="5" fill="#7c3aed" opacity="0.4"/>

      {/* Block 2 — Story */}
      <rect x="148" y="294" width="216" height="76" rx="14" fill="#ede9fe"/>
      <rect x="148" y="294" width="216" height="76" rx="14" stroke="#a78bfa" strokeWidth="2" fill="none"/>
      <rect x="174" y="322" width="100" height="6" rx="3" fill="#c7d2fe" opacity="0.8"/>
      <rect x="174" y="338" width="68" height="6" rx="3" fill="#c7d2fe" opacity="0.6"/>

      {/* Block 3 — Task */}
      <rect x="164" y="210" width="184" height="80" rx="14" fill="#e9d5ff"/>
      <rect x="164" y="210" width="184" height="80" rx="14" stroke="#7c3aed" strokeWidth="2" fill="none"/>
      <path d="M196 252 L212 268 L240 238" stroke="#7135f8" strokeWidth="7" strokeLinecap="round" strokeLinejoin="round" fill="none" opacity="0.95"/>

      {/* Rocket nose */}
      <path d="M256 52 C224 52 164 112 164 210 H348 C348 112 288 52 256 52Z"
            fill="url(#s4m-nose)" opacity="0.95" filter="url(#s4m-glow)"/>
      <path d="M256 70 C238 70 200 118 196 190"
            stroke="white" strokeWidth="3" strokeLinecap="round" opacity="0.25" fill="none"/>

      {/* Window */}
      <circle cx="256" cy="148" r="34" fill="#ffffff" opacity="0.85"/>
      <circle cx="256" cy="148" r="26" fill="#f8f4ff" opacity="0.95"/>
      <circle cx="256" cy="148" r="18" fill="#ffffff" opacity="0.9"/>
      <circle cx="248" cy="140" r="5" fill="white" opacity="0.85"/>

      {/* Fins */}
      <path d="M164 330 L110 400 L164 400 Z" fill="#dbeafe"/>
      <path d="M164 330 L110 400 L164 400 Z" stroke="#8b5cf6" strokeWidth="1.5" fill="none" opacity="0.75"/>
      <path d="M348 330 L402 400 L348 400 Z" fill="#dbeafe"/>
      <path d="M348 330 L402 400 L348 400 Z" stroke="#8b5cf6" strokeWidth="1.5" fill="none" opacity="0.75"/>

      {/* Flame */}
      <path d="M214 438 Q235 480 256 462 Q277 480 298 438"
            stroke="#fbbf24" strokeWidth="10" strokeLinecap="round" fill="none"
            opacity="0.9" filter="url(#s4m-flame)"/>
      <path d="M228 438 Q242 468 256 455 Q270 468 284 438"
            stroke="#fde68a" strokeWidth="7" strokeLinecap="round" fill="none" opacity="0.75"/>
      <path d="M238 438 Q248 458 256 450 Q264 458 274 438"
            stroke="#fef3c7" strokeWidth="4" strokeLinecap="round" fill="none" opacity="0.6"/>
    </svg>
  )
}
