import { useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { App as AntdApp, Button, Form, Input } from 'antd';
import { LockOutlined, MailOutlined } from '@ant-design/icons';
import axios from 'axios';
import AuthLayout from '@/layouts/AuthLayout';
import { apiErrorDetails, apiErrorMessage } from '@/services/api';
import { authApi } from '@/services/auth';
import { useSession } from '@/services/session';
import { emailFormatRule } from '@/utils/validators';

interface LoginFormValues {
    email: string;
    password: string;
}

/** 登录页，契约见 docs/api/auth.md §3 */
const LoginPage = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const { message } = AntdApp.useApp();
    const { applyAuthSession } = useSession();
    const [form] = Form.useForm<LoginFormValues>();
    const [submitting, setSubmitting] = useState(false);

    const handleFinish = async (values: LoginFormValues) => {
        setSubmitting(true);
        try {
            const session = await authApi.login({
                email: values.email.trim(),
                password: values.password,
            });
            applyAuthSession(session);
            message.success('登录成功');
            const continuation = new URLSearchParams(location.search).get('continue');
            if (continuation) {
                const target = new URL(continuation);
                if (target.origin === (import.meta.env.VITE_API_PUBLIC_ORIGIN ?? 'http://localhost:8200') && target.pathname === '/api/extension/authorize') {
                    window.location.assign(target.toString());
                    return;
                }
            }
            // 守卫记住的来源路径优先，默认进入在线商品首页
            const from = (location.state as { from?: string } | null)?.from;
            navigate(from && from.startsWith('/') ? from : '/online-products', {
                replace: true,
            });
        } catch (error) {
            // 契约约定登录失败统一返回 401 INVALID_CREDENTIALS，不区分邮箱不存在或密码错误
            if (axios.isAxiosError(error) && error.response?.status === 401) {
                message.error('邮箱或密码不正确');
                return;
            }
            // 422 VALIDATION_FAILED 等带字段明细的错误，逐项落到对应表单项
            const details = apiErrorDetails(error);
            if (details.length > 0) {
                form.setFields(
                    details.map((item) => ({
                        name: item.field as keyof LoginFormValues,
                        errors: [item.message],
                    }))
                );
            } else {
                message.error(apiErrorMessage(error));
            }
        } finally {
            setSubmitting(false);
        }
    };

    return (
        <AuthLayout
            title="登录"
            subtitle="登录 Atlas Seller Kit，继续管理你的商品"
            footer={
                <>
                    还没有账户？<Link to="/register">立即注册</Link>
                </>
            }
        >
            <Form<LoginFormValues>
                form={form}
                layout="vertical"
                requiredMark={false}
                onFinish={handleFinish}
            >
                <Form.Item
                    name="email"
                    label="邮箱"
                    rules={[{ required: true, message: '请输入邮箱' }, emailFormatRule]}
                >
                    <Input
                        prefix={<MailOutlined style={{ color: 'var(--text-secondary)' }} />}
                        placeholder="请输入邮箱"
                        autoComplete="email"
                        autoFocus
                    />
                </Form.Item>
                <Form.Item
                    name="password"
                    label="密码"
                    rules={[{ required: true, message: '请输入密码' }]}
                >
                    <Input.Password
                        prefix={<LockOutlined style={{ color: 'var(--text-secondary)' }} />}
                        placeholder="请输入密码"
                        autoComplete="current-password"
                    />
                </Form.Item>
                <Form.Item style={{ marginBottom: 0, marginTop: 8 }}>
                    <Button type="primary" htmlType="submit" block loading={submitting}>
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </AuthLayout>
    );
};

export default LoginPage;