import React, { useState } from "react";
import { base44 } from "@/api/base44Client";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import { createPageUrl } from "@/utils";
import { Button } from "@/components/ui/button";
import { ArrowLeft } from "lucide-react";
import StaffForm from "../components/staff/StaffForm";

export default function AddStaff() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();

  const createStaffMutation = useMutation({
    mutationFn: (staffData) => base44.entities.Staff.create(staffData),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['staff'] });
      navigate(createPageUrl("Dashboard"));
    },
  });

  const handleSubmit = (staffData) => {
    createStaffMutation.mutate(staffData);
  };

  return (
    <div className="p-4 md:p-8">
      <div className="max-w-4xl mx-auto">
        <div className="mb-8">
          <Button
            variant="ghost"
            onClick={() => navigate(createPageUrl("Dashboard"))}
            className="mb-4 hover:bg-slate-100"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back to Dashboard
          </Button>
          <h1 className="text-3xl md:text-4xl font-bold text-slate-900 mb-2">Add New Staff Member</h1>
          <p className="text-slate-600">Fill in the details to add a new team member</p>
        </div>

        <StaffForm
          onSubmit={handleSubmit}
          isSubmitting={createStaffMutation.isPending}
        />
      </div>
    </div>
  );
}