"use client";

import { ICONS } from "@/lib/icons";

interface Suggestion {
  key: number;
  title: string;
  group: string;
  agentType: string;
  cashImpactLabel: string;
  confidence: number;
  rationale: string;
}

export function SuggestionsPanel({ suggestions, onLaunch }: { suggestions: Suggestion[]; onLaunch: (key: number) => void }) {
  return (
    <div className="card p-5">
      <div className="mb-1 flex items-center justify-between">
        <div className="flex items-center gap-2 font-bold text-slate-800">
          <ICONS.suggestion size={18} strokeWidth={1.75} className="text-slate-400" /> Gợi ý hành động ưu tiên
        </div>
        <span className="text-[11px] text-slate-400">rule-based, không gọi AI</span>
      </div>
      <div className="flex flex-col divide-y divide-slate-100">
        {suggestions.map((s, i) => (
          <div key={s.key} className="flex items-start gap-3 py-3">
            <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-teal-500 text-xs font-bold text-white">{i + 1}</div>
            <div className="min-w-0 flex-1">
              <div className="text-sm font-semibold text-slate-800">{s.title}</div>
              <div className="text-xs text-slate-400">
                {s.rationale} {s.cashImpactLabel !== "0 đ" && <>Tiềm năng: <span className="font-medium text-teal-600">{s.cashImpactLabel}</span></>}
              </div>
            </div>
            <button
              onClick={() => onLaunch(s.key)}
              className="shrink-0 rounded-lg border border-teal-200 px-3 py-1.5 text-xs font-semibold text-teal-700 hover:bg-teal-50"
            >
              Kích hoạt
            </button>
          </div>
        ))}
        {suggestions.length === 0 && <div className="py-4 text-sm text-slate-400">Chưa đủ dữ liệu để đề xuất hành động.</div>}
      </div>
    </div>
  );
}