import { format, formatDistanceToNow, isPast, isToday } from "date-fns";
import { Button } from "@/components/ui/button";
import { useBoardStore } from "@/stores/board-store";

interface DueDatePickerProps {
  cardId: string;
  dueDate: string | null;
}

export function DueDatePicker({ cardId, dueDate }: DueDatePickerProps) {
  const updateCard = useBoardStore((s) => s.updateCard);

  const dateObj = dueDate ? new Date(dueDate) : null;
  const overdue = dateObj != null && isPast(dateObj) && !isToday(dateObj);

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const val = e.target.value;
    updateCard(cardId, { dueDate: val || null });
  }

  function handleClear() {
    updateCard(cardId, { dueDate: null });
  }

  // Format the date value for the HTML date input (YYYY-MM-DD)
  const inputValue = dateObj
    ? format(dateObj, "yyyy-MM-dd")
    : "";

  return (
    <div className="flex flex-col gap-2">
      {/* Header */}
      <h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
        Due Date
      </h4>

      {/* Current date display */}
      {dateObj && (
        <div className="flex items-center gap-2">
          <span
            className={`text-sm font-medium ${
              overdue ? "text-pylon-danger" : "text-pylon-text"
            }`}
          >
            {format(dateObj, "MMM d, yyyy")}
          </span>
          <span
            className={`text-xs ${
              overdue ? "text-pylon-danger" : "text-pylon-text-secondary"
            }`}
          >
            {overdue
              ? `overdue by ${formatDistanceToNow(dateObj)}`
              : isToday(dateObj)
                ? "today"
                : `in ${formatDistanceToNow(dateObj)}`}
          </span>
        </div>
      )}

      {/* Date input + clear */}
      <div className="flex items-center gap-2">
        <input
          type="date"
          value={inputValue}
          onChange={handleChange}
          className="h-7 rounded-md border border-pylon-text-secondary/20 bg-pylon-column px-2 text-xs text-pylon-text outline-none focus:border-pylon-accent focus:ring-1 focus:ring-pylon-accent"
        />
        {dueDate && (
          <Button
            variant="ghost"
            size="xs"
            onClick={handleClear}
            className="text-pylon-text-secondary hover:text-pylon-danger"
          >
            Clear
          </Button>
        )}
      </div>
    </div>
  );
}