const {useEffect,useState,useRef}=React; const createRoot=ReactDOM.createRoot; const mk=(name)=>(props)=>React.createElement('i',{...props,'data-lucide':name}); const Users=mk('users'),Monitor=mk('monitor'),Ticket=mk('ticket'),Clock=mk('clock'),LogOut=mk('log-out'),Plus=mk('plus'),CheckCircle2=mk('check-circle-2'),BarChart3=mk('bar-chart-3'),UserRound=mk('user-round'),RefreshCw=mk('refresh-cw');
const API='./api/index.php';
async function api(action,data={}){let r=await fetch(API,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action,...data})});let j=await r.json();if(!r.ok||j.error)throw Error(j.error||'Error');return j}
function Logo(){return <img className="brandlogo" src="logo-jurisprudencia.png" alt="UCuenca Jurisprudencia y Ciencias Políticas y Sociales"/>}
function Login({setUser}){let[u,su]=useState('admin'),[p,sp]=useState('Admin123!'),[e,se]=useState('');return <div className="login"><div className="brand"><Logo/><div className="brandcopy"><b>Consultorio Jurídico</b><span>Sistema de gestión de turnos</span></div></div><form onSubmit={async x=>{x.preventDefault();try{setUser((await api('login',{username:u,password:p})).user)}catch(z){se(z.message)}}}><h1>Bienvenido</h1><p>Ingresa con tus credenciales institucionales.</p><label>Usuario<input value={u} onChange={x=>su(x.target.value)}/></label><label>Contraseña<input type="password" value={p} onChange={x=>sp(x.target.value)}/></label>{e&&<div className="err">{e}</div>}<button>Ingresar</button><small>Demo inicial: admin / Admin123!</small></form></div>}
function App(){let tv=new URLSearchParams(location.search).get('tv')==='1';let[user,setUser]=useState(null),[view,setView]=useState('dashboard'),[data,setData]=useState({});let load=async()=>{try{setData(await api('state'))}catch{}};useEffect(()=>{if(user||tv)load();let i=setInterval(()=>{if(user||tv)load()},tv?1000:3000);return()=>clearInterval(i)},[user,tv]);if(tv)return <PublicScreen d={data} standalone={true}/>;if(!user)return <Login setUser={setUser}/>;let nav=user.role==='admin'?['dashboard','recepcion','atencion','pantalla','usuarios','reportes']:user.role==='reception'?['recepcion','dashboard','pantalla']:['atencion','dashboard'];return <div className="app"><aside><div className="sidebrand"><Logo/><small>CONSULTORIO JURÍDICO · TURNOS</small></div><nav>{nav.map(n=><button className={view===n?'on':''} onClick={()=>setView(n)}>{({dashboard:'Panel general',recepcion:'Recepción y tickets',atencion:'Mi cubículo',usuarios:'Usuarios',pantalla:'Pantalla de turnos',reportes:'Reportes'})[n]}</button>)}</nav><div className="who"><b>{user.name}</b><span>{user.role}</span><button onClick={()=>setUser(null)}><LogOut size={16}/> Salir</button></div></aside><main><header><div><h1>{({dashboard:'Panel general',recepcion:'Recepción',atencion:'Atención en cubículo',usuarios:'Gestión de usuarios',pantalla:'Pantalla pública de turnos',reportes:'Reportes de atención'})[view]}</h1><p>{new Date().toLocaleDateString('es-EC',{weekday:'long',year:'numeric',month:'long',day:'numeric'})}</p></div><button className="icon" onClick={load}><RefreshCw/></button></header>{view==='dashboard'&&<Dashboard d={data}/>} {view==='recepcion'&&<Reception d={data} load={load}/>} {view==='atencion'&&<Attention d={data} user={user} load={load}/>} {view==='pantalla'&&<PublicScreen d={data}/>} {view==='usuarios'&&<UsersPage d={data} load={load}/>} {view==='reportes'&&<Reports d={data}/>}</main></div>}
function Dashboard({d}){let active=(d.booths||[]).filter(x=>x.status==='busy').length;return <><section className="stats"><Card icon={<Ticket/>} n={(d.queue||[]).length} t="En espera"/><Card icon={<Monitor/>} n={active} t="Cubículos ocupados"/><Card icon={<CheckCircle2/>} n={(d.today||[]).length} t="Atenciones hoy"/><Card icon={<Users/>} n={(d.students||[]).filter(x=>x.active_session).length} t="Estudiantes activos"/></section><section className="panel"><h2>Estado de cubículos</h2><div className="booths">{(d.booths||[]).map(b=><div className={'booth '+b.status}><Monitor/><b>{b.name}</b><span>{b.status==='busy'?'Atendiendo':b.status==='disabled'?'Fuera de servicio':'Disponible'}</span>{b.student&&<small>{b.student}</small>}</div>)}</div></section><section className="panel"><h2>Cola actual</h2><Queue q={d.queue}/></section></>}
function Queue({q=[]}){return <div className="table"><div className="tr head"><span>Ticket</span><span>Persona</span><span>Hora</span><span>Estado</span></div>{q.length?q.map(x=><div className="tr"><b>{x.code}</b><span>{x.name}</span><span>{x.created_time}</span><span className="pill">En espera</span></div>):<div className="empty">No hay personas esperando.</div>}</div>}
function Reception({d,load}){let[n,sn]=useState(''),[id,si]=useState(''),[phone,sp]=useState(''),[msg,sm]=useState('');async function add(e){e.preventDefault();try{let r=await api('ticket_create',{name:n,identification:id,phone});sm('Ticket generado: '+r.code);sn('');si('');sp('');load()}catch(e){sm(e.message)}}return <div className="grid2"><section className="panel"><h2>Generar nuevo turno</h2><form className="form" onSubmit={add}><label>Nombre completo<input required value={n} onChange={e=>sn(e.target.value)}/></label><label>Cédula / identificación<input value={id} onChange={e=>si(e.target.value)}/></label><label>Teléfono<input value={phone} onChange={e=>sp(e.target.value)}/></label><button><Plus size={18}/> Generar ticket</button>{msg&&<div className="notice">{msg}</div>}</form></section><section className="panel"><h2>Personas en espera</h2><Queue q={d.queue}/></section></div>}
function Attention({d,user,load}){let session=(d.sessions||[]).find(s=>+s.user_id===+user.id&&s.active),[booth,sb]=useState(''),[msg,sm]=useState(''),[details,sd]=useState(''),[obs,so]=useState('');let current=session&&(d.current||[]).find(x=>+x.session_id===+session.id);async function go(a,p={}){try{let r=await api(a,p);sm(r.message||'Actualizado');if(a==='finish'){sd('');so('')}load()}catch(e){sm(e.message)}}if(!session)return <section className="panel narrow"><h2>Iniciar jornada</h2><p>Selecciona el número del cubículo donde te sentaste hoy. Puedes usar cualquiera que esté disponible.</p><select value={booth} onChange={e=>sb(e.target.value)}><option value="">Selecciona un cubículo</option>{(d.booths||[]).filter(b=>b.status==='free').map(b=><option value={b.id}>{b.name}</option>)}</select><button disabled={!booth} onClick={()=>go('session_start',{booth_id:booth,user_id:user.id})}>Iniciar jornada en este cubículo</button>{msg&&<div className="notice">{msg}</div>}</section>;return <section className="panel focus"><div className="live"><span>Jornada activa · {session.status==='unavailable'?'NO DISPONIBLE':current?'EN ATENCIÓN':'DISPONIBLE'}</span><b>{session.booth_name}</b><small>Inicio {session.start_time}</small></div>{current?<div className="ticketbig"><small>ATENDIENDO</small><h2>{current.code}</h2><h3>{current.name}</h3><p>Inicio: {current.started_time}</p><div className="casefields"><label>Detalle de la atención<textarea value={details} onChange={e=>sd(e.target.value)} placeholder="Resumen de la orientación o gestión realizada..."></textarea></label><label>Observaciones<textarea value={obs} onChange={e=>so(e.target.value)} placeholder="Observaciones adicionales..."></textarea></label></div><p><b>Al finalizar, selecciona cómo quedas:</b></p><div className="actions"><button onClick={()=>go('finish',{session_id:session.id,details,observation:obs,next_status:'available'})}>Finalizar · Para atender</button><button className="secondary" onClick={()=>go('finish',{session_id:session.id,details,observation:obs,next_status:'unavailable'})}>Finalizar · No disponible</button></div></div>:<div className="ticketbig"><h3>{session.status==='unavailable'?'Estás marcado como no disponible':'Cubículo listo para atender'}</h3><p>{(d.queue||[]).length} persona(s) esperando</p>{session.status!=='unavailable'&&<button disabled={!(d.queue||[]).length} onClick={()=>go('next',{session_id:session.id})}>Atender siguiente turno</button>}{session.status==='unavailable'?<button onClick={()=>go('session_status',{session_id:session.id,status:'available'})}>Cambiar a “Para atender”</button>:<button className="secondary" onClick={()=>go('session_status',{session_id:session.id,status:'unavailable'})}>Marcar “No disponible”</button>}<button className="danger" onClick={()=>go('session_end',{session_id:session.id})}>Cerrar sesión y finalizar jornada</button></div>}{msg&&<div className="notice">{msg}</div>}</section>}
function PublicScreen({d,standalone=false}){let calls=d.calls||[],last=calls[0],prev=useRef(null);useEffect(()=>{if(!last||prev.current===last.started_at)return;let first=prev.current===null;prev.current=last.started_at;if(first)return;try{speechSynthesis.cancel();let u=new SpeechSynthesisUtterance(`Turno ${last.code.replace('-', ' ')}, pase al ${last.booth}`);u.lang='es-EC';u.rate=.88;u.volume=1;speechSynthesis.speak(u)}catch(e){}},[last&&last.started_at]);return <section className={'turnscreen '+(standalone?'standalone':'')}><div className="tvtop"><Logo/><div><b>CONSULTORIO JURÍDICO</b><span>Turnos de atención</span></div></div>{last?<><p>POR FAVOR DIRÍJASE A</p><div className="call"><div><small>TURNO</small><b>{last.code}</b></div><div className="boothcall"><small>PASE AL</small><span>{last.booth}</span></div></div></>:<div className="emptycall">Esperando el próximo turno</div>}<h3>Últimos llamados</h3><div className="lastcalls">{calls.slice(1,7).map(x=><div><b>{x.code}</b><span>{x.booth}</span></div>)}</div>{standalone&&<div className="tvfoot">Por favor mantenga visible su turno y acérquese al cubículo cuando sea llamado.</div>}</section>}
function UsersPage({d,load}){let[name,sn]=useState(''),[username,su]=useState(''),[password,sp]=useState(''),[role,sr]=useState('student');async function add(e){e.preventDefault();await api('user_create',{name,username,password,role});sn('');su('');sp('');load()}return <div className="grid2"><section className="panel"><h2>Crear usuario</h2><form className="form" onSubmit={add}><label>Nombre<input required value={name} onChange={e=>sn(e.target.value)}/></label><label>Usuario<input required value={username} onChange={e=>su(e.target.value)}/></label><label>Contraseña<input required value={password} onChange={e=>sp(e.target.value)}/></label><label>Rol<select value={role} onChange={e=>sr(e.target.value)}><option value="student">Estudiante / atención</option><option value="reception">Recepción</option><option value="admin">Administrador</option></select></label><button>Crear usuario</button></form></section><section className="panel"><h2>Usuarios registrados</h2>{(d.students||[]).map(x=><div className="person"><UserRound/><div><b>{x.name}</b><span>@{x.username} · {x.role}</span></div></div>)}</section></div>}
function Reports({d}){let[tab,setTab]=useState('students'),[studentId,setStudentId]=useState(''),[studentSearch,setStudentSearch]=useState(''),[from,setFrom]=useState(''),[to,setTo]=useState(''),[f,sf]=useState('');let students=(d.students||[]).filter(x=>x.role==='student');let filteredStudents=students.filter(x=>!studentSearch||x.name.toLowerCase().includes(studentSearch.toLowerCase())||x.username.toLowerCase().includes(studentSearch.toLowerCase()));let inRange=x=>(!from||x.date>=from)&&(!to||x.date<=to);let base=(d.reports||[]).filter(inRange);let summary=filteredStudents.map(st=>{let r=base.filter(x=>x.student===st.name),j=(d.journeys||[]).filter(x=>+x.user_id===+st.id&&(!from||x.started_at.slice(0,10)>=from)&&(!to||x.started_at.slice(0,10)<=to));return {...st,attentions:r.length,minutes:r.reduce((a,x)=>a+(+x.minutes||0),0),journeys:j.length,last:r[0]?.date||'—'}});let selected=students.find(x=>String(x.id)===String(studentId));let rows=base.filter(x=>(!selected||x.student===selected.name)&&(!f||JSON.stringify(x).toLowerCase().includes(f.toLowerCase())));function dl(name,headers,arr){let esc=v=>'"'+String(v??'').replaceAll('"','""')+'"';let csv='\ufeff'+headers.join(',')+'\n'+arr.map(r=>r.map(esc).join(',')).join('\n');let a=document.createElement('a');a.href=URL.createObjectURL(new Blob([csv],{type:'text/csv;charset=utf-8'}));a.download=name;a.click()}return <><section className="panel"><div className="toolbar"><h2>Centro de reportes</h2><div className="actions"><button className={tab==='students'?'':'secondary'} onClick={()=>setTab('students')}>Todos los estudiantes</button><button className={tab==='individual'?'':'secondary'} onClick={()=>setTab('individual')}>Reporte individual</button></div></div><div className="filters"><label>Desde<input type="date" value={from} onChange={e=>setFrom(e.target.value)}/></label><label>Hasta<input type="date" value={to} onChange={e=>setTo(e.target.value)}/></label><label>Buscar estudiante<input placeholder="Escribe nombre o usuario..." value={studentSearch} onChange={e=>setStudentSearch(e.target.value)}/></label>{tab==='individual'&&<label>Seleccionar estudiante<select value={studentId} onChange={e=>setStudentId(e.target.value)}><option value="">Selecciona un estudiante</option>{filteredStudents.map(x=><option value={x.id}>{x.name}</option>)}</select></label>}</div></section>{tab==='students'?<section className="panel"><div className="toolbar"><div><h2>Reporte general de estudiantes</h2><p>{summary.length} estudiantes · {summary.reduce((a,x)=>a+x.attentions,0)} atenciones en el período</p></div><button onClick={()=>dl('reporte-general-estudiantes.csv',['Estudiante','Usuario','Jornadas','Atenciones','Minutos atención','Última atención'],summary.map(x=>[x.name,x.username,x.journeys,x.attentions,x.minutes.toFixed(1),x.last]))}>Exportar reporte</button></div><div className="table"><div className="tr head"><span>Estudiante</span><span>Jornadas</span><span>Atenciones</span><span>Tiempo atención</span></div>{summary.map(x=><div className="tr"><span><b>{x.name}</b><small>@{x.username} · Última: {x.last}</small></span><span>{x.journeys}</span><span>{x.attentions}</span><span>{x.minutes.toFixed(1)} min</span></div>)}</div></section>:<section className="panel">{!selected?<div className="empty">Busca y selecciona un estudiante para generar su reporte.</div>:<><div className="toolbar"><div><h2>{selected.name}</h2><p>{rows.length} atenciones · {rows.reduce((a,x)=>a+(+x.minutes||0),0).toFixed(1)} minutos de atención</p></div><button onClick={()=>dl('reporte-'+selected.username+'.csv',['Ticket','Persona','Identificación','Teléfono','Cubículo','Fecha','Inicio','Fin','Minutos','Detalle','Observación'],rows.map(x=>[x.code,x.client,x.identification,x.phone,x.booth,x.date,x.start,x.end,x.minutes,x.details,x.observation]))}>Exportar estudiante</button></div><input className="searchwide" placeholder="Buscar ticket, persona, cubículo o detalle..." value={f} onChange={e=>sf(e.target.value)}/><div className="table wide"><div className="tr head"><span>Ticket</span><span>Persona</span><span>Cubículo</span><span>Fecha / hora</span><span>Duración</span><span>Detalle / observación</span></div>{rows.map(x=><div className="tr"><b>{x.code}</b><span>{x.client}<small>{x.identification||''}</small></span><span>{x.booth}</span><span>{x.date}<small>{x.start} – {x.end||'en curso'}</small></span><span>{x.minutes?x.minutes+' min':'—'}</span><span>{x.details||'—'}<small>{x.observation||''}</small></span></div>)}</div></>}</section>}</>}
function Card({icon,n,t}){return <div className="card"><i>{icon}</i><div><b>{n}</b><span>{t}</span></div></div>}createRoot(document.getElementById('root')).render(<App/>); setInterval(()=>window.lucide&&lucide.createIcons(),500);