import React, { useState, useEffect } from 'react'
import { LoadingScreen } from './LoadingScreen'
import { HeartLogo } from './HeartLogo'
// Using direct PNG logo on landing header

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 [asciiArt, setAsciiArt] = useState('')
  const [isGlitching, setIsGlitching] = useState(false)
  // Note: Removed VN preview and ASCII features to focus on an Art Deco/Nouveau landing.

  // Auto-fade in landing page content after component mounts
  useEffect(() => {
    const timer = setTimeout(() => {
      setShowLanding(true)
    }, 500) // Delay before fading in content

    return () => clearTimeout(timer)
  }, [])

  // Removed VN dialogue preview / typing effect.

  // Load ASCII art for overlay in hero (right/bottom)
  useEffect(() => {
    fetch('/ascii/ascii1.txt')
      .then((res) => res.text())
      .then((txt) => setAsciiArt(txt.replace(/\n+$/, '')))
      .catch(() => setAsciiArt(''))
  }, [])

  // Occasionally trigger a brief glitch on the word "futurist"
  useEffect(() => {
    let armTimer: number | undefined
    let activeTimer: number | undefined
    let cancelled = false

    const arm = () => {
      // Random delay between glitches: 0.8s–2s (slightly punchier)
      const delay = 800 + Math.random() * 1200
      armTimer = window.setTimeout(() => {
        setIsGlitching(true)
        // Glitch duration: 150ms–350ms (snappier)
        const dur = 150 + Math.random() * 200
        activeTimer = window.setTimeout(() => {
          setIsGlitching(false)
          if (!cancelled) arm()
        }, dur)
      }, delay)
    }

    arm()

    return () => {
      cancelled = true
      if (armTimer) clearTimeout(armTimer)
      if (activeTimer) clearTimeout(activeTimer)
    }
  }, [])


  // Handle loading screen completion
  const handleLoadingComplete = () => {
    // Call the original onLogin immediately to transition to VN page
    // Don't reset loading states as we're leaving the landing page
    onLogin()
  }

  // Handle login button click
  const handleLogin = () => {
    setLoading(true)
  }

  // Removed ASCII art effects and rendering.

  return (
    <div>
      {loading && (
        <LoadingScreen onComplete={handleLoadingComplete} />
      )}
      
      {/* Floating Header Bar - Hidden during loading */}
      {!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'}`}>
        {/* Retro-futuristic page background */}
        <div className="rf-page-bg" aria-hidden="true">
          <div className="rf-page-speedlines layer-a"></div>
          <div className="rf-page-speedlines layer-b"></div>
        </div>
        {/* Taisho Magazine Cover Backdrop */}
        <div className="taisho-cover">
          <div className="cover-backdrop" aria-hidden="true"></div>

          {/* Cover Content Grid */}
          <div className="cover-content">
            {/* Vertical Masthead (magazine-style) */}
            <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>

            {/* Central Hero - full-frame retro-futuristic */}
            <div className="hero">
              <div className="hero-frame taisho-modern-frame">
                <div className="hero-inner hero-fill">
                  {/* Retro-futuristic racing hero content */}
                  <div className="rf-hero" aria-hidden="true">
                    <div className="rf-speedlines layer-a"></div>
                    <div className="rf-speedlines layer-b"></div>
                    <div className="rf-hero-content">
                      <div className="rf-badge">Engineering • Systems • para bellum</div>
                      <h2 className="rf-headline">
                        Mission driven{' '}
                        <span
                          className={`glitch-word ${isGlitching ? 'is-glitching' : ''}`}
                          data-text="futurist"
                        >
                          futurist
                        </span>{' '}
                        technology
                      </h2>
                      <p className="rf-tagline">Avant-garde. Aesthetic Engineering. A Race of Steel</p>
                      <div className="rf-stats">
                        <div className="rf-stat"><span className="label">Velocity</span><span className="value">0–603 km/h</span></div>
                        <div className="rf-stat"><span className="label">Energy</span><span className="value">32 MJ</span></div>
                        <div className="rf-stat"><span className="label">Flow</span><span className="value">MAX</span></div>
                      </div>
                    </div>
                    <div className="rf-accent-diagonal"></div>
                    {/* ASCII overlay (transparent, gradient text) */}
                    {asciiArt && (
                      <div className="rf-ascii-overlay" aria-hidden="true">
                        {asciiArt.split('\n').map((line, i) => (
                          <div key={i} className="ascii-line">
                            {Array.from(line).map((ch, j) => (
                              <span
                                key={`${i}-${j}`}
                                className="ascii-char"
                                style={{
                                  '--delay': `${(i * 0.08 + j * 0.01)}s`,
                                } as React.CSSProperties}
                              >
                                {ch}
                              </span>
                            ))}
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>

            {/* CTA */}
            <div className="cta-area">
              <button className="taisho-cta" onClick={handleLogin}>
                <span className="cta-icon">▶</span>
                <span className="cta-text">Enter</span>
              </button>
            </div>
            {/* Visitor Counter */}
            <div className="visit-counter" aria-label="visitor counter">
              <img
                src="https://count.getloli.com/get/@soryu-landing?theme=booru-jaypee&darkmode=0"
                alt="visit counter"
                referrerPolicy="no-referrer-when-downgrade"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}