"use client";

import type { ChatMessage } from "@/lib/types";
import { IntentReceiptCard } from "./IntentReceiptCard";
import { MarkdownLite } from "./MarkdownLite";
import { ComplianceBar } from "./ComplianceBar";
import { SeverityBadge } from "./SeverityBadge";

export function ChatPanel({
  messages,
  loading,
}: {
  messages: ChatMessage[];
  loading: boolean;
}) {
  return (
    <div className="flex flex-col h-full min-h-[400px] w-full max-w-full">
      <div className="flex-1 overflow-y-auto space-y-4 pr-1 scrollbar-thin scrollbar-thumb-slate-800">
        {messages.length === 0 && (
          <div className="rounded-xl border border-dashed border-slate-700 p-8 text-center">
            <p className="text-slate-400 text-sm max-w-md mx-auto">
              Upload a report, scan a repo, or paste an alert. Get a plain-English briefing, then a
              remediation plan with{" "}
              <strong className="text-emerald-400">verified allow / block</strong> on each step.
            </p>
          </div>
        )}
        {messages.map((msg) => (
          <article
            key={msg.id}
            className={`animate-in rounded-xl p-4 ${
              msg.role === "user"
                ? "ml-6 bg-slate-800/50 border border-slate-700/50"
                : "mr-2 glass"
            }`}
          >
            <header className="flex items-center gap-2 mb-2">
              <span
                className={`text-[10px] uppercase tracking-wider font-semibold ${
                  msg.role === "user" ? "text-slate-500" : "text-amber-400"
                }`}
              >
                {msg.role === "user" ? "You" : "SecBrief"}
              </span>
              {msg.analysis?.severity && (
                <SeverityBadge
                  severity={msg.analysis.severity}
                  score={msg.analysis.risk_score}
                />
              )}
              {msg.meta && (
                <span className="text-[10px] text-slate-600 ml-auto">{msg.meta}</span>
              )}
            </header>
            <ComplianceBar analysis={msg.analysis} />
            {msg.analysis?.summary && (
              <p className="text-sm text-slate-300 mb-2">{msg.analysis.summary}</p>
            )}
            <MarkdownLite text={msg.text} />
            {msg.decisions && msg.decisions.length > 0 && (
              <div className="mt-4 space-y-2">
                <p className="text-xs font-medium text-slate-500 uppercase tracking-wide">
                  Policy check
                </p>
                {msg.decisions.map((d, j) => (
                  <div
                    key={j}
                    className={`flex gap-2 text-xs rounded-lg px-3 py-2 border ${
                      d.status === "block"
                        ? "bg-red-950/40 border-red-800/50"
                        : d.status === "hold"
                          ? "bg-amber-950/30 border-amber-800/40"
                          : "bg-emerald-950/30 border-emerald-800/40"
                    }`}
                  >
                    <span className="font-mono font-bold uppercase shrink-0 w-14">
                      {d.status}
                    </span>
                    <span className="text-slate-300">
                      <code className="text-emerald-300/90">{d.action}</code>
                      {d.csrg_path && (
                        <span className="text-slate-600 text-[10px] ml-1">({d.csrg_path})</span>
                      )}
                      {" — "}
                      {d.message}
                      {d.in_signed_plan === false && (
                        <span className="text-red-400 font-medium"> · NOT in signed plan</span>
                      )}
                      {d.simulated && (
                        <span className="text-slate-500"> (demo policy)</span>
                      )}
                    </span>
                  </div>
                ))}
              </div>
            )}
            {msg.receipt && <IntentReceiptCard receipt={msg.receipt} />}
          </article>
        ))}
        {loading && (
          <div className="flex flex-col gap-2 p-4 glass rounded-xl mr-2 animate-pulse">
            <div className="flex items-center gap-2 text-xs text-emerald-400 font-medium uppercase tracking-widest">
              <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-ping" />
              SecBrief is thinking
            </div>
            <div className="h-2 bg-slate-800 rounded-full w-3/4" />
            <div className="h-2 bg-slate-800 rounded-full w-1/2" />
          </div>
        )}
      </div>
    </div>
  );
}