'use client'

import { useState, useEffect, useCallback } from 'react'

export default function Home() {
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(false)

  const handleLoad = useCallback(() => {
    // Small delay to let Three.js finish initializing the loading screen inside
    setTimeout(() => setLoading(false), 1200)
  }, [])

  const handleError = useCallback(() => {
    setError(true)
    setLoading(false)
  }, [])

  // Fallback: if iframe doesn't fire onload within 15s, hide loader anyway
  useEffect(() => {
    const t = setTimeout(() => {
      if (loading) setLoading(false)
    }, 15000)
    return () => clearTimeout(t)
  }, [loading])

  return (
    <main className="relative w-screen h-screen overflow-hidden bg-[#0a1410]">
      <iframe
        src="/lab-kimia.html"
        title="Lab Virtual Kimia: Pengaruh Konsentrasi terhadap Laju Reaksi"
        className="w-full h-full border-0 block"
        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; fullscreen"
        onLoad={handleLoad}
        onError={handleError}
      />

      {/* Loading overlay */}
      {loading && (
        <div
          className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-[#0a1410] transition-opacity duration-500"
          style={{ opacity: loading ? 1 : 0 }}
          aria-live="polite"
        >
          <div className="relative mb-6" aria-hidden="true">
            {/* Animated flask loader */}
            <div className="relative w-20 h-24">
              <div
                className="absolute bottom-0 left-1/2 -translate-x-1/2 w-15 h-12 border-3 border-emerald-500 border-t-0 rounded-b-[30px] rounded-b-[50px]"
                style={{
                  background:
                    'linear-gradient(180deg, transparent 0%, rgba(16, 185, 129, 0.2) 100%)',
                }}
              />
              <div
                className="absolute bottom-1 left-1/2 -translate-x-1/2 w-12 h-7 rounded-b-[25px] rounded-b-[45px] animate-pulse"
                style={{
                  background: '#10b981',
                  boxShadow: '0 0 20px #10b981',
                }}
              />
            </div>
          </div>
          <h2 className="font-sans text-xl font-bold text-emerald-400 mb-2">
            Lab Virtual Kimia
          </h2>
          <p className="text-sm text-slate-400 mb-4">
            Memuat simulasi reaksi...
          </p>
          <div className="w-48 h-1 bg-slate-800 rounded-full overflow-hidden">
            <div className="h-full bg-gradient-to-r from-emerald-500 to-cyan-500 animate-pulse" />
          </div>
        </div>
      )}

      {/* Error fallback */}
      {error && (
        <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-[#0a1410] text-center p-6">
          <div className="max-w-md">
            <div className="text-5xl mb-4">⚠️</div>
            <h2 className="text-xl font-bold text-white mb-2">
              Gagal Memuat Simulasi
            </h2>
            <p className="text-sm text-slate-400 mb-4">
              Terjadi kesalahan saat memuat laboratorium virtual. Silakan muat
              ulang halaman.
            </p>
            <button
              onClick={() => window.location.reload()}
              className="px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-semibold transition-colors"
            >
              Muat Ulang
            </button>
          </div>
        </div>
      )}
    </main>
  )
}
