import type { AnalysisResponse } from '@ftb/shared';
import { AnalysisChart } from './AnalysisChart';
import { AnalysisReport } from './AnalysisReport';
import { FollowUpActions } from './FollowUpActions';
import { InsightCard } from './InsightCard';

export function AnalysisResultBlock({
  response,
  onAsk,
}: {
  response: AnalysisResponse;
  onAsk: (prompt: string) => void;
}) {
  if (!response.ok) {
    return (
      <div className="rounded-[28px] border border-[#e2e8f0] bg-white/80 p-5 text-[14px] leading-7 text-[#334155] shadow-sm backdrop-blur-xl">
        <p className="font-medium text-[#0f172a]">{response.message}</p>
        {response.clarificationOptions && (
          <div className="mt-3 flex flex-wrap gap-2">
            {response.clarificationOptions.map((option) => (
              <button
                key={option.prompt}
                type="button"
                onClick={() => onAsk(option.prompt)}
                className="rounded-full border border-[#dbe3ef] bg-white/70 px-3 py-2 text-[13px] text-[#334155] hover:bg-white"
              >
                {option.label}
              </button>
            ))}
          </div>
        )}
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <InsightCard insight={response.insight} />
      <AnalysisChart spec={response.chart} />
      <AnalysisReport report={response.report} />
      <FollowUpActions followUps={response.followUps} onAsk={onAsk} />
    </div>
  );
}