import { Search as SearchIcon, Settings } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { SearchInput } from "@/components/SearchInput";
import { CategoryTabs } from "@/components/CategoryTabs";
import { ResultCard } from "@/components/ResultCard";
import { ResultSkeleton } from "@/components/ResultSkeleton";
import { useSearch } from "@/hooks/use-search";

const Index = () => {
  const { query, results, isLoading, hasSearched, activeCategory, filteredResults, search, setCategory, setQuery, reset } = useSearch();
  const navigate = useNavigate();

  const settingsButton = (
    <button
      onClick={() => navigate("/preferences")}
      className="p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
      aria-label="Preferences"
    >
      <Settings size={18} />
    </button>
  );

  // Home state
  if (!hasSearched) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen px-4 relative">
        <div className="absolute top-4 right-4">{settingsButton}</div>
        <button onClick={reset} className="mb-8 flex items-center gap-2 group">
          <SearchIcon size={28} className="text-primary" />
          <h1 className="text-3xl font-mono font-bold text-foreground tracking-tight">kafka</h1>
        </button>
        <SearchInput query={query} onQueryChange={setQuery} onSearch={search} autoFocus />
        <p className="mt-6 text-sm text-muted-foreground">Private meta-search, powered by open source.</p>
      </div>
    );
  }

  // Results state
  return (
    <div className="min-h-screen flex flex-col">
      <header className="sticky top-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border">
        <div className="max-w-3xl mx-auto px-4 py-3 flex items-center gap-4">
          <button onClick={reset} className="flex items-center gap-1.5 shrink-0 group">
            <SearchIcon size={18} className="text-primary" />
            <span className="font-mono font-bold text-foreground text-lg tracking-tight">kafka</span>
          </button>
          <SearchInput query={query} onQueryChange={setQuery} onSearch={search} compact />
          <div className="shrink-0">{settingsButton}</div>
        </div>
        <div className="max-w-3xl mx-auto px-4 pb-2">
          <CategoryTabs active={activeCategory} onChange={setCategory} />
        </div>
      </header>

      <main className="flex-1 max-w-3xl mx-auto w-full px-4 py-6">
        {isLoading ? (
          <ResultSkeleton />
        ) : filteredResults && filteredResults.length > 0 ? (
          <>
            <p className="text-xs text-muted-foreground mb-4">
              About {results?.number_of_results} results for "<span className="font-medium text-foreground">{results?.query}</span>"
            </p>
            <div className="space-y-1">
              {filteredResults.map((result, i) => (
                <ResultCard key={`${result.url}-${i}`} result={result} />
              ))}
            </div>
            {results?.suggestions && results.suggestions.length > 0 && (
              <div className="mt-8 pt-6 border-t border-border">
                <p className="text-xs text-muted-foreground mb-2">Related searches</p>
                <div className="flex flex-wrap gap-2">
                  {results.suggestions.map((s) => (
                    <button
                      key={s}
                      onClick={() => { setQuery(s); search(s); }}
                      className="text-sm px-3 py-1.5 rounded-md bg-secondary text-secondary-foreground hover:bg-secondary/80 transition-colors"
                    >
                      {s}
                    </button>
                  ))}
                </div>
              </div>
            )}
          </>
        ) : (
          <p className="text-muted-foreground text-center py-12">No results found for this category.</p>
        )}
      </main>
    </div>
  );
};

export default Index;