"use client";

import { useState } from "react";
import { formatDisplayDate } from "@/lib/dates-client";

type Gap = { date: string; reason: string };

interface CatchUpCardProps {
  gaps: Gap[];
  onSelectDate: (date: string) => void;
}

const REASON_LABEL: Record<string, string> = {
  empty: "No adventure logged",
  incomplete: "Adventure started but empty",
  no_reflection: "Reflection missing",
};

export function CatchUpCard({ gaps, onSelectDate }: CatchUpCardProps) {
  const [open, setOpen] = useState(false);

  if (gaps.length === 0) return null;

  return (
    <div className="retro-window mb-4">
      <button
        type="button"
        className="retro-titlebar w-full text-left"
        aria-expanded={open}
        onClick={() => setOpen(!open)}
      >
        Catch up ({gaps.length}) {open ? "▼" : "▶"}
      </button>
      {open && (
        <div className="p-3 space-y-2">
          <p className="text-xs text-[var(--warm-grey)]">
            A few recent days could use a note — no pressure, just pick one if you like.
          </p>
          {gaps.map((g) => (
            <button
              key={g.date}
              type="button"
              className="retro-btn text-xs w-full text-left flex justify-between"
              onClick={() => onSelectDate(g.date)}
            >
              <span>{formatDisplayDate(g.date)}</span>
              <span className="opacity-70">{REASON_LABEL[g.reason] ?? g.reason}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}