import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import toast from 'react-hot-toast'
import client from '../../../api/client'

function Toggle({ checked, onChange, disabled }) {
  return (
    <button
      role="switch"
      aria-checked={checked}
      onClick={() => !disabled && onChange(!checked)}
      style={{
        width: 44, height: 24, borderRadius: 999, border: 'none', cursor: disabled ? 'not-allowed' : 'pointer',
        background: checked ? '#dc2626' : '#d1d5db',
        position: 'relative', transition: 'background 150ms', flexShrink: 0, opacity: disabled ? 0.5 : 1,
      }}
    >
      <span style={{
        position: 'absolute', top: 3, left: checked ? 23 : 3,
        width: 18, height: 18, borderRadius: '50%', background: 'white',
        transition: 'left 150ms', boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
      }} />
    </button>
  )
}

export default function DevelopmentTab() {
  const qc = useQueryClient()

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

  const mutation = useMutation({
    mutationFn: ({ key, value }) => client.put(`/api/settings/${key}`, { value }),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['settings'] }) },
    onError: () => toast.error('Failed to update setting'),
  })

  const spoofOn = settings?.['dev.spoof_printing']?.value === 'true'

  function toggleSpoof(val) {
    mutation.mutate({ key: 'dev.spoof_printing', value: val ? 'true' : 'false' })
    toast.success(val ? 'Spoof printing ON — printers are silenced' : 'Spoof printing OFF — printers active')
  }

  if (isLoading) return <p style={{ color: '#6b7280', fontSize: 14 }}>Loading…</p>

  return (
    <div style={{ maxWidth: 560 }}>
      <div style={{
        background: '#fef2f2', border: '1px solid #fca5a5',
        borderRadius: 10, padding: '12px 16px', marginBottom: 24,
        fontSize: 13, color: '#991b1b',
      }}>
        These settings are intended for testing only. Do not leave them enabled in production.
      </div>

      <div style={{
        background: 'white', border: '1px solid #e5e7eb',
        borderRadius: 10, padding: '16px 20px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
      }}>
        <div>
          <div style={{ fontWeight: 600, fontSize: 14, color: '#111827' }}>
            Spoof Printer Mode
          </div>
          <div style={{ fontSize: 13, color: '#6b7280', marginTop: 3 }}>
            All print jobs are silently dropped. Devices behave as if printing succeeded — no errors, nothing printed.
          </div>
        </div>
        <Toggle checked={spoofOn} onChange={toggleSpoof} disabled={mutation.isPending} />
      </div>

      {spoofOn && (
        <div style={{
          marginTop: 12, padding: '10px 14px',
          background: '#fff7ed', border: '1px solid #fed7aa',
          borderRadius: 8, fontSize: 13, color: '#92400e', fontWeight: 500,
        }}>
          Spoof mode is active — printers are silenced.
        </div>
      )}
    </div>
  )
}
