import React, { useState, useEffect } from 'react'
import { LoadingScreen } from './LoadingScreen'
import { HeartLogo } from './HeartLogo'

interface LandingPageProps {
  onLogin: () => void
}

export function LandingPage({ onLogin }: LandingPageProps) {
  const [loading, setLoading] = useState(false)
  const [showLanding, setShowLanding] = useState(false)
  const [isStandby, setIsStandby] = useState(true) // false = LIVE, true = STDBY
  const [velocity, setVelocity] = useState(0)
  const [energy, setEnergy] = useState(0)
  const [ramped, setRamped] = useState(false)
  const [pendingAction, setPendingAction] = useState<null | 'makima' | 'mission'>(null)

  // Fade-in landing page content after mount
  useEffect(() => {
    const timer = setTimeout(() => setShowLanding(true), 500)
    return () => clearTimeout(timer)
  }, [])

  // Ramp up stats, then keep them fluctuating near max
  useEffect(() => {
    const VELOCITY_MAX = 603
    const ENERGY_MAX = 32

    let rampInterval: number | undefined
    let fluctuateInterval: number | undefined

    // Ramp-up for ~2 seconds
    const rampDurationMs = 2000
    const tickMs = 30
    const vStep = VELOCITY_MAX / (rampDurationMs / tickMs)
    const eStep = ENERGY_MAX / (rampDurationMs / tickMs)

    rampInterval = window.setInterval(() => {
      setVelocity((v) => {
        const next = v + vStep
        return next >= VELOCITY_MAX ? VELOCITY_MAX : next
      })
      setEnergy((e) => {
        const next = e + eStep
        return next >= ENERGY_MAX ? ENERGY_MAX : next
      })
    }, tickMs)

    const stopRamp = window.setTimeout(() => {
      if (rampInterval) window.clearInterval(rampInterval)
      setVelocity(VELOCITY_MAX)
      setEnergy(ENERGY_MAX)
      setRamped(true)

      // Fluctuate near the top
      fluctuateInterval = window.setInterval(() => {
        setVelocity((v) => {
          const min = VELOCITY_MAX - 18
          const max = VELOCITY_MAX
          const delta = (Math.random() - 0.5) * 6 // ±3
          const next = Math.max(min, Math.min(max, v + delta))
          return next
        })
        setEnergy((e) => {
          const min = ENERGY_MAX - 2
          const max = ENERGY_MAX
          const delta = (Math.random() - 0.5) * 0.25 // ±0.125
          const next = Math.max(min, Math.min(max, e + delta))
          return next
        })
      }, 220)
    }, rampDurationMs + 60)

    return () => {
      if (rampInterval) window.clearInterval(rampInterval)
      if (fluctuateInterval) window.clearInterval(fluctuateInterval)
    }
  }, [])

  const handleLoadingComplete = () => {
    if (pendingAction === 'makima') {
      window.location.assign('https://makima.jp')
      return
    }
    onLogin()
  }

  const handleMakima = () => {
    setPendingAction('makima')
    setLoading(true)
  }

  const handleMission = () => {
    // Placeholder action for now
    setPendingAction('mission')
  }

  return (
    <div>
      {loading && <LoadingScreen onComplete={handleLoadingComplete} />}

      {!loading && (
        <div className={`floating-header ${showLanding ? 'fade-in' : 'hidden'}`}>
          <div className="header-content">
            <div className="brand">
              <img
                src="/logo/crane-logo-transparent.png"
                alt="Soryu"
                height={40}
                className="brand-mark"
                onError={(e) => {
                  const img = e.currentTarget as HTMLImageElement
                  img.onerror = null
                  img.src = '/logo/crane-logo.png'
                }}
              />
            </div>
            <div className="header-center">
              <HeartLogo size="header-no-rays" className="header-heart" />
            </div>

            <div className="system-info">
              <div className="info-item">
                <span className="info-label">System:</span>
                <span
                  className="info-value live-status clickable"
                  onClick={() => setIsStandby(!isStandby)}
                  title="Click to toggle between LIVE and STANDBY"
                >
                  <span className={`status-dot ${isStandby ? 'standby' : 'live'}`}></span>
                  {isStandby ? 'STDBY' : 'LIVE'}
                </span>
              </div>
              <div className="info-item">
                <span className="info-label">Version:</span>
                <span className="info-value">v1.0.0</span>
              </div>
            </div>
          </div>
        </div>
      )}

      <div className={`modern-landing-page manga-style ${showLanding && !loading ? 'fade-in' : 'hidden'}`}>
        {/* Background GIF fills the main body */}
        <div className="background-only" aria-hidden="true">
          <img src="/background-animation.gif" alt="" className="background-gif" />
        </div>

        {/* Minimal overlay: masthead, issue badge, and CTA */}
        <div className="taisho-cover">
          <div className="cover-content">
            {/* Masthead + Issue badge (kept) */}
            <div className="masthead">
              <div className="masthead-vertical">
                <span className="jp">そりゅう</span>
                <span className="en">SORYU</span>
              </div>
              <div className="issue-badge">かはいい Vol.01</div>
            </div>

            {/* Empty hero area to preserve grid; background sits behind */}
            <div className="hero" />

            {/* CTA row spanning full width: left Mission/Contact, right Login */}
            <div className="cta-area">
              <div className="cta-left">
                <button className="taisho-cta" onClick={handleMission}>
                  <span className="cta-text">Mission</span>
                </button>
                <button className="taisho-cta" onClick={() => {/* placeholder contact */}}>
                  <span className="cta-text">Contact</span>
                </button>
              </div>
              <div className="cta-right">
                <button className="taisho-cta" onClick={handleMakima}>
                  <span className="cta-icon">▶</span>
                  <span className="cta-text">Login</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom stats: Velocity + Energy only */}
        <div className="bottom-stats">
          <div className="rf-stats">
            <div className="rf-stat">
              <span className="label">Velocity</span>
              <span className="value">{Math.round(velocity)} km/h</span>
            </div>
            <div className="rf-stat">
              <span className="label">Energy</span>
              <span className="value">{energy.toFixed(1)} MJ</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}