import { useEffect, useId, useMemo, useRef, useState, type KeyboardEvent } from "react";
import { createPortal } from "react-dom";
import { format } from "date-fns";
import { cn, parseLocalDate } from "@/lib/utils";
import {
  activityLevel, activityThresholds, calendarWeeks, inCalendarSelection, orderedSelection,
  type ActivityDay, type CalendarSelection, type FlowDirection,
} from "@/lib/calendarActivity";

interface Props {
  year: number;
  days: ReadonlyMap<string, ActivityDay>;
  direction: FlowDirection;
  selection: CalendarSelection | null;
  onSelect: (selection: CalendarSelection | null) => void;
  formatValue: (amount: number) => string;
  today: string;
  /** A transaction ledger may contain future-dated entries; Home only plots posted activity. */
  allowFuture?: boolean;
}

const levelClasses = [
  "bg-muted/80 dark:bg-white/[0.035]",
  "bg-teal-200 dark:bg-teal-900/60",
  "bg-teal-400/80 dark:bg-teal-700",
  "bg-teal-500 dark:bg-teal-500/80",
  "bg-teal-700 dark:bg-teal-300",
];

export function CalendarHeatmap({ year, days, direction, selection, onSelect, formatValue, today, allowFuture = false }: Props) {
  const weeks = useMemo(() => calendarWeeks(year), [year]);
  const dates = useMemo(() => weeks.flat().filter((d): d is string => !!d && (allowFuture || d <= today)), [weeks, today, allowFuture]);
  const thresholds = useMemo(() => activityThresholds(days, direction), [days, direction]);
  const grid = useRef<HTMLDivElement>(null);
  const drag = useRef<{ anchor: string; end: string; id: number } | null>(null);
  const skipClick = useRef(false);
  const resetClickTimer = useRef<ReturnType<typeof setTimeout>>();
  const [preview, setPreview] = useState<CalendarSelection | null>(null);
  const [focused, setFocused] = useState(today.startsWith(String(year)) ? today : `${year}-01-01`);
  const [hover, setHover] = useState<{ date: string; x: number; y: number } | null>(null);
  const hintId = useId();
  const tooltipId = useId();
  const active = preview ?? selection;
  const focusDate = dates.includes(focused) ? focused : dates[0];
  const lastOnSelect = useRef(onSelect);
  lastOnSelect.current = onSelect;

  useEffect(() => {
    const finish = (event: PointerEvent) => {
      const current = drag.current;
      if (!current || current.id !== event.pointerId) return;
      if (current.anchor !== current.end) {
        lastOnSelect.current(orderedSelection(current.anchor, current.end));
        skipClick.current = true;
        // The browser's synthetic click follows pointerup in the same task.
        // A release outside the chart must not swallow the next real click.
        resetClickTimer.current = setTimeout(() => { skipClick.current = false; }, 0);
      }
      drag.current = null;
      setPreview(null);
    };
    const cancel = () => { drag.current = null; setPreview(null); };
    const escape = (e: globalThis.KeyboardEvent) => { if (e.key === "Escape") cancel(); };
    const dismiss = () => setHover(null);
    window.addEventListener("pointerup", finish);
    window.addEventListener("pointercancel", cancel);
    window.addEventListener("blur", cancel);
    window.addEventListener("keydown", escape);
    window.addEventListener("scroll", dismiss, true);
    window.addEventListener("resize", dismiss);
    return () => {
      window.removeEventListener("pointerup", finish);
      window.removeEventListener("pointercancel", cancel);
      window.removeEventListener("blur", cancel);
      window.removeEventListener("keydown", escape);
      window.removeEventListener("scroll", dismiss, true);
      window.removeEventListener("resize", dismiss);
      clearTimeout(resetClickTimer.current);
    };
  }, []);

  const showTooltip = (date: string, target: HTMLElement) => {
    const rect = target.getBoundingClientRect();
    setHover({ date, x: rect.left + rect.width / 2, y: rect.top });
  };

  const toggleDay = (date: string) => {
    onSelect(selection?.from === date && selection.to === date ? null : { from: date, to: date });
  };

  const keyboard = (event: KeyboardEvent<HTMLButtonElement>, date: string) => {
    if (event.key === "Escape") {
      event.preventDefault(); event.stopPropagation();
      drag.current = null; setPreview(null); setHover(null); onSelect(null);
      return;
    }
    const index = dates.indexOf(date);
    const weekday = new Date(`${date}T00:00:00Z`).getUTCDay();
    const next = event.key === "ArrowLeft" ? index - 7 : event.key === "ArrowRight" ? index + 7
      : event.key === "ArrowUp" ? index - 1 : event.key === "ArrowDown" ? index + 1
      : event.key === "Home" ? (event.ctrlKey || event.metaKey ? 0 : index - weekday)
      : event.key === "End" ? (event.ctrlKey || event.metaKey ? dates.length - 1 : index + 6 - weekday) : null;
    if (next === null) return;
    event.preventDefault(); event.stopPropagation();
    const target = dates[Math.max(0, Math.min(dates.length - 1, next))];
    setFocused(target);
    grid.current?.querySelector<HTMLButtonElement>(`[data-date="${target}"]`)?.focus();
  };

  const hovered = hover ? days.get(hover.date) : undefined;
  const resetHint = selection?.from === hover?.date && selection?.to === hover?.date;
  const tooltip = hover && typeof document !== "undefined" ? createPortal(
    <div
      id={tooltipId} role="tooltip"
      className="pointer-events-none fixed z-50 w-[250px] max-w-[calc(100vw-24px)] rounded-xl border border-border bg-popover px-4 py-3 text-popover-foreground shadow-xl"
      style={{ left: Math.max(12, Math.min(hover.x - 125, window.innerWidth - 262)), top: hover.y > 140 ? hover.y - 12 : hover.y + 28, transform: hover.y > 140 ? "translateY(-100%)" : undefined }}
    >
      <p className="text-sm font-medium">{format(parseLocalDate(hover.date), "EEEE, MMMM d, yyyy")}</p>
      <p className="mt-1 text-sm text-muted-foreground tabular-nums">{formatValue(hovered?.[direction] ?? 0)} {direction}</p>
      <p className="mt-2 text-[11px] text-muted-foreground">{resetHint ? "Press to reset" : "Press to select day · Drag for range"}</p>
    </div>, document.body,
  ) : null;

  return (
    <div>
      <p id={hintId} className="sr-only">Use arrow keys to explore days, Enter or Space to select a day, and Escape to clear. Drag across days or use the date picker to select a range.</p>
      <div className="max-w-full overflow-x-auto overscroll-x-contain pb-2" onPointerLeave={() => setHover(null)}>
        <div ref={grid} role="group" aria-label={`${year} daily ${direction} calendar heatmap`} aria-describedby={hintId} className="select-none" style={{ minWidth: Math.max(660, weeks.length * 15 + 30) }}>
          <div className="mb-2 grid pl-8 text-[10px] text-muted-foreground" aria-hidden style={{ gridTemplateColumns: `repeat(${weeks.length}, minmax(0, 1fr))` }}>
            {weeks.map((week, i) => {
              const first = week.find(d => d?.endsWith("-01"));
              return <span key={i} className="overflow-visible whitespace-nowrap">{first ? format(parseLocalDate(first), "MMM") : ""}</span>;
            })}
          </div>
          <div className="flex gap-2">
            <div aria-hidden className="grid w-6 shrink-0 grid-rows-[repeat(7,minmax(0,1fr))] gap-[3px] text-[9px] text-muted-foreground">
              {["", "Mon", "", "Wed", "", "Fri", ""].map((label, i) => <span key={i} className="flex items-center">{label}</span>)}
            </div>
            <div className="grid min-w-0 flex-1 gap-[3px]" style={{ gridTemplateColumns: `repeat(${weeks.length}, minmax(0, 1fr))` }}>
              {weeks.map((week, i) => (
                <div key={i} className="grid grid-rows-[repeat(7,minmax(0,1fr))] gap-[3px]">
                  {week.map((date, j) => {
                    if (!date) return <span key={j} className="aspect-square max-h-[18px]" aria-hidden />;
                    const future = date > today;
                    const disabled = future && !allowFuture;
                    const amount = days.get(date)?.[direction] ?? 0;
                    const level = activityLevel(amount, thresholds);
                    const selected = !!active && inCalendarSelection(date, active);
                    return (
                      <button
                        key={date} type="button" data-date={date} data-level={level}
                        aria-label={`${format(parseLocalDate(date), "MMMM d, yyyy")}: ${formatValue(amount)} ${direction}${future ? ", future date" : ""}`}
                        aria-pressed={selected} aria-describedby={hover?.date === date ? tooltipId : undefined}
                        disabled={disabled} tabIndex={!disabled && focusDate === date ? 0 : -1}
                        className={cn("aspect-square max-h-[18px] w-full rounded-full transition-[opacity,box-shadow] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500",
                          levelClasses[level], disabled && "opacity-30", active && !selected && "opacity-20",
                          selected && "ring-1 ring-teal-600 ring-offset-1 ring-offset-card dark:ring-teal-300",
                          !disabled && "hover:ring-2 hover:ring-teal-500/60 hover:ring-offset-1 hover:ring-offset-card")}
                        onFocus={event => { setFocused(date); showTooltip(date, event.currentTarget); }}
                        onBlur={() => setHover(null)}
                        onPointerEnter={event => {
                          if (disabled) return;
                          showTooltip(date, event.currentTarget);
                          if (drag.current && drag.current.id === event.pointerId) {
                            drag.current.end = date;
                            setPreview(orderedSelection(drag.current.anchor, date));
                          }
                        }}
                        onPointerDown={event => {
                          if (event.button !== 0 || event.pointerType === "touch") return;
                          drag.current = { anchor: date, end: date, id: event.pointerId };
                          // Avoid implicit touch/pen capture swallowing enter events.
                          if (event.currentTarget.hasPointerCapture?.(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
                        }}
                        onClick={() => { if (!skipClick.current) toggleDay(date); }}
                        onKeyDown={event => keyboard(event, date)}
                      />
                    );
                  })}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      {tooltip}
    </div>
  );
}