import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { useToast } from '@/context/ToastContext';
import styles from './SettingsPage.module.css';

export default function SettingsPage() {
  const queryClient = useQueryClient();
  const { addToast } = useToast();

  const { data: settings, isLoading } = useQuery({
    queryKey: ['settings'],
    queryFn: () => api.settings.get(),
  });

  const mutation = useMutation({
    mutationFn: (newVal: boolean) => api.settings.update({ allowRequesterChat: newVal }),
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: ['settings'] });
      addToast('Configuração atualizada com sucesso', 'success');
    },
    onError: (err: any) => {
      addToast(`Erro ao atualizar: ${err.message}`, 'error');
    }
  });

  if (isLoading) {
    return (
      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
        <div className="spinner" /> Carregando configurações...
      </div>
    );
  }

  return (
    <div className={styles.page}>
      <div className={styles.header}>
        <h2 className={styles.heading}>Configurações do Sistema</h2>
        <p className={styles.subheading}>Gerencie as preferências globais da plataforma de chamados.</p>
      </div>

      <div className={styles.card}>
        <div className={styles.settingRow}>
          <div className={styles.settingInfo}>
            <h3 className={styles.settingTitle}>Chat de Solicitantes</h3>
            <p className={styles.settingDesc}>
              Se ativado, usuários padrão (requesters) poderão enviar e receber mensagens dentro dos chamados. Se desativado, apenas agentes e administradores poderão interagir no chat.
            </p>
          </div>
          
          <label className={styles.switch}>
            <input 
              type="checkbox" 
              checked={settings?.allowRequesterChat ?? true} 
              disabled={mutation.isPending}
              onChange={(e) => mutation.mutate(e.target.checked)}
            />
            <span className={styles.slider}></span>
          </label>
        </div>
      </div>
    </div>
  );
}