import React, { useState } from 'react'
import { Upload, History } from 'lucide-react'
import InspectionPage from './pages/InspectionPage'
import HistoryPage from './pages/HistoryPage'

export default function App() {
  const [page, setPage] = useState('inspect')

  return (
    <div className="flex min-h-screen bg-slate-50">
      <aside className="w-60 bg-white border-r border-slate-200 flex flex-col">
        <div className="p-5 border-b border-slate-200">
          <h1 className="font-bold text-slate-900">CivilScan AI</h1>
          <p className="text-xs text-slate-400">Preparado para Dani</p>
        </div>
        <nav className="flex-1 p-3 space-y-1">
          <button
            onClick={() => setPage('inspect')}
            className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium ${
              page === 'inspect' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
            }`}
          >
            <Upload size={16} /> Nueva Inspección
          </button>
          <button
            onClick={() => setPage('history')}
            className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium ${
              page === 'history' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
            }`}
          >
            <History size={16} /> Historial de Inspecciones
          </button>
        </nav>
        <div className="p-4 text-xs text-slate-400 border-t border-slate-200">
          v2.0.0 · Detección con IA
        </div>
      </aside>

      <main className="flex-1 overflow-y-auto">
        {page === 'inspect' ? <InspectionPage /> : <HistoryPage />}
      </main>
    </div>
  )
}