clarity-helper/components/LiveInsightPanel.tsx

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

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">
            <div className={`p-5 rounded-2xl border-l-4 ${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>

            <div className="bg-slate-50 p-5 rounded-2xl border border-slate-100 shadow-inner">
              <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>

            <div className="space-y-3">
              <div className="bg-white p-5 rounded-2xl border border-teal-100 shadow-sm relative overflow-hidden group">
                 <div className="flex items-center gap-2 text-teal-600 mb-2">
                   <Lightbulb size={16} />
                   <span className="text-[10px] font-black uppercase tracking-widest">Master Reframe</span>
                 </div>
                 <p className="text-sm text-slate-800 italic font-medium leading-relaxed relative z-10">"{analysis.suggestions.alternativeThought}"</p>
              </div>
              
              <div className="bg-white p-5 rounded-2xl border border-teal-100 shadow-sm">
                 <div className="flex items-center gap-2 text-teal-600 mb-2">
                   <TrendingUp size={16} />
                   <span className="text-[10px] font-black uppercase tracking-widest">Tactical Pivot</span>
                 </div>
                 <p className="text-xs text-slate-800 leading-relaxed font-light">{analysis.suggestions.behavioralStep}</p>
              </div>
            </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);