import React, { useState } from 'react'
import { 
  Card, 
  Form, 
  Input, 
  Button, 
  Typography, 
  Alert, 
  Space,
  Steps,
  Row,
  Col,
  message
} from 'antd'
import {
  UserOutlined,
  LockOutlined,
  CheckCircleOutlined,
  SettingOutlined,
  SafetyOutlined
} from '@ant-design/icons'
import apiClient from '../services/apiClient'

const { Title, Text, Paragraph } = Typography
const { Step } = Steps

interface InstallPageProps {
  onInstallComplete: () => void
}

/**
 * 系统安装页面组件
 * 用于首次运行时设置管理员账号和密码
 */
const InstallPage: React.FC<InstallPageProps> = ({ onInstallComplete }) => {
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const [currentStep, setCurrentStep] = useState(0)
  const [error, setError] = useState<string | null>(null)
  const [lockFilePath, setLockFilePath] = useState<string>('')

  const handleInstall = async (values: { username: string; password: string; confirmPassword: string }) => {
    if (values.password !== values.confirmPassword) {
      setError('两次输入的密码不一致')
      return
    }

    setLoading(true)
    setError(null)

    try {
      const result = await apiClient.post<any>('/api/auth/initialize', {
        username: values.username,
        password: values.password
      })

      if (result.success) {
        setCurrentStep(2)
        message.success('系统初始化成功！')
        
        // 获取初始化信息以显示锁文件路径
        try {
          const checkResult = await apiClient.get<any>('/api/auth/check-initialization')
          if (checkResult.success && checkResult.lockFilePath) {
            setLockFilePath(checkResult.lockFilePath)
          }
        } catch (infoError) {
          console.warn('获取初始化信息失败:', infoError)
        }
        
        // 延迟跳转到登录页面
        setTimeout(() => {
          onInstallComplete()
        }, 3000)
      } else {
        setError(result.message || '初始化失败')
      }
    } catch (error: any) {
      setError(error.message || '初始化失败，请稍后重试')
    } finally {
      setLoading(false)
    }
  }

  const validateUsername = (_: any, value: string) => {
    if (!value) {
      return Promise.reject(new Error('请输入用户名'))
    }
    if (value.length < 3) {
      return Promise.reject(new Error('用户名至少需要3个字符'))
    }
    if (!/^[a-zA-Z0-9_-]+$/.test(value)) {
      return Promise.reject(new Error('用户名只能包含字母、数字、下划线和横线'))
    }
    return Promise.resolve()
  }

  const validatePassword = (_: any, value: string) => {
    if (!value) {
      return Promise.reject(new Error('请输入密码'))
    }
    if (value.length < 6) {
      return Promise.reject(new Error('密码至少需要6个字符'))
    }
    return Promise.resolve()
  }

  const steps = [
    {
      title: '欢迎',
      icon: <SettingOutlined />,
      description: '系统初始化向导'
    },
    {
      title: '设置账号',
      icon: <UserOutlined />,
      description: '创建管理员账号'
    },
    {
      title: '完成',
      icon: <CheckCircleOutlined />,
      description: '初始化完成'
    }
  ]

  return (
    <div style={{
      minHeight: '100vh',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '20px'
    }}>
      <Card
        style={{
          width: '100%',
          maxWidth: '500px',
          borderRadius: '16px',
          boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
          border: 'none'
        }}
        styles={{ body: { padding: '40px' } }}
      >
        <div style={{ textAlign: 'center', marginBottom: '32px' }}>
          <div style={{
            fontSize: '48px',
            marginBottom: '16px',
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text'
          }}>
            🚀
          </div>
          <Title level={2} style={{ margin: 0, color: '#1a1a1a' }}>
            远程控制系统
          </Title>
          <Text style={{ color: '#666', fontSize: '16px' }}>
            系统初始化向导
          </Text>
        </div>

        <Steps 
          current={currentStep} 
          style={{ marginBottom: '32px' }}
          size="small"
        >
          {steps.map((step, index) => (
            <Step
              key={index}
              title={step.title}
              description={step.description}
              icon={step.icon}
            />
          ))}
        </Steps>

        {currentStep === 0 && (
          <div style={{ textAlign: 'center' }}>
            <Alert
              message="欢迎使用远程控制系统"
              description={
                <div>
                  <Paragraph style={{ marginBottom: '16px' }}>
                    这是您首次运行本系统，需要进行初始化设置。
                  </Paragraph>
                  <Paragraph style={{ marginBottom: '16px' }}>
                    请为系统创建一个管理员账号，该账号将用于登录和管理系统。
                  </Paragraph>
                  <Space direction="vertical" style={{ width: '100%' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                      <SafetyOutlined style={{ color: '#52c41a' }} />
                      <Text>安全的密码保护</Text>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                      <UserOutlined style={{ color: '#1890ff' }} />
                      <Text>个性化用户名</Text>
                    </div>
                  </Space>
                </div>
              }
              type="info"
              showIcon
              style={{ marginBottom: '24px', textAlign: 'left' }}
            />
            <Button 
              type="primary" 
              size="large"
              onClick={() => setCurrentStep(1)}
              style={{
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                border: 'none',
                borderRadius: '8px',
                height: '48px',
                fontSize: '16px'
              }}
            >
              开始设置
            </Button>
          </div>
        )}

        {currentStep === 1 && (
          <Form
            form={form}
            layout="vertical"
            onFinish={handleInstall}
            size="large"
          >
            <Alert
              message="创建管理员账号"
              description="请设置您的管理员用户名和密码，建议使用强密码以确保系统安全。"
              type="warning"
              showIcon
              style={{ marginBottom: '24px' }}
            />

            {error && (
              <Alert
                message={error}
                type="error"
                closable
                onClose={() => setError(null)}
                style={{ marginBottom: '16px' }}
              />
            )}

            <Form.Item
              name="username"
              label="管理员用户名"
              rules={[{ validator: validateUsername }]}
            >
              <Input
                prefix={<UserOutlined />}
                placeholder="请输入管理员用户名"
                style={{ borderRadius: '8px' }}
              />
            </Form.Item>

            <Form.Item
              name="password"
              label="密码"
              rules={[{ validator: validatePassword }]}
            >
              <Input.Password
                prefix={<LockOutlined />}
                placeholder="请输入密码（至少6个字符）"
                style={{ borderRadius: '8px' }}
              />
            </Form.Item>

            <Form.Item
              name="confirmPassword"
              label="确认密码"
              rules={[
                { required: true, message: '请确认密码' },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('password') === value) {
                      return Promise.resolve()
                    }
                    return Promise.reject(new Error('两次输入的密码不一致'))
                  },
                }),
              ]}
            >
              <Input.Password
                prefix={<LockOutlined />}
                placeholder="请再次输入密码"
                style={{ borderRadius: '8px' }}
              />
            </Form.Item>

            <Row gutter={16} style={{ marginTop: '32px' }}>
              <Col span={12}>
                <Button
                  block
                  size="large"
                  onClick={() => setCurrentStep(0)}
                  style={{ borderRadius: '8px' }}
                >
                  上一步
                </Button>
              </Col>
              <Col span={12}>
                <Button
                  type="primary"
                  htmlType="submit"
                  block
                  size="large"
                  loading={loading}
                  style={{
                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                    border: 'none',
                    borderRadius: '8px'
                  }}
                >
                  {loading ? '初始化中...' : '完成设置'}
                </Button>
              </Col>
            </Row>
          </Form>
        )}

        {currentStep === 2 && (
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: '64px', marginBottom: '24px' }}>
              ✅
            </div>
            <Alert
              message="初始化完成！"
              description={
                <div>
                  <Paragraph style={{ marginBottom: '16px' }}>
                    系统已成功初始化，管理员账号创建完成。
                  </Paragraph>
                  <Paragraph style={{ marginBottom: '16px' }}>
                    即将跳转到登录页面，请使用刚才设置的账号密码登录系统。
                  </Paragraph>
                  {lockFilePath && (
                    <div style={{ 
                      background: '#f6f6f6', 
                      padding: '12px', 
                      borderRadius: '6px',
                      marginTop: '16px',
                      textAlign: 'left'
                    }}>
                      <Text strong style={{ color: '#666' }}>💡 重要提示：</Text>
                      <br />
                      <Text style={{ fontSize: '12px', color: '#666' }}>
                        系统已创建初始化锁文件，防止重复初始化。
                      </Text>
                      <br />
                      <Text code style={{ fontSize: '11px', wordBreak: 'break-all' }}>
                        {lockFilePath}
                      </Text>
                      <br />
                      <Text style={{ fontSize: '12px', color: '#666' }}>
                        如需重新初始化，请先删除此文件。
                      </Text>
                    </div>
                  )}
                </div>
              }
              type="success"
              showIcon
              style={{ textAlign: 'left' }}
            />
          </div>
        )}
      </Card>
    </div>
  )
}

export default InstallPage