import { ActionRunner } from "../components/actions/ActionRunner";
import { useAdminActions } from "../hooks/useAdminActions";

export function ActionCenterPage() {
  const {
    actions,
    error,
    isLoading,
    isRunning,
    resultMessage,
    runAction,
    selectedActionId,
    setError,
    setResultMessage,
    setSelectedActionId,
  } = useAdminActions();

  return (
    <div className="space-y-6">
      <section className="rounded-[2rem] border border-border bg-[linear-gradient(135deg,rgba(255,245,245,0.95),rgba(245,236,228,0.98))] p-8">
        <p className="text-xs uppercase tracking-[0.25em] text-foreground/55">Actions</p>
        <h1 className="mt-3 text-4xl font-semibold">Action Center</h1>
        <p className="mt-4 max-w-2xl text-sm text-foreground/70">
          Run guarded production actions with explicit operator input and audit logging.
        </p>
      </section>

      {isLoading ? <p>Loading actions...</p> : null}

      {!isLoading ? (
        <ActionRunner
          actions={actions}
          error={error}
          isRunning={isRunning}
          onRun={runAction}
          onSelectActionId={(actionId) => {
            setSelectedActionId(actionId);
            setError(null);
            setResultMessage(null);
          }}
          resultMessage={resultMessage}
          selectedActionId={selectedActionId}
        />
      ) : null}
    </div>
  );
}
