import { WebProjectBackup } from './components/WebProjectBackup'
import { useEffect, useState } from 'react'
import { ProjectProvider } from './contexts/ProjectContext'
import { ViewProvider, useView } from './contexts/ViewContext'
import { KeyboardShortcutsProvider } from './contexts/KeyboardShortcutsContext'
import { AppSettingsProvider, useAppSettings } from './contexts/AppSettingsContext'
import { DevFlagsProvider } from './contexts/DevFlagsContext'
import { useGenerationRecoveryWatcher } from './hooks/use-generation-recovery-watcher'
import { Home } from './views/Home'
import { Project } from './views/Project'
import { webRequest } from './lib/web-platform'
import { useBackend } from './hooks/use-backend'
import { DevPanel } from './components/DevPanel'
import { KeyboardShortcutsModal } from './components/KeyboardShortcutsModal'

function Workspace() {
  const { currentView, goHome } = useView()
  const { connected, isLoading } = useBackend()
  const { isLoaded, runtimePolicyLoaded } = useAppSettings()
  useGenerationRecoveryWatcher()
  const ready = connected && isLoaded && runtimePolicyLoaded
  return <div className="flex flex-1 min-h-0 min-w-0 flex-col overflow-hidden" data-testid="workspace">
    <div className={`shrink-0 px-4 py-2 text-sm ${ready ? 'bg-emerald-950 text-emerald-200' : 'bg-amber-950 text-amber-200'}`} role="status">
      {ready ? 'LTX backend connected · generation runs on the remote server' : isLoading ? 'Checking LTX connection…' : 'LTX is not ready. Activate Video mode in Athena Deck. The connection is checked automatically.'}
    </div>
    <div className="flex-1 min-h-0 min-w-0 overflow-hidden" data-testid="workspace-content">
    {currentView === 'home' ? <Home /> : ready ? <Project /> : <div className="p-12"><p>Projects are retained. Generation becomes available when the LTX backend and its settings are reachable.</p><button className="mt-4 underline" onClick={goHome}>Back to projects</button></div>}
    </div>
    <KeyboardShortcutsModal /><DevPanel />
  </div>
}
export default function App() {
  const [session, setSession] = useState<{ backendUrl: string } | null>(null)
  const [checking, setChecking] = useState(true)
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')
  const [message, setMessage] = useState('')
  const [help, setHelp] = useState(false)
  useEffect(() => { void webRequest<{ backendUrl: string }>('/web/session').then(setSession).catch(() => {}).finally(() => setChecking(false)) }, [])
  useEffect(() => { const listener = (event: Event) => setMessage((event as CustomEvent<string>).detail); window.addEventListener('web-status', listener); return () => window.removeEventListener('web-status', listener) }, [])
  useEffect(() => { const listener = () => setHelp(true); window.addEventListener('open-settings', listener); return () => window.removeEventListener('open-settings', listener) }, [])
  if (checking) return <div className="p-12">Loading LTX DeskWEB…</div>
  if (!session) return <main className="min-h-screen flex items-center justify-center bg-zinc-950 text-white">
    <form className="w-full max-w-md p-8 border border-zinc-700 rounded-xl" onSubmit={async event => {
      event.preventDefault(); setError('')
      try { await webRequest('/web/login', { password }); setPassword(''); setSession(await webRequest('/web/session')) } catch (e) { setError(e instanceof Error ? e.message : String(e)) }
    }}>
      <h1 className="text-2xl font-bold">LTX DeskWEB</h1><p className="my-4 text-zinc-400">Browser workspace for your LTX backend.</p>
      <label htmlFor="password">Access password</label><input id="password" type="password" autoComplete="current-password" required value={password} onChange={e => setPassword(e.target.value)} className="mt-2 mb-4 w-full p-3 bg-zinc-800 rounded" />
      <button className="bg-blue-600 rounded px-4 py-2" type="submit">Sign in</button><p role="alert" className="mt-4 text-red-300">{error}</p>
    </form>
  </main>
  return <div className="h-dvh w-full min-h-0 flex flex-col overflow-hidden" data-testid="web-shell">
    <header className="shrink-0 flex justify-between items-center px-4 py-2 bg-zinc-900 border-b border-zinc-700 text-sm">
      <strong>LTX DeskWEB · Preview</strong><div className="flex gap-4"><button onClick={() => setHelp(!help)}>Connection & information</button><button onClick={async () => { await webRequest('/web/logout', {}); location.reload() }}>Sign out</button></div>
    </header>
    {help && <aside className="shrink-0 max-h-[35dvh] overflow-y-auto p-5 bg-zinc-900 border-b border-zinc-700 space-y-2">
      <p>Native LTX API via: <code>{session.backendUrl}</code>. Change the address and token in the container configuration.</p>
      <p>Video mode is managed in Athena Deck. This web app never starts or installs a model.</p>
      <p>Preview: projects are saved in this browser. Use “Back up projects” before clearing browser data. Timeline rendering, desktop folder dialogs and Hugging Face desktop login are not yet ported.</p>
      <WebProjectBackup />
      <button className="ml-4 underline" onClick={() => setHelp(false)}>Close</button>
    </aside>}
    {message && <div className="shrink-0 max-h-[15dvh] overflow-y-auto p-3 bg-blue-950 flex justify-between gap-4" role="status">{message}<button onClick={() => setMessage('')}>Dismiss</button></div>}
    <AppSettingsProvider><ProjectProvider><ViewProvider><KeyboardShortcutsProvider><DevFlagsProvider><Workspace /></DevFlagsProvider></KeyboardShortcutsProvider></ViewProvider></ProjectProvider></AppSettingsProvider>
  </div>
}