clarity-helper/components/LiveInsightPanel.tsx

import React from 'react';
import { BrainCircuit, Loader2, CheckCircle2, AlertTriangle, Lightbulb, TrendingUp, Info } from 'lucide-react';
import { AnalysisResult } from '../types';
import Tooltip from './Tooltip';

interface LiveInsightPanelProps {
  analysis: AnalysisResult | null;
  isAnalyzing: boolean;
}

const LiveInsightPanel: React.FC<LiveInsightPanelProps> = ({ analysis, isAnalyzing }) => {
  return (
    <div className="lg:w-[35%] w-full bg-white rounded-3xl border border-slate-200 overflow-y-auto flex flex-col animate-in slide-in-from-right-8 duration-500 shadow-xl lg:h-full h-[400px]">
      <div className="p-6 border-b border-slate-100 flex items-center justify-between bg-[#F8FAFC]">
        <div className="flex items-center gap-2 text-teal-600">
           <BrainCircuit size={20} />
           <h3 className="font-bold text-xs uppercase tracking-widest text-slate-800">Live Clinical Insight</h3>
        </div>
        {isAnalyzing && <Loader2 size={16} className="animate-spin text-teal-500" />}
      </div>
      
      <div className="p-6 space-y-6">
        {analysis ? (
          <div className="animate-in fade-in duration-500 space-y-5">
            <Tooltip content="Identifies whether your last statement followed adaptive, evidence-based thinking patterns or contained cognitive distortions.">
              <div className={`p-5 rounded-2xl border-l-4 w-full ${analysis.analysis.isAdaptive ? 'bg-teal-50/50 border-teal-500' : 'bg-rose-50/50 border-rose-500'}`}>
                <div className="flex items-center gap-2 mb-3">
                  {analysis.analysis.isAdaptive ? (
                    <CheckCircle2 size={16} className="text-teal-600" />
                  ) : (
                    <AlertTriangle size={16} className="text-rose-600" />
                  )}
                  <span className={`font-bold text-[10px] uppercase tracking-wider ${analysis.analysis.isAdaptive ? 'text-teal-800' : 'text-rose-800'}`}>
                    {analysis.analysis.isAdaptive ? 'Optimal Thinking' : 'Distortion Identified'}
                  </span>
                </div>
                
                {!analysis.analysis.isAdaptive && analysis.analysis.distortions.length > 0 && (
                  <div className="flex flex-wrap gap-1.5 mb-3">
                    {analysis.analysis.distortions.map((d, i) => (
                      <span key={i} className="text-[9px] font-black uppercase tracking-widest text-white bg-rose-500 px-2 py-0.5 rounded shadow-sm">
                        {d}
                      </span>
                    ))}
                  </div>
                )}
                
                <p className={`text-xs leading-relaxed font-medium ${analysis.analysis.isAdaptive ? 'text-teal-800' : 'text-rose-800'}`}>
                  {analysis.analysis.evidence}
                </p>
              </div>
            </Tooltip>

            <Tooltip content="A score representing your effectiveness in applying CBT techniques to this specific turn.">
              <div className="bg-slate-50 p-5 rounded-2xl border border-slate-100 shadow-inner w-full">
                <div className="flex justify-between items-center mb-3">
                  <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Efficiency</span>
                  <div className="flex gap-1">
                    {[1,2,3,4,5].map(star => (
                      <div key={star} className={`h-1.5 w-4 rounded-full ${star <= analysis.rating.score ? 'bg-teal-500' : 'bg-slate-200'}`} />
                    ))}
                  </div>
                </div>
                <p className="text-xs text-slate-600 font-medium leading-relaxed">{analysis.rating.reason}</p>
              </div>
            </Tooltip>

            <div className="space-y-3">
              <Tooltip content="A more balanced, evidence-based way to think about this specific moment in the interaction.">
                <div className="bg-white p-5 rounded-2xl border border-teal-100 shadow-sm relative overflow-hidden group w-full">
                   <div className="flex items-center gap-2 text-teal-600 mb-2">
                     <Lightbulb size={16} />
                     <span className="text-[10px] font-black uppercase tracking-widest text-slate-800">Master Reframe</span>
                   </div>
                   <p className="text-sm text-slate-800 italic font-medium leading-relaxed relative z-10">"{analysis.suggestions.alternativeThought}"</p>
                </div>
              </Tooltip>
              
              <Tooltip content="Actionable behavioral advice to improve your communication or internal response in the next turn.">
                <div className="bg-white p-5 rounded-2xl border border-teal-100 shadow-sm w-full">
                   <div className="flex items-center gap-2 text-teal-600 mb-2">
                     <TrendingUp size={16} />
                     <span className="text-[10px] font-black uppercase tracking-widest text-slate-800">Tactical Pivot</span>
                   </div>
                   <p className="text-xs text-slate-800 leading-relaxed font-light">{analysis.suggestions.behavioralStep}</p>
                </div>
              </Tooltip>
            </div>
          </div>
        ) : (
          <div className="h-full flex flex-col items-center justify-center text-center p-8 space-y-4 pt-20">
             <div className="w-16 h-16 rounded-3xl bg-slate-50 flex items-center justify-center border border-slate-100 animate-pulse">
               <BrainCircuit size={32} className="text-slate-300" />
             </div>
             <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest leading-loose">
               Monitoring Interaction...<br/>Turn analysis pending
             </p>
          </div>
        )}
      </div>
    </div>
  );
};

export default React.memo(LiveInsightPanel);