'use client';

import { useState } from 'react';
import { searchApi } from '@/lib/api';
import { motion } from 'framer-motion';
import { Search, MessageSquare, Users, FileText, Hash, Loader2, X } from 'lucide-react';
import toast from 'react-hot-toast';

export default function SearchPage() {
  const [query, setQuery] = useState('');
  const [type, setType] = useState('');
  const [results, setResults] = useState<any>(null);
  const [loading, setLoading] = useState(false);
  const [searched, setSearched] = useState(false);

  const handleSearch = async () => {
    if (query.length < 2) return;
    setLoading(true);
    setSearched(true);
    try {
      const { data } = await searchApi.search({ q: query, type: type || undefined });
      setResults(data);
    } catch {
      toast.error('Search failed');
    } finally {
      setLoading(false);
    }
  };

  const types = [
    { value: '', label: 'All', icon: Search },
    { value: 'messages', label: 'Messages', icon: MessageSquare },
    { value: 'users', label: 'Users', icon: Users },
    { value: 'files', label: 'Files', icon: FileText },
    { value: 'channels', label: 'Channels', icon: Hash },
  ];

  const totalResults = results
    ? Object.values(results).reduce((sum: number, arr: any) => sum + (arr?.length || 0), 0)
    : 0;

  return (
    <div className="h-full flex flex-col p-6">
      <div className="mb-6">
        <h1 className="text-2xl font-bold mb-1">Search</h1>
        <p className="text-sm text-vault-muted">Search across messages, files, users, and channels</p>
      </div>

      {/* Search bar */}
      <div className="flex items-center gap-3 mb-4">
        <div className="flex-1 flex items-center gap-3 glass rounded-xl px-4 py-3 max-w-2xl">
          <Search className="w-5 h-5 text-vault-muted" />
          <input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
            placeholder="Search anything..."
            className="flex-1 bg-transparent text-base text-vault-text placeholder-vault-muted/50 focus:outline-none"
            autoFocus
          />
          {query && (
            <button onClick={() => { setQuery(''); setResults(null); setSearched(false); }}>
              <X className="w-4 h-4 text-vault-muted hover:text-vault-text" />
            </button>
          )}
        </div>
        <button onClick={handleSearch} disabled={loading || query.length < 2} className="btn-primary py-3 px-6">
          {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Search'}
        </button>
      </div>

      {/* Type filter */}
      <div className="flex gap-2 mb-6">
        {types.map(t => (
          <button
            key={t.value}
            onClick={() => { setType(t.value); if (searched) handleSearch(); }}
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
              type === t.value ? 'bg-primary-500/20 text-primary-400' : 'text-vault-muted hover:text-vault-text'
            }`}
          >
            <t.icon className="w-3.5 h-3.5" />
            {t.label}
          </button>
        ))}
      </div>

      {/* Results */}
      <div className="flex-1 overflow-y-auto scrollbar-thin">
        {loading ? (
          <div className="flex items-center justify-center py-20">
            <Loader2 className="w-6 h-6 text-primary-500 animate-spin" />
          </div>
        ) : results ? (
          <>
            <p className="text-sm text-vault-muted mb-4">{totalResults} result(s) found</p>

            {results.messages?.length > 0 && (
              <div className="mb-6">
                <h3 className="text-sm font-semibold text-vault-text mb-3 flex items-center gap-2">
                  <MessageSquare className="w-4 h-4" /> Messages ({results.messages.length})
                </h3>
                <div className="space-y-1">
                  {results.messages.map((msg: any) => (
                    <div key={msg.id} className="glass-card p-3 hover:border-primary-500/20 transition-all cursor-pointer">
                      <div className="flex items-center gap-2 text-xs text-vault-muted mb-1">
                        <span className="font-medium text-vault-text">{msg.user?.displayName || msg.user?.username}</span>
                        <span>in</span>
                        <span className="text-primary-400">#{msg.channel?.name}</span>
                      </div>
                      <p className="text-sm line-clamp-2">{msg.content}</p>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {results.users?.length > 0 && (
              <div className="mb-6">
                <h3 className="text-sm font-semibold text-vault-text mb-3 flex items-center gap-2">
                  <Users className="w-4 h-4" /> Users ({results.users.length})
                </h3>
                <div className="flex flex-wrap gap-2">
                  {results.users.map((u: any) => (
                    <div key={u.id} className="glass-card px-3 py-2 flex items-center gap-2 cursor-pointer hover:border-primary-500/20">
                      <div className="w-7 h-7 rounded-full bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center text-white text-[10px] font-medium">
                        {u.displayName?.[0] || u.username?.[0]}
                      </div>
                      <div>
                        <p className="text-xs font-medium">{u.displayName || u.username}</p>
                        <p className="text-[10px] text-vault-muted">{u.role?.toLowerCase()}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {results.files?.length > 0 && (
              <div className="mb-6">
                <h3 className="text-sm font-semibold text-vault-text mb-3 flex items-center gap-2">
                  <FileText className="w-4 h-4" /> Files ({results.files.length})
                </h3>
                <div className="space-y-1">
                  {results.files.map((f: any) => (
                    <div key={f.id} className="glass-card p-3 flex items-center gap-3 cursor-pointer hover:border-primary-500/20">
                      <span className="text-lg">{f.category === 'image' ? '🖼️' : f.category === 'video' ? '🎬' : '📄'}</span>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium truncate">{f.originalName}</p>
                        <p className="text-[10px] text-vault-muted capitalize">{f.category}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {results.channels?.length > 0 && (
              <div className="mb-6">
                <h3 className="text-sm font-semibold text-vault-text mb-3 flex items-center gap-2">
                  <Hash className="w-4 h-4" /> Channels ({results.channels.length})
                </h3>
                <div className="flex flex-wrap gap-2">
                  {results.channels.map((ch: any) => (
                    <div key={ch.id} className="glass-card px-3 py-2 flex items-center gap-2 cursor-pointer hover:border-primary-500/20">
                      <Hash className="w-3.5 h-3.5 text-vault-muted" />
                      <span className="text-xs font-medium">{ch.name}</span>
                      <span className="text-[10px] text-vault-muted">{ch.category?.name}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {totalResults === 0 && (
              <div className="text-center py-20 text-vault-muted">
                <Search className="w-12 h-12 mx-auto mb-3 opacity-30" />
                <p>No results found for "{query}"</p>
              </div>
            )}
          </>
        ) : searched ? null : (
          <div className="text-center py-20 text-vault-muted">
            <Search className="w-16 h-16 mx-auto mb-4 opacity-20" />
            <p className="text-lg">Search across messages, files, users, and channels</p>
            <p className="text-sm mt-2">Use the search bar above to find anything</p>
          </div>
        )}
      </div>
    </div>
  );
}