"use client";

import { useState } from "react";

import Link from "next/link";

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

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import type { Venue } from "@/data/platform-mock";
import { usePlatformStore } from "@/stores/platform/platform-store";

import { VenueFormDialog } from "../_components/venue-form-dialog";

export default function VenuesPage() {
  const venues = usePlatformStore((s) => s.venues);
  const tables = usePlatformStore((s) => s.tables);
  const managers = usePlatformStore((s) => s.managers);
  const opsStaff = usePlatformStore((s) => s.opsStaff);
  const addVenue = usePlatformStore((s) => s.addVenue);
  const updateVenue = usePlatformStore((s) => s.updateVenue);

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

  const tableCount = (venueId: string) => tables.filter((t) => t.venueId === venueId).length;
  const managerCount = (venueId: string) =>
    managers.filter((m) => m.venueId === venueId && m.status === "active").length;
  const opsCount = (venueId: string) =>
    opsStaff.filter((o) => o.venueId === venueId && o.status === "active").length;

  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">Venue management</h1>
          <p className="text-sm text-muted-foreground">Add, edit, and view restaurant venues</p>
        </div>
        <Button onClick={() => { setEditing(null); setDialogOpen(true); }}>
          <Plus className="mr-2 size-4" />
          Add venue
        </Button>
      </div>

      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        {venues.map((venue) => (
          <Card key={venue.id}>
            <CardContent className="p-5 space-y-3">
              <div className="flex items-start justify-between">
                <h3 className="font-semibold">{venue.name}</h3>
                <Badge variant={venue.status === "active" ? "default" : "secondary"}>{venue.status}</Badge>
              </div>
              <p className="text-sm text-muted-foreground">{venue.address}</p>
              <div className="flex gap-4 text-xs text-muted-foreground">
                <span>{tableCount(venue.id)} tables</span>
                <span>
                  {managerCount(venue.id)} managers · {opsCount(venue.id)} floor staff
                </span>
              </div>
              <div className="flex gap-2 pt-1">
                <Button size="sm" variant="outline" onClick={() => { setEditing(venue); setDialogOpen(true); }}>
                  <Pencil className="mr-1 size-3.5" />
                  Edit
                </Button>
                <Button size="sm" variant="secondary" asChild>
                  <Link href={`/admin/venues/${venue.id}/floor`}>
                    <Eye className="mr-1 size-3.5" />
                    Floor
                  </Link>
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      <VenueFormDialog
        open={dialogOpen}
        onOpenChange={setDialogOpen}
        venue={editing}
        onSave={addVenue}
        onUpdate={updateVenue}
      />
    </div>
  );
}