import React, { useState ,useEffect} from 'react'
import { Link, useNavigate } from 'react-router-dom';
import axios from 'axios';

function Dashboard() {
const [user, setUser] = useState(null);
  const[error,setError]=useState('')
  const[message,setMessage]=useState('')
  const navigate = useNavigate()

    const handleRetrieve = async () => {
    const storedUser = localStorage.getItem('user');
    if (storedUser) {
      setUser(JSON.parse(storedUser));
    }

    try {
      const response = await axios.get('http://localhost:5001/api/auth/me', {
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
        },
      });
      setUser(response.data.user);
      localStorage.setItem('user', JSON.stringify(response.data.user));
    } catch (err) {
      if (!storedUser) {
        setError(err.response?.data?.message || 'Could not load user');
      }
      console.error('Server Error:', err.response?.data || err.message);
    }
  };
      useEffect(() => {
    handleRetrieve();
  }, []);

  const handleLogout = () => {
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    navigate('/login');
  };

  return (
    <div>
          <div className="min-h-screen bg-slate-100">
      <aside className="fixed inset-y-0 left-0 w-64 bg-slate-900 text-slate-100 flex flex-col">
        <div className="px-5 py-6 border-b border-slate-700">

          <p className="text-xs font-semibold uppercase tracking-wider text-slate-400">SIMS</p>
          <h1 className="text-lg font-bold text-white mt-1">Dashboard</h1>
        </div>

        <div className="flex-1 px-3 py-4 space-y-1">
          <Link to="/dashboard" className="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition-colors">
            Overview
          </Link>
          <Link to="/dashboard/spareparts" className="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition-colors">
            Spare Parts
          </Link>
          <Link to="/dashboard/profile" className="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition-colors">
            Profile
          </Link>
          <Link to="/dashboard/stock" className="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition-colors">
            Stock
          </Link>
          <Link to="/dashboard/suppliers" className="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition-colors">
            Suppliers
          </Link>
          <Link to="/dashboard/reports" className="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition-colors">
            Reports
          </Link>
        </div>

        <div className="px-4 py-4 border-t border-slate-700">
          {error && <p className="text-xs text-red-400 mb-2">{error}</p>}
          {user && (
            <p className="text-sm font-medium text-white truncate">{user.name}</p>
          )}
          {user && (
            <p className="text-xs text-slate-400 truncate mt-0.5">{user.email}</p>
          )}
          <button
            type="button"
            onClick={handleLogout}
            className="mt-3 w-full text-sm font-medium text-slate-300 hover:text-white border border-slate-600 rounded-lg px-3 py-2 hover:bg-slate-800 transition-colors"
          >
            Log out
          </button>
        </div>
      </aside>

      <div className="ml-64 flex min-h-screen flex-col">
        <header className="bg-white border-b border-slate-200 px-6 py-4">
          <p className="text-sm text-slate-500">Welcome back</p>
          <h2 className="text-xl font-semibold text-slate-800">
            {user ? `Hello, ${user.name}` : 'Dashboard'}
          </h2>
        </header>

        <main className="flex-1 p-6 overflow-auto">
          
        </main>
      </div>
    </div>
  
    </div>
  )
}

export default Dashboard