import { Bot, Sparkles, ShieldAlert, Check, X, Send } from 'lucide-react';
import { demoAIFindings } from '@/lib/demoData';

const sevColor = { low: 'text-emerald-300', medium: 'text-amber-300', info: 'text-cyan-300', high: 'text-rose-300' };

const AIAnalysisPanel = () => (
  <div className="glass-panel flex flex-col p-3">
    <div className="mb-2.5 flex items-center gap-2">
      <div className="grid h-7 w-7 place-items-center rounded-lg bg-cyan-400/10 text-cyan-300"><Bot className="h-4 w-4" /></div>
      <div className="flex-1">
        <div className="text-[11px] font-semibold text-white">SHiRE Dental AI</div>
        <div className="text-[8px] uppercase tracking-wider text-slate-500">Analysis complete</div>
      </div>
      <Sparkles className="h-3.5 w-3.5 text-cyan-400" />
    </div>
    <div className="mb-2 flex items-center gap-1.5 text-[9px] text-emerald-300">
      <span className="glow-dot" /> Scan analysis: 100% · Ready for review
    </div>
    <div className="space-y-1.5">
      {demoAIFindings.map(f => (
        <div key={f.label} className="rounded-md border border-white/[.05] bg-white/[.02] p-2">
          <div className="flex items-center justify-between">
            <span className="text-[10px] font-medium text-slate-200">{f.label}</span>
            <span className={`text-[10px] font-semibold ${sevColor[f.severity]}`}>{f.value}</span>
          </div>
          <p className="mt-0.5 text-[9px] leading-snug text-slate-500">{f.detail}</p>
          <div className="mt-1 flex items-center gap-1.5">
            <div className="h-1 flex-1 overflow-hidden rounded-full bg-white/10">
              <div className="h-full rounded-full bg-cyan-400" style={{ width: `${f.confidence * 100}%` }} />
            </div>
            <span className="text-[8px] text-slate-600">{Math.round(f.confidence * 100)}%</span>
          </div>
          <div className="mt-1.5 flex gap-1">
            <button className="flex items-center gap-1 rounded border border-emerald-400/20 px-1.5 py-0.5 text-[8px] text-emerald-300 hover:bg-emerald-400/10"><Check className="h-2.5 w-2.5" />Accept</button>
            <button className="flex items-center gap-1 rounded border border-rose-400/20 px-1.5 py-0.5 text-[8px] text-rose-300 hover:bg-rose-400/10"><X className="h-2.5 w-2.5" />Reject</button>
            <button className="flex items-center gap-1 rounded border border-cyan-400/20 px-1.5 py-0.5 text-[8px] text-cyan-300 hover:bg-cyan-400/10"><Send className="h-2.5 w-2.5" />Review</button>
          </div>
        </div>
      ))}
    </div>
    <div className="mt-2.5 flex gap-1.5 rounded-md bg-amber-400/[.06] p-2 text-[8px] leading-snug text-amber-200/70">
      <ShieldAlert className="h-3 w-3 shrink-0" />
      AI recommendations are advisory only and require review by a qualified dental professional.
    </div>
  </div>
);
export default AIAnalysisPanel;