'use client';

import { useState, FormEvent } from 'react';
import { useRouter } from 'next/navigation';
import { PageTransition } from '@/components/page-transition';
import { Search, Shuffle } from 'lucide-react';

export default function Home() {
  const [query, setQuery] = useState('');
  const router = useRouter();

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

  return (
    <main className="min-h-screen flex flex-col items-center justify-center px-6">
      <div className="w-full max-w-xl text-center">
        <h1 className="text-5xl sm:text-6xl font-semibold tracking-tight text-foreground mb-3">
          Wiki<span className="text-neutral-400">+</span>
        </h1>

        <p className="text-muted-foreground mb-10">
          Search the encyclopedia
        </p>

        <form onSubmit={handleSearch} className="w-full mb-6">
          <div className="flex items-center w-full px-4 py-3 rounded-xl border border-border bg-card focus-within:border-neutral-400 transition-colors">
            <Search className="w-5 h-5 text-muted-foreground mr-3 flex-shrink-0" />
            <input
              type="text"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Search for anything..."
              className="flex-1 bg-transparent outline-none text-foreground placeholder:text-muted-foreground"
              autoFocus
            />
          </div>
        </form>

        <div className="flex gap-3 justify-center">
          <button
            type="button"
            onClick={handleSearch}
            className="px-5 py-2.5 text-sm font-medium bg-foreground text-background rounded-lg hover:opacity-90 transition-opacity"
          >
            Search
          </button>
          <PageTransition href="/random">
            <button
              type="button"
              className="px-5 py-2.5 text-sm font-medium text-muted-foreground border border-border rounded-lg hover:bg-accent hover:text-foreground transition-colors inline-flex items-center gap-2"
            >
              <Shuffle className="w-4 h-4" />
              Random
            </button>
          </PageTransition>
        </div>
      </div>
    </main>
  );
}