"use client";

import { useState } from "react";
import { Toaster } from "react-hot-toast";
import UserHeader from "./UserHeader";
import UserTable from "./UserTable";
import PermissionHeader from "./PermissionHeader";
import PermissionManager from "./PermissionManager";
import styles from "./users.module.css";

type Tab = "users" | "permissions";

export default function UsersPage() {
  const [activeTab, setActiveTab] = useState<Tab>("users");
  const [refreshFlag, setRefreshFlag] = useState(false);
  const refreshData = () => setRefreshFlag((prev) => !prev);

  return (
    <div className={styles.pageRoot}>
      <Toaster position="top-right" reverseOrder={false} containerStyle={{ zIndex: 20000 }} />

      {/* Tab Navigation */}
      <div className={styles.tabNav}>
        <button
          className={`${styles.tabNavBtn} ${activeTab === "users" ? styles.tabNavBtnActive : ""}`}
          onClick={() => setActiveTab("users")}
        >
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
          </svg>
          Users &amp; Accounts
        </button>
        <button
          className={`${styles.tabNavBtn} ${activeTab === "permissions" ? styles.tabNavBtnActive : ""}`}
          onClick={() => setActiveTab("permissions")}
        >
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
          </svg>
          Roles &amp; Permissions
        </button>
      </div>

      {activeTab === "users" && (
        <div className={styles.tabContent}>
          <UserHeader refreshData={refreshData} />
          <UserTable refreshFlag={refreshFlag} />
        </div>
      )}

      {activeTab === "permissions" && (
        <div className={styles.tabContent}>
          <PermissionHeader refreshData={refreshData} />
          <PermissionManager refreshFlag={refreshFlag} refreshData={refreshData} />
        </div>
      )}
    </div>
  );
}