"use client";

import { useEffect, useRef, useState } from "react";
import { Clock } from "lucide-react";
import { useI18n } from "@/lib/i18n";

const HOURS = Array.from({ length: 24 }, (_, hour) => String(hour).padStart(2, "0"));
const MINUTES = Array.from({ length: 12 }, (_, index) => String(index * 5).padStart(2, "0"));

function partsOf(value: string) {
  const [hour = "", minute = ""] = value.split(":");
  return { hour: hour.padStart(2, "0") === "0" && !value ? "" : hour, minute };
}

interface TimePickerProps {
  value: string;
  onChange: (value: string) => void;
  error?: boolean;
}

export default function TimePicker({ value, onChange, error }: TimePickerProps) {
  const { t } = useI18n();
  const rootRef = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState(false);
  const parsed = partsOf(value);
  const hour = HOURS.includes(parsed.hour) ? parsed.hour : value ? parsed.hour.padStart(2, "0") : "18";
  const minute = MINUTES.includes(parsed.minute) ? parsed.minute : value ? parsed.minute.padStart(2, "0") : "00";

  useEffect(() => {
    if (!open) return;
    const onDoc = (event: MouseEvent) => {
      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
    };
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") setOpen(false);
    };
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const choose = (nextHour: string, nextMinute: string) => {
    onChange(`${nextHour}:${nextMinute}`);
  };

  return (
    <div ref={rootRef} className="relative">
      <button
        type="button"
        onClick={() => setOpen((current) => !current)}
        className={`flex h-12 w-full items-center gap-3 rounded-xl border-2 bg-[#FAFAF8] px-[18px] text-sm outline-none transition-colors ${
          error ? "border-red-300" : open ? "border-[#C9A84C]" : "border-[#E8E4D9]"
        } ${open ? "shadow-[0_0_0_3px_rgba(201,168,76,0.18)]" : ""}`}
      >
        <Clock className="size-4 shrink-0 text-[#A07830]" />
        <span className={`flex-1 text-start tabular-nums ${value ? "font-semibold text-[#1A1A2E]" : "text-[#9A9488]"}`} dir="ltr">
          {value || "--:--"}
        </span>
      </button>

      {open && (
        <div className="absolute start-0 z-50 mt-2 w-[280px] max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-[#E8E4D9] bg-white shadow-[0_24px_48px_-20px_rgba(26,26,46,0.28)]">
          <div className="h-1 bg-gradient-to-r from-[#C9A84C] via-[#E8C94A] to-[#A07830]" />
          <div className="p-4">
            <p className="text-center text-[11px] text-[#4A4A6A]">{t("selectTime")}</p>
            <p className="mt-1 text-center text-3xl font-bold tabular-nums tracking-wider text-[#1A1A2E]" dir="ltr">
              {hour}:{minute}
            </p>
            <div className="mt-4 grid grid-cols-2 gap-3">
              <Column label={t("hour")} items={HOURS} value={hour} onPick={(next) => choose(next, minute)} />
              <Column
                label={t("minutes")}
                items={MINUTES.includes(minute) ? MINUTES : [...MINUTES, minute].sort()}
                value={minute}
                onPick={(next) => choose(hour, next)}
              />
            </div>
            <div className="mt-4 flex items-center justify-between border-t border-[#E8E4D9] pt-3">
              <button
                type="button"
                onClick={() => {
                  onChange("");
                  setOpen(false);
                }}
                className="text-xs font-medium text-[#4A4A6A] hover:text-[#1A1A2E]"
              >
                {t("clear")}
              </button>
              <button
                type="button"
                onClick={() => {
                  choose(hour, minute);
                  setOpen(false);
                }}
                className="rounded-lg bg-gradient-to-br from-[#C9A84C] via-[#E8C94A] to-[#A07830] px-3 py-1.5 text-xs font-bold text-[#1A1A2E]"
              >
                {t("confirm")}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function Column({
  label,
  items,
  value,
  onPick,
}: {
  label: string;
  items: string[];
  value: string;
  onPick: (value: string) => void;
}) {
  const activeRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    activeRef.current?.scrollIntoView({ block: "center" });
  }, [value]);

  return (
    <div>
      <p className="mb-2 text-center text-[11px] font-bold text-[#A08A5A]">{label}</p>
      <div className="h-44 overflow-y-auto rounded-xl border border-[#E8E4D9] bg-[#FAFAF8] p-1 [scrollbar-width:thin]">
        {items.map((item) => {
          const selected = item === value;
          return (
            <button
              key={item}
              ref={selected ? activeRef : undefined}
              type="button"
              onClick={() => onPick(item)}
              className={`flex h-9 w-full items-center justify-center rounded-lg text-sm tabular-nums transition-colors ${
                selected
                  ? "bg-gradient-to-br from-[#C9A84C] via-[#E8C94A] to-[#A07830] font-bold text-[#1A1A2E]"
                  : "text-[#1A1A2E] hover:bg-white"
              }`}
            >
              {item}
            </button>
          );
        })}
      </div>
    </div>
  );
}