import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Form, Input, Button, message, Divider } from 'antd';
import { UserOutlined, LockOutlined, SafetyCertificateOutlined } from '@ant-design/icons';
import { useAuthStore } from '../stores/auth';
import ThemeSwitcher from '../components/ThemeSwitcher';
import { getPublicBrand, type BrandConfig } from '../api/themes';

export default function Login() {
  const navigate = useNavigate();
  const login = useAuthStore((s) => s.login);
  const loading = useAuthStore((s) => s.loading);
  const [messageApi, contextHolder] = message.useMessage();
  const [brand, setBrand] = useState<BrandConfig | null>(null);

  useEffect(() => {
    getPublicBrand().then(setBrand);
  }, []);

  const onFinish = async (values: { username: string; password: string }) => {
    try {
      await login(values.username, values.password);
      messageApi.success('登录成功');
      navigate('/');
    } catch (err: unknown) {
      const errorMsg =
        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ||
        '登录失败，请检查用户名和密码';
      messageApi.error(errorMsg);
    }
  };

  return (
    <div className="login-root">
      {contextHolder}

      {/* 左侧品牌展示区 */}
      <div className="login-brand-panel">
        <div className="deco-circle" style={{ top: '-20%', right: '-10%', width: 500, height: 500 }} />
        <div className="deco-circle" style={{ bottom: '-15%', left: '-8%', width: 400, height: 400, background: 'rgba(255, 255, 255, 0.03)' }} />

        <div style={{ position: 'relative', zIndex: 1, textAlign: 'center', maxWidth: 480 }}>
          <div className="brand-icon">
            <SafetyCertificateOutlined />
          </div>

          <h1 className="brand-title">{brand?.brand_name || 'HMS 健康管理平台'}</h1>
          <p className="brand-desc">{brand?.brand_slogan || '新一代健康管理平台'}</p>
          <p className="brand-sub-desc">{brand?.brand_features || '患者管理 · 健康监测 · 随访管理 · AI 智能分析'}</p>

          <div style={{ marginTop: 48, display: 'flex', gap: 32, justifyContent: 'center' }}>
            {[
              { label: '多租户架构', value: 'SaaS' },
              { label: '模块化设计', value: '可插拔' },
              { label: '事件驱动', value: '可扩展' },
            ].map((item) => (
              <div key={item.label} style={{ textAlign: 'center' }}>
                <div className="feature-item-value">{item.value}</div>
                <div className="feature-item-label">{item.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 右侧登录表单区 */}
      <main className="login-form-panel">
        <div className="login-theme-switcher">
          <ThemeSwitcher />
        </div>

        <div style={{ maxWidth: 360, width: '100%', margin: '0 auto' }}>
          <h2 className="form-title">欢迎回来</h2>
          <p className="form-subtitle">请登录您的账户以继续</p>

          <Divider style={{ margin: '24px 0' }} />

          <Form name="login" onFinish={onFinish} autoComplete="off" size="large" layout="vertical">
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入用户名' }]}
            >
              <Input
                prefix={<UserOutlined style={{ color: 'var(--login-input-icon-color)' }} />}
                placeholder="用户名"
                style={{ height: 44, borderRadius: 'var(--erp-radius-md)' }}
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input.Password
                prefix={<LockOutlined style={{ color: 'var(--login-input-icon-color)' }} />}
                placeholder="密码"
                style={{ height: 44, borderRadius: 'var(--erp-radius-md)' }}
              />
            </Form.Item>
            <Form.Item style={{ marginBottom: 0 }}>
              <Button
                type="primary"
                htmlType="submit"
                loading={loading}
                block
                style={{ height: 44, borderRadius: 'var(--erp-radius-md)', fontSize: 15, fontWeight: 600 }}
              >
                登录
              </Button>
            </Form.Item>
          </Form>

          <div className="form-footer">
            {brand?.brand_copyright || 'HMS 健康管理平台 · ©汕头市智界科技有限公司'}
          </div>
        </div>
      </main>
    </div>
  );
}