import { useState } from 'react';
import { useSuggestions } from '@/api/aiProactive';
import { SuggestionCard } from '@/components/ai/SuggestionCard';

interface SuggestionSidebarProps {
  isOpen: boolean;
  onClose: () => void;
}

const filterOptions = [
  { value: 'all', label: 'Alle' },
  { value: 'info', label: 'Info' },
  { value: 'warning', label: 'Warnung' },
  { value: 'action', label: 'Aktion' },
  { value: 'insight', label: 'Erkenntnis' },
];

/**
 * Inline suggestion list — no overlay/aside wrapper.
 * Used inside the AISidebar proactive tab.
 */
export function SuggestionList() {
  const { suggestions, connected, dismiss, act } = useSuggestions();
  const [filter, setFilter] = useState<string>('all');

  const filteredSuggestions = filter === 'all'
    ? suggestions
    : suggestions.filter(s => s.suggestion_type === filter);

  return (
    <div className="flex flex-col h-full" data-testid="suggestion-list">
      {/* Live indicator */}
      <div className="flex items-center gap-2 px-3 py-2 border-b border-secondary-100">
        {connected && (
          <span className="flex items-center gap-1 text-xs text-green-600">
            <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
            Live
          </span>
        )}
        <span className="text-xs text-secondary-400 ml-auto">
          {suggestions.length} Vorschläge
        </span>
      </div>

      {/* Filter */}
      <div className="flex gap-1 px-3 py-2 border-b border-secondary-100 overflow-x-auto">
        {filterOptions.map(opt => (
          <button
            key={opt.value}
            onClick={() => setFilter(opt.value)}
            className={`px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap transition-colors ${
              filter === opt.value
                ? 'bg-primary-500 text-white'
                : 'bg-secondary-100 text-secondary-600 hover:bg-secondary-200'
            }`}
          >
            {opt.label}
          </button>
        ))}
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto p-3">
        {filteredSuggestions.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-full text-secondary-400">
            <div className="text-4xl mb-3">🤖</div>
            <p className="text-sm">Keine Vorschläge vorhanden</p>
            <p className="text-xs mt-1">Die KI analysiert deinen Kontext...</p>
          </div>
        ) : (
          <div className="space-y-2">
            {filteredSuggestions.map(suggestion => (
              <SuggestionCard
                key={suggestion.id}
                suggestion={suggestion}
                onDismiss={dismiss}
                onAct={act}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

/**
 * Legacy overlay-based SuggestionSidebar — kept for backwards compat.
 * Uses SuggestionList internally.
 */
export function SuggestionSidebar({ isOpen, onClose }: SuggestionSidebarProps) {
  return (
    <>
      {/* Overlay */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-black/20 z-40 lg:hidden"
          onClick={onClose}
        />
      )}

      {/* Sidebar */}
      <aside
        className={`fixed right-0 top-0 h-full w-96 bg-white shadow-2xl z-50 transform transition-transform duration-300 flex flex-col ${
          isOpen ? 'translate-x-0' : 'translate-x-full'
        }`}
      >
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-gray-200">
          <div className="flex items-center gap-2">
            <h2 className="font-semibold text-gray-800">KI Vorschläge</h2>
          </div>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 transition-colors p-1"
          >
            ✕
          </button>
        </div>

        <SuggestionList />
      </aside>
    </>
  );
}
