// Overview view (the main dashboard).

const { useState, useEffect, useMemo, useRef } = React;

const TREND_90D = [
  { label: 'Feb 18', value: 71 }, { label: '', value: 73 }, { label: '', value: 72 },
  { label: 'Feb 25', value: 75 }, { label: '', value: 74 }, { label: '', value: 76 },
  { label: 'Mar 04', value: 78 }, { label: '', value: 77 }, { label: '', value: 79 },
  { label: 'Mar 11', value: 80 }, { label: '', value: 81 }, { label: '', value: 80 },
  { label: 'Mar 18', value: 82 }, { label: '', value: 83 }, { label: '', value: 82 },
  { label: 'Mar 25', value: 84 }, { label: '', value: 83 }, { label: '', value: 85 },
  { label: 'Apr 01', value: 84 }, { label: '', value: 86 }, { label: '', value: 85 },
  { label: 'Apr 08', value: 87 }, { label: '', value: 86 }, { label: '', value: 86 },
  { label: 'Apr 15', value: 86 },
];
const COHORT_90D = TREND_90D.map(d => ({ ...d, value: 70 + Math.random() * 4 + Math.cos(d.value/20)*2 }));
const TREND_30D = TREND_90D.slice(-10);
const TREND_7D  = TREND_90D.slice(-4);

const SCANS = [
  { id: 'OS-2604',  date: '14 Apr · 09:12', label: 'Front teeth',  status: 'flag', tag: 'Anomaly', img: 'a',
    boxes: [{ x:42, y:38, w:18, h:14, l:'caries · 0.81' }] },
  { id: 'OS-2603',  date: '14 Apr · 09:11', label: 'Tongue',       status: 'ok',   tag: 'Clean',  img: 'b' },
  { id: 'OS-2602',  date: '14 Apr · 09:10', label: 'Upper palate', status: 'warn', tag: 'Review', img: 'c',
    boxes: [{ x:55, y:30, w:14, h:18, l:'plaque · 0.58' }] },
  { id: 'OS-2601',  date: '14 Apr · 09:09', label: 'Left cheek',   status: 'ok',   tag: 'Clean',  img: 'd' },
  { id: 'OS-2600',  date: '14 Apr · 09:08', label: 'Right cheek',  status: 'ok',   tag: 'Clean',  img: 'a' },
  { id: 'OS-2599',  date: '14 Apr · 09:07', label: 'Lower arch',   status: 'ok',   tag: 'Clean',  img: 'b' },
];

function PageHeader({ name }) {
  const hour = new Date().getHours();
  const greeting = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
  return (
    <div className="greet">
      <div>
        <h1 className="serif">{greeting}, <em>{name}</em>.</h1>
        <div className="sub">Two new anomalies flagged since your last visit · Compliance window closes in 6 days.</div>
      </div>
      <div className="ts">
        <b>{new Date().toLocaleDateString('en-US',{ weekday:'long', month:'short', day:'numeric' })}</b>
        <span className="mono">{new Date().toLocaleTimeString('en-US',{hour:'2-digit', minute:'2-digit'})} IST · synced 2m ago</span>
      </div>
    </div>
  );
}

function ScoreCard() {
  return (
    <div className="card score-card">
      <div className="card-head" style={{position:'relative', zIndex:1}}>
        <h3>Oral Health Index</h3>
        <div className="ctrl">
          <span className="delta">▲ 4.2 / 30d</span>
          <button className="lk"><I.more size={16}/></button>
        </div>
      </div>
      <div className="score-inner">
        <Gauge value={86} label="of 100"/>
        <div className="score-meta">
          <div className="row"><span className="l">Plaque index</span><span className="v">Mild <span className="delta">▼ 0.18</span></span></div>
          <div className="row"><span className="l">Gingival health</span><span className="v">Good</span></div>
          <div className="row"><span className="l">Halitosis (H₂S)</span><span className="v">42 <span className="mono" style={{color:'var(--ink-3)', fontSize:11}}>ppb</span> <span className="delta">Within range</span></span></div>
          <div className="row"><span className="l">Last full scan</span><span className="v">Today · 09:12</span></div>
          <div className="row"><span className="l">Next recommended</span><span className="v">May 14 · 30d</span></div>
        </div>
      </div>
    </div>
  );
}

function TrendCard() {
  const [tab, setTab] = useState('90D');
  const series = tab === '7D' ? TREND_7D : tab === '30D' ? TREND_30D : TREND_90D;
  const secondary = tab === '90D' ? COHORT_90D : null;
  // Sliding pill indicator
  const tabRef = useRef(null);
  const [pillStyle, setPillStyle] = useState({});
  useEffect(() => {
    const el = tabRef.current?.querySelector('button.active');
    if (el && tabRef.current) {
      const r = el.getBoundingClientRect();
      const pr = tabRef.current.getBoundingClientRect();
      setPillStyle({ transform: `translateX(${r.left - pr.left - 3}px)`, width: r.width });
    }
  }, [tab]);
  return (
    <div className="card trend">
      <div className="card-head">
        <h3>Trend · OHI</h3>
        <div className="tabs" ref={tabRef}>
          <div className="pill" style={pillStyle}/>
          {['7D','30D','90D'].map(t => (
            <button key={t} className={tab===t?'active':''} onClick={()=>setTab(t)}>{t}</button>
          ))}
        </div>
      </div>
      <div className="legend">
        <span><i style={{background:'var(--accent)'}}/>Your score</span>
        {secondary && <span><i style={{background:'var(--ink-3)'}}/>Cohort avg (n=2,148)</span>}
      </div>
      <TrendChart series={series} secondary={secondary}/>
    </div>
  );
}

function Stats() {
  const STATS = [
    { lbl:'Scans completed', val:'48', sub:'+6 this month', spark:[3,4,2,5,4,6,7,8] },
    { lbl:'Avg session',     val:'4', unit:'min 12s', sub:'fastest 2m 51s', spark:[5,4,4,3,3,3,2,2] },
    { lbl:'Anomalies flagged', val:'2', sub:'1 resolved · 1 open', spark:[1,0,1,1,2,1,2,2] },
    { lbl:'Compliance streak', val:'12', unit:'days', sub:'goal: 30', spark:[2,3,4,5,8,9,11,12] },
  ];
  return (
    <div className="stats stagger">
      {STATS.map((s,i) => (
        <div key={i} className="stat" style={{ animationDelay: `${0.05*i}s` }}>
          <div className="lbl">{s.lbl}</div>
          <div className="val num">
            {s.val}{s.unit && <small>{s.unit}</small>}
          </div>
          <div className="foot">
            <span style={{fontSize:11.5, color:'var(--ink-3)'}}>{s.sub}</span>
            <Sparkline data={s.spark}/>
          </div>
        </div>
      ))}
    </div>
  );
}

function ActionsBlock({ onGo }) {
  const A = [
    { k:'scan',  ic:'cam',   t:'Begin Capture Sequence', d:'Run the 13-angle guided protocol with the motorized arm.', meta:'13 angles · ~4m', primary:true, ready:true },
    { k:'audio', ic:'audio', t:'Voice Articulation',     d:'20-second jaw articulation sample for the speech review.', meta:'20s · WAV 44.1k', ready:true },
    { k:'breath',ic:'breath',t:'Halitosis Reading',     d:'8-second H₂S sensor draw via the breath port.', meta:'8s · ppb', ready:true },
    { k:'form',  ic:'form',  t:'Daily Questionnaire',    d:'12 items · diet, hygiene, symptom triage.', meta:'2 min', ready:false },
  ];
  return (
    <div className="card">
      <div className="card-head">
        <h3>Quick Actions</h3>
        <button className="lk">Customize <I.chev size={14}/></button>
      </div>
      <div className="actions">
        {A.map((a,i) => {
          const Ic = I[a.ic];
          return (
            <a key={a.k} className={`action ${a.primary?'primary':''}`} onClick={() => onGo(a.k)}>
              <div className="lead">
                <div className="ico"><Ic size={20}/></div>
                <div style={{flex:1}}>
                  <h4>{a.t}</h4>
                  <p>{a.d}</p>
                </div>
                <span className="arrow"><I.arrow size={16}/></span>
              </div>
              <div className="meta">
                <span>{a.meta}</span>
                <span className={a.ready?'ok':''}>{a.ready ? '● Hardware ready' : '○ Pending'}</span>
              </div>
            </a>
          );
        })}
      </div>
    </div>
  );
}

function AnatomyCard() {
  const [selN, setSelN] = useState(14);
  const [hoverOnly, setHoverOnly] = useState(false);
  const selected = TEETH.find(t => t.n === selN);
  const status = STATUS_LABEL[selected?.status];
  const onSelect = (n, isHover = false) => {
    setSelN(n); setHoverOnly(isHover);
  };
  return (
    <div className="card anatomy">
      <div className="card-head">
        <h3>Dental Anatomy · Status Map</h3>
        <div className="ctrl">
          <button className="lk"><I.calendar size={14}/> 14 Apr</button>
          <button className="lk"><I.download size={14}/> PDF</button>
        </div>
      </div>
      <div className="anatomy-body">
        <DentalArch selectedN={selN} onSelect={onSelect}/>
        {selected && (
          <div className="tooth-detail show">
            <div className="id mono">Universal #{selected.n}</div>
            <h4>{selected.name}</h4>
            <span className="pill" style={{ background: status.bg, color: status.fg }}>{status.l}</span>
            <p style={{margin:'10px 0 6px', color:'var(--ink-3)', fontSize:12.5, lineHeight:1.5}}>
              {selected.note || 'No findings on the latest scan. Surfaces appear within normal range.'}
            </p>
            <div style={{display:'flex', gap:6, marginTop:8}}>
              <button className="lk" style={{border:'1px solid var(--line)', padding:'5px 9px'}}>View scan</button>
              <button className="lk" style={{border:'1px solid var(--line)', padding:'5px 9px'}}>Flag</button>
            </div>
          </div>
        )}
      </div>
      <div className="anatomy-legend">
        <span className="swatch"><i style={{background:'var(--accent-soft)', borderColor:'var(--accent)'}}/>Healthy · 29</span>
        <span className="swatch"><i style={{background:'var(--warn-soft)',   borderColor:'var(--warn)'}}/>Monitoring · 3</span>
        <span className="swatch"><i style={{background:'var(--danger-soft)', borderColor:'var(--danger)'}}/>Action needed · 1</span>
        <span className="swatch" style={{marginLeft:'auto', color:'var(--ink-3)'}}>
          <I.spark size={14}/> Model · dental_v2.4 · conf 0.87
        </span>
      </div>
    </div>
  );
}

function ScansCard({ onGo }) {
  return (
    <div className="card">
      <div className="card-head">
        <h3>Latest Capture Session · OS-26</h3>
        <div className="ctrl">
          <button className="lk"><I.filter size={14}/> Filter</button>
          <button className="lk" onClick={() => onGo('history')}>See all <I.chev size={14}/></button>
        </div>
      </div>
      <div className="scans-grid">
        {SCANS.map((s,i) => (
          <div key={s.id} className="scan-thumb"
               style={{ animationDelay: `${0.04*i}s` }}>
            <div className={`mock-img ${s.img}`}/>
            <div className="teeth-overlay"/>
            <span className={`pill-tag ${s.status === 'flag' ? 'flag' : s.status === 'warn' ? 'warn' : ''}`}>
              {s.tag}
            </span>
            <span className="ts mono">{s.id} · {s.label}</span>
            {s.boxes?.map((b,j) => (
              <div key={j} className="bbox"
                   data-label={b.l}
                   style={{
                     left: `${b.x}%`, top: `${b.y}%`, width: `${b.w}%`, height: `${b.h}%`,
                     animationDelay: `${0.6 + j*0.2}s`,
                   }}/>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

function SensorsCard() {
  return (
    <div className="card">
      <div className="card-head">
        <h3>Live Hardware</h3>
        <button className="lk"><I.shield size={14}/> Diagnostics</button>
      </div>
      <div className="sensor-row">
        <div className="sensor">
          <div className="top">
            <h4>Halitosis · H₂S</h4>
            <span className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>port /dev/ttyUSB0</span>
          </div>
          <div className="reading">
            <span className="v num">42</span>
            <span className="u">ppb · live</span>
            <span className="status">Within range</span>
          </div>
          <BreathLine/>
        </div>
        <div className="sensor">
          <div className="top">
            <h4>Voice intake</h4>
            <span className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>cv2: 0  ·  mic 0</span>
          </div>
          <div className="reading">
            <span className="v num">-12</span>
            <span className="u">dBFS · 44.1 kHz</span>
            <span className="status">Listening</span>
          </div>
          <AudioBars/>
        </div>
      </div>
    </div>
  );
}

function ActivityCard() {
  const items = [
    { t:'09:12', h:'Capture session OS-26 uploaded', p:'13 angles · 41.2 MB · Encrypted storage', tone:'' },
    { t:'09:11', h:'Tooth #14 flagged — Caries (0.81)', p:'Routed to Dr. Anika Mehta for review', tone:'alert' },
    { t:'09:09', h:'Tooth #3 noted — Occlusal wear', p:'Status: monitoring', tone:'warn' },
    { t:'Yesterday', h:'Voice sample VA-118 stored', p:'20.0s · jaw articulation set B', tone:'' },
    { t:'Mon', h:'Hardware self-test complete', p:'Motor calibration ±0.4° · cam 0/1 OK', tone:'' },
  ];
  return (
    <div className="card">
      <div className="card-head">
        <h3>Activity</h3>
        <button className="lk">Open feed <I.chev size={14}/></button>
      </div>
      <div className="feed">
        {items.map((it,i) => (
          <div key={i} className={`feed-item ${it.tone}`}>
            <div className="tl"/>
            <div>
              <h5>{it.h}</h5>
              <p>{it.p}</p>
            </div>
            <span className="when">{it.t}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Overview({ onGo }) {
  return (
    <div className="page">
      <PageHeader name="Dr. Anika"/>

      <div className="hero stagger">
        <div style={{ animationDelay: '.05s' }}><ScoreCard/></div>
        <div style={{ animationDelay: '.15s' }}><TrendCard/></div>
      </div>

      <Stats/>

      <div className="layout">
        <div className="col stagger">
          <div style={{ animationDelay: '.1s' }}><AnatomyCard/></div>
          <div style={{ animationDelay: '.2s' }}><ScansCard onGo={onGo}/></div>
        </div>
        <div className="col stagger">
          <div style={{ animationDelay: '.15s' }}><ActionsBlock onGo={onGo}/></div>
          <div style={{ animationDelay: '.25s' }}><SensorsCard/></div>
          <div style={{ animationDelay: '.35s' }}><ActivityCard/></div>
        </div>
      </div>
    </div>
  );
}

window.Overview = Overview;