'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Sparkles, Lightbulb, Scissors, Wand2, FileText, ChevronDown, ChevronUp } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useLanguage } from '@/lib/i18n/LanguageProvider'

interface AIAssistantActionBarProps {
  onClarify?: () => void
  onShorten?: () => void
  onImprove?: () => void
  onTransformMarkdown?: () => void
  isMarkdownMode?: boolean
  disabled?: boolean
  className?: string
}

export function AIAssistantActionBar({
  onClarify,
  onShorten,
  onImprove,
  onTransformMarkdown,
  isMarkdownMode = false,
  disabled = false,
  className
}: AIAssistantActionBarProps) {
  const { t } = useLanguage()
  const [isExpanded, setIsExpanded] = useState(false)

  const handleAction = async (action: () => void) => {
    if (!disabled) {
      action()
    }
  }

  return (
    <div
      className={cn(
        'ai-action-bar',
        'bg-amber-50 dark:bg-amber-950/20',
        'border border-amber-200 dark:border-amber-800',
        'rounded-lg shadow-md',
        'transition-all duration-200',
        className
      )}
    >
      {/* Header with toggle */}
      <div
        className="flex items-center justify-between px-3 py-2 cursor-pointer select-none hover:bg-amber-100/50 dark:hover:bg-amber-900/30 transition-colors"
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <div className="flex items-center gap-2">
          <div className="p-1 bg-amber-100 dark:bg-amber-900/30 rounded-full">
            <Sparkles className="h-3.5 w-3.5 text-amber-600 dark:text-amber-400" />
          </div>
          <span className="text-xs font-semibold text-amber-700 dark:text-amber-300">
            {t('ai.assistant')}
          </span>
        </div>

        <Button
          variant="ghost"
          size="sm"
          className="h-5 w-5 p-0 hover:bg-amber-200/50 dark:hover:bg-amber-800/30"
          onClick={(e) => {
            e.stopPropagation()
            setIsExpanded(!isExpanded)
          }}
        >
          {isExpanded ? (
            <ChevronUp className="h-3 w-3 text-amber-600 dark:text-amber-400" />
          ) : (
            <ChevronDown className="h-3 w-3 text-amber-600 dark:text-amber-400" />
          )}
        </Button>
      </div>

      {/* Actions */}
      {isExpanded && (
        <div className="px-3 pb-3 flex flex-wrap gap-2">
          {/* Clarify */}
          {onClarify && (
            <Button
              variant="outline"
              size="sm"
              className="h-7 text-xs bg-white dark:bg-zinc-800 hover:bg-gray-50 dark:hover:bg-zinc-700 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-colors"
              onClick={() => handleAction(onClarify)}
              disabled={disabled}
            >
              <Lightbulb className="h-3 w-3 mr-1 text-amber-600 dark:text-amber-400" />
              {t('ai.clarify')}
            </Button>
          )}

          {/* Shorten */}
          {onShorten && (
            <Button
              variant="outline"
              size="sm"
              className="h-7 text-xs bg-white dark:bg-zinc-800 hover:bg-gray-50 dark:hover:bg-zinc-700 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-colors"
              onClick={() => handleAction(onShorten)}
              disabled={disabled}
            >
              <Scissors className="h-3 w-3 mr-1 text-blue-600 dark:text-blue-400" />
              {t('ai.shorten')}
            </Button>
          )}

          {/* Improve Style */}
          {onImprove && (
            <Button
              variant="outline"
              size="sm"
              className="h-7 text-xs bg-white dark:bg-zinc-800 hover:bg-gray-50 dark:hover:bg-zinc-700 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-colors"
              onClick={() => handleAction(onImprove)}
              disabled={disabled}
            >
              <Wand2 className="h-3 w-3 mr-1 text-purple-600 dark:text-purple-400" />
              {t('ai.improveStyle')}
            </Button>
          )}

          {/* Transform to Markdown */}
          {onTransformMarkdown && !isMarkdownMode && (
            <Button
              variant="outline"
              size="sm"
              className="h-7 text-xs bg-white dark:bg-zinc-800 hover:bg-emerald-50 dark:hover:bg-emerald-950/20 border-emerald-300 dark:border-emerald-700 hover:border-emerald-400 dark:hover:border-emerald-600 text-emerald-700 dark:text-emerald-400 transition-colors font-medium"
              onClick={() => handleAction(onTransformMarkdown)}
              disabled={disabled}
            >
              <FileText className="h-3 w-3 mr-1" />
              {t('ai.transformMarkdown') || 'Transformer en Markdown'}
            </Button>
          )}

          {/* Already in markdown mode indicator */}
          {isMarkdownMode && (
            <div className="h-7 px-2 text-xs flex items-center bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 rounded border border-emerald-200 dark:border-emerald-800 font-medium">
              <FileText className="h-3 w-3 mr-1" />
              Markdown
            </div>
          )}
        </div>
      )}
    </div>
  )
}