import { useState } from 'react'
import { Modal } from '@/components/ui/Modal'
import { Alert } from '@/components/ui/Alert'
import { Button } from '@/components/ui/Button'
import { errorMessage } from '@/lib/api'
import { useDeletePlant, type Plant } from '@/lib/plants'

/**
 * Confirmation dialog for deleting a custom plant. A plant still used by
 * plantings is refused by the server (409 PLANT_IN_USE); we surface that
 * message inline rather than pretending it worked.
 */
export function DeletePlantModal({ plant, onClose }: { plant: Plant; onClose: () => void }) {
  const deletion = useDeletePlant()
  const [error, setError] = useState<string | null>(null)

  async function onConfirm() {
    setError(null)
    try {
      await deletion.mutateAsync(plant.id)
      onClose()
    } catch (err) {
      setError(errorMessage(err, 'Could not delete the plant.'))
    }
  }

  return (
    <Modal title="Delete plant" onClose={onClose} busy={deletion.isPending}>
      <div className="flex flex-col gap-4">
        <p className="text-sm text-muted">
          Delete <span className="font-medium text-fg">{plant.name}</span> from your catalog? This can't be
          undone.
        </p>
        {error && <Alert>{error}</Alert>}
        <div className="flex justify-end gap-2">
          <Button type="button" variant="ghost" onClick={onClose} disabled={deletion.isPending}>
            Cancel
          </Button>
          <Button type="button" variant="danger" onClick={onConfirm} disabled={deletion.isPending}>
            {deletion.isPending ? 'Deleting…' : 'Delete'}
          </Button>
        </div>
      </div>
    </Modal>
  )
}