"use client";

import { useState } from "react";
import { useSession } from "next-auth/react";

interface SaveSearchButtonProps {
  searchParams: Record<string, string>;
}

export default function SaveSearchButton({ searchParams }: SaveSearchButtonProps) {
  const { data: session } = useSession();
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState<string | null>(null);

  if (!session) return null;

  async function handleSave() {
    setSaving(true);
    setError(null);
    try {
      const res = await fetch("/api/searches", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ filters: searchParams }),
      });
      if (res.ok) {
        setSaved(true);
        setTimeout(() => setSaved(false), 2000);
      } else {
        setError("Failed to save");
        setTimeout(() => setError(null), 3000);
      }
    } catch {
      setError("Failed to save");
      setTimeout(() => setError(null), 3000);
    } finally {
      setSaving(false);
    }
  }

  return (
    <button
      onClick={handleSave}
      disabled={saving || saved}
      className="flex items-center gap-1.5 border border-primary text-primary hover:bg-primary/10 px-4 py-2 rounded-lg transition-colors text-sm disabled:opacity-60"
    >
      {/* Bookmark icon */}
      <svg
        className="w-4 h-4"
        fill={saved ? "currentColor" : "none"}
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
        />
      </svg>
      {error ? error : saved ? "Saved!" : saving ? "Saving..." : "Save Search"}
    </button>
  );
}