import type { ConfigResponse } from '../../../../../packages/api-contracts/src/index.js';
import { SwitchField } from '../../components/form-fields.js';
import { SettingsCard } from './settings-card.js';
import { createSafetyDraft, safetyRisks, validateSafetyDraft, type SafetyDraft } from './settings-model.js';
import { useConfigCard } from './use-config-card.js';

export function SafetyCard({ config }: { config: ConfigResponse }) {
  const card = useConfigCard<SafetyDraft>(config, {
    id: 'safety',
    toDraft: createSafetyDraft,
    validate: validateSafetyDraft,
    risks: safetyRisks,
  });
  const isLive = !card.persisted.dryRun;

  return (
    <SettingsCard
      anchor="safety"
      card={card}
      description="The single switch that decides whether anything actually reaches Reddit."
      eyebrow="Send guard"
      saveLabel="Save safety"
      status={<span className={isLive ? 'pill danger' : 'pill success'}>{isLive ? 'Sending live' : 'Dry run'}</span>}
      title="Safety"
    >
      {/* State first: the operator should read what is happening now before
          being shown the control that changes it. */}
      <p className={isLive ? 'state-banner is-live' : 'state-banner is-safe'} role="status">
        <strong>{isLive ? 'Messages are being sent to real people.' : 'No messages are being sent.'}</strong>
        <span>
          {isLive
            ? 'Every evaluated post can produce a real outbound message, subject to the pacing limits.'
            : 'Posts are evaluated and replies are drafted, but nothing is delivered to Reddit.'}
        </span>
      </p>

      <SwitchField
        checked={card.draft.dryRun}
        description="Evaluate posts and draft messages without delivering anything. Turn this off only when you intend to send."
        label="Dry run mode"
        onChange={(dryRun) => card.update({ ...card.draft, dryRun })}
        tone="critical"
      />
    </SettingsCard>
  );
}