import { useState } from 'react';
import { useStatsQuery, useSetRunningMutation } from '../api/queries.js';
import { ConfirmationDialog } from '../components/confirmation-dialog.js';
import { useSyncStatusQuery } from '../features/operations/operations-queries.js';
import { useLoginStatusQuery } from '../features/settings/settings-queries.js';
import { useDashboardRealtime } from './realtime-provider.js';
import { deriveShellStatus } from './shell-status.js';
import './shell-status-panel.css';

export function ShellStatusPanel() {
  const stats = useStatsQuery();
  const reddit = useLoginStatusQuery();
  const sync = useSyncStatusQuery();
  const realtime = useDashboardRealtime();
  const control = useSetRunningMutation();
  const [confirming, setConfirming] = useState<'start' | 'stop' | null>(null);
  const status = deriveShellStatus({ stats: stats.data, reddit: reddit.data, sync: sync.data, realtime: realtime.connection });
  return <>
    <section aria-label="Platform status" className="shell-status">
      <strong>{status.bot}</strong><span>{status.reddit}</span><span>{status.realtime}</span><span>{status.sync}</span>
      {status.cooldown ? <span className="shell-warning">Cooldown: {status.cooldown}</span> : null}
      <button aria-label={`${status.controlAction === 'start' ? 'Start' : 'Stop'} bot from global status`} className={status.controlAction === 'start' ? 'button primary' : 'button danger'} disabled={status.controlDisabled || control.isPending} onClick={() => setConfirming(status.controlAction)} type="button">{status.controlAction === 'start' ? 'Start bot' : 'Stop bot'}</button>
    </section>
    {confirming ? <ConfirmationDialog action={confirming} isPending={control.isPending} onCancel={() => setConfirming(null)} onConfirm={() => control.mutate(confirming === 'start', { onSuccess: () => setConfirming(null) })} /> : null}
  </>;
}