`src/components/SwotPanel.tsx`

63 lines
"use client";
import { useState } from "react";

type Quad = { quadrant: string; content: string };
const COLORS: Record<string, string> = {
  strength: "bg-green-50 border-green-300",
  weakness: "bg-red-50 border-red-300",
  opportunity: "bg-blue-50 border-blue-300",
  threat: "bg-amber-50 border-amber-300",
};

export default function SwotPanel({ itemId }: { itemId: number }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [quadrants, setQuadrants] = useState<Quad[]>([]);
  const [ran, setRan] = useState(false);

  async function run(force = false) {
    setLoading(true); setError(null);
    try {
      const r = await fetch("/api/swot", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ itemId, force }),
      });
      const j = await r.json();
      if (!r.ok) throw new Error(j.error || `HTTP ${r.status}`);
      setQuadrants(j.quadrants || []);
      setRan(true);
    } catch (e: unknown) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setLoading(false);
    }
  }

  const byQ = (q: string) => quadrants.find((x) => x.quadrant === q)?.content ?? "";

  return (
    <div>
      <div className="mb-3 flex items-center gap-2">
        <button className="btn" disabled={loading} onClick={() => run(false)}>
          {loading ? "Running 4 agents…" : ran ? "Reload SWOT" : "Run SWOT (4 agents)"}
        </button>
        {ran && (
          <button className="btn-ghost" disabled={loading} onClick={() => run(true)}>Re-run fresh</button>
        )}
      </div>
      {error && <div className="mb-2 rounded bg-red-50 p-2 text-sm text-red-700">{error}</div>}
      {ran && (
        <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
          {(["strength", "weakness", "opportunity", "threat"] as const).map((q) => (
            <div key={q} className={`card border-2 p-3 ${COLORS[q]}`}>
              <div className="mb-1 text-xs font-bold uppercase tracking-wide">{q}</div>
              <pre className="whitespace-pre-wrap font-sans text-sm">{byQ(q) || "—"}</pre>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}