"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 { ReservationManager } from "@/data/platform-mock";
import { usePlatformStore } from "@/stores/platform/platform-store";

import { ManagerFormDialog } from "../_components/manager-form-dialog";

export default function ManagersPage() {
  const managers = usePlatformStore((s) => s.managers);
  const addManager = usePlatformStore((s) => s.addManager);
  const updateManager = usePlatformStore((s) => s.updateManager);
  const toggleManagerStatus = usePlatformStore((s) => s.toggleManagerStatus);

  const [dialogOpen, setDialogOpen] = useState(false);
  const [editing, setEditing] = useState<ReservationManager | 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">Reservation managers</h1>
          <p className="text-sm text-muted-foreground">Manage back-office staff per venue</p>
        </div>
        <Button onClick={() => { setEditing(null); setDialogOpen(true); }}>
          <Plus className="mr-2 size-4" />
          Add manager
        </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>
            {managers.map((m) => (
              <TableRow key={m.id}>
                <TableCell className="font-medium">{m.name}</TableCell>
                <TableCell className="font-mono text-sm">{m.username}</TableCell>
                <TableCell>{m.email}</TableCell>
                <TableCell>{m.venueName}</TableCell>
                <TableCell>
                  <Badge variant={m.status === "active" ? "default" : "secondary"}>{m.status}</Badge>
                </TableCell>
                <TableCell className="text-right space-x-2">
                  <Button size="sm" variant="outline" onClick={() => { setEditing(m); setDialogOpen(true); }}>
                    <Pencil className="size-3.5" />
                  </Button>
                  <Button size="sm" variant="ghost" onClick={() => toggleManagerStatus(m.id)}>
                    <Power className="size-3.5" />
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      <ManagerFormDialog
        open={dialogOpen}
        onOpenChange={setDialogOpen}
        manager={editing}
        onSave={addManager}
        onUpdate={updateManager}
      />
    </div>
  );
}