import { useState } from 'react';
import { useCleanupData } from '../../hooks/useAdmin';

export function DataCleanup() {
  const [days, setDays] = useState(90);
  const cleanup = useCleanupData();

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (days < 1) return;
    cleanup.mutate(days);
  }

  return (
    <form onSubmit={handleSubmit} className="glass p-5 flex flex-wrap items-end gap-4">
      <div className="flex flex-col gap-1.5">
        <label htmlFor="cleanup-days" className="text-xs text-gray-400">Older than (days)</label>
        <input
          id="cleanup-days"
          type="number"
          min={1}
          value={days}
          onChange={(e) => setDays(Number(e.target.value))}
          className="w-28 input-glass px-3 py-2 text-sm"
        />
      </div>
      <button
        type="submit"
        disabled={cleanup.isPending || days < 1}
        className="rounded-lg bg-gradient-to-r from-red-600 to-red-500 px-4 py-2 text-sm font-medium text-white hover:from-red-500 hover:to-red-400 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
      >
        {cleanup.isPending ? 'Cleaning…' : 'Run Cleanup'}
      </button>
    </form>
  );
}