import React, { useState } from 'react';
import { Search, Home, BookOpen } from 'lucide-react';
import { Container, Pill } from '../components/Ui';

interface NotFoundPageProps {
  onNavigate: (path: string) => void;
  onSearch: (query: string) => void;
  message?: string;
}

export function NotFoundPage({
  onNavigate,
  onSearch,
  message = "We couldn't find that page.",
}: NotFoundPageProps) {
  const [query, setQuery] = useState('');

  const handleSearchSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (query.trim()) {
      onSearch(query.trim());
      onNavigate(`/programmes?q=${encodeURIComponent(query.trim())}`);
    }
  };

  return (
    <div className="min-h-[70vh] flex items-center justify-center py-16 px-4">
      <div className="max-w-xl w-full bg-card rounded-3xl p-8 sm:p-12 border border-border shadow-xs text-center space-y-6">
        <span className="inline-block font-mono text-xs font-bold bg-accent text-accent-foreground px-3 py-1 rounded-full">
          404 · NOT FOUND
        </span>

        <div>
          <h1 className="text-4xl font-bold leading-tight">
            {message}
          </h1>
          <p className="text-sm text-muted-foreground mt-2 leading-relaxed">
            All 22 PANIA Digital Academy online programmes remain fully active and discoverable. Try searching below or explore the full catalogue.
          </p>
        </div>

        {/* Search Bar for recovery */}
        <form onSubmit={handleSearchSubmit} className="relative max-w-md mx-auto">
          <Search className="h-4 w-4 text-muted-foreground absolute left-4 top-1/2 -translate-y-1/2" />
          <input
            type="text"
            placeholder="Search all 22 programmes (e.g. AWS, GCP, VA)..."
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            className="w-full pl-11 pr-24 py-3 text-base sm:text-sm rounded-full bg-background border border-border focus:ring-2 focus:ring-primary outline-none text-foreground placeholder:text-muted-foreground"
          />
          <button
            type="submit"
            className="absolute right-1.5 top-1/2 -translate-y-1/2 px-4 py-2 rounded-full bg-primary text-primary-foreground text-xs font-semibold hover:opacity-90 transition cursor-pointer"
          >
            Search
          </button>
        </form>

        <div className="flex flex-wrap items-center justify-center gap-3 pt-2">
          <Pill to="/" variant="primary">
            Return Home
          </Pill>
          <Pill to="/programmes" variant="outline">
            Browse catalogue
          </Pill>
        </div>
      </div>
    </div>
  );
}