Momento/memento-note/components/chat/chat-input.tsx

'use client'

import { useState, useRef, useEffect } from 'react'
import { Send, BookOpen, X, Globe, Square } from 'lucide-react'
import { getNotebookIcon } from '@/lib/notebook-icon'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { cn } from '@/lib/utils'
import { Badge } from '@/components/ui/badge'
import { useLanguage } from '@/lib/i18n'

interface ChatInputProps {
  onSend: (message: string, notebookId?: string) => void
  isLoading?: boolean
  onStop?: () => void
  notebooks: any[]
  currentNotebookId?: string | null
  webSearchEnabled?: boolean
  onToggleWebSearch?: () => void
  webSearchAvailable?: boolean
}

export function ChatInput({ onSend, isLoading, onStop, notebooks, currentNotebookId, webSearchEnabled, onToggleWebSearch, webSearchAvailable }: ChatInputProps) {
  const { t } = useLanguage()
  const [input, setInput] = useState('')
  const [selectedNotebook, setSelectedNotebook] = useState<string | undefined>(currentNotebookId || undefined)
  const textareaRef = useRef<HTMLTextAreaElement>(null)

  useEffect(() => {
    if (currentNotebookId) {
      setSelectedNotebook(currentNotebookId)
    }
  }, [currentNotebookId])

  const handleSend = () => {
    if (!input.trim() || isLoading) return
    onSend(input, selectedNotebook)
    setInput('')
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto'
    }
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleSend()
    }
  }

  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto'
      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`
    }
  }, [input])

  return (
    <div className="w-full relative">
      <div className="relative flex flex-col bg-muted/50 rounded-[24px] border border-border/60 shadow-sm focus-within:shadow-md focus-within:border-border transition-all duration-300 overflow-hidden">
        
        {/* Input Area */}
        <Textarea
          ref={textareaRef}
          placeholder={t('chat.placeholder')}
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={handleKeyDown}
          className="flex-1 min-h-[56px] max-h-[40vh] bg-transparent border-none focus-visible:ring-0 resize-none py-4 px-5 text-[15px] placeholder:text-slate-400"
        />
        
        {/* Bottom Actions Bar */}
        <div className="flex items-center justify-between px-3 pb-3 pt-1">
          {/* Context Selector */}
          <div className="flex items-center gap-2">
            <Select
              value={selectedNotebook || 'global'}
              onValueChange={(val) => setSelectedNotebook(val === 'global' ? undefined : val)}
            >
              <SelectTrigger className="h-8 w-auto min-w-[130px] rounded-full bg-background border-border/60 shadow-sm text-xs font-medium gap-2 ring-offset-transparent focus:ring-0 focus:ring-offset-0 hover:bg-muted/50 transition-colors">
                <BookOpen className="h-3.5 w-3.5 text-muted-foreground" />
                <SelectValue placeholder={t('chat.allNotebooks')} />
              </SelectTrigger>
              <SelectContent className="rounded-xl shadow-lg border-slate-200 dark:border-white/10">
                <SelectItem value="global" className="rounded-lg text-sm text-muted-foreground">{t('chat.inAllNotebooks')}</SelectItem>
                {notebooks.map((nb) => (
                  <SelectItem key={nb.id} value={nb.id} className="rounded-lg text-sm">
                    {(() => {
                      const Icon = getNotebookIcon(nb.icon)
                      return <Icon className="w-3.5 h-3.5" />
                    })()} {nb.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            {selectedNotebook && (
              <Badge variant="secondary" className="text-[10px] bg-primary/10 text-primary border-none rounded-full px-2.5 h-6 font-semibold tracking-wide">
                {t('chat.active')}
              </Badge>
            )}

            {webSearchAvailable && (
              <button
                type="button"
                onClick={onToggleWebSearch}
                className={cn(
                  "h-8 rounded-full border shadow-sm text-xs font-medium gap-1.5 flex items-center px-3 transition-all duration-200",
                    webSearchEnabled
                      ? "bg-primary/10 text-primary border-primary/30 hover:bg-primary/20"
                      : "bg-background border-border/60 text-muted-foreground hover:bg-muted/50"
                )}
              >
                <Globe className="h-3.5 w-3.5" />
                {webSearchEnabled && t('chat.webSearch')}
              </button>
            )}
          </div>

          {/* Send / Stop Button */}
          {isLoading && onStop ? (
            <Button
              onClick={onStop}
              size="icon"
              className="rounded-full h-8 w-8 bg-red-500 text-white shadow-sm hover:bg-red-600 transition-all duration-200"
            >
              <Square className="h-3.5 w-3.5" />
            </Button>
          ) : (
            <Button
              disabled={!input.trim() || isLoading}
              onClick={handleSend}
              size="icon"
              className={cn(
                "rounded-full h-8 w-8 transition-all duration-200",
                input.trim() ? "bg-primary text-primary-foreground shadow-sm hover:scale-105" : "bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-500"
              )}
            >
              <Send className="h-4 w-4 ml-0.5" />
            </Button>
          )}
        </div>
      </div>
      
      <div className="text-center mt-3">
        <span className="text-[11px] text-muted-foreground/60 w-full block">
          {t('chat.disclaimer')}
        </span>
      </div>
    </div>
  )
}