"use client";

import { useState } from "react";

import { Pencil, Plus, Power } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import type { OperationsStaff } from "@/data/platform-mock";
import { usePlatformStore } from "@/stores/platform/platform-store";

import { StaffFormDialog } from "../_components/staff-form-dialog";

export default function OperationsStaffPage() {
  const opsStaff = usePlatformStore((s) => s.opsStaff);
  const addOpsStaff = usePlatformStore((s) => s.addOpsStaff);
  const updateOpsStaff = usePlatformStore((s) => s.updateOpsStaff);
  const toggleOpsStaffStatus = usePlatformStore((s) => s.toggleOpsStaffStatus);

  const [dialogOpen, setDialogOpen] = useState(false);
  const [editing, setEditing] = useState<OperationsStaff | null>(null);

  return (
    <div className="p-6 space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="text-2xl font-bold">Operations staff</h1>
          <p className="text-sm text-muted-foreground">
            Floor staff who sign in to manage tables, arrivals, and waiting lists
          </p>
        </div>
        <Button onClick={() => { setEditing(null); setDialogOpen(true); }}>
          <Plus className="mr-2 size-4" />
          Add staff
        </Button>
      </div>

      <div className="rounded-lg border bg-card">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Name</TableHead>
              <TableHead>Username</TableHead>
              <TableHead>Email</TableHead>
              <TableHead>Venue</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {opsStaff.map((member) => (
              <TableRow key={member.id}>
                <TableCell className="font-medium">{member.name}</TableCell>
                <TableCell className="font-mono text-sm">{member.username}</TableCell>
                <TableCell>{member.email}</TableCell>
                <TableCell>{member.venueName}</TableCell>
                <TableCell>
                  <Badge variant={member.status === "active" ? "default" : "secondary"}>
                    {member.status}
                  </Badge>
                </TableCell>
                <TableCell className="text-right space-x-2">
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => { setEditing(member); setDialogOpen(true); }}
                  >
                    <Pencil className="size-3.5" />
                  </Button>
                  <Button size="sm" variant="ghost" onClick={() => toggleOpsStaffStatus(member.id)}>
                    <Power className="size-3.5" />
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      <StaffFormDialog
        open={dialogOpen}
        onOpenChange={setDialogOpen}
        staff={editing}
        onSave={addOpsStaff}
        onUpdate={updateOpsStaff}
      />
    </div>
  );
}