import { 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 [pendingAction, setPendingAction] = useState<null | 'makimaRedirect'>(null)

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

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

  const handleLogin = () => {
    setPendingAction('makimaRedirect')
    setLoading(true)
  }

  const scrollTo = (id: string) => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
  }

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

      {/* Professional floating header */}
      {!loading && (
        <div className={`pro-header ${showLanding ? 'fade-in' : 'hidden'}`}>
          <div className="pro-header-content">
            <div className="pro-header-left">
              <img
                src="/logo/crane-logo-transparent.png"
                alt="Soryu"
                height={36}
                className="pro-crane-logo"
                onError={(e) => {
                  const img = e.currentTarget as HTMLImageElement
                  img.onerror = null
                  img.src = '/logo/crane-logo.png'
                }}
              />
              <span className="pro-company-name">SORYU</span>
            </div>

            <div className="pro-header-center">
              <HeartLogo size="header-no-rays" className="header-heart" />
            </div>

            <nav className="pro-header-nav">
              <button className="pro-nav-link" onClick={() => scrollTo('pro-mission')}>
                Mission
              </button>
              <button className="pro-nav-link" onClick={() => scrollTo('pro-makima')}>
                Makima
              </button>
              <button className="pro-nav-link pro-nav-login" onClick={handleLogin}>
                Login
              </button>
            </nav>
          </div>
        </div>
      )}

      {/* Main professional landing layout */}
      <div className={`pro-landing ${showLanding && !loading ? 'fade-in' : 'hidden'}`}>

        {/* Hero section */}
        <section className="pro-hero">
          <div className="pro-hero-inner">
            <div className="pro-hero-tagline-jp">そりゅう</div>
            <h1 className="pro-hero-headline">
              Real‑Time Systems for<br />Mission‑Critical Observability
            </h1>
            <p className="pro-hero-sub">
              Low‑latency streaming infrastructure that turns live data into reliable, secure insight.
            </p>
            <div className="pro-hero-cta">
              <button className="pro-btn-primary" onClick={() => scrollTo('pro-mission')}>
                Learn More
              </button>
              <button className="pro-btn-secondary" onClick={handleLogin}>
                <span className="pro-btn-icon">▶</span> Launch Makima
              </button>
            </div>
          </div>
        </section>

        {/* Content grid: Mission + Makima cards */}
        <section className="pro-content-grid">
          <div className="pro-card" id="pro-mission">
            <div className="pro-card-header">
              <h2 className="pro-card-title">Mission</h2>
              <div className="pro-card-accent" />
            </div>
            <div className="pro-card-body">
              <h3 className="pro-card-subtitle">
                Building real‑time systems for mission-critical observability and surveillance
              </h3>
              <p className="pro-card-text">
                We deliver low‑latency streaming &amp; infrastructure that turns live data into
                reliable, secure insight. Target selection, monitoring and full end to end observability
                to make vital decisions where it matters most.
              </p>
            </div>
          </div>

          <div className="pro-card" id="pro-makima">
            <div className="pro-card-header">
              <h2 className="pro-card-title">Makima</h2>
              <span className="pro-card-badge">Control System</span>
              <div className="pro-card-accent" />
            </div>
            <div className="pro-card-body">
              <img
                src="/logo/makima-logo.svg"
                alt="Makima mesh logo"
                className="pro-makima-logo"
              />
              <h3 className="pro-card-subtitle">Mesh Orchestration Platform</h3>
              <p className="pro-card-text">
                Makima is a control system for orchestrating distributed daemon meshes,
                coordinating concurrent execution across distinct domains.
              </p>
              <p className="pro-card-text">
                Unified command interface for spawning, monitoring, and directing
                worker daemons. Real-time task coordination with overlay management.
              </p>
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer className="pro-footer">
          <div className="pro-footer-inner">
            <span className="pro-footer-brand">SORYU</span>
            <span className="pro-footer-sep">—</span>
            <span className="pro-footer-text">Real‑time systems &amp; infrastructure</span>
          </div>
        </footer>
      </div>
    </div>
  )
}