import { Button, Card, Form, Input, Typography, message } from 'antd';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAppDispatch } from '../../utils/hooks';
import { loginSuccess } from '../../features/auth/authSlice';
import { authService } from '../../features/auth/authService';
import { colors } from '../../design/tokens/colors';
import { spacing } from '../../design/tokens/spacing';

const { Title, Paragraph } = Typography;

interface VerifyOtpFormValues {
  otp: string;
}

const VerifyOtp = () => {
  const navigate = useNavigate();
  const dispatch = useAppDispatch();
  const [phoneNumber, setPhoneNumber] = useState('');
  const [form] = Form.useForm<VerifyOtpFormValues>();

  useEffect(() => {
    const storedPhoneNumber = localStorage.getItem('pending_phone_number');
    if (storedPhoneNumber) {
      setPhoneNumber(storedPhoneNumber);
    }
  }, []);

  const onFinish = async (values: VerifyOtpFormValues) => {
    try {
      const response = await authService.verifyOtp(phoneNumber, values.otp);
      dispatch(loginSuccess(response));
      localStorage.removeItem('pending_phone_number');
      message.success('ورود با موفقیت انجام شد');
      navigate('/');
    } catch {
      message.error('کد تایید نادرست است');
    }
  };

  return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: colors.primaryLight, direction: 'rtl' }}>
      <Card style={{ width: 420, boxShadow: '0 12px 32px rgba(35, 62, 95, 0.12)', border: `1px solid ${colors.primaryLight}` }}>
        <Title level={3} style={{ marginBottom: spacing.sm, color: colors.primary }}>
          تایید کد یکبار مصرف
        </Title>
        <Paragraph style={{ color: colors.textSecondary }}>
          کد تایید: 77501
        </Paragraph>

        <Form form={form} layout="vertical" onFinish={onFinish}>
          <Form.Item
            label="کد تایید"
            name="otp"
            rules={[{ required: true, message: 'کد تایید الزامی است' }]}
          >
            <Input placeholder="77501" size="large" maxLength={5} />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" size="large" block>
              تایید
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default VerifyOtp;