import { useState } from 'react'
import { useNavigate } from '@tanstack/react-router'
import { Alert } from '@/components/ui/Alert'
import { Button } from '@/components/ui/Button'
import { Modal } from '@/components/ui/Modal'
import { TextField } from '@/components/ui/TextField'
import { toast } from '@/components/ui/toast'
import { errorMessage } from '@/lib/api'
import { defaultCopyName, useCopyGarden, type Garden } from '@/lib/gardens'

/**
 * Duplicate a garden under a new name. The name is prefilled with the server's
 * own default so what you see is what you get; the beds and everything currently
 * planted in them come along, while the source's share link and shares do not.
 * On success we land in the copy — the point of copying is to start editing it.
 */
export function CopyGardenModal({ garden, onClose }: { garden: Garden; onClose: () => void }) {
  const copy = useCopyGarden()
  const navigate = useNavigate()
  const [name, setName] = useState(() => defaultCopyName(garden.name))
  const [error, setError] = useState<string | null>(null)

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault()
    setError(null)
    try {
      const created = await copy.mutateAsync({ id: garden.id, name: name.trim() })
      toast.info(`Copied to “${created.name}”.`)
      onClose()
      navigate({ to: '/gardens/$gardenId', params: { gardenId: String(created.id) } })
    } catch (err) {
      setError(errorMessage(err, 'Could not copy the garden.'))
    }
  }

  return (
    <Modal title="Copy garden" onClose={onClose} busy={copy.isPending}>
      <form onSubmit={onSubmit} className="flex flex-col gap-4">
        <p className="text-sm text-muted">
          Make a copy of <span className="font-medium text-fg">{garden.name}</span> with its beds and
          everything planted in them. The copy is private — the original's share link and people you've
          shared it with aren't carried over.
        </p>
        <TextField
          label="Name"
          name="name"
          required
          autoFocus
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        {error && <Alert>{error}</Alert>}
        <div className="flex justify-end gap-2">
          <Button type="button" variant="ghost" onClick={onClose} disabled={copy.isPending}>
            Cancel
          </Button>
          <Button type="submit" disabled={copy.isPending || name.trim() === ''}>
            {copy.isPending ? 'Copying…' : 'Copy garden'}
          </Button>
        </div>
      </form>
    </Modal>
  )
}