'use client'

import React, { useState } from 'react'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog'
import { Lightbulb } from 'lucide-react'

interface ManualIdeaDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSubmit: (title: string, description?: string) => void
  isLoading?: boolean
  parentIdeaTitle?: string | null
  t: (key: string) => string | undefined
}

export function ManualIdeaDialog({
  open,
  onOpenChange,
  onSubmit,
  isLoading,
  parentIdeaTitle,
  t,
}: ManualIdeaDialogProps) {
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!title.trim()) return
    onSubmit(title.trim(), description.trim() || undefined)
    setTitle('')
    setDescription('')
    onOpenChange(false)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md bg-white dark:bg-[#1A1A1A] border-border rounded-2xl">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-foreground">
            <div className="w-7 h-7 rounded-lg bg-brand-accent/10 flex items-center justify-center">
              <Lightbulb size={14} className="text-brand-accent" />
            </div>
            <span className="font-serif">{t('brainstorm.addIdea') || 'Add an idea'}</span>
          </DialogTitle>
          <DialogDescription className="text-muted-foreground text-xs">
            {parentIdeaTitle
              ? `${t('brainstorm.respondsTo') || 'Responds to'} « ${parentIdeaTitle.length > 40 ? parentIdeaTitle.substring(0, 40) + '…' : parentIdeaTitle} »`
              : (t('brainstorm.manualIdeaDesc') || 'Share your idea with the brainstorm canvas')
            }
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4 mt-2">
          <div>
            <label className="text-[10px] font-bold uppercase tracking-[0.15em] text-muted-foreground mb-1.5 block">
              {t('brainstorm.manualIdeaTitle') || 'Title'}
            </label>
            <input
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder={t('brainstorm.manualIdeaTitlePlaceholder') || 'Your idea in a few words...'}
              className="w-full px-4 py-3 text-sm border border-border rounded-xl bg-transparent focus:outline-none focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/40 transition-all font-serif"
              autoFocus
            />
          </div>
          <div>
            <label className="text-[10px] font-bold uppercase tracking-[0.15em] text-muted-foreground mb-1.5 block">
              {t('brainstorm.manualIdeaDescLabel') || 'Description (optional)'}
            </label>
            <textarea
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder={t('brainstorm.manualIdeaDescPlaceholder') || 'Elaborate on your idea...'}
              className="w-full h-24 px-4 py-3 text-sm border border-border rounded-xl bg-transparent focus:outline-none focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/40 resize-none transition-all"
            />
          </div>
          <div className="flex justify-end gap-2 pt-2">
            <button
              type="button"
              onClick={() => onOpenChange(false)}
              className="px-4 py-2 text-[10px] font-bold uppercase tracking-[0.15em] text-muted-foreground hover:text-foreground rounded-xl hover:bg-foreground/5 transition-all"
            >
              {t('brainstorm.cancel') || 'Cancel'}
            </button>
            <button
              type="submit"
              disabled={!title.trim() || isLoading}
              className="px-5 py-2.5 bg-brand-accent hover:bg-brand-accent text-white text-[10px] font-bold uppercase tracking-[0.15em] rounded-xl disabled:opacity-50 transition-all flex items-center gap-1.5"
            >
              <Lightbulb size={12} />
              {isLoading ? (t('brainstorm.adding') || 'Adding...') : (t('brainstorm.addIdea') || 'Add idea')}
            </button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}