"use client";

import { useRouter } from "next/navigation";
import { TrendingUp, ArrowUpRight, ArrowDownRight, Minus, Search, Crosshair } from "lucide-react";

interface Trend { keyword?: string; direction?: string; opportunity?: string }

interface Props { trends: Trend[]; brandId: string }

export default function SearchTrends({ trends, brandId }: Props) {
  const router = useRouter();
  if (!trends.length) return null;

  return (
    <div>
      <div className="flex items-center gap-2 mb-3"><Search className="w-4 h-4 text-violet-600" /><h2 className="text-xs font-bold uppercase tracking-widest text-slate-400">Trending Searches</h2></div>
      <div className="bg-white rounded-xl border border-slate-200 divide-y divide-slate-100">
        {trends.map((t, i) => {
          const DirIcon = t.direction === "rising" ? ArrowUpRight : t.direction === "declining" ? ArrowDownRight : Minus;
          const dirColor = t.direction === "rising" ? "text-green-600" : t.direction === "declining" ? "text-red-500" : "text-slate-400";
          return (
            <div key={i} className="px-4 py-3 flex items-center gap-3">
              <DirIcon className={`w-4 h-4 ${dirColor} shrink-0`} />
              <div className="flex-1 min-w-0">
                <p className="text-sm font-semibold text-slate-900">{t.keyword}</p>
                {t.opportunity && <p className="text-[11px] text-slate-500 truncate">{t.opportunity}</p>}
              </div>
              <button onClick={() => router.push(`/keyword-research?seed=${encodeURIComponent(t.keyword || "")}`)} className="flex items-center gap-1 px-2 py-1 rounded-md border border-slate-200 text-[10px] font-semibold text-brand-700 hover:bg-brand-50 shrink-0">
                <Search className="w-3 h-3" /> Research
              </button>
              <button onClick={() => { fetch("/api/rank-tracking/keywords", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ brandId, keywords: [{ keyword: t.keyword }] }) }); }} className="flex items-center gap-1 px-2 py-1 rounded-md border border-slate-200 text-[10px] font-semibold text-slate-600 hover:bg-slate-50 shrink-0">
                <Crosshair className="w-3 h-3" /> Track
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}
