/**
 * Completion page shown when all ideas have been rated.
 */

import { Card, Button, Typography, Space, Result, Statistic, Row, Col } from 'antd';
import { CheckCircleOutlined, BarChartOutlined, LogoutOutlined } from '@ant-design/icons';
import type { RaterProgress } from '../types';

const { Title, Text } = Typography;

interface CompletionPageProps {
  raterId: string;
  progress: RaterProgress | null;
  onLogout: () => void;
}

export function CompletionPage({ raterId, progress, onLogout }: CompletionPageProps) {
  const completed = progress?.total_completed ?? 0;
  const total = progress?.total_ideas ?? 0;
  const percentage = progress?.percentage ?? 0;

  const isFullyComplete = completed >= total;

  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      minHeight: '100vh',
      padding: 24
    }}>
      <Card style={{ maxWidth: 600, width: '100%' }}>
        <Result
          status={isFullyComplete ? 'success' : 'info'}
          icon={isFullyComplete ? <CheckCircleOutlined /> : <BarChartOutlined />}
          title={isFullyComplete ? 'Assessment Complete!' : 'Session Summary'}
          subTitle={
            isFullyComplete
              ? 'Thank you for completing the assessment.'
              : 'You have made progress on the assessment.'
          }
          extra={[
            <Button
              type="primary"
              key="logout"
              icon={<LogoutOutlined />}
              onClick={onLogout}
            >
              Exit
            </Button>
          ]}
        >
          <Row gutter={16} style={{ marginTop: 24 }}>
            <Col span={8}>
              <Statistic
                title="Ideas Rated"
                value={completed}
                suffix={`/ ${total}`}
              />
            </Col>
            <Col span={8}>
              <Statistic
                title="Progress"
                value={percentage}
                suffix="%"
                precision={1}
              />
            </Col>
            <Col span={8}>
              <Statistic
                title="Rater ID"
                value={raterId}
                valueStyle={{ fontSize: 16 }}
              />
            </Col>
          </Row>

          {progress && progress.queries.length > 0 && (
            <div style={{ marginTop: 24 }}>
              <Title level={5}>Progress by Query</Title>
              <Space direction="vertical" style={{ width: '100%' }}>
                {progress.queries.map((q) => (
                  <div
                    key={q.query_id}
                    style={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      padding: '4px 0'
                    }}
                  >
                    <Text>{q.query_id}</Text>
                    <Text type={q.completed_count >= q.total_count ? 'success' : 'secondary'}>
                      {q.completed_count} / {q.total_count}
                      {q.completed_count >= q.total_count && ' ✓'}
                    </Text>
                  </div>
                ))}
              </Space>
            </div>
          )}
        </Result>
      </Card>
    </div>
  );
}
