'use client';

import { useSearchParams, useRouter } from 'next/navigation';
import { useState, useEffect, useRef, FormEvent, Suspense } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { Search, ArrowLeft, FileText } from 'lucide-react';

interface SearchResult {
  title: string;
  description: string;
  thumbnail?: string;
}

function SearchContent() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const initialQuery = searchParams.get('query') || '';

  const [query, setQuery] = useState(initialQuery);
  const [results, setResults] = useState<SearchResult[]>([]);
  const [loading, setLoading] = useState(false);
  const [searched, setSearched] = useState(false);
  const lastSearchedQuery = useRef<string | null>(null);

  useEffect(() => {
    if (initialQuery && initialQuery !== lastSearchedQuery.current) {
      lastSearchedQuery.current = initialQuery;
      performSearch(initialQuery);
    }
  }, [initialQuery]);

  const performSearch = async (searchQuery: string) => {
    if (!searchQuery.trim()) return;

    setLoading(true);
    setSearched(true);

    try {
      const response = await fetch(`/api/search?query=${encodeURIComponent(searchQuery)}`);
      const data = await response.json();
      setResults(data.results || []);
    } catch (error) {
      console.error('Search failed:', error);
      setResults([]);
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = (e: FormEvent) => {
    e.preventDefault();
    if (query.trim()) {
      router.push(`/search?query=${encodeURIComponent(query.trim())}`);
    }
  };

  return (
    <main className="min-h-screen bg-background">
      {/* Clean header */}
      <header className="sticky top-0 z-10 bg-background/95 backdrop-blur-md border-b border-border/50">
        <div className="max-w-3xl mx-auto px-6 py-4">
          <div className="flex items-center gap-4">
            <Link
              href="/"
              className="p-2 -ml-2 text-muted-foreground hover:text-foreground transition-colors rounded-lg hover:bg-muted/50"
              aria-label="Back to home"
            >
              <ArrowLeft className="w-5 h-5" />
            </Link>

            <form onSubmit={handleSearch} className="flex-1">
              <div className="flex items-center w-full px-4 py-2.5 rounded-xl border border-border/60 bg-muted/30 hover:bg-muted/50 focus-within:bg-background focus-within:border-foreground/20 focus-within:ring-1 focus-within:ring-foreground/10 transition-all">
                <Search className="w-4 h-4 text-muted-foreground mr-3 flex-shrink-0" />
                <input
                  type="text"
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  placeholder="Search Wikipedia..."
                  className="flex-1 bg-transparent outline-none text-foreground placeholder:text-muted-foreground/70 text-[15px]"
                  autoFocus
                />
                {query && (
                  <button
                    type="button"
                    onClick={() => setQuery('')}
                    className="ml-2 text-muted-foreground hover:text-foreground transition-colors text-sm"
                  >
                    Clear
                  </button>
                )}
              </div>
            </form>
          </div>
        </div>
      </header>

      {/* Results area */}
      <div className="max-w-3xl mx-auto px-6 py-8">
        {loading ? (
          <div className="space-y-6">
            {[...Array(5)].map((_, i) => (
              <div
                key={i}
                className="flex gap-4 animate-pulse"
                style={{ animationDelay: `${i * 100}ms` }}
              >
                <div className="w-20 h-20 rounded-lg bg-muted/60 shrink-0" />
                <div className="flex-1 py-1">
                  <div className="h-5 bg-muted/60 rounded-md w-2/5 mb-3" />
                  <div className="h-4 bg-muted/40 rounded-md w-4/5 mb-2" />
                  <div className="h-4 bg-muted/40 rounded-md w-3/5" />
                </div>
              </div>
            ))}
          </div>
        ) : results.length > 0 ? (
          <div>
            <p className="text-sm text-muted-foreground mb-6">
              {results.length} result{results.length !== 1 ? 's' : ''} for <span className="text-foreground font-medium">"{initialQuery}"</span>
            </p>
            <div className="space-y-2">
              {results.map((result, index) => (
                <Link
                  key={result.title}
                  href={`/article/${encodeURIComponent(result.title.replace(/ /g, '_'))}`}
                  className="group block p-4 -mx-4 rounded-xl hover:bg-muted/40 active:bg-muted/60 transition-all duration-200"
                  style={{
                    animation: 'searchResultFadeIn 0.3s ease-out forwards',
                    animationDelay: `${index * 50}ms`,
                    opacity: 0
                  }}
                >
                  <div className="flex gap-4">
                    {result.thumbnail ? (
                      <div className="relative w-20 h-20 rounded-lg overflow-hidden bg-muted shrink-0 ring-1 ring-border/50">
                        <Image
                          src={result.thumbnail.startsWith('//') ? `https:${result.thumbnail}` : result.thumbnail}
                          alt=""
                          fill
                          className="object-cover group-hover:scale-105 transition-transform duration-300"
                        />
                      </div>
                    ) : (
                      <div className="w-20 h-20 rounded-lg bg-muted/50 shrink-0 flex items-center justify-center ring-1 ring-border/30">
                        <FileText className="w-6 h-6 text-muted-foreground/50" />
                      </div>
                    )}
                    <div className="flex-1 min-w-0 py-0.5">
                      <h2 className="text-[17px] font-medium text-foreground group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors leading-snug">
                        {result.title}
                      </h2>
                      {result.description && (
                        <p className="text-[14px] text-muted-foreground line-clamp-2 mt-1.5 leading-relaxed">
                          {result.description}
                        </p>
                      )}
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        ) : searched ? (
          <div className="text-center py-16">
            <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-muted/50 flex items-center justify-center">
              <Search className="w-7 h-7 text-muted-foreground/50" />
            </div>
            <p className="text-muted-foreground">
              No results found for <span className="text-foreground font-medium">"{initialQuery}"</span>
            </p>
            <p className="text-sm text-muted-foreground/70 mt-2">
              Try different keywords or check the spelling
            </p>
          </div>
        ) : (
          <div className="text-center py-16">
            <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-muted/50 flex items-center justify-center">
              <Search className="w-7 h-7 text-muted-foreground/50" />
            </div>
            <p className="text-muted-foreground">
              Enter a search term to find articles
            </p>
          </div>
        )}
      </div>

      <style jsx>{`
        @keyframes searchResultFadeIn {
          from {
            opacity: 0;
            transform: translateY(8px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
      `}</style>
    </main>
  );
}

export default function SearchPage() {
  return (
    <Suspense fallback={
      <main className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-muted-foreground">
          <div className="w-8 h-8 border-2 border-muted-foreground/30 border-t-muted-foreground rounded-full animate-spin mx-auto mb-3" />
          <span className="text-sm">Loading...</span>
        </div>
      </main>
    }>
      <SearchContent />
    </Suspense>
  );
}