import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { createClient } from '@supabase/supabase-js';
import { Brain, CalendarDays, Check, CheckCircle2, ChevronRight, CircleHelp, Clock3, Flame, GraduationCap, LayoutDashboard, LibraryBig, LogOut, Menu, Plus, ShieldCheck, Sparkles, Trash2, Trophy, Users, X, AlertCircle, BookOpen, ArrowRight, LockKeyhole } from 'lucide-react';


const url = 'https://snyoroyvjiasfqgovjmf.supabase.co';
const key = 'sb_publishable_HcoHRIBtgRFSCslApKvHcA_uZlMkbeB';
const configured = !!(url && key && !url.includes('YOUR_PROJECT'));
const supabase = configured ? createClient(url, key) : null;
const TOPICS = ['Stroke','Epilepsy','Neuromuscular','Neuroimmunology','Movement Disorders','Headache','Neurocritical Care','Neuroanatomy','Cognitive Neurology','Neuro-ophthalmology','General Neurology'];
const blank = {topic:'Stroke', difficulty:'Intermediate',stem:'',options:['','','',''],correct_option:0,explanation:'',active:true};
const easternDate = () => new Intl.DateTimeFormat('en-US',{timeZone:'America/New_York',weekday:'long',month:'long',day:'numeric',year:'numeric'}).format(new Date());
const letters = ['A','B','C','D'];
function App(){
  const [session,setSession]=useState(null),[profile,setProfile]=useState(null),[loading,setLoading]=useState(configured);
  const [authMode,setAuthMode]=useState('signin'),[message,setMessage]=useState(''),[busy,setBusy]=useState(false);
  const [tab,setTab]=useState('today'),[daily,setDaily]=useState(null),[answers,setAnswers]=useState([]),[questions,setQuestions]=useState([]),[residents,setResidents]=useState([]);
  const [editing,setEditing]=useState(null),[form,setForm]=useState(blank),[selected,setSelected]=useState({}),[submitting,setSubmitting]=useState({}),[mobileNav,setMobileNav]=useState(false);
  const isAdmin=profile?.role==='admin';
  useEffect(()=>{if(!supabase)return; supabase.auth.getSession().then(({data})=>{setSession(data.session);setLoading(false)});const {data:{subscription}}=supabase.auth.onAuthStateChange((_event,next)=>{setSession(next);setProfile(null);setDaily(null)});return()=>subscription.unsubscribe()},[]);
  useEffect(()=>{if(!session)return;loadProfile();loadDaily();loadAnswers()},[session?.user?.id]);
  useEffect(()=>{if(isAdmin&&tab==='admin')loadAdmin()},[isAdmin,tab]);
  async function loadProfile(){const {data,error}=await supabase.from('profiles').select('*').eq('id',session.user.id).single();if(error)setMessage(error.message);else setProfile(data)}
  async function loadDaily(){const {data,error}=await supabase.rpc('get_daily_questions');if(error)setMessage(error.message);else setDaily(data)}
  async function loadAnswers(){const {data,error}=await supabase.from('user_answers').select('quiz_date,is_correct,slot').eq('user_id',session.user.id).order('quiz_date',{ascending:false}).limit(1000);if(!error)setAnswers(data||[])}
  async function loadAdmin(){const [qs,ps]=await Promise.all([supabase.from('questions').select('*').order('created_at',{ascending:false}),supabase.from('profiles').select('id,full_name,role,created_at').order('created_at',{ascending:false})]);if(qs.error)setMessage(qs.error.message);else setQuestions(qs.data||[]);if(!ps.error)setResidents(ps.data||[])}
  async function authenticate(e){e.preventDefault();setBusy(true);setMessage('');const formData=new FormData(e.currentTarget);const email=String(formData.get('email')).trim(),password=String(formData.get('password'));let res;
    if(authMode==='signup')res=await supabase.auth.signUp({email,password,options:{data:{full_name:String(formData.get('name')).trim()}}});
    else res=await supabase.auth.signInWithPassword({email,password});
    setBusy(false);if(res.error)setMessage(res.error.message);else if(authMode==='signup'&&!res.data.session)setMessage('Account created. Check your email for the confirmation link, then sign in.');
  }
  async function signout(){await supabase.auth.signOut();setTab('today');setMessage('')}
  async function submit(slot,option){if(option===undefined||submitting[slot])return;setSubmitting(p=>({...p,[slot]:true}));const {error}=await supabase.rpc('submit_daily_answer',{p_slot:slot,p_option:option});setSubmitting(p=>({...p,[slot]:false}));if(error)setMessage(error.message);else {await Promise.all([loadDaily(),loadAnswers()]);setMessage('')}}
  function startAdd(){setForm({...blank,options:[...blank.options]});setEditing('new')}
  function startEdit(q){setForm({...q,options:[...q.options]});setEditing(q.id)}
  function patch(k,v){setForm(p=>({...p,[k]:v}))}
  async function saveQuestion(e){e.preventDefault();setBusy(true);setMessage('');const payload={topic:form.topic,difficulty:form.difficulty,stem:form.stem.trim(),options:form.options.map(x=>x.trim()),correct_option:Number(form.correct_option),explanation:form.explanation.trim(),active:form.active};
    if(payload.stem.length<10||payload.options.some(x=>!x)||!payload.explanation){setMessage('Fill in the question, all four options, and the explanation.');setBusy(false);return}
    const result=editing==='new'?await supabase.from('questions').insert(payload):await supabase.from('questions').update(payload).eq('id',editing);
    setBusy(false);if(result.error)setMessage(result.error.message);else{setEditing(null);setMessage('Question saved.');loadAdmin();loadDaily()}
  }
  async function removeQuestion(id){if(!window.confirm('Delete this question? Previously scheduled questions cannot be deleted; set them inactive instead.'))return;const {error}=await supabase.from('questions').delete().eq('id',id);if(error)setMessage(error.message);else loadAdmin()}
  const today=daily?.questions||[],completed=today.filter(q=>q.chosen_option!==null).length;
  const studiedDays=[...new Set(answers.filter(x=>answers.filter(y=>y.quiz_date===x.quiz_date).length>=2).map(x=>x.quiz_date))];
  const currentDate=new Date(new Date().toLocaleString('en-US',{timeZone:'America/New_York'}));let streak=0;
  for(let i=0;i<365;i++){const date=new Date(currentDate);date.setDate(date.getDate()-i);const stamp=`${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`;if(studiedDays.includes(stamp))streak++;else if(i===0)continue;else break}
  const correctness=answers.length?Math.round(answers.filter(a=>a.is_correct).length/answers.length*100):0;
  function nav(to){setTab(to);setMobileNav(false);setMessage('')}
  if(!configured)return <div className="setup-screen"><div className="setup-icon"><Brain size={32}/></div><h1>NeuroDaily</h1><p>The website is ready to connect to your Supabase backend.</p><div className="setup-panel"><strong>Setup required</strong><span>Copy <code>.env.example</code> to <code>.env</code>, fill in your Supabase URL and publishable key, and run the SQL script in <code>supabase/schema.sql</code>.</span><span>See <code>README.md</code> for step-by-step setup and deployment.</span></div></div>;
  if(loading)return <div className="setup-screen"><Brain className="pulse" size={40}/><p>Loading NeuroDaily…</p></div>;
  if(!session)return <div className="auth-page"><div className="auth-left"><div className="brand brand-light"><span className="brand-icon"><Brain size={23}/></span> Neuro<span>Daily</span></div><div className="auth-intro"><div className="eyebrow light">MADE FOR NEUROLOGY RESIDENTS</div><h1>Become a little<br/><em>sharper</em> every day.</h1><p>Two focused neurology questions. Five minutes of practice. A stronger clinical foundation.</p><div className="feature-list"><span><CheckCircle2 size={19}/> Two fresh questions every day</span><span><CheckCircle2 size={19}/> Learn from detailed explanations</span><span><CheckCircle2 size={19}/> Build your daily learning streak</span></div></div><div className="auth-footer">THE DAILY NEUROLOGY CHALLENGE <span>✦</span> LEARN • PRACTICE • GROW</div></div><div className="auth-right"><div className="auth-card"><div className="auth-small-mark"><Brain size={27}/></div><h2>{authMode==='signup'?'Join your residency team':'Welcome back'}</h2><p>{authMode==='signup'?'Create your account to begin your daily practice.':'Sign in to continue your daily neurology practice.'}</p><form onSubmit={authenticate}>{authMode==='signup'&&<label>Full name<input required name="name" autoComplete="name" placeholder="Dr. Jane Smith" maxLength="100"/></label>}<label>Email address<input required name="email" type="email" autoComplete="email" placeholder="you@hospital.edu"/></label><label>Password<input required name="password" type="password" minLength="6" autoComplete={authMode==='signup'?'new-password':'current-password'} placeholder="Enter your password"/></label><button className="btn primary full" disabled={busy}>{busy?'Please wait…':authMode==='signup'?'Create account':'Sign in'} <ArrowRight size={17}/></button></form>{message&&<div className="notice"><AlertCircle size={17}/>{message}</div>}<div className="auth-switch">{authMode==='signup'?'Already have an account?':'New to NeuroDaily?'} <button className="link-btn" onClick={()=>{setAuthMode(authMode==='signup'?'signin':'signup');setMessage('')}}>{authMode==='signup'?'Sign in':'Create an account'}</button></div></div><p className="legal">Built for learning. Not a substitute for clinical judgment.</p></div></div>;
  return <div className="app-shell"><aside className={`sidebar ${mobileNav?'mobile-open':''}`}><div className="brand"><span className="brand-icon"><Brain size={23}/></span> Neuro<span>Daily</span></div><div className="workspace">NEUROLOGY RESIDENCY <span className="workspace-dot"/></div><div className="sidebar-heading">WORKSPACE</div><nav><button className={`nav-item ${tab==='today'?'active':''}`} onClick={()=>nav('today')}><CalendarDays size={19}/> Today's Questions</button><button className={`nav-item ${tab==='progress'?'active':''}`} onClick={()=>nav('progress')}><LayoutDashboard size={19}/> My Progress</button>{isAdmin&&<button className={`nav-item ${tab==='admin'?'active':''}`} onClick={()=>nav('admin')}><LibraryBig size={19}/> Question Bank <span className="admin-pill">ADMIN</span></button>}</nav><div className="sidebar-bottom"><div className="sidebar-streak"><Flame size={20}/><div><strong>{streak} day{streak===1?'':'s'}</strong><span>Current streak</span></div></div><button className="account" onClick={signout}><span className="avatar">{(profile?.full_name||session.user.email||'R').charAt(0).toUpperCase()}</span><span className="account-copy"><strong>{profile?.full_name||'Resident'}</strong><small>{isAdmin?'Administrator':'Neurology resident'}</small></span><LogOut size={17}/></button></div></aside>{mobileNav&&<div className="backdrop" onClick={()=>setMobileNav(false)}/>}<main className="main"><header className="topbar"><button className="menu-btn" onClick={()=>setMobileNav(true)}><Menu size={21}/></button><div className="breadcrumb">NEURODAILY <ChevronRight size={14}/> <b>{tab==='today'?'TODAY’S CHALLENGE':tab==='progress'?'MY PROGRESS':'QUESTION BANK'}</b></div><div className="header-right"><span className="live-dot"/> DAILY LEARNING <span className="header-avatar">{(profile?.full_name||session.user.email||'R').charAt(0).toUpperCase()}</span></div></header><div className="page-content">{message&&<div className="notice app-notice"><AlertCircle size={17}/>{message}<button onClick={()=>setMessage('')}><X size={17}/></button></div>}
  {tab==='today'&&<><div className="page-heading"><div><div className="eyebrow">YOUR DAILY PRACTICE</div><h1>Today's Challenge <span>✦</span></h1><p className="subheading">{easternDate()} <span className="dot-divider">•</span> A little progress, every day.</p></div><div className="date-badge"><CalendarDays size={18}/><span>2 Questions / Day</span></div></div><div className="hero"><div className="hero-copy"><div className="hero-kicker"><Sparkles size={16}/> THE DAILY DOSE</div><h2>Small practice.<br/><em>Big impact.</em></h2><p>Sharpen your clinical reasoning, one question at a time.</p><div className="hero-progress"><span>{completed} of {today.length||2} completed</span><strong>{today.length?Math.round(completed/today.length*100):0}%</strong></div><div className="bar"><div style={{width:`${today.length?completed/today.length*100:0}%`}}/></div></div><div className="hero-art"><Brain size={130} strokeWidth={0.85}/><div className="orbit orbit-one"/><div className="orbit orbit-two"/><span className="spark one">✦</span><span className="spark two">✦</span></div></div><div className="section-title"><div><h2>Today's questions</h2><p>Choose the best answer. Your first response is final.</p></div><span className="small-badge"><Clock3 size={15}/> ~5 MIN</span></div>{!daily?<div className="empty"><Brain size={38}/><h3>Loading your questions…</h3></div>:today.length<2?<div className="empty"><BookOpen size={38}/><h3>Questions coming soon</h3><p>{isAdmin?'Add at least two active questions in the Question Bank to start daily quizzes.':'Your administrator is preparing the question bank. Check back soon.'}</p>{isAdmin&&<button className="btn primary" onClick={()=>nav('admin')}>Open Question Bank <ArrowRight size={16}/></button>}</div>:<div className="quiz-list">{today.map(q=>{const answered=q.chosen_option!==null;const chosen=selected[q.slot];return <article className="question-card" key={q.id}><div className="question-card-top"><span className="question-num">QUESTION {String(q.slot).padStart(2,'0')}</span><div className="question-tags"><span>{q.topic}</span><span>{q.difficulty}</span></div></div><h3>{q.stem}</h3><div className="choices">{q.options.map((o,i)=>{const correct=answered&&q.correct_option===i,wrong=answered&&q.chosen_option===i&&!q.is_correct,active=!answered&&chosen===i;return <button key={i} disabled={answered} onClick={()=>setSelected(p=>({...p,[q.slot]:i}))} className={`choice ${active?'picked':''} ${correct?'correct':''} ${wrong?'wrong':''}`}><span className="letter">{letters[i]}</span><span>{o}</span>{correct&&<CheckCircle2 className="choice-icon" size={19}/ >}{wrong&&<X className="choice-icon" size={19}/ >}{active&&<Check className="choice-icon" size={19}/>}</button>})}</div>{answered?<div className={`explanation ${q.is_correct?'success':'review'}`}><div className="result-label">{q.is_correct?<><CheckCircle2 size={18}/> Correct answer</>:<><BookOpen size={18}/> Review the explanation</>}</div><p>{q.explanation||'No explanation provided.'}</p></div>:<div className="question-footer"><span><LockKeyhole size={14}/> Answer to reveal the explanation</span><button className="btn primary" disabled={chosen===undefined||submitting[q.slot]} onClick={()=>submit(q.slot,chosen)}>{submitting[q.slot]?'Submitting…':'Submit answer'} <ArrowRight size={17}/></button></div>}</article>})}</div>}{today.length===2&&completed===2&&<div className="done-banner"><Trophy size={25}/><div><strong>You're done for today!</strong><span>Great work showing up. Come back tomorrow for two new questions.</span></div></div>}</>}
  {tab==='progress'&&<><div className="page-heading"><div><div className="eyebrow">YOUR LEARNING JOURNEY</div><h1>My Progress <span>✦</span></h1><p className="subheading">Consistency compounds. Keep showing up.</p></div></div><div className="stats-grid"><Stat icon={<Flame/>} label="Current streak" value={`${streak} days`} detail="Days with both questions answered"/><Stat icon={<Trophy/>} label="Questions answered" value={answers.length} detail="All-time submissions"/><Stat icon={<CheckCircle2/>} label="Accuracy" value={`${correctness}%`} detail="First-attempt performance"/><Stat icon={<CalendarDays/>} label="Completed days" value={studiedDays.length} detail="Two questions per day"/></div><section className="history-card"><h2>Recent activity</h2><p>Your most recent days of neurology practice.</p>{answers.length===0?<div className="mini-empty">No answers yet. Complete your first daily challenge to get started.</div>:<div className="history-list">{[...new Set(answers.map(a=>a.quiz_date))].slice(0,20).map(d=>{const day=answers.filter(a=>a.quiz_date===d),right=day.filter(a=>a.is_correct).length;return <div className="history-row" key={d}><span className="history-date"><CalendarDays size={17}/>{new Date(`${d}T12:00:00`).toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'})}</span><span>{right} of {day.length} correct</span><span className={`history-status ${day.length===2?'complete':''}`}>{day.length===2?'Completed':'In progress'}</span></div>})}</div>}</section></>}
  {tab==='admin'&&isAdmin&&<><div className="page-heading"><div><div className="eyebrow">ADMIN DASHBOARD</div><h1>Question Bank <span>✦</span></h1><p className="subheading">Create the questions your residents will practice each day.</p></div><button className="btn primary" onClick={startAdd}><Plus size={18}/> Add question</button></div><div className="admin-stats"><div><LibraryBig size={20}/><span><strong>{questions.length}</strong> total questions</span></div><div><CheckCircle2 size={20}/><span><strong>{questions.filter(q=>q.active).length}</strong> active</span></div><div><Users size={20}/><span><strong>{residents.filter(r=>r.role==='resident').length}</strong> residents</span></div></div><div className="admin-tip"><CircleHelp size={19}/><span>Two shared questions are selected automatically each calendar day (Eastern Time). Add more questions to grow the rotation. Deactivating a question keeps its historical answers intact.</span></div><section className="bank"><div className="bank-top"><h2>All questions</h2><button className="btn subtle" onClick={loadAdmin}>Refresh</button></div>{questions.length===0?<div className="mini-empty">Your bank is empty. Add your first question to get started.</div>:questions.map((q,i)=><div className="bank-row" key={q.id}><div className="bank-index">{String(questions.length-i).padStart(2,'0')}</div><div className="bank-details"><strong>{q.stem}</strong><div><span>{q.topic}</span><span>·</span><span>{q.difficulty}</span><span>·</span><span className={q.active?'active-text':'muted-text'}>{q.active?'Active':'Inactive'}</span></div></div><button className="icon-button" aria-label="Edit question" onClick={()=>startEdit(q)}><span>Edit</span></button><button className="icon-button danger" aria-label="Delete question" onClick={()=>removeQuestion(q.id)}><Trash2 size={18}/></button></div>)}</section></>}
  </div></main>{editing&&isAdmin&&<div className="modal-overlay" onMouseDown={e=>{if(e.target===e.currentTarget)setEditing(null)}}><div className="modal"><div className="modal-header"><div><div className="eyebrow">QUESTION EDITOR</div><h2>{editing==='new'?'Add new question':'Edit question'}</h2></div><button className="icon-button" onClick={()=>setEditing(null)}><X size={22}/></button></div><form onSubmit={saveQuestion} className="editor"><div className="field-grid"><label>Topic<select value={form.topic} onChange={e=>patch('topic',e.target.value)}>{TOPICS.map(t=><option key={t}>{t}</option>)}</select></label><label>Difficulty<select value={form.difficulty} onChange={e=>patch('difficulty',e.target.value)}>{['Foundational','Intermediate','Advanced'].map(t=><option key={t}>{t}</option>)}</select></label></div><label>Question stem<textarea required rows="3" minLength="10" value={form.stem} onChange={e=>patch('stem',e.target.value)} placeholder="What is the most likely diagnosis?"/></label><div className="editor-options"><strong>Answer options</strong><small>Pick the correct answer using the radio button.</small>{form.options.map((option,i)=><div className="editor-choice" key={i}><input type="radio" name="correct" aria-label={`Mark option ${letters[i]} as correct`} checked={Number(form.correct_option)===i} onChange={()=>patch('correct_option',i)}/><span>{letters[i]}</span><input required value={option} onChange={e=>patch('options',form.options.map((v,j)=>i===j?e.target.value:v))} placeholder={`Option ${letters[i]}`}/></div>)}</div><label>Explanation<textarea rows="4" required value={form.explanation} onChange={e=>patch('explanation',e.target.value)} placeholder="Explain why the answer is correct and why the alternatives are less likely."/></label><label className="checkline"><input type="checkbox" checked={form.active} onChange={e=>patch('active',e.target.checked)}/> Include this question in future daily rotations</label><div className="modal-actions"><button type="button" className="btn subtle" onClick={()=>setEditing(null)}>Cancel</button><button className="btn primary" disabled={busy}>{busy?'Saving…':'Save question'} <Check size={17}/></button></div></form></div></div>}</div>
}
function Stat({icon,label,value,detail}){return <article className="stat-card"><div className="stat-icon">{icon}</div><span>{label}</span><strong>{value}</strong><small>{detail}</small></article>}
createRoot(document.getElementById('root')).render(<App/>);