/**
 * Rating input component with radio buttons for 1-5 scale.
 */

import { Radio, Typography, Space, Tooltip, Button } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import type { DimensionDefinition } from '../types';

const { Text } = Typography;

interface RatingSliderProps {
  dimension: DimensionDefinition;
  value: number | null;
  onChange: (value: number | null) => void;
  disabled?: boolean;
}

export function RatingSlider({ dimension, value, onChange, disabled }: RatingSliderProps) {
  return (
    <div style={{ marginBottom: 24 }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
        <Text strong style={{ marginRight: 8 }}>
          {dimension.name.toUpperCase()}
        </Text>
        <Tooltip
          title={
            <div>
              <p style={{ marginBottom: 8 }}>{dimension.question}</p>
              {([1, 2, 3, 4, 5] as const).map((score) => (
                <div key={score} style={{ marginBottom: 4 }}>
                  <strong>{score}:</strong> {dimension.scale[score]}
                </div>
              ))}
            </div>
          }
          placement="right"
          overlayStyle={{ maxWidth: 400 }}
        >
          <Button
            type="text"
            size="small"
            icon={<QuestionCircleOutlined />}
            style={{ padding: 0, height: 'auto' }}
          />
        </Tooltip>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <Text type="secondary" style={{ minWidth: 80, textAlign: 'right' }}>
          {dimension.low_label}
        </Text>

        <Radio.Group
          value={value}
          onChange={(e) => onChange(e.target.value)}
          disabled={disabled}
          style={{ flex: 1 }}
        >
          <Space size="large">
            {[1, 2, 3, 4, 5].map((score) => (
              <Radio key={score} value={score}>
                {score}
              </Radio>
            ))}
          </Space>
        </Radio.Group>

        <Text type="secondary" style={{ minWidth: 80 }}>
          {dimension.high_label}
        </Text>
      </div>
    </div>
  );
}
