/**
 * Instructions page showing dimension definitions.
 */

import { useState } from 'react';
import { Card, Button, Typography, Space, Checkbox, Divider, Tag } from 'antd';
import { PlayCircleOutlined } from '@ant-design/icons';
import type { DimensionDefinitions } from '../types';

const { Title, Text, Paragraph } = Typography;

interface InstructionsPageProps {
  dimensions: DimensionDefinitions | null;
  onStart: () => void;
  onBack?: () => void;
  loading: boolean;
  isReturning?: boolean;
}

export function InstructionsPage({
  dimensions,
  onStart,
  onBack,
  loading,
  isReturning = false
}: InstructionsPageProps) {
  const [acknowledged, setAcknowledged] = useState(isReturning);

  if (!dimensions) {
    return (
      <div style={{ padding: 24, textAlign: 'center' }}>
        <Text>Loading instructions...</Text>
      </div>
    );
  }

  const dimensionOrder = ['originality', 'elaboration', 'coherence', 'usefulness'] as const;

  return (
    <div style={{
      maxWidth: 800,
      margin: '0 auto',
      padding: 24
    }}>
      <Card>
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <div style={{ textAlign: 'center' }}>
            <Title level={2}>Assessment Instructions</Title>
            <Paragraph type="secondary">
              You will rate creative ideas on 4 dimensions using a 1-5 scale.
              Please read each definition carefully before beginning.
            </Paragraph>
          </div>

          <Divider />

          {dimensionOrder.map((key) => {
            const dim = dimensions[key];
            return (
              <Card
                key={key}
                size="small"
                title={
                  <Space>
                    <Tag color="blue">{dim.name}</Tag>
                    <Text type="secondary">{dim.question}</Text>
                  </Space>
                }
                style={{ marginBottom: 16 }}
              >
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: 'auto 1fr',
                  gap: '8px 16px',
                  fontSize: 14
                }}>
                  {([1, 2, 3, 4, 5] as const).map((score) => (
                    <>
                      <Tag
                        key={`score-${score}`}
                        color={score <= 2 ? 'red' : score === 3 ? 'orange' : 'green'}
                      >
                        {score}
                      </Tag>
                      <Text key={`text-${score}`}>
                        {dim.scale[score]}
                      </Text>
                    </>
                  ))}
                </div>
                <Divider style={{ margin: '12px 0' }} />
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <Text type="secondary">{dim.low_label}</Text>
                  <Text type="secondary">{dim.high_label}</Text>
                </div>
              </Card>
            );
          })}

          <Divider />

          <Space direction="vertical" style={{ width: '100%' }}>
            {!isReturning && (
              <Checkbox
                checked={acknowledged}
                onChange={(e) => setAcknowledged(e.target.checked)}
              >
                I have read and understood the instructions
              </Checkbox>
            )}

            <Space style={{ width: '100%', justifyContent: 'center' }}>
              {onBack && (
                <Button onClick={onBack}>
                  Back to Assessment
                </Button>
              )}
              <Button
                type="primary"
                size="large"
                icon={<PlayCircleOutlined />}
                onClick={onStart}
                loading={loading}
                disabled={!acknowledged}
              >
                {isReturning ? 'Continue Rating' : 'Begin Rating'}
              </Button>
            </Space>
          </Space>
        </Space>
      </Card>
    </div>
  );
}
