// frontend/src/modals/manufacturing/DeleteDeviceModal.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 PROTECTED_STATUSES = ['sold', 'claimed']

export default function DeleteDeviceModal({ open, device, onClose, onDeleted }) {
  const [typed, setTyped]     = useState('')
  const [deleting, setDeleting] = useState(false)
  const [error, setError]     = useState('')

  if (!device) return null

  const isProtected = PROTECTED_STATUSES.includes(device.mfg_status)
  const confirmed   = !isProtected || typed === device.serial_number

  const handleClose = () => { setTyped(''); setError(''); onClose() }

  const handleDelete = async () => {
    setDeleting(true); setError('')
    try {
      await api.request(`/manufacturing/devices/${device.serial_number}`, { method: 'DELETE' })
      onDeleted(device.id)
      handleClose()
    } catch (err) {
      setError(err.message)
      setDeleting(false)
    }
  }

  return (
    <Modal
      open={open}
      onClose={handleClose}
      title={isProtected ? 'Delete Protected Device' : 'Delete Device'}
      size="sm"
      footer={
        <div style={{ display: 'flex', gap: 'var(--space-3)' }}>
          <Button variant="ghost" onClick={handleClose}>Cancel</Button>
          <Button variant="danger" onClick={handleDelete} loading={deleting} disabled={!confirmed}>
            Delete Device
          </Button>
        </div>
      }
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
        {isProtected ? (
          <>
            <p style={{ fontSize: 'var(--font-size-sm)', color: 'var(--color-text-secondary)' }}>
              This device has status <strong>{device.mfg_status}</strong> and is linked to a customer.
              Deleting it is irreversible and will remove all associated data.
            </p>
            <div style={{
              padding: 'var(--space-3)',
              backgroundColor: 'var(--color-bg-abyss)',
              borderRadius: 'var(--radius-md)',
              fontFamily: 'var(--font-family-mono)',
              fontSize: 'var(--font-size-sm)',
              color: 'var(--color-text-primary)',
              letterSpacing: '0.05em',
            }}>
              {device.serial_number}
            </div>
            <FormField
              label="Type the serial number to confirm"
              name="confirm_serial"
              type="text"
              value={typed}
              onChange={(e) => setTyped(e.target.value)}
              onPaste={(e) => e.preventDefault()}
              placeholder="Type serial number here…"
            />
          </>
        ) : (
          <p style={{ fontSize: 'var(--font-size-sm)', color: 'var(--color-text-secondary)' }}>
            Are you sure you want to delete{' '}
            <span style={{ fontFamily: 'var(--font-family-mono)', color: 'var(--color-text-primary)' }}>
              {device.serial_number}
            </span>?{' '}
            This cannot be undone.
          </p>
        )}

        {error && (
          <div style={{ padding: 'var(--space-3)', borderRadius: 'var(--radius-md)', backgroundColor: 'var(--color-danger-bg)', border: '1px solid var(--color-danger)', color: 'var(--color-danger)', fontSize: 'var(--font-size-sm)' }}>
            {error}
          </div>
        )}
      </div>
    </Modal>
  )
}
