// frontend/src/modals/devices/EditLoggingModal.jsx
import { useState } from 'react'
import Modal from '@/components/ui/Modal'
import Button from '@/components/ui/Button'
import FormField from '@/components/ui/FormField'
import api from '@/lib/api'

const LOG_LEVELS = [
  { value: '0', label: '(0) Disabled' },
  { value: '1', label: '(1) Error' },
  { value: '2', label: '(2) Warning' },
  { value: '3', label: '(3) Info' },
  { value: '4', label: '(4) Debug' },
  { value: '5', label: '(5) Verbose' },
]

export default function EditLoggingModal({ open, onClose, onSaved, attr, id }) {
  const [serialLevel, setSerialLevel] = useState(String(attr?.serialLogLevel ?? 0))
  const [sdLevel, setSdLevel] = useState(String(attr?.sdLogLevel ?? 0))
  const [mqttLevel, setMqttLevel] = useState(String(attr?.mqttLogLevel ?? 0))
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState('')

  const handleSave = async () => {
    setSaving(true)
    setError('')
    try {
      await api.put(`/devices/${id}`, {
        device_attributes: {
          serialLogLevel: Number(serialLevel),
          sdLogLevel: Number(sdLevel),
          mqttLogLevel: Number(mqttLevel),
        },
      })
      await onSaved()
      onClose()
    } catch (err) {
      setError(err.message || 'Failed to save.')
    } finally {
      setSaving(false)
    }
  }

  return (
    <Modal
      open={open}
      onClose={onClose}
      title="Edit Log Levels"
      size="sm"
      footer={
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 'var(--space-3)' }}>
          <Button variant="ghost" onClick={onClose}>Cancel</Button>
          <Button variant="primary" loading={saving} onClick={handleSave}>Save</Button>
        </div>
      }
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
        <FormField
          label="Serial Log Level"
          name="serialLevel"
          type="select"
          value={serialLevel}
          onChange={(e) => setSerialLevel(e.target.value)}
        >
          {LOG_LEVELS.map((l) => (
            <option key={l.value} value={l.value}>{l.label}</option>
          ))}
        </FormField>
        <FormField
          label="SD Card Log Level"
          name="sdLevel"
          type="select"
          value={sdLevel}
          onChange={(e) => setSdLevel(e.target.value)}
        >
          {LOG_LEVELS.map((l) => (
            <option key={l.value} value={l.value}>{l.label}</option>
          ))}
        </FormField>
        <FormField
          label="MQTT Log Level"
          name="mqttLevel"
          type="select"
          value={mqttLevel}
          onChange={(e) => setMqttLevel(e.target.value)}
        >
          {LOG_LEVELS.map((l) => (
            <option key={l.value} value={l.value}>{l.label}</option>
          ))}
        </FormField>
        {error && (
          <p style={{ fontSize: 'var(--font-size-sm)', color: 'var(--color-danger)' }}>{error}</p>
        )}
      </div>
    </Modal>
  )
}