'use client';

import { useEffect, useState } from "react";
import { databases } from "../lib/appwrite";
import { databaseId, membersCollectionId } from "../lib/appwrite";
import { getCurrentUserWithRole } from "../utils/auth";

export default function MemberList() {
  const [members, setMembers] = useState([]);
  const [user, setUser] = useState(null);

  useEffect(() => {
    getCurrentUserWithRole().then(setUser);
  }, []);

  useEffect(() => {
    const getMembers = async () => {
      try {
        const res = await databases.listDocuments(
          databaseId,
          membersCollectionId
        );
        setMembers(res.documents); // <-- Add this line
      } catch (err) {
        console.error("Error fetching members:", err);
      }
    };

    getMembers();
  }, []);

  return (
    <div className="mt-8">
      <h2 className="text-xl font-semibold mb-4">All Members</h2>
      <table className="w-full border">
        <thead>
          <tr className="bg-gray-100">
            <th className="p-2 text-left">Name</th>
            <th className="p-2">Phone</th>
            <th className="p-2">Join Date</th>
            <th className="p-2">Role</th>
          </tr>
        </thead>
        <tbody>
          {members.map((m) => (
            <tr key={m.$id} className="border-t">
              <td className="p-2">{m.name}</td>
              <td className="p-2">{m.phone}</td>
              <td className="p-2">{m.joinDate}</td>
              <td className="p-2">{m.role}</td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* Render role only if user is loaded */}
      {user ? <p className="mt-4">Role: {user.role}</p> : <p>Loading role...</p>}
    </div>
  );
}