/* Book with Toni — owner/admin surface */
const A_TABS = ['Next','Meeting types','Availability','Settings'];
const MEETINGS = [
  { day:'Today', rows:[
    ['11:00','Adaora Eze — Kuda','Check-in · Growth sprint','30 min'],
    ['16:30','Chima Okafor','Quick call','15 min'],
  ]},
  { day:'Thursday', rows:[
    ['10:00','Maya Iyer — Studio Loomi','Brainstorming · “How to position our second product without confusing the customers we already have.” Context: two products, one audience, no clear split. Useful outcome: a positioning line we can test.','60 min'],
    ['14:30','Harvey Nwosu','Discovery call','30 min'],
  ]},
  { day:'Monday', rows:[
    ['09:00','Sunbird Group','Kickoff · Skincare launch — three markets, Q3','30 min'],
    ['13:00','Ify Balogun','Check-in','30 min'],
  ]},
];
const HOURS = [
  ['Monday',['09:00 – 13:00','15:00 – 17:00'],'Open'],
  ['Tuesday',['09:00 – 13:00'],'Open'],
  ['Wednesday',['10:00 – 16:00'],'Open'],
  ['Thursday',['09:00 – 12:00','14:00 – 16:00'],'Open'],
  ['Friday',[],'Closed'],
  ['Saturday',[],'Closed'],
  ['Sunday',[],'Closed'],
];

function ConnLine({ health, onFix }){
  if(health==='ok') return <span className="conn"><i className="dot"></i>Connected to Google Calendar · synced 2 minutes ago</span>;
  if(health==='slow') return <span className="conn"><i className="dot warn"></i>Syncing slowly — times may be 10 minutes stale</span>;
  return <button className="conn bad-btn" onClick={onFix}><i className="dot bad"></i>Reconnect Google Calendar — bookings are paused</button>;
}

function Admin({ demo }){
  const [tab,setTab] = React.useState('Next');
  const [open,setOpen] = React.useState('Brainstorming session');
  const health = demo.calDown ? 'bad' : 'ok';
  return (
    <div className="pane single admin">
      <Mark who="Toni Dada"/>
      <div className="anav">
        {A_TABS.map(t=><button key={t} className={t===tab?'on':''} onClick={()=>setTab(t)}>{t}</button>)}
        <span className="sp"></span>
        <ConnLine health={health} onFix={()=>demo.set({calDown:false})}/>
      </div>

      {health==='bad' && (
        <div className="cblock bad">
          <h4><span className="conn"><i className="dot bad"></i>Reconnect Google Calendar</span></h4>
          <p>Access expired. Bookings are paused until you reconnect — the public pages are showing “I can’t reach my calendar right now” rather than times that might be wrong.</p>
          <button className="act" onClick={()=>demo.set({calDown:false})}>Reconnect →</button>
        </div>
      )}

      {tab==='Next' && <>
        {MEETINGS.map(g=>(
          <React.Fragment key={g.day}>
            <p className="datelbl">{g.day}</p>
            {g.rows.map(r=>(
              <div className="mtg" key={r[0]+r[1]}>
                <span className="t tnum">{r[0]}</span>
                <span className="whor">{r[1]}<small>{r[2]}</small></span>
                <span className="ty tnum">{r[3]}</span>
              </div>
            ))}
          </React.Fragment>
        ))}
        <p className="hint pad">No counts, no charts, no activity feed. Briefs expand in place — reading them before the call is the only reason this screen exists.</p>
      </>}

      {tab==='Meeting types' && <>
        {TYPES.map(t=>(
          <div key={t.id} className={'erow'+(open===t.name?' openrow':'')}>
            <button className="erowhead" onClick={()=>setOpen(open===t.name?null:t.name)}>
              <span><span className="n">{t.name}</span><span className="sub">{t.durLabel} · {t.listed?'listed publicly':'link only'} · {t.id==='brainstorm'?'3 questions':t.id==='kickoff'?'2 questions':t.id==='checkin'?'1 optional question':'no questions'}</span></span>
              <span className="st live">{t.id==='discovery'||t.id==='brainstorm'?'Live':'Link'}</span>
            </button>
            {open===t.name && (
              <div className="editor">
                <div className="fld"><label>Name</label><input className="in short" defaultValue={t.name}/></div>
                <div className="fld"><label>One line, shown in the list</label><input className="in short" defaultValue={t.line}/></div>
                <div className="fld"><label>Duration</label><div className="seg">{['15','30','45','45–60','90','Custom'].map(d=><button key={d} className={d===t.durLabel.replace(' min','')?'on':''}>{d}</button>)}</div></div>
                <div className="fld"><label>Visibility</label><div className="seg">{['Listed publicly','Link only','Paused'].map((v,i)=><button key={v} className={(t.listed?i===0:i===1)?'on':''}>{v}</button>)}</div></div>
                <div className="fld"><label>Buffers</label><div className="seg">{['15 before','15 after','None'].map((v,i)=><button key={v} className={i===0?'on':''}>{v}</button>)}</div></div>
                <p className="hint">Saves on blur with a two-second undo line. No Save button, no dialogs. <span className="or">Preview →</span></p>
              </div>
            )}
          </div>
        ))}
      </>}

      {tab==='Availability' && <>
        <p className="datelbl">Weekly windows · Lagos (GMT+1)</p>
        {HOURS.map(([d,wins,st])=>(
          <div className={'dayline'+(wins.length?'':' closed')} key={d}>
            <span className="nm">{d}</span>
            <span className="win">
              {wins.map(w=><span className="p tnum" key={w}>{w}</span>)}
              {wins.length ? <button className="add">+</button> : <span className="nowin">No windows — kept for deep work</span>}
            </span>
            <span className="st">{st}</span>
          </div>
        ))}
        <p className="datelbl">Exceptions</p>
        <div className="pref"><span>Fri 20 March — closed all day</span><button className="st">remove</button></div>
        <div className="pref"><span>Mon 6 April — 14:00 – 17:00 only</span><button className="st">remove</button></div>
        <div className="pref last"><button className="or plain">+ Add an exception</button><span></span></div>
        <p className="datelbl">Rules</p>
        <div className="pref"><span>Minimum notice before a booking</span><b className="tnum">18 hours</b></div>
        <div className="pref"><span>How far ahead the calendar opens</span><b className="tnum">8 weeks</b></div>
        <div className="pref last"><span>Maximum meetings in a day</span><b className="tnum">4</b></div>
      </>}

      {tab==='Settings' && <>
        <p className="datelbl">Calendar</p>
        <div className="cblock">
          <h4><span className="conn"><i className={'dot'+(health==='bad'?' bad':'')}></i>{health==='bad'?'Disconnected':'Connected'}</span></h4>
          <p>toni@enterscale.com · calendar “Toni — work”. Free/busy is read for the next 8 weeks; nothing else is read, and nothing is written except the bookings I make.</p>
          <button className="act mut">Disconnect</button>
        </div>
        <p className="datelbl">Preferences</p>
        <div className="pref"><span>My timezone</span><b>Lagos (GMT+1)</b></div>
        <div className="pref"><span>Notifications to</span><b>toni@enterscale.com</b></div>
        <div className="pref last"><span>Booking page intro</span><b>Pick one, and I’ll make the time.</b></div>
        <p className="hint pad">Four routes, one text nav, one user. Everything a second person would need is deliberately absent.</p>
      </>}
    </div>
  );
}
Object.assign(window, { Admin });