/* ============================================================
   SELARAS — workspace: jobs list, create job, billing, settings
   ============================================================ */

function PageHead({eyebrow, title, sub, actions}){
  return (
    <div className="phead">
      <div>
        {eyebrow && <div className="eyebrow" style={{marginBottom:8}}>{eyebrow}</div>}
        <div className="ttl">{title}</div>
        {sub && <div className="sub">{sub}</div>}
      </div>
      {actions && <div className="row gap10 wrap">{actions}</div>}
    </div>
  );
}

/* ---------------- JOBS LIST ---------------- */
function StatusPill({s}){
  const map={'Aktif':'p-hi','Menyaring':'p-mid','Selesai':'b-opt'};
  return <span className={'pill '+(map[s]||'b-opt')}><span className="dot" style={{background:'currentColor'}}></span>{s}</span>;
}

function JobsList({nav, empty}){
  const [q,setQ]=React.useState('');
  if(empty){
    return (
      <>
        <PageHead eyebrow="Lowongan" title="Lowongan kamu" />
        <div className="emptystate">
          <div className="empty-ic"><Icon n="briefcase" s={30}/></div>
          <h3 className="serif">Belum ada lowongan</h3>
          <p>Buat lowongan pertamamu, tempel job description, dan biarkan Selaras merekomendasikan tes yang paling pas. Sebar ke pelamar lewat WhatsApp dalam hitungan menit.</p>
          <button className="btn btn-primary btn-lg" onClick={()=>nav('create')}><Icon n="plus" s={17}/> Buat lowongan pertama</button>
          <div className="empty-steps">
            <span><b>1</b> Tempel JD</span><Icon n="chevR" s={14}/>
            <span><b>2</b> Pilih tes</span><Icon n="chevR" s={14}/>
            <span><b>3</b> Sebar via WA</span>
          </div>
        </div>
      </>
    );
  }
  const jobs = JOBS.filter(j=>j.title.toLowerCase().includes(q.toLowerCase()));
  return (
    <>
      <PageHead eyebrow="Lowongan" title="Lowongan kamu" sub="Semua posisi yang sedang kamu rekrut."
        actions={<button className="btn btn-primary" onClick={()=>nav('create')}><Icon n="plus" s={17}/> Buat lowongan</button>}/>
      <div className="toolbar">
        <div className="input-ic grow" style={{maxWidth:360}}><Icon n="search"/><input className="field" placeholder="Cari lowongan…" value={q} onChange={e=>setQ(e.target.value)}/></div>
        <button className="btn btn-ghost btn-sm"><Icon n="filter" s={15}/> Filter</button>
      </div>
      <div className="jobgrid">
        {jobs.map(j=>{
          const pct = Math.round(j.done/j.applicants*100);
          return (
            <div key={j.id} className="jobcard" onClick={()=>nav('dashboard')}>
              <div className="row between" style={{marginBottom:14}}>
                <div className="jobcat">{j.cat}</div>
                <StatusPill s={j.status}/>
              </div>
              <h3 className="jobttl">{j.title}</h3>
              <div className="note" style={{marginBottom:16}}>Diposting {j.posted}</div>
              <div className="jobstats">
                <div><b className="tnum">{j.applicants}</b><span>Pelamar</span></div>
                <div><b className="tnum">{j.done}</b><span>Selesai tes</span></div>
                <div><b className="tnum t-hi">{j.hi}</b><span>Fit tinggi</span></div>
              </div>
              <div className="jobprog">
                <div className="bar"><i style={{width:pct+'%',background:'var(--brand-500)'}}></i></div>
                <span className="note">{pct}% selesai</span>
              </div>
              <div className="jobcard-foot">Lihat kandidat <Icon n="arrowR" s={15}/></div>
            </div>
          );
        })}
      </div>
    </>
  );
}

/* ---------------- CREATE JOB ---------------- */
function CreateJob({nav}){
  const [recs,setRecs]=React.useState(TEST_RECS.map(r=>({...r})));
  const toggle = i => setRecs(rs=>rs.map((r,idx)=>idx===i?{...r,on:!r.on}:r));
  const active = recs.filter(r=>r.on).length;
  const mins = recs.filter(r=>r.on).length*4;

  return (
    <>
      <PageHead eyebrow="Lowongan baru" title="Buat lowongan & dapat rekomendasi tes"
        sub="Tempel job description — AI membaca kebutuhan peran dan menyusun paket tes yang paling prediktif."/>
      <div className="create-grid">
        <div className="card">
          <div className="card-hd"><h3>Job description</h3><span className="note">Tempel JD atau pilih template</span></div>
          <div className="card-bd">
            <label className="label">Posisi</label>
            <input className="field" defaultValue="Resepsionis Hotel — The Ubud Villa" style={{marginBottom:16}}/>
            <label className="label">Kategori</label>
            <div className="row wrap gap8" style={{marginBottom:18}}>
              <span className="chip act">Hospitality</span>
              <span className="chip">Shift / customer-facing</span>
              <span className="chip">Entry level</span>
            </div>
            <label className="label">Deskripsi tugas</label>
            <textarea className="field" rows="8" defaultValue="Menyambut tamu, proses check-in/check-out, menangani reservasi dan komplain tamu dengan tenang. Wajib komunikatif, sabar di bawah tekanan, rapi administrasi, dan bisa kerja sistem shift termasuk akhir pekan. Bahasa Inggris aktif jadi nilai plus. Mencari orang yang betah, bukan yang resign dalam 2 bulan."></textarea>
            <div className="jd-note"><Icon n="users" s={16}/> 42 pelamar masuk dari job posting. Saring sebelum interview.</div>
          </div>
        </div>

        <div className="card">
          <div className="card-hd">
            <div className="row gap10">
              <div className="ai-spark"><Icon n="sparkles" s={16}/></div>
              <div><h3 style={{lineHeight:1.1}}>Rekomendasi tes AI</h3><span className="note">Dibaca dari JD · bisa kamu sesuaikan</span></div>
            </div>
          </div>
          <div className="card-bd">
            {recs.map((r,i)=>(
              <div className={'testrow'+(r.on?'':' is-off')} key={r.n}>
                <div className="testnum">{r.n}</div>
                <div className="grow">
                  <div className="testname">{r.name} <span className={'badge '+r.tagClass}>{r.tag}</span></div>
                  <div className="testwhy">{r.why}</div>
                </div>
                <button className={'tog'+(r.on?'':' off')} onClick={()=>toggle(i)} aria-label="toggle"></button>
              </div>
            ))}
            <div className="estbox">
              <div className="row gap8"><Icon n="clock" s={16} className="subtle"/><span className="note">Estimasi <b style={{color:'var(--ink)'}}>{mins} menit</b> per kandidat · {active} tes aktif</span></div>
              <div className="row gap8"><Icon n="zap" s={16} className="subtle"/><span className="note">Menyebar tes <b style={{color:'var(--ink)'}}>gratis</b> — kredit hanya untuk buka laporan</span></div>
            </div>
            <button className="btn btn-primary btn-block btn-lg mt20" onClick={()=>nav('distribute')}>Lanjut: sebar tes <Icon n="arrowR" s={17}/></button>
          </div>
        </div>
      </div>
    </>
  );
}

/* ---------------- DISTRIBUTE / SEBAR TES ---------------- */
function Distribute({nav}){
  const link = "selaras.id/t/ubud-villa/8kf2";
  const [msg,setMsg]=React.useState("Halo 👋 Terima kasih sudah melamar posisi Resepsionis di The Ubud Villa. Mohon selesaikan tes singkat ini (±12 menit) sebelum tahap interview ya:\n\nhttps://"+link+"\n\nBisa dikerjakan dari HP, kapan saja sebelum Jumat.");
  const [copied,setCopied]=React.useState(false);
  const copy=()=>{ try{navigator.clipboard.writeText("https://"+link);}catch(e){} setCopied(true); setTimeout(()=>setCopied(false),1800); };
  const waLink=(phone)=>"https://wa.me/"+(phone?("62"+phone.replace(/[^0-9]/g,'').replace(/^0/,'')):"")+"?text="+encodeURIComponent(msg);
  const invites=[
    {name:'Putu Ari Wibawa',phone:'0813-7788-1020',status:'Selesai'},
    {name:'Kadek Dwi Lestari',phone:'0812-5566-3401',status:'Selesai'},
    {name:'Made Surya Pratama',phone:'0859-2210-7788',status:'Terkirim'},
    {name:'Ni Komang Ayu',phone:'0878-9912-4456',status:'Belum'},
  ];
  const stMap={'Selesai':'p-hi','Terkirim':'p-mid','Belum':'b-opt'};
  return (
    <>
      <PageHead eyebrow="Sebar tes" title="Sebar tes ke pelamar"
        sub="Tesnya gratis. Bagikan satu link ke semua, atau undang per kandidat lewat WhatsApp-mu sendiri."
        actions={<button className="btn btn-ghost" onClick={()=>nav('dashboard')}>Lihat hasil <Icon n="arrowR" s={16}/></button>}/>
      <div className="create-grid">
        <div className="card">
          <div className="card-hd"><h3>Cara 1 — Satu link untuk semua</h3><span className="pill p-hi">Tercepat</span></div>
          <div className="card-bd">
            <label className="label">Link tes lowongan ini</label>
            <div className="linkrow">
              <div className="linkfield">https://{link}</div>
              <button className="btn btn-soft btn-sm" onClick={copy}><Icon n={copied?'check':'copy'} s={15}/> {copied?'Tersalin':'Salin'}</button>
            </div>
            <a className="btn btn-wa btn-block mt14" href={waLink()} target="_blank" rel="noreferrer"><Icon n="wa" s={17}/> Bagikan via WhatsApp</a>
            <div className="note mt10">Pelamar isi namanya sendiri saat mulai. Cocok dibagikan ke broadcast, status WA, atau dibalas ke chat pelamar yang sudah masuk.</div>
            <label className="label mt20">Pesan WhatsApp (bisa diedit)</label>
            <textarea className="field" rows="6" value={msg} onChange={e=>setMsg(e.target.value)}></textarea>
          </div>
        </div>
        <div className="card">
          <div className="card-hd"><h3>Cara 2 — Undang per kandidat</h3><span className="note">Buat yang mau dilacak</span></div>
          <div className="card-bd">
            <div className="invite-add">
              <input className="field" placeholder="Nama pelamar"/>
              <input className="field" placeholder="08xxxxxxxxxx"/>
              <button className="btn btn-primary btn-sm"><Icon n="plus" s={15}/> Tambah</button>
            </div>
            <div className="invite-list">
              {invites.map((c,i)=>(
                <div className="inviterow" key={i}>
                  <Avatar name={c.name} color="var(--brand-500)" size={36}/>
                  <div className="grow"><b>{c.name}</b><span className="note">{c.phone}</span></div>
                  <span className={'pill '+stMap[c.status]}>{c.status}</span>
                  {c.status==='Belum'
                    ? <a className="btn btn-wa btn-sm" href={waLink(c.phone)} target="_blank" rel="noreferrer"><Icon n="wa" s={15}/> Kirim</a>
                    : <button className="btn btn-ghost btn-sm" disabled><Icon n="check" s={14}/> Terkirim</button>}
                </div>
              ))}
            </div>
            <div className="ob-callout mt16"><Icon n="info" s={18}/><span>Terkirim dari WhatsApp kamu sendiri — gratis, tanpa biaya per pesan. Pengiriman massal otomatis lewat WhatsApp resmi menyusul di fase berikutnya.</span></div>
          </div>
        </div>
      </div>
    </>
  );
}

/* ---------------- BILLING ---------------- */
function Billing({nav}){
  return (
    <>
      <PageHead eyebrow="Tagihan & kredit" title="Tagihan & kredit"
        sub="Kelola paket dan kredit laporan. Skor dan ranking selalu gratis."/>
      <div className="billtop">
        <div className="card card-pad creditbig">
          <div className="eyebrow">Sisa kredit</div>
          <div className="creditbig-num"><span className="serif">173</span> <small>kredit</small></div>
          <div className="bar" style={{margin:'14px 0 8px'}}><i style={{width:'70%',background:'var(--accent)'}}></i></div>
          <div className="note">Dari 200 kredit bulan ini · reset 1 Juli</div>
          <button className="btn btn-accent btn-block mt20"><Icon n="plus" s={16}/> Beli kredit tambahan</button>
        </div>
        <div className="card card-pad">
          <div className="eyebrow">Paket aktif</div>
          <div className="row between mt8" style={{alignItems:'flex-start'}}>
            <div><div className="plan-now serif">Pro</div><div className="note">Rp 499.000 / bulan · diperpanjang 1 Juli</div></div>
            <span className="pill p-hi">Aktif</span>
          </div>
          <div className="usegrid mt20">
            <div><b className="tnum">27</b><span>laporan dibuka</span></div>
            <div><b className="tnum">4</b><span>lowongan aktif</span></div>
            <div><b className="tnum">3</b><span>anggota tim</span></div>
          </div>
          <button className="btn btn-ghost btn-block mt20">Kelola paket</button>
        </div>
      </div>

      <h3 className="sec-h">Pilih paket</h3>
      <div className="plangrid">
        {PLANS.map(p=>(
          <div key={p.name} className={'plancard'+(p.popular?' pop':'')}>
            {p.popular && <div className="plan-badge">Paling populer</div>}
            <div className="plan-name">{p.name}</div>
            <div className="plan-price serif">{p.price}<small>/{p.per==='sekali'?'':' bln'}</small></div>
            <div className="plan-credits">{p.credits}</div>
            <ul className="plan-feat">
              {p.feat.map(f=><li key={f}><Icon n="check" s={15}/> {f}</li>)}
            </ul>
            <button className={'btn btn-block '+(p.tone==='primary'?'btn-primary':'btn-ghost')} disabled={p.popular}>{p.cta}</button>
          </div>
        ))}
      </div>

      <h3 className="sec-h">Riwayat tagihan</h3>
      <div className="card invoices">
        {[['1 Jun 2026','Paket Pro — Juni','Rp 499.000','Lunas'],['1 Mei 2026','Paket Pro — Mei','Rp 499.000','Lunas'],['18 Apr 2026','100 kredit tambahan','Rp 250.000','Lunas']].map((r,i)=>(
          <div className="invrow" key={i}>
            <Icon n="file" s={18} className="subtle"/>
            <div className="grow"><b>{r[1]}</b><span className="note">{r[0]}</span></div>
            <span className="tnum" style={{fontWeight:700}}>{r[2]}</span>
            <span className="pill p-hi">{r[3]}</span>
            <button className="iconbtn" style={{width:34,height:34}}><Icon n="download" s={16}/></button>
          </div>
        ))}
      </div>
    </>
  );
}

/* ---------------- SETTINGS ---------------- */
function Settings({nav}){
  const [tab,setTab]=React.useState('bisnis');
  const CTX_SUGGEST=['Sering hadapi tamu sulit','Banyak shift malam & akhir pekan','Tim kecil, harus multitasking','Standar kebersihan tinggi','Butuh bahasa Inggris aktif','Turnover tinggi di entry level','Layanan tamu premium','Kerja cepat saat peak season'];
  const [ctxChips,setCtxChips]=React.useState(['Sering hadapi tamu sulit','Banyak shift malam & akhir pekan','Standar kebersihan tinggi']);
  const toggleCtx=c=>setCtxChips(s=>s.includes(c)?s.filter(x=>x!==c):[...s,c]);
  const tabs=[['bisnis','Bisnis'],['konteks','Konteks AI'],['tim','Tim'],['notif','Notifikasi']];
  return (
    <>
      <PageHead eyebrow="Pengaturan" title="Pengaturan"/>
      <div className="settabs">
        {tabs.map(([k,l])=><button key={k} className={'settab'+(tab===k?' on':'')} onClick={()=>setTab(k)}>{l}</button>)}
      </div>
      {tab==='bisnis' && (
        <div className="card card-pad set-card">
          <h3 className="set-h">Profil bisnis</h3>
          <div className="setrow"><label className="label">Nama bisnis</label><input className="field" defaultValue="The Ubud Villa"/></div>
          <div className="setrow"><label className="label">Industri</label><input className="field" defaultValue="Hospitality"/></div>
          <div className="setrow"><label className="label">Nomor WhatsApp pengirim</label><input className="field" defaultValue="+62 813-XXXX-2201"/></div>
          <div className="setrow"><label className="label">Logo</label>
            <div className="row gap14"><div className="av" style={{width:52,height:52,background:'var(--brand)',borderRadius:14}}>UV</div><button className="btn btn-ghost btn-sm">Ganti logo</button></div>
          </div>
          <div className="row" style={{justifyContent:'flex-end',marginTop:8}}><button className="btn btn-primary">Simpan perubahan</button></div>
        </div>
      )}
      {tab==='konteks' && (
        <div className="card card-pad set-card">
          <div className="row gap10" style={{marginBottom:6}}>
            <div className="ai-spark"><Icon n="sparkles" s={16}/></div>
            <div><h3 className="set-h" style={{margin:0}}>Konteks bisnis untuk AI</h3><span className="note">Makin paham bisnismu, makin akurat penilaian kandidatnya.</span></div>
          </div>
          <div className="ob-callout" style={{marginTop:14,marginBottom:20}}><Icon n="info" s={18}/><span>Konteks ini dipakai AI untuk menyesuaikan bobot tes, menyusun skenario SJT, dan menafsirkan jawaban kandidat sesuai realita di tempatmu.</span></div>

          <label className="label">Hal khas yang perlu AI tahu</label>
          <textarea className="field" rows="5" defaultValue="Resepsionis kami sering jadi orang pertama yang dikomplain tamu, jadi ketenangan dan empati di bawah tekanan sangat penting. Banyak tamu asing, jadi bahasa Inggris aktif jadi nilai plus. Kami tim kecil — satu orang bisa pegang front desk, reservasi, dan bantu kasir sekaligus. Yang paling kami hindari: orang yang resign dalam 2 bulan."></textarea>

          <label className="label" style={{marginTop:18}}>Karakteristik bisnis</label>
          <div className="note" style={{marginBottom:10}}>Pilih yang sesuai — AI memberi bobot lebih pada sifat yang relevan.</div>
          <div className="row wrap gap8">
            {CTX_SUGGEST.map(c=>(
              <span key={c} className={'chip'+(ctxChips.includes(c)?' act':'')} onClick={()=>toggleCtx(c)}>
                {ctxChips.includes(c)&&<Icon n="check" s={13}/>}{c}
              </span>
            ))}
          </div>

          <label className="label" style={{marginTop:18}}>Seperti apa “karyawan sukses” di sini?</label>
          <textarea className="field" rows="3" defaultValue="Betah jangka panjang, rapi administrasi, dan tetap ramah walau hari sedang ramai."></textarea>

          <div className="row between" style={{marginTop:18,flexWrap:'wrap',gap:10}}>
            <span className="note"><Icon n="refresh" s={12}/> Konteks berlaku untuk semua lowongan baru.</span>
            <button className="btn btn-primary">Simpan konteks</button>
          </div>
        </div>
      )}
      {tab==='tim' && (
        <div className="card set-card" style={{padding:0}}>
          <div className="card-hd"><h3>Anggota tim</h3><button className="btn btn-soft btn-sm"><Icon n="plus" s={15}/> Undang anggota</button></div>
          <div className="card-bd" style={{paddingTop:6}}>
            {TEAM.map(m=>(
              <div className="teamrow" key={m.email}>
                <Avatar name={m.name} color={m.color} size={42}/>
                <div className="grow"><div className="row gap8"><b>{m.name}</b>{m.you&&<span className="badge b-opt">Kamu</span>}</div><span className="note">{m.email}</span></div>
                <span className="teamrole">{m.role}</span>
                {!m.you && <button className="iconbtn" style={{width:34,height:34}}><Icon n="more" s={16}/></button>}
              </div>
            ))}
          </div>
        </div>
      )}
      {tab==='notif' && (
        <div className="card card-pad set-card">
          <h3 className="set-h">Notifikasi</h3>
          {[['Kandidat menyelesaikan tes','Email + WhatsApp saat ada yang selesai',true],
            ['Ringkasan harian','Rekap kandidat baru tiap sore',true],
            ['Kredit hampir habis','Ingatkan saat sisa kredit di bawah 20',true],
            ['Tips & pembaruan produk','Sesekali, tanpa spam',false]].map((r,i)=>(
            <div className="notifrow" key={i}>
              <div className="grow"><b>{r[0]}</b><span className="note">{r[1]}</span></div>
              <NotifToggle on={r[2]}/>
            </div>
          ))}
        </div>
      )}
    </>
  );
}
function NotifToggle({on}){const[v,setV]=React.useState(on);return <button className={'tog'+(v?'':' off')} onClick={()=>setV(!v)} aria-label="toggle"></button>;}

Object.assign(window, { PageHead, JobsList, CreateJob, Distribute, Billing, Settings, StatusPill });