"use client";

import { ChevronLeft, ChevronRight } from "lucide-react";

import { Button } from "../ui/button";
import { cn } from "../../lib/cn";
import { useRuntimeUiConfig } from "../layout/runtime-ui-config-provider";
import { Input } from "../ui/input";
import { timelineToolbarStyles, type TimelineStatusFilter } from "./timeline-ui-config";

type TimelineToolbarProps = {
  isMobile: boolean;
  search: string;
  status: TimelineStatusFilter;
  onSearchChange: (value: string) => void;
  onStatusChange: (value: TimelineStatusFilter) => void;
};

type TimelineDateActionsProps = {
  isMobile?: boolean;
  onDateShift: (deltaDays: number) => void;
  onGoToday: () => void;
};

const DateActionIcon = ({ direction }: { direction?: "left" | "right" }) => {
  if (direction === "left") {
    return <ChevronLeft className="h-4 w-4" />;
  }

  if (direction === "right") {
    return <ChevronRight className="h-4 w-4" />;
  }

  return null;
};

export const TimelineDateActions = ({ isMobile = false, onDateShift, onGoToday }: TimelineDateActionsProps) => {
  const { timelineDateActions } = useRuntimeUiConfig();
  const actionsByKey = new Map(timelineDateActions.map((action) => [action.key, action]));
  const todayAction = actionsByKey.get("today");
  const previousWeekAction = actionsByKey.get("previous-week");
  const nextWeekAction = actionsByKey.get("next-week");
  const previousMonthAction = actionsByKey.get("previous-month");
  const nextMonthAction = actionsByKey.get("next-month");

  const renderShiftGroup = (
    label: string,
    previousAction: { label: string; deltaDays: number | null } | undefined,
    nextAction: { label: string; deltaDays: number | null } | undefined
  ) => (
    <div className={cn("inline-flex items-stretch overflow-hidden rounded-xl border border-line bg-white", isMobile ? "h-[29px]" : "h-[36px]")}>
      <button
        aria-label={previousAction?.label ?? `Wstecz ${label}`}
        className={cn(
          "flex items-center justify-center border-r border-line text-ink transition hover:bg-[#f6efe5]",
          isMobile ? "w-[26px]" : "w-8"
        )}
        disabled={previousAction?.deltaDays === null || previousAction?.deltaDays === undefined}
        onClick={() => {
          if (typeof previousAction?.deltaDays === "number") {
            onDateShift(previousAction.deltaDays);
          }
        }}
        title={previousAction?.label ?? `Wstecz ${label}`}
        type="button"
      >
        <DateActionIcon direction="left" />
      </button>
      <div
        className={cn(
          "flex items-center justify-center px-2 font-semibold uppercase tracking-[0.14em] text-ink",
          isMobile ? "min-w-[32px] text-[9px]" : "min-w-[48px] text-[10px]"
        )}
      >
        {label}
      </div>
      <button
        aria-label={nextAction?.label ?? `Dalej ${label}`}
        className={cn(
          "flex items-center justify-center border-l border-line text-ink transition hover:bg-[#f6efe5]",
          isMobile ? "w-[26px]" : "w-8"
        )}
        disabled={nextAction?.deltaDays === null || nextAction?.deltaDays === undefined}
        onClick={() => {
          if (typeof nextAction?.deltaDays === "number") {
            onDateShift(nextAction.deltaDays);
          }
        }}
        title={nextAction?.label ?? `Dalej ${label}`}
        type="button"
      >
        <DateActionIcon direction="right" />
      </button>
    </div>
  );

  return (
    <div className={timelineToolbarStyles.dateActionsClassName}>
      {todayAction ? (
        <Button
          className={cn(isMobile ? "h-[29px] px-2 text-[10px]" : "h-[36px] px-2.5 text-[12px]")}
          variant="secondary"
          onClick={onGoToday}
        >
          {todayAction.label}
        </Button>
      ) : null}
      {renderShiftGroup(isMobile ? "7d" : "7 dni", previousWeekAction, nextWeekAction)}
      {renderShiftGroup(isMobile ? "30d" : "30 dni", previousMonthAction, nextMonthAction)}
    </div>
  );
};

export const TimelineToolbar = ({
  isMobile,
  search,
  status,
  onSearchChange,
  onStatusChange
}: TimelineToolbarProps) => {
  const { timelineCopy, timelineStatusOptions } = useRuntimeUiConfig();

  if (isMobile) {
    return null;
  }

  return (
    <div className={timelineToolbarStyles.inlineContainerClassName}>
      <label className="relative block min-w-0 flex-1">
        <span className={timelineToolbarStyles.floatingLabelClassName}>{timelineCopy.filters.searchLabel}</span>
        <Input
          className={timelineToolbarStyles.inputClassName}
          placeholder={timelineCopy.filters.searchPlaceholder}
          value={search}
          onChange={(event) => onSearchChange(event.target.value)}
        />
      </label>

      <div className={timelineToolbarStyles.combinedFilterClassName}>
        <span className={timelineToolbarStyles.floatingLabelClassName}>{timelineCopy.filters.statusLabel}</span>
        <select
          className={timelineToolbarStyles.statusSelectClassName}
          value={status}
          onChange={(event) => onStatusChange(event.target.value as TimelineStatusFilter)}
        >
          {timelineStatusOptions.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
};