import { useState } from 'react'
import { Link } from 'react-router-dom'
import { NeonButton } from '@/components/ui'
import { Home, Sparkles, Coffee } from 'lucide-react'

export function TeapotPage() {
  const [isPoured, setIsPoured] = useState(false)

  return (
    <div className="min-h-[70vh] flex flex-col items-center justify-center text-center px-4">
      {/* Background effects */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-1/4 -left-32 w-96 h-96 bg-amber-500/5 rounded-full blur-[100px]" />
        <div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-orange-500/5 rounded-full blur-[100px]" />
      </div>

      {/* Teapot ASCII art / SVG */}
      <div
        className={`relative mb-8 cursor-pointer transition-transform duration-300 ${isPoured ? 'rotate-[-30deg]' : 'hover:rotate-[-10deg]'}`}
        onClick={() => setIsPoured(!isPoured)}
      >
        {/* Steam animation */}
        <div className={`absolute -top-8 left-1/2 -translate-x-1/2 flex gap-2 transition-opacity duration-500 ${isPoured ? 'opacity-100' : 'opacity-50'}`}>
          <div className="w-2 h-8 bg-gradient-to-t from-gray-400/50 to-transparent rounded-full animate-steam" style={{ animationDelay: '0s' }} />
          <div className="w-2 h-10 bg-gradient-to-t from-gray-400/50 to-transparent rounded-full animate-steam" style={{ animationDelay: '0.3s' }} />
          <div className="w-2 h-6 bg-gradient-to-t from-gray-400/50 to-transparent rounded-full animate-steam" style={{ animationDelay: '0.6s' }} />
        </div>

        {/* Teapot */}
        <svg width="160" height="140" viewBox="0 0 160 140" className="drop-shadow-2xl">
          {/* Body */}
          <ellipse cx="80" cy="90" rx="55" ry="40" fill="url(#teapotGradient)" stroke="#f59e0b" strokeWidth="3" />

          {/* Lid */}
          <ellipse cx="80" cy="55" rx="35" ry="10" fill="url(#lidGradient)" stroke="#f59e0b" strokeWidth="2" />
          <ellipse cx="80" cy="50" rx="25" ry="7" fill="url(#lidGradient)" stroke="#f59e0b" strokeWidth="2" />
          <circle cx="80" cy="42" r="8" fill="#fbbf24" stroke="#f59e0b" strokeWidth="2" />

          {/* Spout */}
          <path
            d="M 135 85 Q 150 75 155 60 Q 158 50 150 45"
            fill="none"
            stroke="#f59e0b"
            strokeWidth="8"
            strokeLinecap="round"
          />
          <path
            d="M 135 85 Q 150 75 155 60 Q 158 50 150 45"
            fill="none"
            stroke="url(#teapotGradient)"
            strokeWidth="5"
            strokeLinecap="round"
          />

          {/* Handle */}
          <path
            d="M 25 70 Q 0 70 0 90 Q 0 110 25 110"
            fill="none"
            stroke="#f59e0b"
            strokeWidth="8"
            strokeLinecap="round"
          />
          <path
            d="M 25 70 Q 0 70 0 90 Q 0 110 25 110"
            fill="none"
            stroke="url(#teapotGradient)"
            strokeWidth="5"
            strokeLinecap="round"
          />

          {/* Face */}
          <circle cx="65" cy="85" r="5" fill="#292524" /> {/* Left eye */}
          <circle cx="95" cy="85" r="5" fill="#292524" /> {/* Right eye */}
          <circle cx="67" cy="83" r="2" fill="white" /> {/* Left eye shine */}
          <circle cx="97" cy="83" r="2" fill="white" /> {/* Right eye shine */}
          <path d="M 70 100 Q 80 110 90 100" fill="none" stroke="#292524" strokeWidth="3" strokeLinecap="round" /> {/* Smile */}

          {/* Blush */}
          <ellipse cx="55" cy="95" rx="8" ry="5" fill="#fca5a5" opacity="0.5" />
          <ellipse cx="105" cy="95" rx="8" ry="5" fill="#fca5a5" opacity="0.5" />

          {/* Gradients */}
          <defs>
            <linearGradient id="teapotGradient" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stopColor="#fde047" />
              <stop offset="50%" stopColor="#fbbf24" />
              <stop offset="100%" stopColor="#f59e0b" />
            </linearGradient>
            <linearGradient id="lidGradient" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stopColor="#fef08a" />
              <stop offset="100%" stopColor="#fbbf24" />
            </linearGradient>
          </defs>
        </svg>

        {/* Tea drops when pouring */}
        {isPoured && (
          <div className="absolute top-12 right-0">
            <div className="w-2 h-2 rounded-full bg-amber-600 animate-drop" style={{ animationDelay: '0s' }} />
            <div className="w-1.5 h-1.5 rounded-full bg-amber-500 animate-drop ml-1" style={{ animationDelay: '0.2s' }} />
            <div className="w-2 h-2 rounded-full bg-amber-600 animate-drop" style={{ animationDelay: '0.4s' }} />
          </div>
        )}

        {/* Glow effect */}
        <div className="absolute inset-0 bg-amber-400/20 rounded-full blur-3xl -z-10" />
      </div>

      {/* 418 text */}
      <div className="relative mb-4">
        <h1 className="text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-400 via-orange-400 to-red-400">
          418
        </h1>
        <div className="absolute inset-0 text-8xl font-bold text-amber-500/20 blur-xl">
          418
        </div>
      </div>

      <h2 className="text-2xl font-bold text-white mb-3">
        I'm a teapot
      </h2>

      <p className="text-gray-400 mb-2 max-w-md">
        Сервер отказывается варить кофе, потому что он чайник.
      </p>
      <p className="text-gray-500 text-sm mb-8 max-w-md">
        RFC 2324, Hyper Text Coffee Pot Control Protocol
      </p>

      {/* Fun fact */}
      <div className="glass rounded-xl p-4 mb-8 max-w-md border border-amber-500/20">
        <div className="flex items-center gap-2 text-amber-400 mb-2">
          <Coffee className="w-4 h-4" />
          <span className="text-sm font-semibold">Fun fact</span>
        </div>
        <p className="text-gray-400 text-sm">
          Это настоящий HTTP-код ответа из первоапрельской шутки 1998 года.
          Нажми на чайник!
        </p>
      </div>

      {/* Button */}
      <Link to="/">
        <NeonButton size="lg" icon={<Home className="w-5 h-5" />}>
          На главную
        </NeonButton>
      </Link>

      {/* Decorative sparkles */}
      <div className="absolute top-1/4 left-1/4 opacity-20">
        <Sparkles className="w-6 h-6 text-amber-400 animate-pulse" />
      </div>
      <div className="absolute bottom-1/3 right-1/4 opacity-20">
        <Sparkles className="w-4 h-4 text-orange-400 animate-pulse" style={{ animationDelay: '1s' }} />
      </div>

      {/* Custom animations */}
      <style>{`
        @keyframes steam {
          0% {
            transform: translateY(0) scaleX(1);
            opacity: 0.5;
          }
          50% {
            transform: translateY(-10px) scaleX(1.2);
            opacity: 0.3;
          }
          100% {
            transform: translateY(-20px) scaleX(0.8);
            opacity: 0;
          }
        }
        .animate-steam {
          animation: steam 2s ease-in-out infinite;
        }
        @keyframes drop {
          0% {
            transform: translateY(0);
            opacity: 1;
          }
          100% {
            transform: translateY(60px);
            opacity: 0;
          }
        }
        .animate-drop {
          animation: drop 0.6s ease-in infinite;
        }
      `}</style>
    </div>
  )
}