import { useState } from 'react';
import {
  ApartmentOutlined,
  CheckCircleFilled,
  LockOutlined,
  MobileOutlined,
} from '@ant-design/icons';
import { App as AntdApp, Button, Form, Input, Tag } from 'antd';
import { Navigate, useLocation, useNavigate } from 'react-router-dom';
import { useAuthStore } from '@/store/auth';
import type { LoginParams } from '@/types/auth';
import './Login.scss';

const Login = () => {
  const [form] = Form.useForm<LoginParams>();
  const [loading, setLoading] = useState(false);

  const token = useAuthStore((state) => state.token);
  const login = useAuthStore((state) => state.login);
  const navigate = useNavigate();
  const location = useLocation();
  const { message } = AntdApp.useApp();

  if (token) {
    return <Navigate to="/dashboard" replace />;
  }

  const from = (location.state as { from?: string } | null)?.from;
  const redirectTo = from && from.startsWith('/') && from !== '/login' ? from : '/dashboard';

  const handleFinish = async (values: LoginParams) => {
    setLoading(true);
    try {
      await login(values);
      message.success('登录成功，欢迎回来');
      navigate(redirectTo, { replace: true });
    } catch (error) {
      message.error(error instanceof Error ? error.message : '登录失败，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-page">
      <div className="login-shell">
        <section className="login-brand">
          <div className="login-brand__logo">
            <span>C</span>
            CRM Admin
          </div>

          <div className="login-brand__content">
            <h1>
              让团队协作
              <br />
              更简单、更高效
            </h1>
            <p>一套开箱即用的 CRM 中后台管理系统，覆盖客户、订单与团队协作。</p>
            <ul>
              <li>
                <CheckCircleFilled /> 清晰的多级菜单与信息架构
              </li>
              <li>
                <CheckCircleFilled /> 登录态校验与安全的页面访问
              </li>
              <li>
                <CheckCircleFilled /> 客户、订单、用户一站式管理
              </li>
            </ul>
          </div>

          <div className="login-brand__footer">Vite · React · TypeScript · Ant Design</div>
        </section>

        <section className="login-panel">
          <div className="login-panel__inner">
            <div className="login-panel__header">
              <Tag color="purple" bordered={false}>
                CRM 企业管理平台
              </Tag>
              <h2>欢迎回来 👋</h2>
              <p>请登录你的账号以继续访问后台</p>
            </div>

            <Form
              form={form}
              layout="vertical"
              size="large"
              requiredMark={false}
              onFinish={handleFinish}
            >
              <Form.Item
                name="tenant"
                label="租户"
                rules={[
                  { required: true, whitespace: true, message: '请输入租户标识' },
                ]}
              >
                <Input
                  prefix={<ApartmentOutlined />}
                  placeholder="请输入租户标识"
                  autoComplete="organization"
                />
              </Form.Item>

              <Form.Item
                name="phone"
                label="手机号"
                rules={[
                  { required: true, message: '请输入手机号' },
                  { pattern: /^1\d{10}$/, message: '请输入正确的手机号' },
                ]}
              >
                <Input
                  prefix={<MobileOutlined />}
                  placeholder="请输入手机号"
                  autoComplete="tel"
                  maxLength={11}
                />
              </Form.Item>

              <Form.Item
                name="password"
                label="密码"
                rules={[{ required: true, message: '请输入密码' }]}
              >
                <Input.Password
                  prefix={<LockOutlined />}
                  placeholder="请输入密码"
                  autoComplete="current-password"
                />
              </Form.Item>

              <div className="login-panel__helper">
                <span>登录即表示同意平台使用规范</span>
                <a onClick={() => message.info('请联系系统管理员重置密码')}>忘记密码？</a>
              </div>

              <Button type="primary" htmlType="submit" block loading={loading}>
                登 录
              </Button>
            </Form>
          </div>
        </section>
      </div>
    </div>
  );
};

export default Login;