import { useState, useEffect } from 'react'
import { BrowserRouter, Routes, Route, NavLink, Navigate } from 'react-router-dom'
import { api, setCredentials, clearCredentials } from './api'
import Login from './pages/Login'
import Sources from './pages/Sources'
import Import from './pages/Import'
import Rules from './pages/Rules'
import Mappings from './pages/Mappings'
import Records from './pages/Records'
import Log from './pages/Log'
import Pivot from './pages/Pivot'
import Remap from './pages/Remap'
import Stacks from './pages/Stacks'

const NAV = [
  { to: '/sources', label: 'Sources' },
  { to: '/import', label: 'Import' },
  { to: '/rules', label: 'Rules' },
  { to: '/mappings', label: 'Mappings' },
  { to: '/remap', label: 'Remap' },
  { to: '/records', label: 'Records' },
  { to: '/pivot', label: 'Pivot' },
  { to: '/stacks', label: 'Stacks' },
  { to: '/log', label: 'Log' },
]

export default function App() {
  const [authed, setAuthed] = useState(false)
  const [loginUser, setLoginUser] = useState('')
  const [sources, setSources] = useState([])
  const [source, setSource] = useState(() => localStorage.getItem('selectedSource') || '')
  const [sidebarOpen, setSidebarOpen] = useState(false)
  // Sets of names whose dfv view is out of sync with current definitions
  const [staleSources, setStaleSources] = useState(new Set())
  const [staleStacks, setStaleStacks] = useState(new Set())
  const [reprocessSources, setReprocessSources] = useState(new Set())
  const [generating, setGenerating] = useState({}) // { 'source:name': true }

  async function handleLogin(user, pass) {
    setCredentials(user, pass)
    await api.getSources().then(s => {
      sessionStorage.setItem('df_user', user)
      sessionStorage.setItem('df_pass', pass)
      setSources(s)
      if (!source && s.length > 0) setSource(s[0].name)
      setAuthed(true)
      setLoginUser(user)
    })
  }

  function handleLogout() {
    clearCredentials()
    sessionStorage.removeItem('df_user')
    sessionStorage.removeItem('df_pass')
    setAuthed(false)
    setLoginUser('')
    setSources([])
    setStaleSources(new Set())
    setStaleStacks(new Set())
    setReprocessSources(new Set())
  }

  // Load initial stale state from DB once on login
  useEffect(() => {
    if (!authed) return
    api.getStatus().then(s => {
      setStaleSources(new Set((s.stale_sources || []).map(x => x.name)))
      setStaleStacks(new Set((s.stale_stacks || []).map(x => x.name)))
    }).catch(() => {})
  }, [authed])

  function markSourceStale(name) {
    setStaleSources(prev => new Set([...prev, name]))
  }
  function markNeedsReprocess(name) {
    setReprocessSources(prev => new Set([...prev, name]))
  }
  async function handleReprocessSource(name) {
    setGenerating(g => ({ ...g, [`rp:${name}`]: true }))
    try {
      await api.reprocess(name)
      setReprocessSources(prev => { const n = new Set(prev); n.delete(name); return n })
    } catch (e) { alert(e.message) }
    finally { setGenerating(g => { const n = { ...g }; delete n[`rp:${name}`]; return n }) }
  }
  function markStackStale(name) {
    setStaleStacks(prev => new Set([...prev, name]))
  }
  function clearStackStale(name) {
    setStaleStacks(prev => { const n = new Set(prev); n.delete(name); return n })
  }

  async function handleGenerateSource(name) {
    setGenerating(g => ({ ...g, [`src:${name}`]: true }))
    try {
      await api.generateView(name)
      setStaleSources(prev => { const n = new Set(prev); n.delete(name); return n })
    } catch (e) { alert(e.message) }
    finally { setGenerating(g => { const n = { ...g }; delete n[`src:${name}`]; return n }) }
  }

  async function handleGenerateStack(name) {
    setGenerating(g => ({ ...g, [`stk:${name}`]: true }))
    try {
      await api.generateStackView(name)
      setStaleStacks(prev => { const n = new Set(prev); n.delete(name); return n })
    } catch (e) { alert(e.message) }
    finally { setGenerating(g => { const n = { ...g }; delete n[`stk:${name}`]; return n }) }
  }

  // On mount, restore session if credentials are saved
  useEffect(() => {
    const user = sessionStorage.getItem('df_user')
    const pass = sessionStorage.getItem('df_pass')
    if (user && pass) handleLogin(user, pass).catch(() => handleLogout())
  }, [])

  useEffect(() => {
    if (source) localStorage.setItem('selectedSource', source)
  }, [source])

  if (!authed) return <Login onLogin={handleLogin} />

  const sidebar = (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="px-4 py-3 border-b border-gray-200">
        <div className="flex items-center justify-between">
          <span className="text-sm font-semibold text-gray-800 tracking-wide uppercase">Dataflow</span>
          <button onClick={() => setSidebarOpen(false)} className="md:hidden text-gray-400 hover:text-gray-600 leading-none" title="Close">✕</button>
        </div>
        <div className="flex items-center justify-between mt-1">
          <span className="text-xs text-gray-400">{loginUser}</span>
          <button onClick={handleLogout} className="text-xs text-gray-400 hover:text-red-500" title="Sign out">Sign out</button>
        </div>
      </div>

      {/* Source selector */}
      <div className="px-3 py-3 border-b border-gray-200">
        <div className="flex items-center justify-between mb-1">
          <label className="text-xs text-gray-500">Source</label>
          <NavLink to="/sources?new=1" className="text-xs text-blue-400 hover:text-blue-600 leading-none" title="New source" onClick={() => setSidebarOpen(false)}>+</NavLink>
        </div>
        <select
          className="w-full text-sm border border-gray-200 rounded px-2 py-1 bg-white focus:outline-none focus:border-blue-400"
          value={source}
          onChange={e => setSource(e.target.value)}
        >
          {sources.length === 0 && <option value="">—</option>}
          {sources.map(s => <option key={s.name} value={s.name}>{s.name}</option>)}
        </select>
      </div>

      {/* Nav */}
      <nav className="flex-1 py-2">
        {NAV.map(({ to, label }) => (
          <NavLink
            key={to}
            to={to}
            onClick={() => setSidebarOpen(false)}
            className={({ isActive }) =>
              `block px-4 py-2 text-sm ${isActive
                ? 'bg-blue-50 text-blue-700 font-medium'
                : 'text-gray-600 hover:bg-gray-50'}`
            }
          >
            {label}
          </NavLink>
        ))}
      </nav>
    </div>
  )

  return (
    <BrowserRouter>
      <div className="flex h-screen bg-gray-50">

        {/* Mobile overlay */}
        {sidebarOpen && (
          <div className="fixed inset-0 z-20 bg-black/30 md:hidden" onClick={() => setSidebarOpen(false)} />
        )}

        {/* Sidebar — fixed on mobile, static on desktop */}
        <div className={`
          fixed inset-y-0 left-0 z-30 w-44 bg-white border-r border-gray-200 transform transition-transform duration-200
          md:static md:translate-x-0 md:z-auto md:transition-none
          ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
        `}>
          {sidebar}
        </div>

        {/* Main */}
        <div className="flex-1 overflow-auto flex flex-col min-w-0">
          {/* Mobile top bar */}
          <div className="md:hidden flex items-center px-3 py-2 bg-white border-b border-gray-200">
            <button onClick={() => setSidebarOpen(true)} className="text-gray-500 hover:text-gray-700 mr-3 text-lg leading-none">☰</button>
            <span className="text-sm font-semibold text-gray-800 tracking-wide uppercase">Dataflow</span>
          </div>

          {(staleSources.size > 0 || staleStacks.size > 0) && (
            <div className="bg-amber-50 border-b border-amber-200 px-4 py-1.5 text-xs text-amber-800 flex flex-wrap items-center gap-x-3 gap-y-1">
              <span className="font-medium">View out of sync:</span>
              {[...staleSources].map(name => (
                <span key={name} className="flex items-center gap-1">
                  {name}
                  <button
                    onClick={() => handleGenerateSource(name)}
                    disabled={generating[`src:${name}`]}
                    className="px-1.5 py-0.5 rounded bg-amber-200 hover:bg-amber-300 disabled:opacity-50 font-medium"
                  >
                    {generating[`src:${name}`] ? '…' : 'Generate'}
                  </button>
                </span>
              ))}
              {staleSources.size > 0 && staleStacks.size > 0 && <span className="text-amber-400">|</span>}
              {[...staleStacks].map(name => (
                <span key={name} className="flex items-center gap-1">
                  stack: {name}
                  <button
                    onClick={() => handleGenerateStack(name)}
                    disabled={generating[`stk:${name}`]}
                    className="px-1.5 py-0.5 rounded bg-amber-200 hover:bg-amber-300 disabled:opacity-50 font-medium"
                  >
                    {generating[`stk:${name}`] ? '…' : 'Generate'}
                  </button>
                </span>
              ))}
            </div>
          )}
          {reprocessSources.size > 0 && (
            <div className="bg-blue-50 border-b border-blue-200 px-4 py-1.5 text-xs text-blue-800 flex flex-wrap items-center gap-x-3 gap-y-1">
              <span className="font-medium">Mappings updated:</span>
              {[...reprocessSources].map(name => (
                <span key={name} className="flex items-center gap-1">
                  {name}
                  <button
                    onClick={() => handleReprocessSource(name)}
                    disabled={generating[`rp:${name}`]}
                    className="px-1.5 py-0.5 rounded bg-blue-200 hover:bg-blue-300 disabled:opacity-50 font-medium"
                  >
                    {generating[`rp:${name}`] ? '…' : 'Reprocess'}
                  </button>
                </span>
              ))}
            </div>
          )}

          <div className="flex-1 overflow-auto">
            <Routes>
              <Route path="/" element={<Navigate to="/sources" replace />} />
              <Route path="/sources" element={<Sources source={source} sources={sources} setSources={setSources} setSource={setSource} />} />
              <Route path="/import" element={<Import source={source} />} />
              <Route path="/rules" element={<Rules source={source} onStale={markSourceStale} />} />
              <Route path="/mappings" element={<Mappings source={source} onNeedsReprocess={markNeedsReprocess} />} />
              <Route path="/remap" element={<Remap />} />
              <Route path="/records" element={<Records source={source} />} />
              <Route path="/pivot" element={<Pivot source={source} />} />
              <Route path="/stacks" element={<Stacks sources={sources} onStackStale={markStackStale} onStackViewGenerated={clearStackStale} />} />
              <Route path="/log" element={<Log />} />
            </Routes>
          </div>
        </div>
      </div>
    </BrowserRouter>
  )
}