import { useState } from "react";
import { api } from "../../api/client";
import { confirmDialog } from "../../utils/dialogs";

export default function CacheSettings() {
  const [clearing, setClearing] = useState(false);
  const [cleared, setCleared] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleClear() {
    if (!(await confirmDialog({ title: "Clear DNS cache", message: "Clear the DNS record cache? All zones will need to be re-synced afterwards.", confirmLabel: "Clear cache" }))) return;
    setClearing(true);
    setError(null);
    setCleared(false);
    try {
      await api.dns.clearCache();
      setCleared(true);
      setTimeout(() => setCleared(false), 3000);
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setClearing(false);
    }
  }

  return (
    <>
      <h3 className="mb-3">Cache</h3>
      <div className="card">
        <div className="card-header">
          <h3 className="card-title">DNS record cache</h3>
        </div>
        <div className="card-body">
          <p className="text-secondary">
            The DNS module keeps a local copy of every synced zone and record so pages load instantly. Clear it if
            you see stale or incorrect data — every zone will need to be re-synced from its provider afterwards.
          </p>
          {error && <div className="alert alert-danger">{error}</div>}
        </div>
        <div className="card-footer">
          <button className="btn btn-danger" onClick={handleClear} disabled={clearing}>
            {clearing ? "Clearing…" : cleared ? "✓ Cache cleared" : "Clear DNS Cache"}
          </button>
        </div>
      </div>
    </>
  );
}