// frontend/src/lib/api/client.ts
import axios from 'axios';

const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';

export const apiClient = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

// Add auth interceptor
apiClient.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Add response interceptor for error handling
apiClient.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // Redirect to login
      window.location.href = '/auth/login';
    }
    return Promise.reject(error);
  }
);

// frontend/src/lib/api/auth.ts
import { apiClient } from './client';

export const authApi = {
  login: async (email: string, password: string) => {
    const response = await apiClient.post('/api/auth/login', { email, password });
    return response.data;
  },
  
  register: async (userData: RegisterData) => {
    const response = await apiClient.post('/api/auth/register', userData);
    return response.data;
  },
  
  getProfile: async () => {
    const response = await apiClient.get('/api/auth/profile');
    return response.data;
  },
  
  updateAvatar: async (avatarData: AvatarData) => {
    const response = await apiClient.put('/api/auth/avatar', avatarData);
    return response.data;
  },
};

// frontend/src/lib/api/products.ts
export const productsApi = {
  getProducts: async (category?: string) => {
    const response = await apiClient.get('/api/products', { params: { category } });
    return response.data;
  },
  
  getProduct: async (id: string) => {
    const response = await apiClient.get(`/api/products/${id}`);
    return response.data;
  },
  
  searchProducts: async (query: string) => {
    const response = await apiClient.get('/api/products/search', { params: { q: query } });
    return response.data;
  },
};

// frontend/src/lib/api/social.ts
export const socialApi = {
  getFeed: async (page = 1) => {
    const response = await apiClient.get('/api/social/feed', { params: { page } });
    return response.data;
  },
  
  createPost: async (postData: PostData) => {
    const response = await apiClient.post('/api/social/posts', postData);
    return response.data;
  },
  
  getChatMessages: async (chatId: string) => {
    const response = await apiClient.get(`/api/social/chat/${chatId}/messages`);
    return response.data;
  },
  
  sendMessage: async (chatId: string, message: string) => {
    const response = await apiClient.post(`/api/social/chat/${chatId}/messages`, { message });
    return response.data;
  },
};

// frontend/src/app/auth/login/page.tsx
'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { authApi } from '@/lib/api/auth';

export default function LoginPage() {
  const router = useRouter();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  
  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const { token, user } = await authApi.login(email, password);
      localStorage.setItem('token', token);
      localStorage.setItem('user', JSON.stringify(user));
      router.push('/');
    } catch (error) {
      console.error('Login failed:', error);
    }
  };
  
  return (
    <div className="min-h-screen flex items-center justify-center">
      <form onSubmit={handleLogin} className="w-full max-w-md">
        <h1 className="text-3xl font-bold mb-6">Login to PrettyGirllz</h1>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Email"
          className="w-full p-2 mb-4 border rounded"
        />
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Password"
          className="w-full p-2 mb-4 border rounded"
        />
        <button type="submit" className="w-full bg-pink-500 text-white p-2 rounded">
          Login
        </button>
      </form>
    </div>
  );
}

// frontend/src/lib/websocket/client.ts
import { io, Socket } from 'socket.io-client';

class WebSocketClient {
  private socket: Socket | null = null;
  
  connect(token: string) {
    this.socket = io('ws://localhost:8084', {
      auth: { token },
      transports: ['websocket'],
    });
    
    this.socket.on('connect', () => {
      console.log('WebSocket connected');
    });
    
    this.socket.on('disconnect', () => {
      console.log('WebSocket disconnected');
    });
  }
  
  joinChat(chatId: string) {
    this.socket?.emit('join_chat', { chatId });
  }
  
  sendMessage(chatId: string, message: string) {
    this.socket?.emit('send_message', { chatId, message });
  }
  
  onMessage(callback: (message: any) => void) {
    this.socket?.on('new_message', callback);
  }
  
  disconnect() {
    this.socket?.disconnect();
  }
}

export const wsClient = new WebSocketClient();