"use client";

import { useState, useTransition } from "react";
import { deleteSiteAction, migrateToSitesAction } from "../actions";

export function DeleteSiteButton({ siteId }: { siteId: string }) {
  const [pending, start] = useTransition();
  const [error, setError] = useState<string | null>(null);
  return (
    <span className="flex items-center gap-2">
      <button
        type="button"
        disabled={pending}
        onClick={() => {
          if (!confirm(`Delete site "${siteId}"? This cannot be undone.`)) return;
          start(async () => {
            const res = await deleteSiteAction(siteId);
            if (!res.ok) setError(res.error);
          });
        }}
        className="px-2 py-1 rounded border border-destructive/30 text-xs text-destructive disabled:opacity-50"
      >
        {pending ? "Deleting…" : "Delete"}
      </button>
      {error && <span className="text-xs text-destructive">{error}</span>}
    </span>
  );
}

export function MigrateButton() {
  const [pending, start] = useTransition();
  const [error, setError] = useState<string | null>(null);
  return (
    <span className="flex items-center gap-2">
      <button
        type="button"
        disabled={pending}
        onClick={() =>
          start(async () => {
            const res = await migrateToSitesAction();
            if (!res.ok) setError(res.error);
          })
        }
        className="px-3 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 disabled:opacity-50"
      >
        {pending ? "Migrating…" : "Migrate existing settings into a site"}
      </button>
      {error && <span className="text-xs text-destructive">{error}</span>}
    </span>
  );
}