import { useState } from 'react';
import { Badge } from '#/components/atoms/badge.jsx';
import { Button } from '#/components/atoms/button.jsx';
import { Heading } from '#/components/atoms/heading.jsx';
import { Panel } from '#/components/atoms/panel.jsx';
import { ErrorNotice } from '#/components/molecules/error-notice.jsx';
import { post } from '#/lib/api.js';
import { queryKeys, useApiMutation } from '#/lib/query.js';

export function AccountStatusCard({ status, readOnly }) {
  const [active, setActive] = useState(status === 'active');
  const action = useApiMutation([queryKeys.identity, queryKeys.overview]);

  const toggle = () =>
    action.run(async () => {
      await post('/status', { action: active ? 'deactivate' : 'activate' });
      setActive((value) => !value);
    });

  return (
    <Panel>
      <div className="flex items-center gap-3">
        <Heading>Account status</Heading>
        <div className="flex-1" />
        <Badge
          className={
            active
              ? 'border-success/30 bg-success-dim px-2.5 py-1 text-[11.5px] text-success'
              : 'border-destructive/30 bg-destructive-dim px-2.5 py-1 text-[11.5px] text-destructive'
          }
        >
          {active ? 'active' : 'paused'}
        </Badge>
      </div>
      <p className="mt-3 text-[13px] text-muted-foreground leading-relaxed">
        {active
          ? 'Apps can read and write your data. Pausing hides everything from the network without deleting it, and you can turn it back on any time.'
          : 'Your account is hidden from every app and from the network. Nothing has been deleted.'}
      </p>
      <ErrorNotice error={action.error} className="mt-3" />
      {!readOnly && (
        <Button
          variant={active ? 'outline' : 'default'}
          size="block"
          className="mt-4"
          disabled={action.busy}
          onClick={toggle}
        >
          {active ? 'Pause my account' : 'Turn my account back on'}
        </Button>
      )}
    </Panel>
  );
}