/**
 * Rater login component.
 */

import { useState, useEffect } from 'react';
import { Card, Input, Button, Typography, Space, List, Alert } from 'antd';
import { UserOutlined, LoginOutlined } from '@ant-design/icons';
import * as api from '../services/api';
import type { Rater } from '../types';

const { Title, Text } = Typography;

interface RaterLoginProps {
  onLogin: (raterId: string, name?: string) => void;
  loading: boolean;
  error: string | null;
}

export function RaterLogin({ onLogin, loading, error }: RaterLoginProps) {
  const [raterId, setRaterId] = useState('');
  const [existingRaters, setExistingRaters] = useState<Rater[]>([]);

  useEffect(() => {
    api.listRaters()
      .then(setExistingRaters)
      .catch(console.error);
  }, []);

  const handleLogin = () => {
    if (raterId.trim()) {
      onLogin(raterId.trim());
    }
  };

  const handleQuickLogin = (rater: Rater) => {
    onLogin(rater.rater_id);
  };

  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      minHeight: '100vh',
      padding: 24
    }}>
      <Card
        style={{ width: 400, maxWidth: '100%' }}
        styles={{ body: { padding: 32 } }}
      >
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <div style={{ textAlign: 'center' }}>
            <Title level={3} style={{ marginBottom: 8 }}>
              Creative Idea Assessment
            </Title>
            <Text type="secondary">
              Enter your rater ID to begin
            </Text>
          </div>

          {error && (
            <Alert message={error} type="error" showIcon />
          )}

          <Input
            size="large"
            placeholder="Enter your rater ID"
            prefix={<UserOutlined />}
            value={raterId}
            onChange={(e) => setRaterId(e.target.value)}
            onPressEnter={handleLogin}
            disabled={loading}
          />

          <Button
            type="primary"
            size="large"
            icon={<LoginOutlined />}
            onClick={handleLogin}
            loading={loading}
            disabled={!raterId.trim()}
            block
          >
            Start Assessment
          </Button>

          {existingRaters.length > 0 && (
            <div>
              <Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
                Existing raters:
              </Text>
              <List
                size="small"
                bordered
                dataSource={existingRaters}
                renderItem={(rater) => (
                  <List.Item
                    style={{ cursor: 'pointer' }}
                    onClick={() => handleQuickLogin(rater)}
                  >
                    <Text code>{rater.rater_id}</Text>
                    {rater.name && rater.name !== rater.rater_id && (
                      <Text type="secondary" style={{ marginLeft: 8 }}>
                        ({rater.name})
                      </Text>
                    )}
                  </List.Item>
                )}
              />
            </div>
          )}
        </Space>
      </Card>
    </div>
  );
}
