'use client'

import { useState } from 'react'
import { Sparkles, X } from 'lucide-react'

import { cn } from '@/lib/utils'

import { ChatInput } from './chat-input'
import { ChatMessages } from './chat-messages'
import { useDocsChat } from './use-docs-chat'

/**
 * Floating chat widget for documentation assistant
 *
 * UI Specs (uit FO):
 * - Trigger button: 56x56px, amber gradient, Sparkles icon, fixed bottom-6 right-6
 * - Panel: 384px breed, max 80vh, slide-in animatie
 */
export function DocsChatWidget() {
  const [isOpen, setIsOpen] = useState(false)
  const { messages, isLoading, isStreaming, error, sendMessage, clearError } = useDocsChat()

  return (
    <>
      {/* Floating trigger button */}
      <button
        type="button"
        onClick={() => setIsOpen(true)}
        className={cn(
          'fixed bottom-6 right-6 z-50',
          'w-14 h-14 rounded-full',
          'bg-gradient-to-br from-amber-400 to-amber-600',
          'text-white shadow-lg',
          'flex items-center justify-center',
          'hover:from-amber-500 hover:to-amber-700',
          'hover:scale-105 hover:shadow-xl',
          'transition-all duration-200',
          'focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2',
          isOpen && 'scale-0 opacity-0'
        )}
        aria-label="Open documentatie assistent"
      >
        <Sparkles className="w-6 h-6" />
      </button>

      {/* Chat panel */}
      <div
        className={cn(
          'fixed bottom-6 right-6 z-50',
          'w-96 max-h-[80vh]',
          'bg-white rounded-2xl shadow-2xl',
          'flex flex-col overflow-hidden',
          'border border-slate-200',
          'transition-all duration-300 ease-out',
          isOpen
            ? 'opacity-100 translate-y-0 scale-100'
            : 'opacity-0 translate-y-4 scale-95 pointer-events-none'
        )}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-4 py-3 border-b border-slate-200 bg-gradient-to-r from-amber-50 to-amber-100/50">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center">
              <Sparkles className="w-4 h-4 text-white" />
            </div>
            <div>
              <h2 className="font-semibold text-slate-900 text-sm">
                Documentatie Assistent
              </h2>
              <p className="text-xs text-slate-500">
                Stel vragen over het EPD
              </p>
            </div>
          </div>
          <button
            type="button"
            onClick={() => setIsOpen(false)}
            className={cn(
              'w-8 h-8 rounded-lg',
              'flex items-center justify-center',
              'text-slate-400 hover:text-slate-600',
              'hover:bg-slate-100',
              'transition-colors duration-150'
            )}
            aria-label="Sluit chat"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Error banner */}
        {error && (
          <div className="px-4 py-2 bg-red-50 border-b border-red-100 flex items-center justify-between">
            <p className="text-sm text-red-600">{error}</p>
            <button
              type="button"
              onClick={clearError}
              className="text-red-400 hover:text-red-600 text-xs"
            >
              Sluiten
            </button>
          </div>
        )}

        {/* Messages */}
        <ChatMessages messages={messages} isStreaming={isStreaming} />

        {/* Input */}
        <ChatInput
          onSend={sendMessage}
          disabled={isLoading || isStreaming}
        />
      </div>
    </>
  )
}