'use client'

import { useState } from 'react'
import { emojiCategories } from '@/lib/MessagesContext'

interface EmojiPickerProps {
  onSelect: (emoji: string) => void
  onClose: () => void
  isDark: boolean
}

export function EmojiPicker({ onSelect, onClose, isDark }: EmojiPickerProps) {
  const [activeCategory, setActiveCategory] = useState('Häufig')

  return (
    <div className={`absolute bottom-full left-0 mb-2 w-80 rounded-2xl border shadow-2xl overflow-hidden z-50 ${
      isDark
        ? 'bg-slate-900 border-white/20'
        : 'bg-white border-slate-200'
    }`}>
      {/* Header */}
      <div className={`flex items-center justify-between p-3 border-b ${
        isDark ? 'border-white/10' : 'border-slate-100'
      }`}>
        <span className={`text-sm font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
          Emoji
        </span>
        <button
          onClick={onClose}
          className={`p-1 rounded-lg transition-colors ${
            isDark ? 'hover:bg-white/10 text-white/60' : 'hover:bg-slate-100 text-slate-400'
          }`}
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      {/* Category Tabs */}
      <div className={`flex overflow-x-auto border-b scrollbar-hide ${
        isDark ? 'border-white/10' : 'border-slate-100'
      }`}>
        {Object.keys(emojiCategories).map(cat => (
          <button
            key={cat}
            onClick={() => setActiveCategory(cat)}
            className={`px-3 py-2 text-xs font-medium whitespace-nowrap transition-colors ${
              activeCategory === cat
                ? isDark
                  ? 'text-green-400 border-b-2 border-green-400'
                  : 'text-green-600 border-b-2 border-green-600'
                : isDark
                  ? 'text-white/60 hover:text-white'
                  : 'text-slate-500 hover:text-slate-900'
            }`}
          >
            {cat}
          </button>
        ))}
      </div>

      {/* Emoji Grid */}
      <div className="p-3 max-h-48 overflow-y-auto">
        <div className="grid grid-cols-8 gap-1">
          {emojiCategories[activeCategory as keyof typeof emojiCategories].map((emoji, i) => (
            <button
              key={i}
              onClick={() => onSelect(emoji)}
              className={`w-8 h-8 flex items-center justify-center text-xl rounded-lg transition-colors ${
                isDark ? 'hover:bg-white/10' : 'hover:bg-slate-100'
              }`}
            >
              {emoji}
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}