import React from "react";
import { Ban, Globe, Moon, Sun, Users } from "lucide-react";
import { GradientIcon } from "~/components/ui/GradientIcon";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
import { TimezoneSelect } from "~/components/league/TimezoneSelect";
import { cn } from "~/lib/utils";

export interface OvernightPauseSettingsProps {
  show: boolean;
  mode: "none" | "league" | "per_user";
  onModeChange: (v: "none" | "league" | "per_user") => void;
  start: string;
  onStartChange: (v: string) => void;
  end: string;
  onEndChange: (v: string) => void;
  timezone: string;
  onTimezoneChange: (v: string) => void;
  commishTimezone?: string | null;
  disabled?: boolean;
}

const PAUSE_MODES = [
  { value: "none"     as const, icon: Ban,   label: "No Pause",   sub: "Timer always runs" },
  { value: "league"   as const, icon: Globe, label: "League",     sub: "Same pause for everyone" },
  { value: "per_user" as const, icon: Users, label: "Per Player", sub: "Pauses in each player's timezone" },
];

export function OvernightPauseSettings({
  show,
  mode,
  onModeChange,
  start,
  onStartChange,
  end,
  onEndChange,
  timezone,
  onTimezoneChange,
  commishTimezone,
  disabled,
}: OvernightPauseSettingsProps) {
  if (!show) return null;

  const PAUSE_VALUES = PAUSE_MODES.map((m) => m.value);

  function handleGroupKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
    if (disabled) return;
    if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key)) return;
    e.preventDefault();
    const idx = PAUSE_VALUES.indexOf(mode);
    const next = e.key === "ArrowDown" || e.key === "ArrowRight"
      ? (idx + 1) % PAUSE_VALUES.length
      : (idx - 1 + PAUSE_VALUES.length) % PAUSE_VALUES.length;
    const nextValue = PAUSE_VALUES[next];
    onModeChange(nextValue);
    e.currentTarget.querySelector<HTMLElement>(`[data-radio-value="${nextValue}"]`)?.focus();
  }

  return (
    <div className="space-y-4">
      <Label>Overnight Pause</Label>

      <div role="radiogroup" aria-label="Pause mode" onKeyDown={handleGroupKeyDown} className="grid grid-cols-3 gap-2">
        {PAUSE_MODES.map(({ value, icon: Icon, label, sub }) => {
          const selected = mode === value;
          return (
            <button
              key={value}
              type="button"
              role="radio"
              aria-checked={selected}
              tabIndex={selected ? 0 : -1}
              data-radio-value={value}
              disabled={disabled}
              onClick={() => onModeChange(value)}
              className={cn(
                "flex flex-col items-center gap-1 py-3 px-2 rounded-lg border-2 transition-all",
                selected ? "border-primary" : "border-border hover:border-primary/60",
                disabled && "opacity-50 cursor-not-allowed"
              )}
            >
              <GradientIcon
                icon={Icon}
                className="h-5 w-5"
                style={selected ? undefined : { stroke: "var(--muted-foreground)" }}
              />
              <span className="text-xs font-semibold">{label}</span>
              <span className="text-xs text-muted-foreground text-center leading-tight">{sub}</span>
            </button>
          );
        })}
      </div>

      {mode !== "none" && (
        <div className="space-y-3">
          <div className="grid grid-cols-2 gap-3">
            <div className="space-y-1">
              <div className="flex items-center gap-1.5">
                <Moon className="h-3.5 w-3.5 text-indigo-400 shrink-0" aria-hidden="true" />
                <Label htmlFor="overnight-pause-start" className="text-xs">Draft pauses</Label>
              </div>
              <Input
                id="overnight-pause-start"
                type="time"
                value={start}
                disabled={disabled}
                onChange={(e) => onStartChange(e.target.value)}
              />
            </div>
            <div className="space-y-1">
              <div className="flex items-center gap-1.5">
                <Sun className="h-3.5 w-3.5 text-yellow-400 shrink-0" aria-hidden="true" />
                <Label htmlFor="overnight-pause-end" className="text-xs">Draft resumes</Label>
              </div>
              <Input
                id="overnight-pause-end"
                type="time"
                value={end}
                disabled={disabled}
                onChange={(e) => onEndChange(e.target.value)}
              />
            </div>
          </div>

          <div className="space-y-1">
            <Label className="text-sm">
              {mode === "per_user" ? "Default Timezone" : "Timezone"}
            </Label>
            {mode === "per_user" && (
              <p className="text-xs text-muted-foreground">
                Each player&apos;s profile timezone is used. Players without one fall back to the timezone below.
                {!commishTimezone && (
                  <> You haven&apos;t set your timezone yet — <a href="/profile" className="font-medium underline underline-offset-2">set it in your profile</a>.</>
                )}
              </p>
            )}
            <TimezoneSelect value={timezone} onChange={onTimezoneChange} disabled={disabled} />
          </div>
        </div>
      )}
    </div>
  );
}