// tab-settings.jsx — config consolidation
const { useState } = React;

function Toggle({ on, onClick }){ return <button className={'toggle'+(on?' on':'')} onClick={onClick}><i/></button>; }

// ── Data source: which contact set the Brain reasons over ──────────
// Seed = the built-in demo pipeline. Live = the real Supabase `contacts`
// table (requires Google sign-in for RLS to expose rows). Flipping reloads
// live data and re-renders Today via RaiseLiveData._ping().
function DataSourceCard(){
  const RLD = window.RaiseLiveData;
  const [,f] = useState(0);
  React.useEffect(()=>{ const h=()=>f(x=>x+1); window.addEventListener('raise-livedata',h); return ()=>window.removeEventListener('raise-livedata',h); },[]);
  if(!RLD) return null;
  const mode = RLD.mode();
  const live = mode === 'live';
  const ok = RLD._ok, loaded = RLD._loaded, n = RLD._cache.length;
  const status = !live ? 'Using built-in seed pipeline'
    : !loaded ? 'Loading live contacts…'
    : ok ? (n + ' live contact' + (n===1?'':'s') + ' loaded')
    : 'Sign in with Google to load live data';
  return (
    <>
      <div className="sett-title">Data source</div>
      <div className="setcard">
        <div className="field">
          <div><div className="fk">Brain data source</div><div className="fd">Which pipeline the engine reasons over for asks + brief</div></div>
          <div className="seg fc2">
            {[['seed','Seed'],['live','Live']].map(([v,lab])=>(
              <button key={v} className={mode===v?'on':''} onClick={()=>{ RLD.setMode(v); window.RaiseShell.toast(v==='live'?'Switched to live Supabase contacts':'Switched to seed pipeline'); }}>{lab}</button>
            ))}
          </div>
        </div>
        <div className="field">
          <div><div className="fk">Status</div><div className="fd">{status}</div></div>
          <button className="btn sm fc2" disabled={!live} onClick={()=>RLD.load()}>Refresh</button>
        </div>
      </div>
    </>
  );
}

// ── Email sender settings (persisted in OX.Store) ──────────────────
function EmailSettings(){
  const OX = window.OX;
  const [,f] = useState(0);
  React.useEffect(()=> OX.Store.subscribe(()=>f(x=>x+1)), []);
  const es = OX.Store.emailSettings();
  const set = (p)=> OX.Store.patchEmail(p);
  return (
    <>
      <div className="sett-title">Email</div>
      <div className="setcard">
        <div className="field">
          <div><div className="fk">Default “From” account</div><div className="fd">Pre-selected when you open the composer</div></div>
          <div className="seg fc2">
            {OX.ACCOUNTS.map(a=>(<button key={a.id} className={es.fromDefault===a.id?'on':''} onClick={()=>set({fromDefault:a.id})}>{a.label||a.email}</button>))}
          </div>
        </div>
        <div className="sett-accts">
          {OX.ACCOUNTS.map(a=>(
            <div key={a.id} className="sett-acct">
              <span className="sett-acct-dot" style={{background:a.id==='fund'?'var(--primary)':'var(--green)'}} />
              <div className="sett-acct-meta"><b>{a.email}</b><small>{a.label} · {a.kind}</small></div>
              {es.fromDefault===a.id && <span className="sett-acct-badge">Default</span>}
              <span className="sett-acct-conn"><span className="edot"/>Connected</span>
            </div>
          ))}
        </div>
        <div className="field col">
          <div style={{width:'100%'}}><div className="fk">Signature</div><div className="fd">Appended to every draft the composer generates — edit once, applies everywhere</div></div>
          <textarea className="sett-sig mono" value={es.signature} onChange={e=>set({signature:e.target.value})} rows={4} spellCheck={false} />
        </div>
        <div className="field">
          <div><div className="fk">Track opens by default</div><div className="fd">Embeds a tracking pixel; receipts land in the Outbox. Image blockers &amp; Apple Mail Privacy can hide or inflate opens — treat as a soft signal.</div></div>
          <Toggle on={es.trackOpens} onClick={()=>set({trackOpens:!es.trackOpens})}/>
        </div>
        <div className="field">
          <div><div className="fk">Log touch on send</div><div className="fd">Writes a touch to the contact’s timeline automatically</div></div>
          <Toggle on={es.logTouch} onClick={()=>set({logTouch:!es.logTouch})}/>
        </div>
        <div className="field">
          <div><div className="fk">Undo-send window</div><div className="fd">Seconds to pull a message back after pressing Send</div></div>
          <div className="seg fc2">
            {[5,10,20,30].map(s=>(<button key={s} className={es.undoWindow===s?'on':''} onClick={()=>set({undoWindow:s})}>{s}s</button>))}
          </div>
        </div>
        <div className="field">
          <div><div className="fk">Auto-BCC every send</div><div className="fd">Blind-copy a logging address so sends archive to your records</div></div>
          <Toggle on={es.autoBcc} onClick={()=>set({autoBcc:!es.autoBcc})}/>
        </div>
        {es.autoBcc && (
          <div className="field">
            <div><div className="fk">BCC address</div><div className="fd">Where archived copies are sent</div></div>
            <input className="inp mono fc2" value={es.autoBccAddr} onChange={e=>set({autoBccAddr:e.target.value})} style={{width:240}}/>
          </div>
        )}
        <div className="field">
          <div><div className="fk">Reset email settings</div><div className="fd">Restore the default signature and toggles</div></div>
          <button className="btn sm fc2" onClick={()=>{ OX.Store.resetEmail(); window.RaiseShell.toast('Email settings reset'); }}>Reset</button>
        </div>
      </div>
    </>
  );
}

// ── Quick attachments editor (3 one-click files for the composer) ──
function QuickAttachments(){
  const OX = window.OX;
  const [,f] = useState(0);
  React.useEffect(()=> OX.Store.subscribe(()=>f(x=>x+1)), []);
  const atts = OX.Store.attachments();
  const onPick = (i, e)=>{
    const file = (e.target.files||[])[0]; if(!file) return;
    const reader = new FileReader();
    reader.onload = ()=>{
      const b64 = String(reader.result).split(',')[1] || '';
      const kb = file.size/1024;
      const size = kb>=1024 ? (kb/1024).toFixed(1)+' MB' : Math.max(1,Math.round(kb))+' KB';
      OX.Store.setAttachment(i, { name:file.name, size, type:file.type||'application/octet-stream', b64 });
      window.RaiseShell.toast('Quick attachment '+(i+1)+' set');
    };
    reader.readAsDataURL(file);
    e.target.value='';
  };
  return (
    <>
      <div className="sett-title">Quick attachments</div>
      <div className="setcard">
        <div className="field col"><div style={{width:'100%'}}><div className="fk">Three one-click files for the composer</div><div className="fd">Upload the docs you attach most — deck, one-pager, data-room PDF. They show as chips in every composer and send for real when Live.</div></div></div>
        {[0,1,2].map(i=>{ const a=atts[i]||{}; return (
          <div className="field" key={i}>
            <div style={{display:'flex',alignItems:'center',gap:10,minWidth:0}}>
              <span className="att-ic">{a.name?'📎':'＋'}</span>
              <div style={{minWidth:0}}>
                <div className="fk" style={{whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',maxWidth:300}}>{a.name||('Empty slot '+(i+1))}</div>
                <div className="fd">{a.name ? (a.size + (a.b64?' · ready to send':' · name only')) : 'No file set'}</div>
              </div>
            </div>
            <div className="fc2" style={{display:'flex',gap:8}}>
              <label className="btn sm" style={{cursor:'pointer'}}>{a.name?'Replace':'Upload'}<input type="file" style={{display:'none'}} onChange={(e)=>onPick(i,e)} /></label>
              {a.name && <button className="btn sm" onClick={()=>{ OX.Store.clearAttachment(i); window.RaiseShell.toast('Slot '+(i+1)+' cleared'); }}>Clear</button>}
            </div>
          </div>
        );})}
      </div>
    </>
  );
}

function TabSettings(){
  const { TopBar } = window.RaiseShell;
  const [theme,setTheme] = useState('light');
  const [start,setStart] = useState('8:30');
  const [target,setTarget] = useState('10,000,000');
  const [nurture,setNurture] = useState(true);
  const [overnight,setOvernight] = useState(true);
  const [q,setQ] = useState({touches:5,follow:3,meet:1,prospects:15,referral:2,content:2});

  return (
    <>
      <TopBar title="Settings" sub="Start hour · target · quotas · backup · account" />
      <div className="settings scroll">
        <div className="setgrid">

          <div className="sett-title">General</div>
          <div className="setcard">
            <div className="field">
              <div><div className="fk">Day start hour</div><div className="fd">Anchors time blocks and the morning brief</div></div>
              <input className="inp mono fc2" value={start} onChange={e=>setStart(e.target.value)} style={{width:90}}/>
            </div>
            <div className="field">
              <div><div className="fk">Theme</div><div className="fd">Warm light is the daily-driver default</div></div>
              <div className="seg fc2">
                {['light','dark'].map(t=>(<button key={t} className={theme===t?'on':''} onClick={()=>setTheme(t)}>{t[0].toUpperCase()+t.slice(1)}</button>))}
              </div>
            </div>
            <div className="field">
              <div><div className="fk">Fund target</div><div className="fd">Drives capital bar + funnel-math coverage</div></div>
              <div className="fc2" style={{display:'flex',alignItems:'center',gap:6}}><span className="mono" style={{color:'var(--ink-3)'}}>$</span><input className="inp mono" value={target} onChange={e=>setTarget(e.target.value)} style={{width:130}}/></div>
            </div>
          </div>

          <window.RaiseLive.GoogleConnectionCard />

          <DataSourceCard />

          <EmailSettings />

          <QuickAttachments />

          <div className="sett-title">Quotas</div>
          <div className="setcard">
            {[['Daily touches','touches'],['Daily follow-ups','follow'],['Daily meetings','meet'],
              ['Weekly prospects researched','prospects'],['Weekly referral asks','referral'],['Weekly content pieces','content']].map(([lab,key])=>(
              <div className="field" key={key}>
                <div className="fk">{lab}</div>
                <input className="inp mono fc2" type="number" value={q[key]} onChange={e=>setQ({...q,[key]:e.target.value})} style={{width:70}}/>
              </div>
            ))}
          </div>

          <div className="sett-title">Engine</div>
          <div className="setcard">
            <div className="field">
              <div><div className="fk">Overnight batch</div><div className="fd">Morning scheduled task processes all queues (research, scoring, drafts)</div></div>
              <Toggle on={overnight} onClick={()=>setOvernight(!overnight)}/>
            </div>
            <div className="field">
              <div><div className="fk">Auto-nurture passed contacts</div><div className="fd">3–4 value touches / yr for "not now" passes</div></div>
              <Toggle on={nurture} onClick={()=>setNurture(!nurture)}/>
            </div>
            <div className="field">
              <div><div className="fk">Engine status</div><div className="fd">Runs on Austin's Claude subscription — no API keys</div></div>
              <span className="fc2" style={{display:'flex',alignItems:'center',gap:8}}><span className="edot"/><span className="mono" style={{fontSize:12,color:'var(--ink-2)'}}>Synced 7:02 AM</span></span>
            </div>
          </div>

          <div className="sett-title">Data</div>
          <div className="setcard">
            <div className="field">
              <div><div className="fk">Backup & export</div><div className="fd">Full JSON snapshot of pipeline, sequences, reviews</div></div>
              <div className="fc2" style={{display:'flex',gap:8}}><button className="btn sm">Export JSON</button><button className="btn sm">Import</button></div>
            </div>
            <div className="field">
              <div><div className="fk">Belinda access</div><div className="fd">Schema is multi-user-ready (actor column) — enable when ready</div></div>
              <Toggle on={false} onClick={()=>{}}/>
            </div>
          </div>

          <div className="sett-title">Account</div>
          <div className="setcard">
            <div className="field">
              <div style={{display:'flex',alignItems:'center',gap:11}}>
                <window.RaiseShell.Avatar name="Austin C"/>
                <div><div className="fk">Austin · AllStreet Capital</div><div className="fd">austin@allstreetcap.com · solo operator</div></div>
              </div>
              <button className="btn sm fc2" onClick={()=>window.RaiseLive.signOut()}>Sign out</button>
            </div>
          </div>

          <div style={{height:24}}/>
        </div>
      </div>
    </>
  );
}
window.TabSettings = TabSettings;