/**
 * Main application component for the assessment interface.
 */

import { ConfigProvider, theme, Spin } from 'antd';
import { useAssessment } from './hooks/useAssessment';
import { RaterLogin } from './components/RaterLogin';
import { InstructionsPage } from './components/InstructionsPage';
import { AssessmentPage } from './components/AssessmentPage';
import { CompletionPage } from './components/CompletionPage';

function App() {
  const assessment = useAssessment();

  const renderContent = () => {
    // Show loading spinner for initial load
    if (assessment.loading && !assessment.rater) {
      return (
        <div style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          minHeight: '100vh'
        }}>
          <Spin size="large" />
        </div>
      );
    }

    switch (assessment.view) {
      case 'login':
        return (
          <RaterLogin
            onLogin={assessment.login}
            loading={assessment.loading}
            error={assessment.error}
          />
        );

      case 'instructions':
        return (
          <InstructionsPage
            dimensions={assessment.dimensions}
            onStart={assessment.startAssessment}
            loading={assessment.loading}
          />
        );

      case 'assessment':
        if (!assessment.rater || !assessment.currentQuery || !assessment.currentIdea || !assessment.dimensions) {
          return (
            <div style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              minHeight: '100vh'
            }}>
              <Spin size="large" tip="Loading..." />
            </div>
          );
        }
        return (
          <AssessmentPage
            raterId={assessment.rater.rater_id}
            queryId={assessment.currentQuery.query_id}
            queryText={assessment.currentQuery.query_text}
            idea={assessment.currentIdea}
            ideaIndex={assessment.currentIdeaIndex}
            totalIdeas={assessment.currentQuery.total_count}
            dimensions={assessment.dimensions}
            progress={assessment.progress}
            onNext={assessment.nextIdea}
            onPrev={assessment.prevIdea}
            onShowDefinitions={assessment.showInstructions}
            onLogout={assessment.logout}
            canGoPrev={assessment.currentIdeaIndex > 0}
          />
        );

      case 'completion':
        return (
          <CompletionPage
            raterId={assessment.rater?.rater_id ?? ''}
            progress={assessment.progress}
            onLogout={assessment.logout}
          />
        );

      default:
        return null;
    }
  };

  return (
    <ConfigProvider
      theme={{
        algorithm: theme.defaultAlgorithm,
        token: {
          colorPrimary: '#1677ff',
          borderRadius: 6,
        },
      }}
    >
      {renderContent()}
    </ConfigProvider>
  );
}

export default App;
