"use client";
import React, { useEffect, useState } from "react";
import { Card, CardContent, Typography, Chip, Stack } from "@mui/material";
import { IUser } from "./interfaces";
import UserRoleCard from "@/app/features/UserRoles/userRoleCard";

const Users = () => {
  const [data, setData] = useState([
    {
      merchantId: 100987998,
      id: "bc6a8a55-13bc-4538-8255-cd0cec3bb4e9",
      mame: "Jacob",
      username: "lspaddy",
      firstName: "Paddy",
      lastName: "Man",
      email: "patrick@omegasys.eu",
      phone: "",
      jobTitle: "",
      enabled: true,
      authorities: [
        "ROLE_IIN",
        "ROLE_FIRST_APPROVER",
        "ROLE_RULES_ADMIN",
        "ROLE_TRANSACTION_VIEWER",
        "ROLE_IIN_ADMIN",
        "ROLE_USER_PSP_ACCOUNT",
      ],
      allowedMerchantIds: [100987998],
      created: "2025-05-04T15:32:48.432Z",
      disabledBy: null,
      disabledDate: null,
      disabledReason: null,
      incidentNotes: false,
      lastLogin: "",
      lastMandatoryUpdated: "2025-05-04T15:32:48.332Z",
      marketingNewsletter: false,
      releaseNotes: false,
      requiredActions: ["CONFIGURE_TOTP", "UPDATE_PASSWORD"],
      twoFactorCondition: "required",
      twoFactorCredentials: [],
    },
    {
      merchantId: 100987998,
      mame: "Jacob",
      id: "382eed15-1e21-41fa-b1f3-0c1adb3af714",
      username: "lsterence",
      firstName: "Terence",
      lastName: "User",
      email: "terence@omegasys.eu",
      phone: "",
      jobTitle: "",
      enabled: true,
      authorities: ["ROLE_IIN", "ROLE_FIRST_APPROVER", "ROLE_RULES_ADMIN"],
      allowedMerchantIds: [100987998],
      created: "2025-05-04T15:32:48.432Z",
      disabledBy: null,
      disabledDate: null,
      disabledReason: null,
      incidentNotes: false,
      lastLogin: "",
      lastMandatoryUpdated: "2025-05-04T15:32:48.332Z",
      marketingNewsletter: false,
      releaseNotes: false,
      requiredActions: ["CONFIGURE_TOTP", "UPDATE_PASSWORD"],
      twoFactorCondition: "required",
      twoFactorCredentials: [],
    },
    // Add more users if needed
  ]);

  useEffect(() => {
    // Only run MSW in the browser environment
    if (typeof window !== "undefined") {
      const fetchData = async () => {
        const response = await fetch(
          "https://test-bo.paymentiq.io/paymentiq/backoffice/api/v2/users/?includeSubMids=false&size=20&page=0&merchantId=100987998"
        ); // This would be intercepted by MSW in the browser
        const data = await response.json();
        console.log("[DATA]", data);
        // setData(data);
      };

      fetchData();
    }
  }, []);

  return (
    <div>
      {data.map((user: IUser) => (
        <Card key={user.id} sx={{ mb: 2 }}>
          <CardContent>
            <Typography variant="h6">{user.username}</Typography>
            <Typography variant="body2">
              Merchant ID: {user.merchantId}
            </Typography>

            {/* You can render more UI here for additional properties */}
            <Stack direction="row" spacing={1} mt={1}>
              <UserRoleCard
                username={user.lastName}
                name={user.name || ""}
                email={user.email}
                isAdmin={true}
                lastLogin="small"
                roles={user.authorities}
                // merchants={Numberuser.allowedMerchantIds}
              />
              {/* Add more chips or UI elements for other data */}
            </Stack>
          </CardContent>
        </Card>
      ))}
    </div>
  );
};

// Fetch data server-side using getServerSideProps
// export async function getServerSideProps() {
//   // Replace this with your actual API call
//   const res = await fetch("https://api.example.com/users");
//   const data = await res.json();

//   // Return the fetched data as props
//   return {
//     props: {
//       result: data, // Assuming data is an array of users
//     },
//   };
// }

export default Users;