"use client";

import { useState, useMemo, useEffect } from "react";
import { useSearchParams } from "next/navigation";
import { Suspense } from "react";
import { clsx } from "clsx";
import { Search, Vault } from "lucide-react";
import { Breadcrumb } from "@/components/breadcrumb";
import { ContentTypeIcon } from "@/components/content-type-icon";
import { useVaults } from "@/lib/use-data";
import type { Memory, Document, Skill } from "@/lib/types";

type ResultTab = "all" | "memories" | "documents" | "skills";
type SortOption = "relevance" | "newest" | "oldest";

interface SearchResult {
  type: "memory" | "document" | "skill";
  title: string;
  snippet: string;
  vaultFullName: string;
  vaultName: string;
  date: string;
  id?: number;
  path?: string;
}

function SearchPageInner() {
  const searchParams = useSearchParams();
  const initialQuery = searchParams.get("q") || "";

  const [query, setQuery] = useState(initialQuery);
  const [activeTab, setActiveTab] = useState<ResultTab>("all");
  const [sort, setSort] = useState<SortOption>("relevance");

  const { vaults, loading: vaultsLoading } = useVaults();

  const tabs: { key: ResultTab; label: string }[] = [
    { key: "all", label: "All" },
    { key: "memories", label: "Memories" },
    { key: "documents", label: "Documents" },
    { key: "skills", label: "Skills" },
  ];

  // Collect all data from all vaults
  const [allResults, setAllResults] = useState<SearchResult[]>([]);
  const [dataLoading, setDataLoading] = useState(true);

  useEffect(() => {
    if (vaultsLoading || vaults.length === 0) return;

    let cancelled = false;

    async function loadAll() {
      setDataLoading(true);
      const results: SearchResult[] = [];

      // We need to dynamically import fetchMemories, fetchDocuments, fetchSkills
      const { fetchMemories, fetchDocuments, fetchSkills } = await import("@/lib/api");

      // Fetch all vaults concurrently instead of sequentially
      const vaultResults = await Promise.all(vaults.map(async (vault) => {
        const [memories, docs, skills] = await Promise.all([
          fetchMemories(vault.fullName),
          fetchDocuments(vault.fullName),
          fetchSkills(vault.fullName),
        ]);
        return { vault, memories, docs, skills };
      }));

      for (const { vault, memories, docs, skills } of vaultResults) {
        for (const m of memories) {
          results.push({
            type: "memory",
            title: m.title,
            snippet: m.content.slice(0, 150),
            vaultFullName: vault.fullName,
            vaultName: vault.name,
            date: m.createdAt,
            id: m.id,
          });
        }

        for (const d of docs) {
          results.push({
            type: "document",
            title: d.name,
            snippet: d.content.slice(0, 150),
            vaultFullName: vault.fullName,
            vaultName: vault.name,
            date: d.lastModified,
            path: d.path,
          });
        }

        for (const s of skills) {
          results.push({
            type: "skill",
            title: s.name,
            snippet: s.description,
            vaultFullName: vault.fullName,
            vaultName: vault.name,
            date: s.lastModified,
            path: s.path,
          });
        }
      }

      if (!cancelled) {
        setAllResults(results);
        setDataLoading(false);
      }
    }

    loadAll();
    return () => { cancelled = true; };
  }, [vaults, vaultsLoading]);

  // Filter and sort
  const filteredResults = useMemo(() => {
    if (!query.trim()) return [];

    const q = query.toLowerCase();
    let results = allResults.filter(
      (r) =>
        r.title.toLowerCase().includes(q) ||
        r.snippet.toLowerCase().includes(q)
    );

    // Filter by tab
    if (activeTab !== "all") {
      const typeMap: Record<string, string> = {
        memories: "memory",
        documents: "document",
        skills: "skill",
      };
      results = results.filter((r) => r.type === typeMap[activeTab]);
    }

    // Sort
    if (sort === "newest") {
      results.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
    } else if (sort === "oldest") {
      results.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
    }

    return results;
  }, [query, activeTab, sort, allResults]);

  function formatDate(dateStr: string): string {
    return new Date(dateStr).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
    });
  }

  return (
    <div className="p-8 max-w-6xl">
      <Breadcrumb items={[{ label: "Search Results" }]} />

      {/* Search input */}
      <div className="mb-6">
        <div className="flex items-center gap-3 px-4 py-3 rounded-xl bg-surface border border-border">
          <Search size={20} className="text-text-muted shrink-0" />
          <input
            type="text"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search memories, documents, skills..."
            className="flex-1 bg-transparent text-base text-text-primary placeholder:text-text-muted outline-none"
          />
        </div>
        {query.trim() && !dataLoading && (
          <p className="text-sm text-text-secondary mt-2">
            {filteredResults.length} result{filteredResults.length !== 1 ? "s" : ""} for &ldquo;{query}&rdquo;
          </p>
        )}
        {dataLoading && query.trim() && (
          <p className="text-sm text-text-secondary mt-2">Searching...</p>
        )}
      </div>

      {/* Tabs */}
      <div className="flex items-center gap-1 border-b border-border-light mb-6">
        {tabs.map(({ key, label }) => (
          <button
            key={key}
            onClick={() => setActiveTab(key)}
            className={clsx(
              "px-4 py-2.5 text-sm font-medium border-b-2 transition-colors -mb-px",
              activeTab === key
                ? "border-accent text-text-primary"
                : "border-transparent text-text-secondary hover:text-text-primary"
            )}
          >
            {label}
          </button>
        ))}
      </div>

      <div className="flex gap-6">
        {/* Filters sidebar */}
        <div className="w-52 shrink-0 space-y-6">
          {/* Sort */}
          <div>
            <h3 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-2">
              Sort
            </h3>
            <div className="space-y-2">
              {(
                [
                  { key: "relevance", label: "Relevance" },
                  { key: "newest", label: "Newest" },
                  { key: "oldest", label: "Oldest" },
                ] as { key: SortOption; label: string }[]
              ).map(({ key, label }) => (
                <label
                  key={key}
                  className="flex items-center gap-2 cursor-pointer"
                >
                  <input
                    type="radio"
                    name="sort"
                    checked={sort === key}
                    onChange={() => setSort(key)}
                    className="w-3.5 h-3.5 border-border bg-background accent-accent"
                  />
                  <span className="text-sm text-text-secondary">{label}</span>
                </label>
              ))}
            </div>
          </div>


        </div>

        {/* Results */}
        <div className="flex-1 min-w-0">
          {!query.trim() ? (
            <div className="flex flex-col items-center justify-center py-20 text-center">
              <Search
                size={32}
                className="text-text-muted mb-3"
              />
              <p className="text-sm text-text-secondary">
                Type a query to search across memories, documents, and skills.
              </p>
            </div>
          ) : dataLoading ? (
            <div className="flex flex-col items-center justify-center py-20 text-center">
              <p className="text-sm text-text-secondary">Loading data...</p>
            </div>
          ) : filteredResults.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-20 text-center">
              <Search
                size={32}
                className="text-text-muted mb-3"
              />
              <p className="text-sm text-text-primary mb-1">
                No results found for &ldquo;{query}&rdquo;
              </p>
              <p className="text-sm text-text-secondary">
                Try different keywords or adjust your filters.
              </p>
            </div>
          ) : (
            <div className="space-y-2">
              {filteredResults.map((result, i) => (
                <div
                  key={`${result.type}-${result.id ?? result.path ?? i}`}
                  className="p-4 rounded-lg bg-surface border border-border-light hover:border-border transition-colors cursor-pointer"
                >
                  <div className="flex items-center gap-2 mb-1">
                    <ContentTypeIcon type={result.type} size={14} />
                    <h3 className="text-sm font-medium text-text-primary truncate">
                      {result.title}
                    </h3>
                  </div>
                  <p className="text-xs text-text-secondary line-clamp-2 mb-2">
                    {result.snippet}
                  </p>
                  <div className="flex items-center gap-3 text-xs text-text-muted">
                    <span className="flex items-center gap-1">
                      <Vault size={12} />
                      {result.vaultName}
                    </span>
                    <span>{formatDate(result.date)}</span>
                    <span className="capitalize px-1.5 py-0.5 rounded bg-surface-elevated">
                      {result.type}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default function SearchPage() {
  return (
    <Suspense fallback={<div className="p-8 text-text-secondary">Loading...</div>}>
      <SearchPageInner />
    </Suspense>
  );
}