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 and Cup container */}
      <div className="relative mb-8 flex items-start">
        {/* Teapot */}
        <div
          className="relative cursor-pointer transition-transform duration-500 ease-out"
          style={{
            transform: isPoured ? 'rotate(15deg)' : 'rotate(0deg)',
            transformOrigin: '80px 130px'
          }}
          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-0' : '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 - expanded viewBox to show full handle */}
          <svg width="180" height="140" viewBox="-15 0 175 140" className="drop-shadow-2xl overflow-visible">
            {/* 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>

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

            {/* 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"
            />

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

            {/* 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" />
          </svg>

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

        {/* Cup - positioned to the right and below */}
        <div className="relative ml-[20px] mt-[125px]">
          <svg width="100" height="70" viewBox="0 0 95 70" className="drop-shadow-xl">
            <defs>
              <linearGradient id="cupGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stopColor="#fef3c7" />
                <stop offset="100%" stopColor="#fde68a" />
              </linearGradient>
              <linearGradient id="teaInCupGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stopColor="#d97706" />
                <stop offset="100%" stopColor="#92400e" />
              </linearGradient>
            </defs>

            {/* Cup body */}
            <path
              d="M 10 15 L 15 60 Q 20 68 40 68 Q 60 68 65 60 L 70 15 Z"
              fill="url(#cupGradient)"
              stroke="#f59e0b"
              strokeWidth="2"
            />

            {/* Cup rim */}
            <ellipse cx="40" cy="15" rx="30" ry="8" fill="url(#cupGradient)" stroke="#f59e0b" strokeWidth="2" />

            {/* Tea in cup - fills up when pouring */}
            <ellipse
              cx="40"
              cy="20"
              rx="25"
              ry="6"
              fill="url(#teaInCupGradient)"
              className={`transition-all duration-1000 ${isPoured ? 'opacity-100' : 'opacity-30'}`}
              style={{
                transform: isPoured ? 'translateY(0)' : 'translateY(15px)',
                transformOrigin: 'center'
              }}
            />

            {/* Handle */}
            <path
              d="M 70 25 Q 85 25 85 40 Q 85 55 70 55"
              fill="none"
              stroke="#f59e0b"
              strokeWidth="5"
              strokeLinecap="round"
            />
            <path
              d="M 70 25 Q 85 25 85 40 Q 85 55 70 55"
              fill="none"
              stroke="url(#cupGradient)"
              strokeWidth="3"
              strokeLinecap="round"
            />
          </svg>

          {/* Steam from cup when filled */}
          <div className={`absolute -top-4 left-1/2 -translate-x-1/2 flex gap-1 transition-opacity duration-1000 ${isPoured ? 'opacity-60' : 'opacity-0'}`}>
            <div className="w-1 h-4 bg-gradient-to-t from-gray-400/40 to-transparent rounded-full animate-steam" style={{ animationDelay: '0.5s' }} />
            <div className="w-1 h-5 bg-gradient-to-t from-gray-400/40 to-transparent rounded-full animate-steam" style={{ animationDelay: '0.8s' }} />
            <div className="w-1 h-3 bg-gradient-to-t from-gray-400/40 to-transparent rounded-full animate-steam" style={{ animationDelay: '1.1s' }} />
          </div>
        </div>
      </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;
        }
      `}</style>
    </div>
  )
}