"use client";

import { useState } from "react";
import styles from "../commonstyle/dattabale.module.css";
import UserForm from "./Form/UserForm";
import { UserHeaderProps } from "@/lib/api/types/user.types";
import { useUsers } from "@/lib/api/hooks/useUsers";
import { exportUsersToExcel } from "@/lib/api/utils/user.utils";

export default function UserHeader({ refreshData }: UserHeaderProps) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const { users, loading } = useUsers();

  const handleExport = () => {
    if (!users?.length) return;
    exportUsersToExcel(users, "users.xlsx");
  };

  return (
    <>
      <div className={styles.header}>
        <div className={styles.headerLeft}>
          <h1 className={styles.title}>User Management</h1>
          <p className={styles.subtitle}>Manage Users, Roles &amp; Access Control</p>
        </div>
        <div className={styles.headerRight}>
          <button
            className={styles.btnSecondary}
            onClick={handleExport}
            disabled={loading || !users?.length}
          >
            📊 Export
          </button>
          <button
            className={styles.btnPrimary}
            onClick={() => setIsModalOpen(true)}
          >
            ＋ New User
          </button>
        </div>
      </div>

      {isModalOpen && (
        <UserForm
          isOpen={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          refreshData={refreshData}
        />
      )}
    </>
  );
}