import { useState } from 'react';
import Form from './components/Form';
import Dashboard from './components/Dashboard';
import Sidebar from './components/Sidebar';
import Home from './components/Home';

import { Home as HomeIcon } from 'lucide-react';

function App() {
  const [view, setView] = useState('home'); // 'home', 'form', 'result'
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);
  const [historyKey, setHistoryKey] = useState(0);

  const handleProceed = () => setView('form');
  
  const handleNewAssessment = () => {
    setResult(null);
    setView('form');
  };
  
  const handleSelectResult = (pastResult) => {
    setResult(pastResult);
    setView('result');
  };
  
  const handleNewResult = (newResult) => {
    setResult(newResult);
    setView('result');
    setHistoryKey(k => k + 1); // Refresh sidebar history
  };

  const handleBackToHome = () => setView('home');

  return (
    <div className="app-layout">
      {/* Sidebar only visible on Form and Result pages */}
      {(view === 'form' || view === 'result') && (
        <Sidebar 
          key={historyKey} 
          onSelectResult={handleSelectResult} 
          onNewAssessment={handleNewAssessment} 
        />
      )}
      
      <div className="main-content" style={{ position: 'relative' }}>
        {/* Navigation Button at Top Right corner of all pages except Home */}
        {view !== 'home' && (
          <button className="back-to-home-btn" onClick={handleBackToHome}>
            <HomeIcon size={16} /> Back to Home
          </button>
        )}

        <div className="content-container">
          {loading ? (
            <div style={{ textAlign: 'center', padding: '6rem 0' }}>
              <div style={{ fontSize: '1.5rem', color: 'var(--primary)', fontWeight: '600' }}>Analyzing application data...</div>
            </div>
          ) : view === 'home' ? (
            <Home onProceed={handleProceed} />
          ) : view === 'form' ? (
            <Form setResult={handleNewResult} setLoading={setLoading} />
          ) : view === 'result' && result ? (
            <Dashboard result={result} onReset={handleNewAssessment} />
          ) : null}
        </div>
      </div>
    </div>
  );
}

export default App;