'use client';

import React, { createContext, useContext, useState, useEffect } from 'react';
import api, { getCsrfCookie } from '@/lib/api';

interface User {
  id: number;
  name: string;
  email: string;
  phone?: string;
  role: string;
  avatar?: string;
  addresses?: any[];
  reseller_status?: string;
  reseller_bkash_number?: string;
  reseller_nagad_number?: string;
  reseller_rocket_number?: string;
  reseller_bank_details?: string;
  reseller_nid_front?: string;
  reseller_nid_back?: string;
  reseller_passport_photo?: string;
  reseller_store_name?: string;
  reseller_fb_profile?: string;
  reseller_fb_page?: string;
  reseller_website?: string;
  reseller_whatsapp?: string;
  reseller_telegram?: string;
  reseller_code?: string;
  reseller_rejection_reason?: string;
}

interface AuthContextType {
  user: User | null;
  loading: boolean;
  login: (credentials: any) => Promise<any>;
  register: (data: any) => Promise<any>;
  sendOtp: (phone: string) => Promise<any>;
  verifyOtp: (phone: string, code: string) => Promise<any>;
  logout: () => Promise<void>;
  checkUser: () => Promise<void>;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<User | null>(() => {
    if (typeof window !== 'undefined') {
      try {
        const cached = localStorage.getItem('auth_user');
        return cached ? JSON.parse(cached) : null;
      } catch {
        return null;
      }
    }
    return null;
  });
  const [loading, setLoading] = useState(true);

  const checkUser = async () => {
    try {
      const res = await api.get('/api/user');
      const freshUser = res.data.user;
      setUser(freshUser);
      if (typeof window !== 'undefined') {
        if (freshUser) {
          localStorage.setItem('auth_user', JSON.stringify(freshUser));
        } else {
          localStorage.removeItem('auth_user');
        }
      }
    } catch (err) {
      setUser(null);
      if (typeof window !== 'undefined') {
        localStorage.removeItem('auth_user');
      }
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    checkUser();

    const handleUnauthorized = () => {
      setUser(null);
      if (typeof window !== 'undefined') {
        localStorage.removeItem('auth_user');
      }
    };

    if (typeof window !== 'undefined') {
      window.addEventListener('auth-unauthorized', handleUnauthorized);
    }
    return () => {
      if (typeof window !== 'undefined') {
        window.removeEventListener('auth-unauthorized', handleUnauthorized);
      }
    };
  }, []);

  const login = async (credentials: any) => {
    setLoading(true);
    try {
      // 1. Fetch CSRF Cookie first (Mandatory for Laravel Sanctum SPA)
      await getCsrfCookie();
      // 2. Attempt login
      const res = await api.post('/api/login', credentials);
      const freshUser = res.data.user;
      setUser(freshUser);
      if (typeof window !== 'undefined') {
        localStorage.setItem('auth_user', JSON.stringify(freshUser));
      }
      return res.data;
    } catch (err: any) {
      setUser(null);
      if (typeof window !== 'undefined') {
        localStorage.removeItem('auth_user');
      }
      throw err.response?.data || err;
    } finally {
      setLoading(false);
    }
  };

  const register = async (data: any) => {
    setLoading(true);
    try {
      await getCsrfCookie();
      const res = await api.post('/api/register', data);
      const freshUser = res.data.user;
      setUser(freshUser);
      if (typeof window !== 'undefined') {
        localStorage.setItem('auth_user', JSON.stringify(freshUser));
      }
      return res.data;
    } catch (err: any) {
      setUser(null);
      if (typeof window !== 'undefined') {
        localStorage.removeItem('auth_user');
      }
      throw err.response?.data || err;
    } finally {
      setLoading(false);
    }
  };

  const sendOtp = async (phone: string) => {
    setLoading(true);
    try {
      await getCsrfCookie();
      const res = await api.post('/api/otp/send', { phone });
      return res.data;
    } catch (err: any) {
      throw err.response?.data || err;
    } finally {
      setLoading(false);
    }
  };

  const verifyOtp = async (phone: string, code: string) => {
    setLoading(true);
    try {
      await getCsrfCookie();
      const res = await api.post('/api/otp/verify', { phone, code });
      const freshUser = res.data.user;
      setUser(freshUser);
      if (typeof window !== 'undefined') {
        localStorage.setItem('auth_user', JSON.stringify(freshUser));
      }
      return res.data;
    } catch (err: any) {
      setUser(null);
      if (typeof window !== 'undefined') {
        localStorage.removeItem('auth_user');
      }
      throw err.response?.data || err;
    } finally {
      setLoading(false);
    }
  };

  const logout = async () => {
    setLoading(true);
    try {
      await api.post('/api/logout');
    } catch (err) {
      console.error('Logout API failed', err);
    } finally {
      setUser(null);
      if (typeof window !== 'undefined') {
        localStorage.removeItem('auth_user');
      }
      setLoading(false);
    }
  };

  return (
    <AuthContext.Provider value={{ user, loading, login, register, sendOtp, verifyOtp, logout, checkUser }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => {
  const context = useContext(Auth);
  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
};

// Simple helper to match naming context inside react
const Auth = AuthContext;