Yaltopia-Hotels/src/pages/ManageUsersPage.tsx

import { useCallback, useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent} from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Trash2 } from "lucide-react";
import { useAuthStore } from "@/store/authStore";
import { HotelStaffRole } from "@/lib/types";
import type { RegisterHotelStaffDto, StaffAccess } from "@/lib/types";
import { getStaffAccess, postStaff, deleteStaffAccess } from "@/lib/auth-api";
import { Spinner } from "@/components/ui/spinner";

export function ManageUsersPage() {
  const token = useAuthStore((s) => s.accessToken);
  const selectedPropertyId = useAuthStore((s) => s.selectedPropertyId);
  const [staff, setStaff] = useState<StaffAccess[]>([]);
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [open, setOpen] = useState(false);
  const [formData, setFormData] = useState<RegisterHotelStaffDto>({
    name: "",
    email: "",
    phone: "",
    password: "",
    hotelRole: HotelStaffRole.FRONT_DESK,
  });

  const loadStaff = useCallback(async () => {
    if (!token) return;
    setLoading(true);
    try {
      const data = await getStaffAccess(token);
      setStaff(data);
    } catch (error) {
      console.error("Failed to load staff", error);
    } finally {
      setLoading(false);
    }
  }, [token, selectedPropertyId]);

  useEffect(() => {
    loadStaff();
  }, [loadStaff]);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!token) return;
    setSubmitting(true);
    try {
      await postStaff(token, formData);
      setOpen(false);
      setFormData({ name: "", email: "", phone: "", password: "", hotelRole: HotelStaffRole.FRONT_DESK });
      loadStaff();
    } catch (error) {
      console.error("Failed to create staff", error);
    } finally {
      setSubmitting(false);
    }
  };

  const handleDelete = async (id: string) => {
    if (!token || !confirm("Are you sure you want to delete this user?")) return;
    try {
      await deleteStaffAccess(token, id);
      loadStaff();
    } catch (error) {
      console.error("Failed to delete staff", error);
    }
  };

  if (loading) return (
    <div className="flex min-h-[400px] items-center justify-center">
      <Spinner size={32} />
    </div>
  );

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">Manage Users</h1>
        <Dialog open={open} onOpenChange={setOpen}>
          <DialogTrigger asChild>
            <Button>+ Add User</Button>
          </DialogTrigger>
          <DialogContent className="max-w-md">
            <DialogHeader>
              <DialogTitle>Add New Staff Member</DialogTitle>
            </DialogHeader>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="name">Name</Label>
                <Input id="name" name="name" value={formData.name} onChange={handleInputChange} required />
              </div>
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input id="email" name="email" type="email" value={formData.email} onChange={handleInputChange} required />
              </div>
              <div className="space-y-2">
                <Label htmlFor="phone">Phone (optional)</Label>
                <Input id="phone" name="phone" value={formData.phone} onChange={handleInputChange} />
              </div>
              <div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <Input id="password" name="password" type="password" value={formData.password} onChange={handleInputChange} minLength={6} required />
              </div>
              <div className="space-y-2">
                <Label htmlFor="hotelRole">Role</Label>
                <Select name="hotelRole" value={formData.hotelRole} onValueChange={(v) => setFormData({ ...formData, hotelRole: v as HotelStaffRole })}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value={HotelStaffRole.FRONT_DESK}>Front Desk</SelectItem>
                    <SelectItem value={HotelStaffRole.FINANCE}>Finance</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <Button type="submit" className="w-full" loading={submitting}>Create User</Button>
            </form>
          </DialogContent>
        </Dialog>
      </div>

      <Card className="rounded-2xl">
        <CardContent className="pt-6">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Name</TableHead>
                <TableHead>Email</TableHead>
                <TableHead>Phone</TableHead>
                <TableHead>Role</TableHead>
                <TableHead>Created</TableHead>
                <TableHead>Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {staff.map((user) => (
                <TableRow key={user.id}>
                  <TableCell className="font-medium">{user.user.name}</TableCell>
                  <TableCell>{user.user.email}</TableCell>
                  <TableCell>{user.user.phone || "-"}</TableCell>
                  <TableCell>{user.user.role}</TableCell>
                  <TableCell>{new Date(user.createdAt).toLocaleDateString()}</TableCell>
                  <TableCell>
                    <Button variant="ghost" size="icon" onClick={() => handleDelete(user.id)}>
                      <Trash2 className="size-4" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
              {staff.length === 0 && (
                <TableRow>
                  <TableCell colSpan={6} className="h-24 text-center text-muted-foreground">
                    No staff members found. Add one above.
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}