function PageHead({ kicker, title, sub, right }) {
  return <div style={{display:'flex',alignItems:'flex-end',gap:20,marginBottom:24}}>
    <div style={{flex:1}}>
      <div style={{fontSize:11.5,fontWeight:600,letterSpacing:'0.08em',textTransform:'uppercase',color:'var(--sitm-teal-deep)',marginBottom:6}}>{kicker}</div>
      <div style={{fontFamily:'var(--sitm-font-heading)',fontSize:28,color:'var(--sitm-navy)',lineHeight:1.1}}>{title}</div>
      {sub && <Sub style={{marginTop:8,maxWidth:640}}>{sub}</Sub>}
    </div>
    {right}
  </div>;
}
function SearchInput({ value, onChange, placeholder, style }) {
  return <div style={{position:'relative',...style}}>
    <span style={{position:'absolute',left:11,top:10,color:'var(--sitm-text)',opacity:.6}}><Icon name="search" size={15}/></span>
    <input value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder}
      style={{width:'100%',boxSizing:'border-box',fontFamily:'var(--sitm-font-body)',fontSize:13.5,padding:'9px 12px 9px 34px',border:'1px solid rgba(62,71,97,.2)',outline:'none',color:'var(--sitm-text)',borderRadius:8}}/>
  </div>;
}
function MiniSelect({ label, value, onChange, options, width }) {
  return <span style={{position:'relative',display:'inline-block',width}}>
    <select value={value} onChange={e=>onChange(e.target.value)} title={label}
      style={{width:'100%',appearance:'none',WebkitAppearance:'none',fontFamily:'var(--sitm-font-body)',fontSize:12.5,fontWeight:500,color:'var(--sitm-text)',padding:'9px 30px 9px 12px',background:'#fff',border:'1px solid var(--sitm-border)',outline:'none',cursor:'pointer',borderRadius:8}}>
      {options.map(o=><option key={o} value={o}>{o}</option>)}
    </select>
    <span style={{position:'absolute',right:9,top:'50%',transform:'translateY(-50%)',pointerEvents:'none',color:'var(--sitm-text)'}}><Icon name="chevR" size={12} style={{transform:'rotate(90deg)'}}/></span>
  </span>;
}
function FilesPage({ go, toast, files, onDeleteFile }) {
  const [q,setQ] = React.useState('');
  const [kind,setKind] = React.useState('Everything');
  const kinds = ['Everything','Worksheet','Flashcards','Interactive quiz','Word search'];
  const list = files.filter(f => (kind==='Everything'||f.type===kind) && f.name.toLowerCase().includes(q.toLowerCase()));
  return <div style={{maxWidth:1240,margin:'0 auto',padding:'36px 28px 80px'}}>
    <PageHead kicker="My files" title="Everything you have made"
      sub="Every worksheet, quiz, and puzzle you make ends up here. Download again any time, open one in the editor to change it, or delete what you no longer need."
      right={<Btn icon="make" onClick={()=>go('create')}>Make something new</Btn>}/>
    <div style={{display:'flex',gap:10,marginBottom:20,alignItems:'center'}}>
      <SearchInput value={q} onChange={setQ} placeholder="Search your files" style={{width:300}}/>
      <div style={{display:'flex',gap:6}}>
        {kinds.map(k => <button key={k} onClick={()=>setKind(k)} style={{fontFamily:'var(--sitm-font-body)',fontSize:12.5,fontWeight:500,padding:'8px 13px',cursor:'pointer',borderRadius:8,
          border:'1px solid '+(kind===k?'var(--sitm-teal)':'var(--sitm-border)'),background:kind===k?'rgba(97,189,183,.12)':'#fff',color:kind===k?'var(--sitm-teal-deep)':'var(--sitm-text)'}}>{k}</button>)}
      </div>
    </div>
    {list.length===0 ? <div style={{background:'#fff',border:'1px solid var(--sitm-border)',padding:'48px 20px',textAlign:'center',borderRadius:12}}>
      <Sub>{files.length===0 ? 'Nothing here yet. Make something and it will show up here.' : 'Nothing matches that. Try a different word, or make something new.'}</Sub>
    </div> :
    <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:18}}>
      {list.map(f => <FileCard key={f.id} file={f} go={go} toast={toast} onDelete={onDeleteFile}/>)}
    </div>}
  </div>;
}
function TemplateThumb({ kind }) {
  const line = (w,h=3,c='rgba(62,71,97,.25)') => <div style={{width:w,height:h,background:c}}></div>;
  const page = (children,bg='#fff') => <div style={{width:86,height:112,background:bg,border:'1px solid rgba(62,71,97,.25)',margin:'0 auto',padding:8,boxSizing:'border-box',display:'flex',flexDirection:'column',gap:5,borderRadius:6}}>{children}</div>;
  if (kind==='classic') return page([<div key="h" style={{height:12,background:'var(--sitm-teal)',margin:'-8px -8px 2px',borderRadius:'6px 6px 0 0'}}></div>,line('60%',5,'var(--sitm-navy)'),line('100%'),line('88%'),line('94%'),line('70%'),line('90%'),line('60%')]);
  if (kind==='clean') return page([line('55%',5,'rgba(28,29,29,.8)'),line('100%'),line('92%'),line('85%'),line('96%'),line('75%'),line('88%')]);
  if (kind==='twocol') return page([line('50%',5,'var(--sitm-navy)'),<div key="c" style={{display:'flex',gap:5,flex:1}}>
    <div style={{flex:1,display:'flex',flexDirection:'column',gap:4}}>{line('100%')}{line('80%')}{line('90%')}{line('70%')}</div>
    <div style={{flex:1,display:'flex',flexDirection:'column',gap:4}}>{line('90%')}{line('100%')}{line('75%')}{line('85%')}</div></div>]);
  if (kind==='cards8'||kind==='cards4') { const n = kind==='cards8'?8:4;
    return page([<div key="g" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:4,flex:1}}>{Array.from({length:n}).map((_,i)=><div key={i} style={{border:'1px dashed rgba(62,71,97,.35)',background:'rgba(97,189,183,.08)',borderRadius:3}}></div>)}</div>]); }
  if (kind==='bvert') return page([<div key="b" style={{width:34,height:56,margin:'8px auto',border:'1px solid rgba(62,71,97,.4)',background:'rgba(97,189,183,.1)',borderRadius:4}}><div style={{width:5,height:5,borderRadius:'50%',border:'1px solid rgba(62,71,97,.45)',margin:'3px auto'}}></div></div>]);
  if (kind==='bhoriz') return page([<div key="b" style={{width:56,height:34,margin:'18px auto',border:'1px solid rgba(62,71,97,.4)',background:'rgba(97,189,183,.1)',borderRadius:4}}></div>]);
  if (kind==='quizt') return page([line('60%',5,'var(--sitm-navy)'),<div key="q" style={{display:'flex',flexDirection:'column',gap:4,marginTop:2}}>{[0,1,2,3].map(i=><div key={i} style={{display:'flex',gap:4,alignItems:'center'}}><div style={{width:6,height:6,borderRadius:'50%',border:'1.5px solid '+(i===1?'var(--sitm-teal)':'rgba(62,71,97,.35)'),background:i===1?'var(--sitm-teal)':'transparent'}}></div><div style={{flex:1,height:3,background:'rgba(62,71,97,.25)'}}></div></div>)}</div>]);
  if (kind==='grid') return page([<div key="g" style={{display:'grid',gridTemplateColumns:'repeat(6,1fr)',gap:1,flex:1}}>{Array.from({length:36}).map((_,i)=><div key={i} style={{border:'0.5px solid rgba(62,71,97,.3)',background:[3,9,15,21].includes(i)?'var(--sitm-navy)':'#fff'}}></div>)}</div>]);
  if (kind==='upload') return <div style={{width:86,height:112,margin:'0 auto',border:'1.5px dashed var(--sitm-teal)',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:6,color:'var(--sitm-teal-deep)',borderRadius:8}}><Icon name="upload" size={20}/></div>;
  return page([]);
}
function TemplateCard({ tpl, selected, onClick, footnote, onDelete }) {
  const [h,setH] = React.useState(false);
  return <div onClick={onClick} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
    style={{background:'#fff',border:selected?'2px solid var(--sitm-teal)':'1px solid var(--sitm-border)',padding:selected?15:16,cursor:'pointer',textAlign:'center',borderRadius:12,
      boxShadow:h?'0 4px 14px rgba(62,71,97,.12)':'none',transition:'box-shadow .2s ease',position:'relative'}}>
    {selected && <span style={{position:'absolute',top:8,right:8,width:20,height:20,background:'var(--sitm-teal)',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',borderRadius:6}}><Icon name="check" size={12} stroke={3}/></span>}
    {!selected && onDelete && <span style={{position:'absolute',top:8,right:8,opacity:h?1:0,transition:'opacity .15s ease'}}><DeleteBtn onClick={()=>onDelete(tpl)}/></span>}
    <TemplateThumb kind={tpl.thumb}/>
    <div style={{fontSize:13.5,fontWeight:600,color:'var(--sitm-navy)',marginTop:10}}>{tpl.name}</div>
    <div style={{fontSize:11.5,color:'var(--sitm-text)',marginTop:3}}>{footnote || tpl.desc}</div>
  </div>;
}
function UploadTemplateModal({ open, onClose, onSaved }) {
  const [stage,setStage] = React.useState('pick');
  const [name,setName] = React.useState('My new template');
  React.useEffect(()=>{ if(open){ setStage('pick'); setName('My new template'); } },[open]);
  React.useEffect(()=>{ if(stage==='working'){ const t=setTimeout(()=>setStage('name'),1600); return ()=>clearTimeout(t); } },[stage]);
  return <Modal open={open} onClose={onClose} width={520}>
    <H2 style={{fontSize:20}}>Add a template from a file</H2>
    <Sub style={{marginTop:6,marginBottom:18}}>Give the studio a PDF or a web page and it becomes a reusable look. Your questions get poured into it.</Sub>
    {stage==='pick' && <div>
      <div onClick={()=>setStage('working')} style={{border:'1.5px dashed var(--sitm-teal)',background:'rgba(97,189,183,.06)',padding:'40px 20px',textAlign:'center',cursor:'pointer',borderRadius:12}}>
        <div style={{color:'var(--sitm-teal-deep)',marginBottom:10,display:'flex',justifyContent:'center'}}><Icon name="upload" size={28}/></div>
        <div style={{fontSize:14,fontWeight:600,color:'var(--sitm-navy)'}}>Drop a file here, or click to choose one</div>
        <div style={{fontSize:12.5,color:'var(--sitm-text)',marginTop:6}}>PDF or HTML, up to 25 MB</div>
      </div>
    </div>}
    {stage==='working' && <div style={{padding:'34px 20px',textAlign:'center'}}>
      <div className="cs-spin" style={{width:36,height:36,border:'3px solid rgba(97,189,183,.25)',borderTopColor:'var(--sitm-teal)',borderRadius:'50%',margin:'0 auto 16px'}}></div>
      <div style={{fontSize:14,fontWeight:600,color:'var(--sitm-navy)'}}>Reading your file</div>
      <div style={{fontSize:12.5,color:'var(--sitm-text)',marginTop:6}}>Turning it into an editable page. This usually takes under a minute.</div>
    </div>}
    {stage==='name' && <div>
      <div style={{display:'flex',gap:14,alignItems:'center',background:'rgba(97,189,183,.1)',padding:14,marginBottom:18,borderRadius:10}}>
        <span style={{color:'var(--sitm-teal-deep)'}}><Icon name="check" size={20} stroke={2.4}/></span>
        <div style={{fontSize:13}}>Done. It looks good. Give it a name so you can find it again.</div>
      </div>
      <div style={{fontSize:12.5,fontWeight:600,marginBottom:6}}>Template name</div>
      <input value={name} onChange={e=>setName(e.target.value)} style={{width:'100%',boxSizing:'border-box',fontFamily:'var(--sitm-font-body)',fontSize:14,padding:'10px 12px',border:'1px solid rgba(62,71,97,.2)',outline:'none',color:'var(--sitm-text)',borderRadius:8}}/>
      <div style={{display:'flex',justifyContent:'flex-end',gap:10,marginTop:18}}>
        <Btn kind="ghost" onClick={onClose}>Cancel</Btn>
        <Btn onClick={()=>onSaved(name)}>Save to Templates</Btn>
      </div>
    </div>}
  </Modal>;
}
function TemplatesPage({ toast, templates, onUploadSaved, onDeleteTemplate, onUse }) {
  const [upload,setUpload] = React.useState(false);
  const [kind,setKind] = React.useState('All');
  const kinds = ['All','Worksheet','Flashcards','Badge cards','Interactive quiz','Puzzles'];
  const map = { 'Worksheet':'worksheet','Flashcards':'flashcards','Badge cards':'badges','Interactive quiz':'quiz' };
  const list = templates.filter(t => kind==='All' || (kind==='Puzzles' ? (t.types.includes('crossword')||t.types.includes('wordsearch')) : t.types.includes(map[kind])));
  return <div style={{maxWidth:1240,margin:'0 auto',padding:'36px 28px 80px'}}>
    <PageHead kicker="Templates" title="Looks for your materials"
      sub="A template decides how a finished piece looks: the fonts, the header, the layout. Pick one when you make something, and change anything afterward in the editor."
      right={<Btn icon="upload" onClick={()=>setUpload(true)}>Add from a PDF</Btn>}/>
    <div style={{display:'flex',gap:6,marginBottom:20}}>
      {kinds.map(k => <button key={k} onClick={()=>setKind(k)} style={{fontFamily:'var(--sitm-font-body)',fontSize:12.5,fontWeight:500,padding:'8px 13px',cursor:'pointer',borderRadius:8,
        border:'1px solid '+(kind===k?'var(--sitm-teal)':'var(--sitm-border)'),background:kind===k?'rgba(97,189,183,.12)':'#fff',color:kind===k?'var(--sitm-teal-deep)':'var(--sitm-text)'}}>{k}</button>)}
    </div>
    <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:16}}>
      {list.map(t => <TemplateCard key={t.id} tpl={t} onDelete={onDeleteTemplate} onClick={()=>onUse(t)} footnote={t.desc + ' \u00b7 click to use'}/>)}
      <div onClick={()=>setUpload(true)} style={{border:'1.5px dashed var(--sitm-teal)',background:'rgba(97,189,183,.05)',padding:16,cursor:'pointer',textAlign:'center',display:'flex',flexDirection:'column',justifyContent:'center',borderRadius:12}}>
        <TemplateThumb kind="upload"/>
        <div style={{fontSize:13.5,fontWeight:600,color:'var(--sitm-teal-deep)',marginTop:10}}>Add your own</div>
        <div style={{fontSize:11.5,color:'var(--sitm-text)',marginTop:3}}>From a PDF or web page</div>
      </div>
    </div>
    <UploadTemplateModal open={upload} onClose={()=>setUpload(false)} onSaved={(name)=>{ setUpload(false); onUploadSaved(name); toast('Saved. '+name+' is in your templates now.'); }}/>
  </div>;
}
// ---- Document library (Edit a PDF) ----
const FORMAT_ICON = { 'Page PDF':'pdf', 'Flashcards':'tpl', 'Badge cards':'files' };
function DocCard({ doc, go, onDelete }) {
  const [h,setH] = React.useState(false);
  return <div onClick={()=>go('editor',{pdfDoc:doc})} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
    style={{background:'#fff',border:'1px solid var(--sitm-border)',padding:'13px 15px',cursor:'pointer',display:'flex',gap:11,alignItems:'flex-start',borderRadius:12,
      boxShadow:h?'0 4px 14px rgba(62,71,97,.12)':'none',transition:'box-shadow .2s ease'}}>
    <span style={{color:'var(--sitm-teal-deep)',marginTop:2}}><Icon name={FORMAT_ICON[doc.format]||'pdf'} size={18}/></span>
    <div style={{flex:1,minWidth:0}}>
      <div style={{fontSize:13,fontWeight:600,color:'var(--sitm-navy)',lineHeight:1.35}}>{doc.name}</div>
      <div style={{fontSize:11.5,color:'var(--sitm-text)',marginTop:3}}>{doc.subject} &middot; {doc.size} &middot; edited {doc.edited}</div>
    </div>
    <span style={{opacity:h?1:0,transition:'opacity .15s ease'}}>{onDelete && <DeleteBtn onClick={()=>onDelete(doc)}/>}</span>
  </div>;
}
function DocGroup({ label, docs, go, onDelete, defaultOpen }) {
  const [open,setOpen] = React.useState(defaultOpen);
  return <div style={{marginBottom:14}}>
    <button onClick={()=>setOpen(!open)} style={{display:'flex',alignItems:'center',gap:9,width:'100%',textAlign:'left',background:'none',border:'none',cursor:'pointer',padding:'8px 2px',fontFamily:'var(--sitm-font-body)'}}>
      <span style={{color:'var(--sitm-teal-deep)',transition:'transform .15s ease',transform:open?'rotate(90deg)':'none',display:'flex'}}><Icon name="chevR" size={15}/></span>
      <span style={{fontSize:14,fontWeight:600,color:'var(--sitm-navy)'}}>{label}</span>
      <span style={{fontSize:12,color:'var(--sitm-text)'}}>{docs.length}</span>
      <span style={{flex:1,height:1,background:'var(--sitm-border)',marginLeft:8}}></span>
    </button>
    {open && <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12,marginTop:8}}>
      {docs.map(d => <DocCard key={d.id} doc={d} go={go} onDelete={onDelete}/>)}
    </div>}
  </div>;
}
function PdfPickPage({ go, docs, onDeleteDoc }) {
  const D = window.CS_DATA;
  const [q,setQ] = React.useState('');
  const [subject,setSubject] = React.useState('All subjects');
  const [kind,setKind] = React.useState('All types');
  const [format,setFormat] = React.useState('All formats');
  const [sort,setSort] = React.useState('Recently edited');
  const [group,setGroup] = React.useState('Type of document');
  let list = docs.filter(d =>
    (subject==='All subjects'||d.subject===subject) &&
    (kind==='All types'||d.kind===kind) &&
    (format==='All formats'||d.format===format) &&
    (!q.trim() || d.name.toLowerCase().includes(q.toLowerCase())));
  list = [...list].sort((a,b)=> sort==='Name A to Z' ? a.name.localeCompare(b.name) : a.age-b.age);
  const groupKey = group==='Type of document' ? 'kind' : group==='Subject' ? 'subject' : group==='Format' ? 'format' : null;
  const groups = groupKey ? list.reduce((m,d)=>{ (m[d[groupKey]] = m[d[groupKey]]||[]).push(d); return m; },{}) : null;
  const groupNames = groups ? Object.keys(groups).sort((a,b)=>groups[b].length-groups[a].length) : [];
  const filtersOn = subject!=='All subjects'||kind!=='All types'||format!=='All formats'||q.trim();
  return <div style={{maxWidth:1240,margin:'0 auto',padding:'36px 28px 80px'}}>
    <PageHead kicker="Edit a PDF" title="Which document do you want to open?"
      sub={'Your library holds '+docs.length+' documents. Pick one to edit it right on the page, or bring in a new PDF. Deleting removes it for good.'}
      right={<Btn icon="upload" onClick={()=>go('editor',{pdfUpload:true})}>Open a new PDF</Btn>}/>
    <div style={{display:'flex',gap:8,marginBottom:8,alignItems:'center',flexWrap:'wrap'}}>
      <SearchInput value={q} onChange={setQ} placeholder="Search your documents" style={{width:260}}/>
      <MiniSelect label="Subject" value={subject} onChange={setSubject} options={D.docSubjects} width={140}/>
      <MiniSelect label="Type" value={kind} onChange={setKind} options={D.docKinds} width={150}/>
      <MiniSelect label="Format" value={format} onChange={setFormat} options={D.docFormats} width={130}/>
      <MiniSelect label="Sort" value={sort} onChange={setSort} options={D.docSorts} width={150}/>
      <span style={{marginLeft:'auto',display:'flex',alignItems:'center',gap:8}}>
        <span style={{fontSize:12,color:'var(--sitm-text)'}}>Group by</span>
        <MiniSelect label="Group by" value={group} onChange={setGroup} options={D.docGroups} width={160}/>
      </span>
    </div>
    <div style={{fontSize:12,color:'var(--sitm-text)',marginBottom:16}}>{filtersOn ? 'Showing '+list.length+' of '+docs.length+' documents.' : ' '}</div>
    {list.length===0 && <div style={{background:'#fff',border:'1px solid var(--sitm-border)',padding:'48px 20px',textAlign:'center',borderRadius:12}}>
      <Sub>Nothing matches those filters. Loosen one and try again.</Sub></div>}
    {groups
      ? groupNames.map((g,i) => <DocGroup key={g} label={g} docs={groups[g]} go={go} onDelete={onDeleteDoc} defaultOpen={i<3 || !!filtersOn}/>)
      : <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12}}>{list.map(d => <DocCard key={d.id} doc={d} go={go} onDelete={onDeleteDoc}/>)}</div>}
  </div>;
}
Object.assign(window, { PageHead, SearchInput, MiniSelect, FilesPage, TemplatesPage, TemplateCard, TemplateThumb, UploadTemplateModal, PdfPickPage });