'use client'

import React, { useState } from 'react'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Sparkles } from 'lucide-react'
import { useLanguage } from '@/lib/i18n'

interface BrainstormCreateDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSubmit: (seedIdea: string) => void
  isLoading?: boolean
}

export function BrainstormCreateDialog({
  open,
  onOpenChange,
  onSubmit,
  isLoading,
}: BrainstormCreateDialogProps) {
  const { t } = useLanguage()
  const [seedIdea, setSeedIdea] = useState('')

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!seedIdea.trim()) return
    onSubmit(seedIdea.trim())
    setSeedIdea('')
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md bg-white dark:bg-zinc-900 border-border">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Sparkles size={18} className="text-orange-500" />
            {t('brainstorm.newBrainstorm')}
          </DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="text-xs text-muted-foreground uppercase tracking-wider mb-1 block">
              {t('brainstorm.seedLabel')}
            </label>
            <textarea
              value={seedIdea}
              onChange={(e) => setSeedIdea(e.target.value)}
              placeholder={t('brainstorm.ideaPromptDetailed')}
              className="w-full h-28 px-3 py-2 text-sm border border-border rounded-lg bg-transparent focus:outline-none focus:ring-2 focus:ring-orange-500/30 resize-none"
              autoFocus
            />
          </div>
          <div className="flex justify-end gap-2">
            <Button
              type="button"
              variant="outline"
              onClick={() => onOpenChange(false)}
            >
              {t('brainstorm.cancel')}
            </Button>
            <Button
              type="submit"
              disabled={!seedIdea.trim() || isLoading}
              className="bg-orange-600 hover:bg-orange-700 text-white"
            >
              {isLoading ? (
                <>
                  <Sparkles size={14} className="mr-1 animate-spin" />
                  {t('brainstorm.generating')}
                </>
              ) : (
                <>
                  <Sparkles size={14} className="mr-1" />
                  {t('brainstorm.startBrainstorm')}
                </>
              )}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}