"use client";

import { Check, Eye, Link2 } from "lucide-react";
import { useState } from "react";
import type { Watchlist } from "@/lib/api";
import { ownerFetch } from "@/lib/owner";

/** Adds an entity/source to the user's default watchlist (created on demand). */
export function WatchButton({ kind, value, label }: { kind: "entity" | "source" | "keyword" | "category"; value: string; label?: string }) {
  const [state, setState] = useState<"idle" | "busy" | "done" | "error">("idle");
  const add = async (): Promise<void> => {
    setState("busy");
    try {
      const { items } = await ownerFetch<{ items: Watchlist[] }>("/api/v1/watchlists");
      let wl = items[0];
      if (!wl) wl = await ownerFetch<Watchlist>("/api/v1/watchlists", { method: "POST", body: JSON.stringify({ name: "My watchlist", items: [] }) });
      const existing = (wl.items ?? []).map((i) => ({ kind: i.kind, value: i.value }));
      if (!existing.some((i) => i.kind === kind && i.value === value)) existing.push({ kind, value });
      await ownerFetch(`/api/v1/watchlists/${wl.id}`, { method: "PUT", body: JSON.stringify({ items: existing }) });
      setState("done");
    } catch {
      setState("error");
    }
  };
  return (
    <button type="button" onClick={add} disabled={state === "busy" || state === "done"} className="inline-flex items-center gap-1.5 rounded-md border border-line bg-panel px-2.5 py-1 text-[12px] hover:border-line-strong disabled:opacity-70">
      {state === "done" ? <Check className="size-3.5 text-signal" /> : <Eye className="size-3.5" />}
      {state === "done" ? "Watching" : state === "error" ? "Failed — retry" : label ?? "Watch"}
    </button>
  );
}

export function ShareButton({ path }: { path: string }) {
  const [done, setDone] = useState(false);
  return (
    <button
      type="button"
      onClick={async () => {
        const url = `${window.location.origin}${path}`;
        try {
          await navigator.clipboard.writeText(url);
          setDone(true);
          setTimeout(() => setDone(false), 1500);
        } catch {
          window.prompt("Copy link", url);
        }
      }}
      className="inline-flex items-center gap-1.5 rounded-md border border-line bg-panel px-2.5 py-1 text-[12px] hover:border-line-strong"
    >
      {done ? <Check className="size-3.5 text-signal" /> : <Link2 className="size-3.5" />}
      {done ? "Copied" : "Share"}
    </button>
  );
}