import React, { useState } from 'react'
import {
	Card,
	Form,
	Input,
	Button,
	Typography,
	Alert,
	Row,
	Col
} from 'antd'
import {
	UserOutlined,
	LockOutlined,
	LoginOutlined,
	MobileOutlined
} from '@ant-design/icons'

const { Title, Text } = Typography

interface LoginPageProps {
	onLogin: (username: string, password: string) => Promise<void>
	loading?: boolean
	error?: string
}

/**
 * Login page component
 */
const LoginPage: React.FC<LoginPageProps> = ({ onLogin, loading = false, error }) => {
	const [form] = Form.useForm()
	const [isSubmitting, setIsSubmitting] = useState(false)

	const handleSubmit = async (values: { username: string; password: string }) => {
		try {
			setIsSubmitting(true)
			await onLogin(values.username, values.password)
		} catch {
			// Error handling done by parent component
		} finally {
			setIsSubmitting(false)
		}
	}

	const isLoading = loading || isSubmitting

	return (
		<div style={{
			minHeight: '100vh',
			background: 'var(--md-surface)',
			display: 'flex',
			alignItems: 'center',
			justifyContent: 'center',
			padding: '20px'
		}}>
			<Row justify="center" style={{ width: '100%', maxWidth: '1200px' }}>
				<Col xs={24} sm={20} md={16} lg={12} xl={8}>
					<Card
						style={{
							borderRadius: '20px',
							boxShadow: 'var(--md-elevation-3)',
							border: '1px solid var(--md-outline-variant)',
							overflow: 'hidden'
						}}
						styles={{ body: { padding: '48px 40px' } }}
					>
						<div style={{ textAlign: 'center', marginBottom: '40px' }}>
							{/* Logo */}
							<div style={{
								background: 'var(--md-primary-container)',
								borderRadius: '50%',
								width: '80px',
								height: '80px',
								display: 'flex',
								alignItems: 'center',
								justifyContent: 'center',
								margin: '0 auto 24px'
							}}>
								<MobileOutlined style={{
									fontSize: '40px',
									color: 'var(--md-on-primary-container)'
								}} />
							</div>

							<Title level={2} style={{
								margin: '0 0 8px 0',
								fontWeight: 600,
								color: 'var(--md-on-surface)'
							}}>
								远程控制中心
							</Title>
							<Text style={{
								color: 'var(--md-on-surface-variant)',
								fontSize: '16px'
							}}>
								请登录以继续使用
							</Text>
						</div>

						{/* Error alert */}
						{error && (
							<Alert
								message={error}
								type="error"
								showIcon
								style={{
									marginBottom: '24px',
									borderRadius: '12px'
								}}
							/>
						)}

						{/* Login form */}
						<Form
							form={form}
							onFinish={handleSubmit}
							layout="vertical"
							requiredMark={false}
							disabled={isLoading}
						>
							<Form.Item
								name="username"
								label={<span style={{ fontWeight: 500 }}>用户名</span>}
								rules={[
									{ required: true, message: '请输入用户名' },
									{ min: 2, message: '用户名至少2个字符' }
								]}
							>
								<Input
									prefix={<UserOutlined style={{ color: 'var(--md-outline)' }} />}
									placeholder="请输入用户名"
									size="large"
									style={{ borderRadius: '12px' }}
								/>
							</Form.Item>

							<Form.Item
								name="password"
								label={<span style={{ fontWeight: 500 }}>密码</span>}
								rules={[
									{ required: true, message: '请输入密码' },
									{ min: 6, message: '密码至少6个字符' }
								]}
								style={{ marginBottom: '32px' }}
							>
								<Input.Password
									prefix={<LockOutlined style={{ color: 'var(--md-outline)' }} />}
									placeholder="请输入密码"
									size="large"
									style={{ borderRadius: '12px' }}
								/>
							</Form.Item>

							<Form.Item style={{ marginBottom: 0 }}>
								<Button
									type="primary"
									htmlType="submit"
									size="large"
									icon={isLoading ? undefined : <LoginOutlined />}
									loading={isLoading}
									block
									style={{
										height: '48px',
										borderRadius: '24px',
										fontSize: '16px',
										fontWeight: 500
									}}
								>
									{isLoading ? '登录中...' : '登录'}
								</Button>
							</Form.Item>
						</Form>
					</Card>
				</Col>
			</Row>
		</div>
	)
}

export default LoginPage
