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('Σφάλμα αποθήκευσης'),
  })

  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 mode ενεργό — εκτυπωτές σιωπηλοί' : 'Spoof mode ανενεργό — εκτυπωτές ενεργοί')
  }

  if (isLoading) return <div className="flex items-center justify-center h-48 text-gray-400 text-sm">Φόρτωση…</div>

  return (
    <div className="space-y-4">
      <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-xs text-red-800">
        Αυτές οι ρυθμίσεις προορίζονται μόνο για δοκιμές. Μην τις αφήνετε ενεργές σε παραγωγικό περιβάλλον.
      </div>

      <div className="card divide-y divide-gray-100">
        <div className="flex items-center justify-between gap-4 px-5 py-4">
          <div>
            <p className="font-semibold text-gray-700">Spoof Printer Mode</p>
            <p className="text-xs text-gray-400 mt-0.5">
              Όλες οι εκτυπώσεις απορρίπτονται αθόρυβα. Οι συσκευές συμπεριφέρονται σαν η εκτύπωση να πέτυχε.
            </p>
          </div>
          <Toggle checked={spoofOn} onChange={toggleSpoof} disabled={mutation.isPending} />
        </div>
      </div>

      {spoofOn && (
        <div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-800 font-medium">
          Spoof mode ενεργό — οι εκτυπωτές είναι σιωπηλοί.
        </div>
      )}
    </div>
  )
}
