/**
 * Debug User Component
 *
 * Temporary component to debug user data
 */

'use client';

import { useAuth } from '@/lib/context/auth-context';
import { useEffect, useState } from 'react';

export default function DebugUser() {
  const { user, loading } = useAuth();
  const [mounted, setMounted] = useState(false);
  const [storageData, setStorageData] = useState({ user: '', token: '' });

  useEffect(() => {
    setMounted(true);
    setStorageData({
      user: localStorage.getItem('user') || 'null',
      token: localStorage.getItem('access_token')?.substring(0, 50) + '...' || 'null',
    });
  }, []);

  if (!mounted) {
    return null;
  }

  return (
    <div className="fixed bottom-4 right-4 bg-black text-white p-4 rounded-lg shadow-lg max-w-md overflow-auto max-h-96 z-50 text-xs font-mono">
      <h3 className="font-bold mb-2">🐛 DEBUG USER</h3>
      <div className="space-y-2">
        <div>
          <span className="text-yellow-400">Loading:</span> {loading ? 'true' : 'false'}
        </div>
        <div>
          <span className="text-yellow-400">User object:</span>
          <pre className="mt-1 text-green-400 whitespace-pre-wrap break-words">
            {JSON.stringify(user, null, 2)}
          </pre>
        </div>
        <div>
          <span className="text-yellow-400">localStorage user:</span>
          <pre className="mt-1 text-brand-blue whitespace-pre-wrap break-words">
            {storageData.user}
          </pre>
        </div>
        <div>
          <span className="text-yellow-400">Token:</span>
          <pre className="mt-1 text-purple-400 whitespace-pre-wrap break-all">
            {storageData.token}
          </pre>
        </div>
      </div>
    </div>
  );
}