"use client";

import { useState } from "react";

type DateFilterProps = {
  since: string;
  until: string;
  previousSince: string;
  previousUntil: string;
  minDate: string;
  maxDate: string;
};

export function DateFilter({ since, until, previousSince, previousUntil, minDate, maxDate }: DateFilterProps) {
  const [isSubmitting, setIsSubmitting] = useState(false);

  return (
    <>
    <form className="dateFilter" method="get" onSubmit={() => setIsSubmitting(true)}>
      <div className="dateFilterTitle">
        <span>Période analysée</span>
        <strong>Données disponibles jusqu’à J-1</strong>
        <small>Pacing sur J-1 · Conversion et onboardings sur les 7 derniers jours</small>
      </div>
      <label>
        <span>Date début</span>
        <input type="date" name="since" defaultValue={since} min={minDate} max={maxDate} required />
      </label>
      <label>
        <span>Date fin</span>
        <input type="date" name="until" defaultValue={until} min={minDate} max={maxDate} required />
      </label>
      <fieldset className="previousPeriod">
        <legend>Période précédente (P-1)</legend>
        <label>
          <span>Début P-1</span>
          <input type="date" name="previous_since" defaultValue={previousSince} min={minDate} max={maxDate} required />
        </label>
        <label>
          <span>Fin P-1</span>
          <input type="date" name="previous_until" defaultValue={previousUntil} min={minDate} max={maxDate} required />
        </label>
      </fieldset>
      <div className="dateFilterActions">
        <button type="submit" disabled={isSubmitting}>{isSubmitting ? "Chargement…" : "Appliquer"}</button>
      </div>
    </form>
    {isSubmitting && (
      <div className="pageLoadingOverlay" role="status" aria-live="polite" aria-label="Chargement des données">
        <div className="loadingIndicator">
          <span className="loadingSpinner" aria-hidden="true" />
          <strong>Chargement des données</strong>
          <span>Synchronisation des campagnes en cours</span>
        </div>
      </div>
    )}
    </>
  );
}