import { useState } from 'react';
import { Button, Card, Form, Input, message, Typography, Checkbox } from 'antd';
import { UserOutlined, LockOutlined, ThunderboltOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useAdminStore } from '../store';

const AdminLoginPage = () => {
  const navigate = useNavigate();
  const { login } = useAdminStore();
  const [loading, setLoading] = useState(false);

  const handleLogin = async (values: { username: string; password: string; rememberMe?: boolean }) => {
    setLoading(true);
    try {
      await login(values.username, values.password, values.rememberMe);
      message.success('登录成功');
      navigate('/');
    } catch {
      message.error('登录失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'linear-gradient(135deg, #0f0f23 0%, #1a1a35 50%, #0f0f23 100%)',
    }}>
      <Card bordered={false} style={{
        width: 420, borderRadius: 16, boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
      }}>
        {/* Logo */}
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <div style={{
            width: 56, height: 56, borderRadius: 14, margin: '0 auto 16px',
            background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 8px 24px rgba(99,102,241,0.3)',
          }}>
            <ThunderboltOutlined style={{ fontSize: 26, color: '#fff' }} />
          </div>
          <Typography.Title level={3} style={{ margin: 0 }}>
            VideoGen<span style={{ color: '#6366f1' }}>.AI</span>
          </Typography.Title>
          <Typography.Text type="secondary">管理后台</Typography.Text>
        </div>

        <Form onFinish={handleLogin} layout="vertical">
          <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
            <Input placeholder="用户名" size="large" prefix={<UserOutlined style={{ color: '#94a3b8', marginRight: 8 }} />} />
          </Form.Item>
          <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
            <Input.Password placeholder="密码" size="large" prefix={<LockOutlined style={{ color: '#94a3b8', marginRight: 8 }} />} />
          </Form.Item>
          <Form.Item name="rememberMe" valuePropName="checked">
            <Checkbox>记住我的登录状态</Checkbox>
          </Form.Item>
          <Form.Item style={{ marginBottom: 8 }}>
            <Button type="primary" htmlType="submit" loading={loading} block size="large"
              style={{
                borderRadius: 10, fontWeight: 600, height: 44,
                background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
                border: 'none',
              }}>
              登录管理后台
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default AdminLoginPage;
