"use client";

import { useEffect, useState } from "react";

type SavedSearch = {
  id: string;
  prompt: string;
  createdAt: string;
};

const SAVED_SEARCHES_KEY = "leadfinder:savedSearches";
const PENDING_SEARCH_KEY = "leadfinder:pendingSearch";

export default function SavedSearchesPage() {
  const [searches, setSearches] = useState<SavedSearch[]>([]);

  useEffect(() => {
    if (typeof window === "undefined") return;
    const raw = window.localStorage.getItem(SAVED_SEARCHES_KEY);
    if (!raw) return;
    try {
      const parsed = JSON.parse(raw);
      if (Array.isArray(parsed)) {
        setSearches(parsed);
      }
    } catch {
      // ignore
    }
  }, []);

  const removeSearch = (id: string) => {
    const next = searches.filter((item) => item.id !== id);
    setSearches(next);
    if (typeof window !== "undefined") {
      window.localStorage.setItem(SAVED_SEARCHES_KEY, JSON.stringify(next));
    }
  };

  const runSearch = (prompt: string) => {
    if (typeof window === "undefined") return;
    window.localStorage.setItem(PENDING_SEARCH_KEY, prompt);
    window.location.href = "/";
  };

  return (
    <div className="min-h-screen bg-[var(--background)] text-[var(--foreground)]">
      <header className="border-b-4 border-black bg-black px-6 py-4 md:px-12 lg:px-16">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs uppercase tracking-[0.25em] text-white/70">
              Leadfinder
            </p>
            <h1 className="font-[var(--font-display)] text-2xl font-semibold tracking-tight text-white md:text-3xl">
              Saved searches
            </h1>
          </div>
          <nav className="flex items-center gap-3 text-xs font-semibold uppercase tracking-wide text-white/70">
            <a href="/" className="text-white hover:text-white/80">
              Search
            </a>
            <span className="text-white/40">|</span>
            <a href="/searches" className="text-white hover:text-white/80">
              Saved searches
            </a>
            <span className="text-white/40">|</span>
            <a href="/leads" className="text-white hover:text-white/80">
              All leads
            </a>
          </nav>
        </div>
      </header>

      <main className="px-6 py-12 md:px-12 lg:px-16">
        <div className="mx-auto max-w-4xl space-y-4">
          {searches.length === 0 && (
            <div className="rounded-2xl border border-dashed border-black/20 bg-white px-6 py-10 text-center text-sm text-[var(--muted)]">
              No saved searches yet. Run a search to start building this list.
            </div>
          )}

          {searches.map((item) => (
            <div
              key={item.id}
              className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-black/10 bg-white px-5 py-4"
            >
              <div>
                <p className="font-[var(--font-display)] text-lg font-semibold text-black">
                  {item.prompt}
                </p>
                <p className="text-xs text-[var(--muted)]">
                  Saved {new Date(item.createdAt).toLocaleString()}
                </p>
              </div>
              <div className="flex items-center gap-2 text-xs">
                <button
                  type="button"
                  onClick={() => runSearch(item.prompt)}
                  className="rounded-full border border-black/20 px-3 py-1.5 font-semibold text-black transition hover:border-black hover:bg-black hover:text-white"
                >
                  Run search
                </button>
                <button
                  type="button"
                  onClick={() => removeSearch(item.id)}
                  className="rounded-full border border-black/10 px-3 py-1.5 font-semibold text-black/70 hover:text-black"
                >
                  Remove
                </button>
              </div>
            </div>
          ))}
        </div>
      </main>
    </div>
  );
}