/**
 * Main assessment page for rating ideas.
 */

import { Card, Button, Space, Alert, Typography } from 'antd';
import {
  ArrowLeftOutlined,
  ArrowRightOutlined,
  ForwardOutlined,
  BookOutlined,
  LogoutOutlined
} from '@ant-design/icons';
import type { IdeaForRating, DimensionDefinitions, RaterProgress } from '../types';
import { useRatings } from '../hooks/useRatings';
import { IdeaCard } from './IdeaCard';
import { RatingSlider } from './RatingSlider';
import { ProgressBar } from './ProgressBar';

const { Text } = Typography;

interface AssessmentPageProps {
  raterId: string;
  queryId: string;
  queryText: string;
  idea: IdeaForRating;
  ideaIndex: number;
  totalIdeas: number;
  dimensions: DimensionDefinitions;
  progress: RaterProgress | null;
  onNext: () => void;
  onPrev: () => void;
  onShowDefinitions: () => void;
  onLogout: () => void;
  canGoPrev: boolean;
}

export function AssessmentPage({
  raterId,
  queryId,
  queryText,
  idea,
  ideaIndex,
  totalIdeas,
  dimensions,
  progress,
  onNext,
  onPrev,
  onShowDefinitions,
  onLogout,
  canGoPrev
}: AssessmentPageProps) {
  const {
    ratings,
    setRating,
    isComplete,
    submit,
    skip,
    submitting,
    error
  } = useRatings({
    raterId,
    queryId,
    ideaId: idea.idea_id,
    onSuccess: onNext
  });

  const handleSubmit = async () => {
    await submit();
  };

  const handleSkip = async () => {
    await skip();
  };

  // Calculate query progress
  const queryProgress = progress?.queries.find(q => q.query_id === queryId);
  const queryCompleted = queryProgress?.completed_count ?? ideaIndex;
  const queryTotal = totalIdeas;

  return (
    <div style={{ maxWidth: 800, margin: '0 auto', padding: 24 }}>
      {/* Header with query info and overall progress */}
      <Card size="small" style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
          <Text strong style={{ fontSize: 16 }}>Query: "{queryText}"</Text>
          <Space>
            <Button
              icon={<BookOutlined />}
              onClick={onShowDefinitions}
              size="small"
            >
              Definitions
            </Button>
            <Button
              icon={<LogoutOutlined />}
              onClick={onLogout}
              size="small"
              danger
            >
              Exit
            </Button>
          </Space>
        </div>
        <ProgressBar
          completed={queryCompleted}
          total={queryTotal}
          label="Query Progress"
        />
        {progress && (
          <div style={{ marginTop: 8 }}>
            <ProgressBar
              completed={progress.total_completed}
              total={progress.total_ideas}
              label="Overall Progress"
            />
          </div>
        )}
      </Card>

      {/* Error display */}
      {error && (
        <Alert
          message={error}
          type="error"
          showIcon
          closable
          style={{ marginBottom: 16 }}
        />
      )}

      {/* Idea card */}
      <IdeaCard
        ideaNumber={ideaIndex + 1}
        text={idea.text}
        queryText={queryText}
      />

      {/* Rating inputs */}
      <Card style={{ marginBottom: 16 }}>
        <RatingSlider
          dimension={dimensions.originality}
          value={ratings.originality}
          onChange={(v) => setRating('originality', v)}
          disabled={submitting}
        />
        <RatingSlider
          dimension={dimensions.elaboration}
          value={ratings.elaboration}
          onChange={(v) => setRating('elaboration', v)}
          disabled={submitting}
        />
        <RatingSlider
          dimension={dimensions.coherence}
          value={ratings.coherence}
          onChange={(v) => setRating('coherence', v)}
          disabled={submitting}
        />
        <RatingSlider
          dimension={dimensions.usefulness}
          value={ratings.usefulness}
          onChange={(v) => setRating('usefulness', v)}
          disabled={submitting}
        />
      </Card>

      {/* Navigation buttons */}
      <Card>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Button
            icon={<ArrowLeftOutlined />}
            onClick={onPrev}
            disabled={!canGoPrev || submitting}
          >
            Back
          </Button>

          <Space>
            <Button
              icon={<ForwardOutlined />}
              onClick={handleSkip}
              loading={submitting}
            >
              Skip
            </Button>
            <Button
              type="primary"
              icon={<ArrowRightOutlined />}
              onClick={handleSubmit}
              loading={submitting}
              disabled={!isComplete()}
            >
              Submit & Next
            </Button>
          </Space>
        </div>
      </Card>
    </div>
  );
}
