'use client';
import { useState, useEffect } from 'react';
import { UserSession } from '../../lib/types';

interface UserItem {
  id: string;
  email: string;
  role: string;
}

interface UserManagementProps {
  session: UserSession;
}

export default function UserManagement({ session }: UserManagementProps) {
  const [users, setUsers] = useState<UserItem[]>([]);
  const [email, setEmail] = useState<string>('');
  const [role, setRole] = useState<string>('user');
  const [msg, setMsg] = useState<string>('');

  useEffect(() => {
    fetch('/api/dashboard/users')
      .then((r) => r.json())
      .then((data) => setUsers(data.users));
  }, []);

  async function inviteUser() {
    const res = await fetch('/api/dashboard/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, role }),
    });
    if (res.ok) setMsg('User invited.');
    else setMsg('Failed.');
  }

  if (session.user.role !== 'admin') return null;

  return (
    <div className="bg-white p-6 rounded-xl shadow mb-6">
      <h2 className="font-bold text-lg mb-4">User Management</h2>
      <div className="flex gap-2 mb-3">
        <input
          className="border px-3 py-2 rounded"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <select
          className="border px-3 py-2 rounded"
          value={role}
          onChange={(e) => setRole(e.target.value)}
        >
          <option value="user">User</option>
          <option value="admin">Admin</option>
          <option value="auditor">Auditor</option>
        </select>
        <button
          className="bg-blue-600 text-white rounded px-4"
          onClick={inviteUser}
        >
          Invite
        </button>
      </div>
      <div>{msg}</div>
      <ul className="mt-4">
        {users.map((u) => (
          <li key={u.id} className="flex justify-between border-b py-1">
            {u.email}{' '}
            <span className="text-xs bg-gray-200 px-2 rounded">{u.role}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}