import { App, Button, Card, Form, Input, Typography, type InputRef } from 'antd';
import { useEffect, useRef, 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] = useState(() => localStorage.getItem('pending_phone_number') ?? '');
  const [form] = Form.useForm<VerifyOtpFormValues>();
  const otpInputRef = useRef<InputRef>(null);
  const { message } = App.useApp();

  useEffect(() => {
    const timeoutId = window.setTimeout(() => {
      otpInputRef.current?.focus();
    }, 100);

    return () => window.clearTimeout(timeoutId);
  }, []);

  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 ref={otpInputRef} 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;