import { Button, Form, Input, Tabs } from 'antd';
import type { LoginPageLogic, LoginTab } from '../LoginPageLogic';

export default function LoginFormCard({ logic }: { logic: LoginPageLogic }) {
  const { tab, setTab, loading, onLogin, onRegister } = logic;
  const [loginForm] = Form.useForm();
  const [registerForm] = Form.useForm();

  const handleRegister = async (values: any) => {
    const result = await onRegister(values);
    if (result) {
      loginForm.setFieldsValue({
        phone: result.phone,
        password: result.password,
      });
    }
  };

  return (
    <div className="login-card">
      <div className="login-card-header">
        <h2 className="login-card-title">欢迎回来</h2>
        <div className="login-card-subtitle">使用手机号登录或注册以继续</div>
      </div>

      <Tabs
        activeKey={tab}
        onChange={(key) => setTab(key as LoginTab)}
        items={[
          {
            key: 'login',
            label: '登录',
            children: (
              <Form 
                form={loginForm}
                layout="vertical" 
                onFinish={onLogin} 
                className="login-form" 
              >
                <Form.Item 
                  name="phone" 
                  label="手机号" 
                  rules={[
                    { required: true, message: '请填写手机号' },
                  ]}
                >
                  <Input placeholder="13800138000" size="large" autoFocus />
                </Form.Item>
                <Form.Item name="password" label="密码" rules={[{ required: true }]}>
                  <Input.Password placeholder="••••••" size="large" />
                </Form.Item>
                <Button type="primary" htmlType="submit" loading={loading} block size="large" className="login-submit-btn">
                  登录
                </Button>
              </Form>
            )
          },
          {
            key: 'register',
            label: '注册',
            children: (
              <Form 
                form={registerForm}
                layout="vertical" 
                onFinish={handleRegister} 
                className="login-form" 
              >
                <Form.Item 
                  name="phone" 
                  label="手机号" 
                  rules={[
                    { required: true, message: '请填写手机号' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式' }
                  ]}
                >
                  <Input placeholder="13800138000" size="large" />
                </Form.Item>
                <Form.Item name="name" label="昵称" rules={[{ required: true }]}>
                  <Input placeholder="张三" size="large" />
                </Form.Item>
                <Form.Item name="password" label="密码" rules={[{ required: true, min: 6, message: '至少 6 位' }]}>
                  <Input.Password placeholder="••••••" size="large" />
                </Form.Item>
                <Form.Item name="inviteCode" label="邀请码（可选）">
                  <Input placeholder="如果你是被邀请的用户" size="large" />
                </Form.Item>
                <Button type="primary" htmlType="submit" loading={loading} block size="large" className="login-submit-btn">
                  创建账户
                </Button>
              </Form>
            )
          }
        ]}
      />

      <div className="login-footer">登录即表示你已同意我们的服务条款与隐私政策</div>
    </div>
  );
}