import { useState, useEffect } from 'react';

export function useAuth() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Configuración
  const APP_ID = 'app_xxxxxxxxxxxx';
  const SECRET_KEY = 'sk_xxxxxxxxxxxxxxxxxxxx';
  const API_URL = 'https://keynexus.es/api';

  // Verificar sesión al cargar
  useEffect(() => {
    checkSession();
  }, []);

  async function checkSession() {
    const token = localStorage.getItem('client_token');
    if (!token) {
      setLoading(false);
      return;
    }

    try {
      const res = await fetch(`${API_URL}/client/me`, {
        credentials: 'include'
      });
      const data = await res.json();

      if (data.authenticated) {
        setUser(data.user);
      } else {
        localStorage.removeItem('client_token');
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  async function loginWithLicense(licenseKey, hwid) {
    setLoading(true);
    setError(null);

    try {
      const res = await fetch(`${API_URL}/client`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          action: 'license',
          appId: APP_ID,
          secretKey: SECRET_KEY,
          key: licenseKey,
          hwid: hwid
        })
      });

      const data = await res.json();

      if (data.success) {
        setUser(data.user);
        localStorage.setItem('client_token', data.token);
        return { success: true };
      } else {
        setError(data.message);
        return { success: false, message: data.message };
      }
    } catch (err) {
      setError(err.message);
      return { success: false, message: err.message };
    } finally {
      setLoading(false);
    }
  }

  async function loginWithPassword(username, password, hwid) {
    setLoading(true);
    setError(null);

    try {
      const res = await fetch(`${API_URL}/client`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          action: 'login',
          appId: APP_ID,
          secretKey: SECRET_KEY,
          username: username,
          password: password,
          hwid: hwid
        })
      });

      const data = await res.json();

      if (data.success) {
        setUser(data.user);
        localStorage.setItem('client_token', data.token);
        return { success: true };
      } else {
        setError(data.message);
        return { success: false, message: data.message };
      }
    } catch (err) {
      setError(err.message);
      return { success: false, message: err.message };
    } finally {
      setLoading(false);
    }
  }

  async function logout() {
    try {
      await fetch(`${API_URL}/client/logout`, { 
        method: 'POST',
        credentials: 'include'
      });
    } catch (err) {
      console.error('Error en logout:', err);
    } finally {
      setUser(null);
      localStorage.removeItem('client_token');
    }
  }

  return {
    user,
    loading,
    error,
    loginWithLicense,
    loginWithPassword,
    logout,
    isAuthenticated: !!user
  };
}

import { useState } from 'react';
import { useAuth } from './useAuth';

export function LoginComponent() {
  const { loginWithLicense, loginWithPassword, loading, error } = useAuth();
  const [mode, setMode] = useState('license'); // 'license' o 'password'
  const [licenseKey, setLicenseKey] = useState('');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  // Generar HWID simple (en producción usa algo más robusto)
  const getHWID = () => {
    return `hwid_${navigator.userAgent}_${screen.width}x${screen.height}`;
  };

  const handleLicenseLogin = async (e) => {
    e.preventDefault();
    const result = await loginWithLicense(licenseKey, getHWID());
    
    if (result.success) {
      alert('✓ Licencia activada correctamente');
    } else {
      alert(`✗ Error: ${result.message}`);
    }
  };

  const handlePasswordLogin = async (e) => {
    e.preventDefault();
    const result = await loginWithPassword(username, password, getHWID());
    
    if (result.success) {
      alert('✓ Login exitoso');
    } else {
      alert(`✗ Error: ${result.message}`);
    }
  };

  return (
    <div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-4">Iniciar Sesión</h2>
      
      {/* Selector de modo */}
      <div className="flex gap-2 mb-4">
        <button
          onClick={() => setMode('license')}
          className={`px-4 py-2 rounded ${mode === 'license' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
        >
          Con Licencia
        </button>
        <button
          onClick={() => setMode('password')}
          className={`px-4 py-2 rounded ${mode === 'password' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
        >
          Usuario/Contraseña
        </button>
      </div>

      {/* Formulario de Licencia */}
      {mode === 'license' && (
        <form onSubmit={handleLicenseLogin} className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-1">
              Clave de Licencia
            </label>
            <input
              type="text"
              value={licenseKey}
              onChange={(e) => setLicenseKey(e.target.value.toUpperCase())}
              placeholder="XXXXX-XXXXX-XXXXX-XXXXX"
              className="w-full px-3 py-2 border rounded"
              required
            />
          </div>
          <button
            type="submit"
            disabled={loading}
            className="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 disabled:opacity-50"
          >
            {loading ? 'Validando...' : 'Activar Licencia'}
          </button>
        </form>
      )}

      {/* Formulario de Usuario/Contraseña */}
      {mode === 'password' && (
        <form onSubmit={handlePasswordLogin} className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-1">Usuario</label>
            <input
              type="text"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              className="w-full px-3 py-2 border rounded"
              required
            />
          </div>
          <div>
            <label className="block text-sm font-medium mb-1">Contraseña</label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full px-3 py-2 border rounded"
              required
            />
          </div>
          <button
            type="submit"
            disabled={loading}
            className="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 disabled:opacity-50"
          >
            {loading ? 'Iniciando...' : 'Iniciar Sesión'}
          </button>
        </form>
      )}

      {/* Errores */}
      {error && (
        <div className="mt-4 p-3 bg-red-100 text-red-700 rounded">
          {error}
        </div>
      )}
    </div>
  );
}

import { useAuth } from './useAuth';

export function UserDashboard() {
  const { user, logout, loading } = useAuth();

  if (loading) {
    return <div className="text-center p-8">Cargando...</div>;
  }

  if (!user) {
    return <LoginComponent />;
  }

  return (
    <div className="max-w-2xl mx-auto p-6">
      <div className="bg-white rounded-lg shadow p-6">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-2xl font-bold">Mi Cuenta</h2>
          <button
            onClick={logout}
            className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
          >
            Cerrar Sesión
          </button>
        </div>

        <div className="space-y-4">
          <div className="border-b pb-3">
            <p className="text-sm text-gray-500">Usuario</p>
            <p className="text-lg font-medium">{user.username}</p>
          </div>

          <div className="border-b pb-3">
            <p className="text-sm text-gray-500">Email</p>
            <p className="text-lg">{user.email || 'No configurado'}</p>
          </div>

          <div className="border-b pb-3">
            <p className="text-sm text-gray-500">Licencia</p>
            <p className="text-lg font-mono">{user.licenseKey || 'Sin licencia'}</p>
          </div>

          <div className="border-b pb-3">
            <p className="text-sm text-gray-500">Suscripción Expira</p>
            <p className="text-lg">
              {user.subscriptionExpiry 
                ? new Date(user.subscriptionExpiry).toLocaleDateString() 
                : 'Nunca'}
            </p>
          </div>

          <div className="border-b pb-3">
            <p className="text-sm text-gray-500">Estado</p>
            <span className={`inline-block px-3 py-1 rounded text-sm font-medium ${
              user.status === 'active' 
                ? 'bg-green-100 text-green-700' 
                : 'bg-red-100 text-red-700'
            }`}>
              {user.status === 'active' ? 'Activo' : user.status}
            </span>
          </div>

          <div className="border-b pb-3">
            <p className="text-sm text-gray-500">Total de Accesos</p>
            <p className="text-lg">{user.totalLogins || 0}</p>
          </div>

          <div>
            <p className="text-sm text-gray-500">Último Acceso</p>
            <p className="text-lg">
              {user.lastLogin 
                ? new Date(user.lastLogin).toLocaleString() 
                : 'Nunca'}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

import { NextResponse } from 'next/server';

export function middleware(request) {
  const token = request.cookies.get('client_token')?.value;
  const isAuthPage = request.nextUrl.pathname.startsWith('/login');
  const isProtectedRoute = request.nextUrl.pathname.startsWith('/dashboard');

  // Redirigir a login si no hay token
  if (isProtectedRoute && !token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // Redirigir a dashboard si ya está autenticado
  if (isAuthPage && token) {
    return NextResponse.redirect(new URL('/dashboard', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/login']
};

'use server';

import { cookies } from 'next/headers';

export async function loginWithLicense(licenseKey, hwid) {
  try {
    const res = await fetch('https://keynexus.es/api/client', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        action: 'license',
        appId: process.env.KEYNEXUS_APP_ID,
        secretKey: process.env.KEYNEXUS_SECRET_KEY,
        key: licenseKey,
        hwid: hwid
      })
    });

    const data = await res.json();

    if (data.success) {
      // Guardar cookie
      cookies().set('client_token', data.token, {
        httpOnly: true,
        secure: process.env.NODE_ENV === 'production',
        sameSite: 'lax',
        maxAge: 60 * 60 * 24 * 7 // 7 días
      });

      return { success: true, user: data.user };
    }

    return { success: false, message: data.message };
  } catch (error) {
    return { success: false, message: error.message };
  }
}

export async function logout() {
  cookies().delete('client_token');
}