import { useEffect, useState } from 'react';
import { useAuthStore } from '../store/authStore';
import { useNavigate } from 'react-router-dom';
import { ArrowLeft, ShieldAlert, Loader2, Save } from 'lucide-react';
import { api } from '../lib/api';

interface UserProfile {
  id: string;
  email: string;
  role: string;
  api_credits: number;
  storage_limit_mb: number;
  is_active: number;
}

export default function Admin() {
  const navigate = useNavigate();
  const { profile } = useAuthStore();
  const [users, setUsers] = useState<UserProfile[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUsers = async () => {
      if (profile?.role !== 'admin') return;
      try {
        const data = await api.getUsers();
        setUsers(data.users || []);
      } catch (error) {
        console.error(error);
      }
      setLoading(false);
    };
    
    fetchUsers();
  }, [profile]);

  const updateLimits = async (userObj: UserProfile) => {
    try {
      await api.updateUser(userObj.id, { 
        role: userObj.role, 
        api_credits: userObj.api_credits, 
        storage_limit_mb: userObj.storage_limit_mb,
        is_active: userObj.is_active
      });
      alert("Updated successfully!");
    } catch (error: any) {
      alert("Failed to update user: " + error.message);
    }
  };

  if (profile?.role !== 'admin') {
    return (
      <div className="min-h-screen bg-zinc-950 flex flex-col items-center justify-center text-white">
        <ShieldAlert size={48} className="text-red-500 mb-4" />
        <h1 className="text-2xl font-bold mb-2">Access Denied</h1>
        <p className="text-zinc-400 mb-6">You do not have administrative privileges.</p>
        <button onClick={() => navigate('/dashboard')} className="px-6 py-2 bg-zinc-800 rounded-lg hover:bg-zinc-700">
          Return to Dashboard
        </button>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-zinc-950 text-white p-8">
      <div className="max-w-6xl mx-auto">
        <button 
          onClick={() => navigate('/dashboard')}
          className="flex items-center gap-2 text-zinc-400 hover:text-white mb-8 transition-colors"
        >
          <ArrowLeft size={16} /> Back to Dashboard
        </button>
        
        <h1 className="text-3xl font-bold mb-8">Admin Control Panel</h1>
        
        <div className="bg-zinc-900 border border-zinc-800 rounded-2xl overflow-hidden">
           <div className="p-6 border-b border-zinc-800 flex justify-between items-center">
             <h2 className="text-xl font-semibold">User Limit Management</h2>
           </div>
           
           {loading ? (
             <div className="p-12 flex justify-center"><Loader2 className="animate-spin" /></div>
           ) : (
             <div className="overflow-x-auto">
               <table className="w-full text-left text-sm">
                 <thead className="bg-zinc-950 text-zinc-400">
                   <tr>
                     <th className="p-4 font-medium">User ID</th>
                     <th className="p-4 font-medium">Email</th>
                     <th className="p-4 font-medium">Role</th>
                     <th className="p-4 font-medium">Status</th>
                     <th className="p-4 font-medium">API Credits</th>
                     <th className="p-4 font-medium">Storage Limit (MB)</th>
                     <th className="p-4 font-medium text-right">Actions</th>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-zinc-800">
                   {users.map(u => (
                     <UserRow key={u.id} user={u} onUpdate={updateLimits} />
                   ))}
                 </tbody>
               </table>
             </div>
           )}
        </div>
      </div>
    </div>
  );
}

const UserRow = ({ user, onUpdate }: { user: UserProfile, onUpdate: (u: UserProfile) => void }) => {
  const [role, setRole] = useState(user.role);
  const [isActive, setIsActive] = useState(user.is_active);
  const [credits, setCredits] = useState(user.api_credits);
  const [storage, setStorage] = useState(user.storage_limit_mb);

  const handleUpdate = () => {
    onUpdate({
      ...user,
      role,
      is_active: isActive,
      api_credits: credits,
      storage_limit_mb: storage
    });
  };

  return (
    <tr className="hover:bg-zinc-800/50">
      <td className="p-4 font-mono text-xs opacity-50" title={user.id}>{user.id.substring(0, 8)}...</td>
      <td className="p-4 font-mono text-xs">{user.email}</td>
      <td className="p-4">
        <select 
          value={role} 
          onChange={(e) => setRole(e.target.value)}
          className={`px-2 py-1 rounded text-xs focus:outline-none focus:border-primary border border-transparent ${role === 'admin' ? 'bg-red-500/20 text-red-400' : 'bg-blue-500/20 text-blue-400'}`}
        >
          <option value="user" className="bg-zinc-900 text-white">User</option>
          <option value="admin" className="bg-zinc-900 text-white">Admin</option>
        </select>
      </td>
      <td className="p-4">
        <select 
          value={isActive} 
          onChange={(e) => setIsActive(Number(e.target.value))}
          className={`px-2 py-1 rounded text-xs focus:outline-none focus:border-primary border border-transparent ${isActive === 1 ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'}`}
        >
          <option value={1} className="bg-zinc-900 text-white">Active</option>
          <option value={0} className="bg-zinc-900 text-white">Pending</option>
        </select>
      </td>
      <td className="p-4">
        <input 
          type="number" 
          value={credits} 
          onChange={e => setCredits(Number(e.target.value))}
          className="w-24 bg-zinc-950 border border-zinc-700 rounded px-2 py-1 text-white focus:outline-none focus:border-primary"
        />
      </td>
      <td className="p-4">
        <input 
          type="number" 
          value={storage} 
          onChange={e => setStorage(Number(e.target.value))}
          className="w-24 bg-zinc-950 border border-zinc-700 rounded px-2 py-1 text-white focus:outline-none focus:border-primary"
        />
      </td>
      <td className="p-4 text-right">
        <button 
          onClick={handleUpdate}
          className="bg-zinc-800 hover:bg-zinc-700 text-white px-3 py-1.5 rounded flex items-center justify-center gap-2 ml-auto transition-colors"
        >
          <Save size={14} /> Save
        </button>
      </td>
    </tr>
  );
}