import React,{useEffect,useMemo,useState} from 'react';
import{createRoot}from'react-dom/client';
import{createClient}from'@supabase/supabase-js';
import './style.css';

const url=import.meta.env.VITE_SUPABASE_URL;
const key=import.meta.env.VITE_SUPABASE_ANON_KEY;
const db=url&&key&&!url.includes('YOUR_PROJECT')?createClient(url,key):null;
const days=['Lunedì','Martedì','Mercoledì','Giovedì','Venerdì'];
const choices=[['present','✓','Ci sono','yes'],['absent','×','Non ci sono','no'],['unsure','?','Non so','unknown']];
const iso=d=>[d.getFullYear(),String(d.getMonth()+1).padStart(2,'0'),String(d.getDate()).padStart(2,'0')].join('-');
function monday(offset){const d=new Date();d.setHours(12,0,0,0);d.setDate(d.getDate()-(d.getDay()+6)%7+offset*7);return d}
const dateAt=(m,i)=>{const d=new Date(m);d.setDate(d.getDate()+i);return d};
const fmt=d=>d.toLocaleDateString('it-IT',{day:'numeric',month:'short'});
function App(){
 const [theme,setTheme]=useState(localStorage.getItem('cv-theme')||'auto');
 const [offset,setOffset]=useState(0);
 const [session,setSession]=useState(null);
 const [email,setEmail]=useState('');
 const [sent,setSent]=useState(false);
 const [profiles,setProfiles]=useState([]);
 const [answers,setAnswers]=useState([]);
 const [error,setError]=useState('');
 const [busy,setBusy]=useState(false);
 const mondayDate=useMemo(()=>monday(offset),[offset]);
 const dates=useMemo(()=>days.map((_,i)=>iso(dateAt(mondayDate,i))),[mondayDate.getTime()]);
 useEffect(()=>{const scheme=window.matchMedia('(prefers-color-scheme: dark)');const update=()=>document.body.dataset.theme=theme==='auto'?(scheme.matches?'dark':'light'):theme;update();scheme.addEventListener('change',update);localStorage.setItem('cv-theme',theme);return()=>scheme.removeEventListener('change',update)},[theme]);
 useEffect(()=>{if(!db)return;db.auth.getSession().then(({data})=>setSession(data.session));const{data:{subscription}}=db.auth.onAuthStateChange((_event,s)=>setSession(s));return()=>subscription.unsubscribe()},[]);
 useEffect(()=>{if(!db||!session)return;let alive=true;async function load(){const [p,a]=await Promise.all([db.from('profiles').select('id,display_name'),db.from('attendance').select('user_id,day,status').gte('day',dates[0]).lte('day',dates[4])]);if(alive){if(p.error||a.error)setError(p.error?.message||a.error?.message);else{setProfiles(p.data||[]);setAnswers(a.data||[])}}}load();const channel=db.channel('came-van-updates').on('postgres_changes',{event:'*',schema:'public',table:'attendance'},load).subscribe();return()=>{alive=false;db.removeChannel(channel)}},[session?.user?.id,dates.join(',')]);
 const entries=i=>answers.filter(a=>a.day===dates[i]);
 const status=(user,i)=>entries(i).find(a=>a.user_id===user)?.status||null;
 const myId=session?.user?.id;
 const people=profiles.length?profiles:[];
 const present=i=>people.filter(p=>status(p.id,i)==='present');
 const unknown=i=>people.filter(p=>!status(p.id,i)||status(p.id,i)==='unsure');
 async function submit(i,value){if(!db||!myId||busy)return;setBusy(true);setError('');const previous=answers;setAnswers(prev=>[...prev.filter(a=>!(a.user_id===myId&&a.day===dates[i])),{user_id:myId,day:dates[i],status:value}]);const {error:e}=await db.from('attendance').upsert({user_id:myId,day:dates[i],status:value},{onConflict:'user_id,day'});if(e){setAnswers(previous);setError(e.message)}setBusy(false)}
 async function login(e){e.preventDefault();if(!db)return;setError('');const {error:e2}=await db.auth.signInWithOtp({email:email.trim(),options:{shouldCreateUser:true}});if(e2)setError(e2.message);else setSent(true)}
 return <main className="app"><header className="head"><div className="headerrow"><div><div className="brand">🚐 Came Van</div><div className="sub">Il nostro furgone · 9 posti</div></div><button aria-label="Cambia tema" onClick={()=>setTheme(t=>t==='auto'?'dark':t==='dark'?'light':'auto')}>{theme==='dark'?'☾':theme==='light'?'☀':'◐'}</button></div><div className="headerrow" style={{marginTop:20}}><div><div className="sub">Settimana</div><b>{fmt(mondayDate)} – {fmt(dateAt(mondayDate,4))} {dateAt(mondayDate,4).getFullYear()}</b></div><div className="hbuttons"><button onClick={()=>setOffset(o=>o-1)} aria-label="Settimana precedente">‹</button><button onClick={()=>setOffset(o=>o+1)} aria-label="Settimana successiva">›</button></div></div></header>
 {!db?<section className="panel"><h2>Configurazione necessaria</h2><p className="hint">Imposta le variabili VITE_SUPABASE_URL e VITE_SUPABASE_ANON_KEY per collegare il database. Non inserire password o service_role nel browser.</p></section>:!session?<section className="panel"><h2>Accedi al gruppo</h2><p className="hint">Inserisci la tua email per ricevere un link di accesso.</p><form onSubmit={login}><input className="field" type="email" required value={email} onChange={e=>setEmail(e.target.value)} placeholder="La tua email"/><button className="primary" type="submit">Invia link di accesso</button></form>{sent&&<p>Controlla la posta e apri il link ricevuto.</p>}</section>:<><div className="row"><div className="heading">Le mie presenze</div><button onClick={()=>db.auth.signOut()}>Esci</button></div><div className="hint">Seleziona una risposta per ogni giorno. Ogni scelta viene salvata subito.</div>{days.map((d,i)=><section className="day" key={dates[i]}><div className="row"><div className="daytitle">{d} {fmt(dateAt(mondayDate,i))}</div><span className="count">{present(i).length}/9</span></div><div className="options">{choices.map(([id,icon,label,css])=><button disabled={busy} key={id} className={'opt '+(status(myId,i)===id?'active '+css:'')} onClick={()=>submit(i,id)}>{icon} {label}</button>)}</div></section>)}<div className="heading">Riepilogo del furgone</div>{days.map((d,i)=><section className="panel" key={dates[i]}><div className="row"><b>{d} {fmt(dateAt(mondayDate,i))}</b><span className="tag">{present(i).length}/9 presenti</span></div><div className="names">{present(i).length?present(i).map(p=><span className="name" key={p.id}>✓ {p.display_name||'Partecipante'}</span>):<span className="hint">Nessun presente confermato</span>}</div><div className="row hint"><span>{9-present(i).length} posti disponibili</span><span>{unknown(i).length} da decidere</span></div><div className="bar"><div className="fill" style={{width:present(i).length/9*100+'%'}}/></div>{unknown(i).length>0&&<p className="hint">Da decidere: {unknown(i).map(p=>p.display_name||'Partecipante').join(', ')}</p>}</section>)}</>}
 {error&&<p className="error" role="alert">{error}</p>}<div className="footer">Came Van · settimane automatiche · Dark / Light</div></main>
}
createRoot(document.getElementById('root')).render(<App/>);