'use client';
import { useState } from 'react';
import { clientApi } from '@/lib/client-api';
import { fmtDate } from '@/lib/format';
import type { ChangeEvent } from '@/lib/types';
import { ChangeRow, groupByDay } from './change-row';

/**
 * Cursor pagination for /changes: the server renders the first page; this appends more via `before=<observed_at>`.
 * `qs` carries the active filters (category, type, importance_min, since…).
 */
export function LoadMore({ qs, initialCursor, lastDay }: { qs: string; initialCursor: string | null; lastDay: string | null }) {
  const [items, setItems] = useState<ChangeEvent[]>([]);
  const [cursor, setCursor] = useState<string | null>(initialCursor);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);
  const groups = groupByDay(items);

  const more = async () => {
    if (!cursor) return;
    setLoading(true);
    setError(false);
    try {
      const p = new URLSearchParams(qs);
      p.set('before', cursor);
      p.set('limit', '50');
      const res = await clientApi.changes(p.toString());
      setItems((prev) => [...prev, ...res.items]);
      const last = res.items[res.items.length - 1];
      setCursor(res.items.length < 50 || !last ? null : last.observed_at);
    } catch {
      setError(true);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      {groups.map((g, i) => (
        <section key={g.day} className="mt-8">
          {(i > 0 || g.day !== lastDay) && (
            <h2 className="eyebrow sticky top-[var(--header-h)] z-10 -mx-4 bg-canvas/95 px-4 py-2 backdrop-blur md:mx-0 md:px-0">
              {fmtDate(g.day)} <span className="tnum text-ink-3">{g.items.length}</span>
            </h2>
          )}
          <ul className="border-t border-rule">
            {g.items.map((e) => (
              <ChangeRow key={e.id} e={e} />
            ))}
          </ul>
        </section>
      ))}
      <div className="mt-6 flex items-center gap-3">
        {cursor ? (
          <button type="button" onClick={more} disabled={loading} className="h-10 border border-rule px-4 text-sm text-ink-2 hover:border-rule-strong hover:text-ink disabled:opacity-50">
            {loading ? 'Loading…' : 'Load older events'}
          </button>
        ) : (
          <p className="text-xs text-ink-3">End of the recorded history for these filters.</p>
        )}
        {error && <p className="text-xs text-danger">Could not load more — try again.</p>}
      </div>
    </>
  );
}