"use client";

import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Plus, Printer } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import type { Role } from "@/lib/auth";

interface TicketActionBarProps {
  orderId: string;
  role: Role;
  canChangeStatus?: boolean;
  onNew?: () => void;
  onPrint?: () => void;
  onScrollToTimeline?: () => void;
  onOpenStatusSheet?: () => void;
  onPrev?: () => void;
  onNext?: () => void;
  onPrevHour?: () => void;
  onNextHour?: () => void;
  onPrevDay?: () => void;
  onNextDay?: () => void;
  readOnly?: boolean;
}

export function TicketActionBar({
  orderId,
  role,
  canChangeStatus: _canChangeStatus,
  onNew,
  onPrint,
  onScrollToTimeline: _onScrollToTimeline,
  onOpenStatusSheet: _onOpenStatusSheet,
  onPrev,
  onNext,
  onPrevHour,
  onNextHour,
  onPrevDay,
  onNextDay,
  readOnly = false,
}: TicketActionBarProps) {
  const canCreateOrder = role === "admin" || role === "foh";

  return (
    <div className="flex items-center gap-1 border-b bg-card px-2 py-1.5">
      {/* Left: functional actions */}
      <div className="flex items-center gap-1">
        {!readOnly && canCreateOrder && (
          <Button
            variant="ghost"
            size="sm"
            className="h-7 gap-1 px-2 text-xs"
            onClick={onNew}
          >
            <Plus className="size-3.5" />
            NEW
          </Button>
        )}

        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              variant="ghost"
              size="sm"
              className="h-7 gap-1 px-2 text-xs"
              onClick={onPrint}
            >
              <Printer className="size-3.5" />
              PRINT
            </Button>
          </TooltipTrigger>
          <TooltipContent>Print ticket</TooltipContent>
        </Tooltip>
      </div>

      {/* Centre: order navigation */}
      <div className="flex flex-1 items-center justify-center gap-0.5">
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="ghost" size="icon" className="size-7" onClick={onPrevDay}>
              <span className="font-mono text-[11px] font-bold leading-none">&lt;&lt;&lt;</span>
            </Button>
          </TooltipTrigger>
          <TooltipContent>Previous day</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="ghost" size="icon" className="size-7" onClick={onPrevHour}>
              <ChevronsLeft className="size-3.5" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>Previous hour</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="ghost" size="icon" className="size-7" onClick={onPrev}>
              <ChevronLeft className="size-3.5" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>Previous order</TooltipContent>
        </Tooltip>

        <span className="px-1 font-mono text-muted-foreground text-xs">{orderId}</span>

        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="ghost" size="icon" className="size-7" onClick={onNext}>
              <ChevronRight className="size-3.5" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>Next order</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="ghost" size="icon" className="size-7" onClick={onNextHour}>
              <ChevronsRight className="size-3.5" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>Next hour</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="ghost" size="icon" className="size-7" onClick={onNextDay}>
              <span className="font-mono text-[11px] font-bold leading-none">&gt;&gt;&gt;</span>
            </Button>
          </TooltipTrigger>
          <TooltipContent>Next day</TooltipContent>
        </Tooltip>
      </div>
    </div>
  );
}