import { Routes, Route, NavLink } from 'react-router-dom'
import { BRAND_COLOR } from './config/constants'
import Dashboard from './pages/Dashboard'
import Configuration from './pages/Configuration'
import Consultants from './pages/Consultants'
import AssignmentCreate from './pages/AssignmentCreate'
import AssignmentDetail from './pages/AssignmentDetail'
import AssignmentEdit from './pages/AssignmentEdit'
import MeetingView from './pages/MeetingView'
import FeedbackDraftPage from './pages/FeedbackDraftPage'
import AssignmentFeedbackPage from './pages/AssignmentFeedbackPage'
import Evaluation from './pages/Evaluation'

export default function App() {
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col">
      <header className="text-white px-4 py-3 flex items-center gap-3 shadow" style={{ backgroundColor: BRAND_COLOR }}>
        <span className="font-bold text-lg tracking-tight">Assignment Monitor</span>
      </header>
      <main className="flex-1 p-4 max-w-2xl mx-auto w-full pb-20">
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/assignment/new" element={<AssignmentCreate />} />
          <Route path="/assignment/:id" element={<AssignmentDetail />} />
          <Route path="/assignment/:id/edit" element={<AssignmentEdit />} />
          <Route path="/assignment/:id/meeting/:meetingId" element={<MeetingView />} />
          <Route path="/assignment/:id/feedback/:instituteeId" element={<AssignmentFeedbackPage />} />
          <Route path="/assignment/:id/feedback-draft/:instituteeId" element={<FeedbackDraftPage />} />
          <Route path="/evaluation" element={<Evaluation />} />
          <Route path="/consultants" element={<Consultants />} />
          <Route path="/config" element={<Configuration />} />
        </Routes>
      </main>
      <nav className="bg-white border-t border-gray-200 flex justify-around py-2 sticky bottom-0">
        {[
          { to: '/', label: 'Home' },
          { to: '/consultants', label: 'Berater' },
          { to: '/evaluation', label: 'Auswertung' },
          { to: '/config', label: 'Config' },
        ].map(({ to, label }) => (
          <NavLink
            key={to}
            to={to}
            end
            className={({ isActive }) =>
              `text-xs px-3 py-1 rounded ${isActive ? 'font-semibold' : 'text-gray-500'}`
            }
            style={({ isActive }) => isActive ? { color: BRAND_COLOR } : undefined}
          >
            {label}
          </NavLink>
        ))}
      </nav>
    </div>
  )
}