import { useState } from 'react';
import { UserPlus } from 'lucide-react';
import { Modal } from '../../components/reusable';
import { UsersView } from '../../components/rv';
import { DynamicForm } from '../../components/forms/DynamicForm';
import { USER } from '../../api/config';
import { userClient } from '../../api/clients';

export function UsersPage() {
  const [isCreating, setIsCreating] = useState(false);
  const [refreshKey, setRefreshKey] = useState(0);
  const [activeActivity, setActiveActivity] = useState<{ id: string; name: string, instanceId?: number } | null>(null);

  const handleEditRow = (row: any) => {
    setActiveActivity({
      id: USER.activities.EDIT_USER.uid,
      name: "Edit User",
      instanceId: row.instance_id
    });
  };

  return (
    <>
      <UsersView
        refreshKey={refreshKey}
        onEditRow={handleEditRow}
      />

      <button
        onClick={() => setIsCreating(true)}
        className="fixed bottom-24 right-6 w-[60px] h-[60px] bg-primary rounded-3xl flex items-center justify-center shadow-lg text-white z-40 hover:opacity-90 transition-transform hover:scale-105 active:scale-95 cursor-pointer"
        title="Add Sales Officer"
      >
        <UserPlus size={24} className="text-white" />
      </button>

      <Modal
        open={isCreating || activeActivity !== null}
        onClose={() => {
          setIsCreating(false);
          setActiveActivity(null);
        }}
        title={activeActivity?.name || "Add User"}
      >
        <DynamicForm
          client={userClient}
          activityId={activeActivity?.id || USER.activities.ADD_USER.uid}
          instanceId={activeActivity?.instanceId}
          onSuccess={() => {
            setIsCreating(false);
            setActiveActivity(null);
            setRefreshKey(k => k + 1);
          }}
          onCancel={() => {
            setIsCreating(false);
            setActiveActivity(null);
          }}
        />
      </Modal>
    </>
  );
}