'use client';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useState } from 'react';

/**
 * "As of" date picker for the History tab. Writes `?tab=history&asof=YYYY-MM-DD` (keeping other params) so the
 * server renders the entity's attributes as known at that date (`GET /entities/{slug}/asof`).
 */
export function AsOfPicker({ value }: { value?: string }) {
  const router = useRouter();
  const pathname = usePathname();
  const sp = useSearchParams();
  const [date, setDate] = useState(value ?? '');
  const today = new Date().toISOString().slice(0, 10);

  const go = (d: string | null) => {
    const next = new URLSearchParams(sp.toString());
    next.set('tab', 'history');
    if (d) next.set('asof', d);
    else next.delete('asof');
    router.replace(`${pathname}?${next.toString()}`, { scroll: false });
  };

  return (
    <form
      className="flex flex-wrap items-end gap-2"
      onSubmit={(e) => {
        e.preventDefault();
        if (date) go(date);
      }}
    >
      <label className="block min-w-0">
        <span className="eyebrow block pb-1">As of date (UTC)</span>
        <input type="date" name="asof" value={date} max={today} onChange={(e) => setDate(e.target.value)} className="h-11 w-full min-w-[11rem] border border-rule bg-surface px-2.5 text-sm text-ink focus:border-accent focus:outline-none" />
      </label>
      <button type="submit" disabled={!date} className="inline-flex h-11 items-center bg-ink px-3 text-sm font-medium text-canvas hover:opacity-90 disabled:opacity-40">
        View as of
      </button>
      {value && (
        <button
          type="button"
          onClick={() => {
            setDate('');
            go(null);
          }}
          className="inline-flex h-11 items-center border border-rule px-3 text-sm text-ink-2 hover:text-ink"
        >
          Back to today
        </button>
      )}
    </form>
  );
}