import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom/client'
import { HashRouter, Routes, Route, NavLink, Navigate } from 'react-router-dom'
import { supabase } from './lib/supabase'
import Pipeline from './pages/Pipeline'
import EventDetail from './pages/EventDetail'
import EstimateBuilder from './pages/EstimateBuilder'
import EstimatePrint from './pages/EstimatePrint'
import BohPrint from './pages/BohPrint'
import MenuAdmin from './pages/MenuAdmin'
import './styles.css'

function Login() {
  const [email, setEmail] = useState('')
  const [pw, setPw] = useState('')
  const [err, setErr] = useState('')
  const [busy, setBusy] = useState(false)

  async function signIn() {
    setBusy(true); setErr('')
    const { error } = await supabase.auth.signInWithPassword({ email, password: pw })
    if (error) setErr(error.message)
    setBusy(false)
  }

  return (
    <div className="loginwrap">
      <div className="loginbox">
        <h1>MAY <span style={{ color: 'var(--turmeric)' }}>Catering</span></h1>
        <div className="sub">Kitchen + Bar · Vashon Island</div>
        <div className="field">
          <label>Email</label>
          <input type="email" value={email} onChange={e => setEmail(e.target.value)} autoComplete="username" />
        </div>
        <div className="field">
          <label>Password</label>
          <input type="password" value={pw} onChange={e => setPw(e.target.value)} autoComplete="current-password"
            onKeyDown={e => e.key === 'Enter' && signIn()} />
        </div>
        {err && <div className="alert red">{err}</div>}
        <button className="btn" style={{ width: '100%' }} onClick={signIn} disabled={busy}>
          {busy ? 'Signing in…' : 'Sign in'}
        </button>
      </div>
    </div>
  )
}

function Shell({ children }) {
  return (
    <div className="shell">
      <div className="topbar">
        <div className="brand">MAY <span>Catering</span></div>
        <nav className="topnav">
          <NavLink to="/" end>Pipeline</NavLink>
          <NavLink to="/menu">Menu &amp; Pricing</NavLink>
        </nav>
        <button className="signout" onClick={() => supabase.auth.signOut()}>Sign out</button>
      </div>
      <div className="main">{children}</div>
    </div>
  )
}

function App() {
  const [session, setSession] = useState(undefined)

  useEffect(() => {
    supabase.auth.getSession().then(({ data }) => setSession(data.session))
    const { data: sub } = supabase.auth.onAuthStateChange((_e, s) => setSession(s))
    return () => sub.subscription.unsubscribe()
  }, [])

  if (session === undefined) return null
  if (!session) return <Login />

  return (
    <HashRouter>
      <Shell>
        <Routes>
          <Route path="/" element={<Pipeline />} />
          <Route path="/menu" element={<MenuAdmin />} />
          <Route path="/events/:id" element={<EventDetail />} />
          <Route path="/events/:id/estimates/new" element={<EstimateBuilder />} />
          <Route path="/events/:id/estimates/:vid" element={<EstimateBuilder />} />
          <Route path="/events/:id/estimates/:vid/print" element={<EstimatePrint />} />
          <Route path="/events/:id/boh" element={<BohPrint />} />
          <Route path="*" element={<Navigate to="/" />} />
        </Routes>
      </Shell>
    </HashRouter>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />)