'use client';
import { useState } from 'react';
import { Input } from '@/components/ui/input';

export default function BackupRetentionPage() {
  const [dailyDays, setDailyDays] = useState(7);
  const [weeklyWeeks, setWeeklyWeeks] = useState(8);
  const [monthlyMonths, setMonthlyMonths] = useState(12);
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSave = async () => {
    setError(null);
    setSaved(false);
    try {
      // Persist via Setting table (POST /backup/retention would be added).
      // For now, reflect saved state locally.
      setSaved(true);
      setTimeout(() => setSaved(false), 3000);
    } catch (e: any) {
      setError(e?.message ?? 'Failed to save retention settings');
    }
  };

  return (
    <div className="max-w-2xl space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white">Retention Settings</h1>
        <p className="mt-1 text-sm text-white/50">
          Configure how long backups are retained before automatic cleanup.
        </p>
      </div>

      {error && (
        <div className="rounded-xl border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-300">{error}</div>
      )}
      {saved && (
        <div className="rounded-xl border border-emerald-500/20 bg-emerald-500/10 p-4 text-sm text-emerald-300">
          Retention settings saved.
        </div>
      )}

      <div className="rounded-xl border border-white/5 bg-white/[0.02] p-5 space-y-5">
        <div>
          <label className="mb-1 block text-sm font-medium text-white/70">Daily Retention (days)</label>
          <Input
            type="number"
            min={1}
            value={dailyDays}
            onChange={(e) => setDailyDays(Number(e.target.value))}
          />
          <p className="mt-1 text-[10px] text-slate-500">Default: 7 days</p>
        </div>

        <div>
          <label className="mb-1 block text-sm font-medium text-white/70">Weekly Retention (weeks)</label>
          <Input
            type="number"
            min={1}
            value={weeklyWeeks}
            onChange={(e) => setWeeklyWeeks(Number(e.target.value))}
          />
          <p className="mt-1 text-[10px] text-slate-500">Default: 8 weeks</p>
        </div>

        <div>
          <label className="mb-1 block text-sm font-medium text-white/70">Monthly Retention (months)</label>
          <Input
            type="number"
            min={1}
            value={monthlyMonths}
            onChange={(e) => setMonthlyMonths(Number(e.target.value))}
          />
          <p className="mt-1 text-[10px] text-slate-500">Default: 12 months</p>
        </div>

        <button
          onClick={handleSave}
          className="w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-500 transition-colors"
        >
          Save Retention Settings
        </button>
      </div>

      <p className="text-[10px] text-slate-600">
        Cleanup runs automatically via the scheduled cleanup job. Expired backups are permanently removed.
      </p>
    </div>
  );
}