'use client'

import { useState, useEffect } from 'react'
import { useLanguage } from '@/lib/i18n'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { useNotebooks } from '@/context/notebooks-context'
import { Notebook } from '@/lib/types'

interface EditNotebookDialogProps {
  notebook: Notebook
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function EditNotebookDialog({ notebook, open, onOpenChange }: EditNotebookDialogProps) {
  const { updateNotebook } = useNotebooks()
  const { t } = useLanguage()
  const [name, setName] = useState(notebook?.name || '')
  const [isSubmitting, setIsSubmitting] = useState(false)

  useEffect(() => {
    if (open) {
      setName(notebook?.name || '')
    }
  }, [open, notebook?.name])

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!name.trim()) return
    setIsSubmitting(true)
    try {
      await updateNotebook(notebook.id, { name: name.trim() })
      onOpenChange(false)
    } catch {
      // Error handled in UI
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>{t('notebook.edit')}</DialogTitle>
          <DialogDescription>
            {t('notebook.editDescription')}
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit}>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="name" className="text-right">
                {t('notebook.name')}
              </Label>
              <Input
                id="name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder={t('notebook.myNotebook')}
                className="col-span-3"
                autoFocus
              />
            </div>
          </div>
          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={() => onOpenChange(false)}
            >
              {t('general.cancel')}
            </Button>
            <Button
              type="submit"
              disabled={!name.trim() || isSubmitting}
            >
              {isSubmitting ? t('notebook.saving') : t('general.confirm')}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}