# Frontend Integration Guide

This guide explains how to integrate the Laravel API with your Next.js application for role-based authentication.

## API Endpoints Overview

### Authentication Endpoints
- `POST /api/register` - Register new user with user_type
- `POST /api/login` - General login
- `POST /api/login/admin` - Admin-specific login
- `POST /api/login/trial` - Trial-specific login
- `POST /api/login/survey` - Survey-specific login
- `POST /api/logout` - Logout user
- `GET /api/user` - Get authenticated user info

### Dashboard Endpoints (Protected)
- `GET /api/dashboard/admin` - Admin dashboard data
- `GET /api/dashboard/trial` - Trial dashboard data
- `GET /api/dashboard/survey` - Survey dashboard data

## Next.js Implementation

### 1. Login Pages

Create three login pages with the same design but different API endpoints:

#### `/pages/en/data/trial.js` - Trial Login
```javascript
import { useState } from 'react';
import { useRouter } from 'next/router';

export default function TrialLogin() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const router = useRouter();

  const handleLogin = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    try {
      const response = await fetch('http://127.0.0.1:8000/api/login/trial', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        },
        credentials: 'include',
        body: JSON.stringify({ email, password }),
      });

      const data = await response.json();

      if (data.success) {
        // Store token
        localStorage.setItem('auth_token', data.token);
        localStorage.setItem('user', JSON.stringify(data.user));
        
        // Redirect to trial dashboard
        router.push('/en/data/trial/dashboard');
      } else {
        setError(data.message || 'Login failed');
      }
    } catch (err) {
      setError('Network error. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="max-w-md w-full space-y-8">
        <div>
          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
            Trial User Login
          </h2>
        </div>
        <form className="mt-8 space-y-6" onSubmit={handleLogin}>
          {error && (
            <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
              {error}
            </div>
          )}
          <div>
            <input
              type="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-md"
              placeholder="Email address"
            />
          </div>
          <div>
            <input
              type="password"
              required
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-md"
              placeholder="Password"
            />
          </div>
          <div>
            <button
              type="submit"
              disabled={loading}
              className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50"
            >
              {loading ? 'Signing in...' : 'Sign in'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}
```

#### `/pages/en/data/survey.js` - Survey Login
```javascript
// Same component as above, but change:
// - API endpoint to 'http://127.0.0.1:8000/api/login/survey'
// - Title to 'Survey User Login'
// - Redirect to '/en/data/survey/dashboard'
```

#### `/pages/en/data/login.js` - Admin Login
```javascript
// Same component as above, but change:
// - API endpoint to 'http://127.0.0.1:8000/api/login/admin'
// - Title to 'Admin Login'
// - Redirect to '/en/data/admin/dashboard'
```

### 2. Dashboard Pages

Create protected dashboard pages for each user type:

#### `/pages/en/data/trial/dashboard.js`
```javascript
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';

export default function TrialDashboard() {
  const [user, setUser] = useState(null);
  const [dashboardData, setDashboardData] = useState(null);
  const [loading, setLoading] = useState(true);
  const router = useRouter();

  useEffect(() => {
    const token = localStorage.getItem('auth_token');
    if (!token) {
      router.push('/en/data/trial');
      return;
    }

    fetchDashboardData(token);
  }, []);

  const fetchDashboardData = async (token) => {
    try {
      const response = await fetch('http://127.0.0.1:8000/api/dashboard/trial', {
        headers: {
          'Authorization': `Bearer ${token}`,
          'Accept': 'application/json',
        },
        credentials: 'include',
      });

      const data = await response.json();

      if (data.success) {
        setDashboardData(data);
        setUser(JSON.parse(localStorage.getItem('user')));
      } else {
        // Token invalid, redirect to login
        localStorage.removeItem('auth_token');
        localStorage.removeItem('user');
        router.push('/en/data/trial');
      }
    } catch (err) {
      console.error('Dashboard fetch error:', err);
      router.push('/en/data/trial');
    } finally {
      setLoading(false);
    }
  };

  const handleLogout = async () => {
    const token = localStorage.getItem('auth_token');
    
    try {
      await fetch('http://127.0.0.1:8000/api/logout', {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Accept': 'application/json',
        },
        credentials: 'include',
      });
    } catch (err) {
      console.error('Logout error:', err);
    }

    localStorage.removeItem('auth_token');
    localStorage.removeItem('user');
    router.push('/en/data/trial');
  };

  if (loading) {
    return <div className="flex justify-center items-center min-h-screen">Loading...</div>;
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <nav className="bg-white shadow">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <h1 className="text-xl font-semibold">Trial Dashboard</h1>
            </div>
            <div className="flex items-center space-x-4">
              <span>Welcome, {user?.name}</span>
              <button
                onClick={handleLogout}
                className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700"
              >
                Logout
              </button>
            </div>
          </div>
        </div>
      </nav>

      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div className="px-4 py-6 sm:px-0">
          <div className="border-4 border-dashed border-gray-200 rounded-lg p-8">
            <h2 className="text-2xl font-bold mb-4">Trial User Dashboard</h2>
            <p className="text-gray-600 mb-4">User Type: {user?.user_type}</p>
            <p className="text-gray-600">{dashboardData?.message}</p>
            
            {/* Add your trial-specific content here */}
            <div className="mt-8">
              <h3 className="text-lg font-semibold mb-4">Trial Features</h3>
              <ul className="list-disc list-inside space-y-2">
                <li>Limited access to features</li>
                <li>Trial period: 30 days</li>
                <li>Basic analytics</li>
              </ul>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}
```

### 3. Authentication Hook

Create a custom hook for authentication:

#### `/hooks/useAuth.js`
```javascript
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

export const useAuth = (requiredUserType = null) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const router = useRouter();

  useEffect(() => {
    const token = localStorage.getItem('auth_token');
    const userData = localStorage.getItem('user');

    if (!token || !userData) {
      setLoading(false);
      return;
    }

    const parsedUser = JSON.parse(userData);
    
    // Check if user type matches required type
    if (requiredUserType && parsedUser.user_type !== requiredUserType) {
      // Redirect to appropriate login page
      const loginPages = {
        admin: '/en/data/login',
        trial: '/en/data/trial',
        survey: '/en/data/survey'
      };
      router.push(loginPages[requiredUserType] || '/en/data/login');
      return;
    }

    setUser(parsedUser);
    setLoading(false);
  }, [requiredUserType]);

  const logout = async () => {
    const token = localStorage.getItem('auth_token');
    
    if (token) {
      try {
        await fetch('http://127.0.0.1:8000/api/logout', {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Accept': 'application/json',
          },
          credentials: 'include',
        });
      } catch (err) {
        console.error('Logout error:', err);
      }
    }

    localStorage.removeItem('auth_token');
    localStorage.removeItem('user');
    setUser(null);
    
    // Redirect to appropriate login page
    const loginPages = {
      admin: '/en/data/login',
      trial: '/en/data/trial',
      survey: '/en/data/survey'
    };
    router.push(loginPages[user?.user_type] || '/en/data/login');
  };

  return { user, loading, logout };
};
```

### 4. API Configuration

Create an API configuration file:

#### `/lib/api.js`
```javascript
const API_BASE_URL = 'http://127.0.0.1:8000/api';

export const apiRequest = async (endpoint, options = {}) => {
  const token = localStorage.getItem('auth_token');
  
  const config = {
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      ...(token && { 'Authorization': `Bearer ${token}` }),
      ...options.headers,
    },
    credentials: 'include',
    ...options,
  };

  const response = await fetch(`${API_BASE_URL}${endpoint}`, config);
  const data = await response.json();

  if (!response.ok) {
    throw new Error(data.message || 'API request failed');
  }

  return data;
};

export const authAPI = {
  register: (userData) => apiRequest('/register', {
    method: 'POST',
    body: JSON.stringify(userData),
  }),
  
  login: (credentials, userType = null) => {
    const endpoint = userType ? `/login/${userType}` : '/login';
    return apiRequest(endpoint, {
      method: 'POST',
      body: JSON.stringify(credentials),
    });
  },
  
  logout: () => apiRequest('/logout', { method: 'POST' }),
  
  getUser: () => apiRequest('/user'),
  
  getDashboard: (userType) => apiRequest(`/dashboard/${userType}`),
};
```

## Implementation Checklist

- [ ] Create three login pages with identical designs
- [ ] Implement role-based authentication
- [ ] Create protected dashboard pages
- [ ] Add authentication hook
- [ ] Configure API requests
- [ ] Test user registration with different types
- [ ] Test role-based login redirects
- [ ] Test dashboard access control
- [ ] Implement logout functionality
- [ ] Add error handling and loading states

## Security Notes

1. Always validate user permissions on both frontend and backend
2. Store tokens securely (consider httpOnly cookies for production)
3. Implement token refresh mechanism
4. Add CSRF protection for production
5. Use HTTPS in production
6. Validate user input on both client and server side