/* ─── Dashboard intelligence — Review Health Score + negative-feedback interception ─ */
const HEALTH_PRODUCTS = [
  { name:'Brontix Wifi Router', score:86, trend:+4, stars:4.7, reviews:214, driver:{txt:'"easy setup" in 41% of feedback', pos:true} },
  { name:'Bedsure Queen Comforter', score:72, trend:-3, stars:4.3, reviews:158, driver:{txt:'"thinner than expected" in 22%', pos:false} },
  { name:'Spain Testing', score:64, trend:-9, stars:4.0, reviews:96, driver:{txt:'"packaging damage" in 38%', pos:false} },
  { name:'Breast Pump First Cry', score:91, trend:+6, stars:4.9, reviews:67, driver:{txt:'"quiet motor" in 52% of feedback', pos:true} },
];
const healthColor = s => s>=80 ? '#27B079' : s>=65 ? '#F59E0B' : '#E4574D';
function HealthRing({ score }) {
  const r=20, c=2*Math.PI*r, off=c*(1-score/100);
  return (
    <svg width="52" height="52" viewBox="0 0 52 52" className="shrink-0 -rotate-90">
      <circle cx="26" cy="26" r={r} fill="none" stroke="#EFEDE8" strokeWidth="5"/>
      <circle cx="26" cy="26" r={r} fill="none" stroke={healthColor(score)} strokeWidth="5" strokeLinecap="round" strokeDasharray={c} strokeDashoffset={off}/>
      <text x="26" y="26" textAnchor="middle" dominantBaseline="central" transform="rotate(90 26 26)" className="font-extrabold" style={{fontSize:'13px',fill:'#1B2733'}}>{score}</text>
    </svg>
  );
}
function ReviewHealthCard({ onNav }) {
  return (
    <Card className="p-5 flex-1 min-w-0">
      <div className="flex items-center justify-between gap-3">
        <div>
          <h3 className="text-[15px] font-bold text-ink">Review health score</h3>
          <p className="text-[12px] text-ink-muted mt-0.5">Private feedback + star trends + claim volume, per product</p>
        </div>
        <span className="text-[11px] font-bold px-2.5 py-1 rounded-full acc-bg-soft acc-text whitespace-nowrap">Beta</span>
      </div>
      <div className="mt-4 divide-y divide-gray-100">
        {HEALTH_PRODUCTS.map(p => (
          <div key={p.name} className="py-3 flex items-center gap-4 first:pt-0 last:pb-0">
            <HealthRing score={p.score}/>
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2 flex-wrap">
                <p className="text-[13px] font-bold text-ink truncate">{p.name}</p>
                <span className={"text-[11px] font-bold "+(p.trend>=0?"text-green-600":"text-rose-600")}>{p.trend>=0?'▲':'▼'} {Math.abs(p.trend)}</span>
              </div>
              <p className="text-[11.5px] text-ink-muted mt-0.5">{p.stars} ★ · {p.reviews} feedback entries</p>
              <span className={"inline-block mt-1.5 text-[11px] font-semibold px-2 py-0.5 rounded-md "+(p.driver.pos?"bg-green-50 text-green-700":"bg-rose-50 text-rose-700")}>{(p.driver.pos?'Top praise':'Top issue')+': '+p.driver.txt}</span>
            </div>
            <button onClick={()=>onNav && onNav('products')} className="hidden sm:inline-flex text-[12px] font-bold acc-text hover:opacity-80 whitespace-nowrap">Details →</button>
          </div>
        ))}
      </div>
    </Card>
  );
}

const INTERCEPT_ALERTS = [
  { id:1, name:'Ravi M.', product:'Spain Testing', stars:1, time:'8 min ago', txt:'Box arrived crushed, the unit inside is dented. Very disappointed.' },
  { id:2, name:'Karen L.', product:'Bedsure Queen Comforter', stars:2, time:'2 hrs ago', txt:'Way thinner than the photos suggest. Expected more filling.' },
  { id:3, name:'Diego F.', product:'Spain Testing', stars:2, time:'Yesterday', txt:'Manual is only in English, could not finish the setup.' },
];
function InterceptCard() {
  const [resolved, setResolved] = React.useState({});
  const openCount = INTERCEPT_ALERTS.filter(a=>!resolved[a.id]).length;
  const resolve = (id, how) => setResolved(r=>({...r,[id]:how}));
  return (
    <Card className="p-5 w-full lg:w-[380px] shrink-0">
      <div className="flex items-center justify-between gap-3">
        <div>
          <h3 className="text-[15px] font-bold text-ink">Unhappy-customer alerts</h3>
          <p className="text-[12px] text-ink-muted mt-0.5">1–2★ private feedback — resolve before it goes public</p>
        </div>
        {openCount>0 && <span className="inline-flex items-center gap-1.5 text-[11px] font-bold px-2.5 py-1 rounded-full bg-rose-50 text-rose-700 whitespace-nowrap"><span className="w-1.5 h-1.5 rounded-full bg-rose-500 animate-pulse"></span>{openCount} open</span>}
      </div>
      <div className="mt-4 space-y-3">
        {INTERCEPT_ALERTS.map(a => (
          <div key={a.id} className={"rounded-xl border p-3.5 transition-colors "+(resolved[a.id]?"border-green-200 bg-green-50/40":"border-line bg-surface-subtle/60")}>
            <div className="flex items-center justify-between gap-2">
              <p className="text-[12.5px] font-bold text-ink truncate">{a.name} <span className="font-medium text-ink-muted">· {a.product}</span></p>
              <span className="text-[10.5px] text-ink-soft whitespace-nowrap">{a.time}</span>
            </div>
            <div className="flex items-center gap-0.5 mt-1">{[1,2,3,4,5].map(s=><span key={s} className="text-[12px]" style={{color:s<=a.stars?'#F59E0B':'#E2E8F0'}}>★</span>)}</div>
            <p className="text-[12px] text-ink leading-snug mt-1.5">"{a.txt}"</p>
            {resolved[a.id]
              ? <p className="mt-2.5 text-[11.5px] font-bold text-green-700 inline-flex items-center gap-1.5"><svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M2.5 7l3 3 6-6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>{resolved[a.id]+' offered — customer notified'}</p>
              : <div className="flex flex-wrap gap-1.5 mt-2.5">
                  <button onClick={()=>resolve(a.id,'Replacement')} className="h-7 px-2.5 rounded-lg text-[11px] font-bold bg-brand-50 text-brand hover:bg-brand hover:text-white transition-colors whitespace-nowrap">Offer replacement</button>
                  <button onClick={()=>resolve(a.id,'Refund')} className="h-7 px-2.5 rounded-lg text-[11px] font-bold bg-brand-50 text-brand hover:bg-brand hover:text-white transition-colors whitespace-nowrap">Refund</button>
                  <button onClick={()=>resolve(a.id,'Support contact')} className="h-7 px-2.5 rounded-lg text-[11px] font-bold bg-white border border-line text-ink-muted hover:border-brand-200 transition-colors whitespace-nowrap">Contact</button>
                </div>}
          </div>
        ))}
      </div>
      <p className="mt-4 pt-3 border-t border-line/70 text-[11px] text-ink-soft leading-relaxed">Alerts also go to your email &amp; WhatsApp. Private feedback is never published — resolving here is fully policy-safe.</p>
    </Card>
  );
}
Object.assign(window, { ReviewHealthCard, InterceptCard });