'use client';
import { useState, Suspense } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import Alert from 'react-bootstrap/Alert';
import Cookies from 'js-cookie';
import api from '../../../lib/axios';
import { useAuth } from '../../../contexts/AuthContext';
import { Container } from 'react-bootstrap';

function VerifyContent() {
  const { login } = useAuth();
  const [code, setCode] = useState('');
  const [error, setError] = useState('');
  const router = useRouter();
  const searchParams = useSearchParams();
  const email = searchParams.get('email');

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    try {
      const res = await api.post('/verify', { email, code });
      Cookies.set('auth_token', res.data.access_token);
      Cookies.set('refresh_token', res.data.refresh_token);
      login();

      const localCart = localStorage.getItem('cart');
      if (localCart) {
        const items = JSON.parse(localCart);
        for (const item of items) {
          await api.post('/cart/add', item); // Sync each item
        }
        localStorage.removeItem('cart'); // Clear local cart after sync
      }
      router.push('/user-dashboard');
    } catch {
      setError('Verification failed.');
    }
  };

  return (
    <div className="auth-page">
      <Container>
        <div className="auth-page__wrapper verify-email">
          <h3 className="verify-email__title">Let{"'"}s get your email verified</h3>
          <p>To keep your account secure we need to verify your email address. Enter the code we hae sent to <b> {email} </b> below.</p>
          <Form onSubmit={handleSubmit}>
            {error && <Alert variant="danger">{error}</Alert>}
            <Form.Group className="mb-3">
              <Form.Label>Verification Code</Form.Label>
              <Form.Control value={code} onChange={(e) => setCode(e.target.value)} />
            </Form.Group>
            <Button type="submit" variant="primary auth-btn">Verify</Button>
          </Form>
        </div>
      </Container>
    </div>
  );
}

export default function VerifyPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <VerifyContent />
    </Suspense>
  );
}