'use client';

import { useRouter, useSearchParams } from 'next/navigation';
import { useTransition } from 'react';

const COMING_SOON_LABEL = 'Coming soon: requires analytics filter API support.';

export interface AnalyticsFilterBarProps {
  defaultFrom: string;
  defaultTo: string;
  defaultEnvironment?: 'DEMO' | 'SANDBOX' | 'PRODUCTION' | '';
}

export function AnalyticsFilterBar({
  defaultFrom,
  defaultTo,
  defaultEnvironment = '',
}: AnalyticsFilterBarProps) {
  const router = useRouter();
  const params = useSearchParams();
  const [pending, startTransition] = useTransition();

  function pushParams(next: Record<string, string | undefined>) {
    const url = new URLSearchParams(params?.toString() ?? '');
    for (const [key, value] of Object.entries(next)) {
      if (value === undefined || value === '') url.delete(key);
      else url.set(key, value);
    }
    startTransition(() => {
      router.replace(`/overview?${url.toString()}`, { scroll: false });
    });
  }

  return (
    <form
      className="analytics-filter-bar"
      onSubmit={(event) => event.preventDefault()}
      aria-label="Analytics filters"
    >
      <div className="filter-field">
        <label htmlFor="filter-from">From</label>
        <input
          id="filter-from"
          type="date"
          defaultValue={defaultFrom.slice(0, 10)}
          onChange={(event) => {
            const value = event.target.value;
            pushParams({ from: value ? `${value}T00:00:00.000Z` : undefined });
          }}
        />
      </div>
      <div className="filter-field">
        <label htmlFor="filter-to">To</label>
        <input
          id="filter-to"
          type="date"
          defaultValue={defaultTo.slice(0, 10)}
          onChange={(event) => {
            const value = event.target.value;
            pushParams({ to: value ? `${value}T23:59:59.999Z` : undefined });
          }}
        />
      </div>
      <div className="filter-field">
        <label htmlFor="filter-env">Provider environment</label>
        <select
          id="filter-env"
          defaultValue={defaultEnvironment}
          onChange={(event) => pushParams({ env: event.target.value || undefined })}
        >
          <option value="">All environments</option>
          <option value="DEMO">Demo</option>
          <option value="SANDBOX">Sandbox</option>
          <option value="PRODUCTION">Production</option>
        </select>
      </div>
      <div className="filter-field filter-disabled" title={COMING_SOON_LABEL}>
        <label htmlFor="filter-category">Category</label>
        <select id="filter-category" disabled aria-describedby="filter-category-help">
          <option>All categories</option>
        </select>
        <small id="filter-category-help" className="muted">
          {COMING_SOON_LABEL}
        </small>
      </div>
      <div className="filter-field filter-disabled" title={COMING_SOON_LABEL}>
        <label htmlFor="filter-status">Booking status</label>
        <select id="filter-status" disabled aria-describedby="filter-status-help">
          <option>All statuses</option>
        </select>
        <small id="filter-status-help" className="muted">
          {COMING_SOON_LABEL}
        </small>
      </div>
      {pending ? <span className="muted">Updating…</span> : null}
    </form>
  );
}