import React, { useEffect, useMemo, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { HeartPulse, PawPrint, Syringe, Pill, Bath, Bug, Worm, Scale, Stethoscope, Utensils, FileText, Bell, BarChart3, Settings, Crown, LogOut } from 'lucide-react';
import { translations } from './translations.js';
import './styles.css';

const STORE='PCT_APP_REAL_V1';
const modules=[
 ['pets','PET',PawPrint],['vaccines','VAC',Syringe],['meds','MED',Pill],['bath','BAT',Bath],['flea','ANT',Bug],['worm','VER',Worm],['weight','PES',Scale],['consult','CON',Stethoscope],['food','ALI',Utensils],['docs','DOC',FileText],['reminders','LEM',Bell],['reports','REL',BarChart3],['premium','PRE',Crown],['settings','CFG',Settings]
];
const empty={users:[],current:null,lang:'pt',pets:[],vaccines:[],meds:[],bath:[],flea:[],worm:[],weight:[],consult:[],food:[],docs:[],reminders:[]};
function load(){try{return {...empty,...JSON.parse(localStorage.getItem(STORE)||'{}')}}catch{return empty}}
function persist(d){localStorage.setItem(STORE,JSON.stringify(d))}
function nextCode(prefix, arr){return prefix+String((arr?.length||0)+1).padStart(6,'0')}
function App(){
 const [db,setDb]=useState(load()); const [screen,setScreen]=useState('menu'); const [code,setCode]=useState('');
 const t=translations[db.lang]||translations.pt; useEffect(()=>persist(db),[db]);
 useEffect(()=>{ if('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js').catch(()=>{}); },[]);
 const update=(patch)=>setDb(v=>({...v,...patch}));
 const createUser=()=>{const id=nextCode('PCT',db.users); update({users:[...db.users,{id,createdAt:new Date().toISOString()}],current:id}); setScreen('menu')};
 const login=()=>{ if(db.users.some(u=>u.id===code.trim().toUpperCase())) {update({current:code.trim().toUpperCase()}); setScreen('menu')} else alert('Código não encontrado'); };
 if(!db.current) return <Login t={t} db={db} update={update} code={code} setCode={setCode} createUser={createUser} login={login}/>;
 return <div className="app"><Header t={t} db={db} update={update} screen={screen} setScreen={setScreen}/>{screen==='menu'?<Menu t={t} setScreen={setScreen} db={db}/>:screen==='reports'?<Reports t={t} db={db}/>:screen==='settings'?<SettingsPage t={t} db={db} update={update}/>:screen==='premium'?<Premium t={t}/>:<ModulePage key={screen} name={screen} t={t} db={db} setDb={setDb}/>}</div>
}
function Login({t,db,update,code,setCode,createUser,login}){return <main className="login"><div className="loginCard"><img src="/assets/logo.png"/><h1>Pet Care Tracker</h1><p>{t.login}</p><select value={db.lang} onChange={e=>update({lang:e.target.value})}>{Object.keys(translations).map(k=><option key={k} value={k}>{k.toUpperCase()}</option>)}</select><input value={code} onChange={e=>setCode(e.target.value)} placeholder="PCT000001"/><button onClick={login}>{t.enter}</button><button className="ghost" onClick={createUser}>{t.create}</button></div></main>}
function Header({t,db,update,screen,setScreen}){return <header><button className="brand" onClick={()=>setScreen('menu')}><HeartPulse/> <span>Pet Care Tracker</span></button><select value={db.lang} onChange={e=>update({lang:e.target.value})}>{Object.keys(translations).map(k=><option key={k} value={k}>{k.toUpperCase()}</option>)}</select><button className="iconBtn" onClick={()=>update({current:null})}><LogOut/></button></header>}
function Menu({t,setScreen,db}){let overdue=db.reminders.filter(r=>new Date(r.date)<new Date() && r.status!=='CONCLUÍDO').length;return <main><section className="hero"><div><h1>{t.menu}</h1><p>{db.current}</p></div><div className="score">94%<small>{t.score}</small></div></section><section className="kpis"><K label={t.pets} value={db.pets.length}/><K label={t.next} value={db.reminders.length}/><K label={t.overdue} value={overdue}/></section><section className="grid">{modules.map(([key,,Icon])=><button className="tile" key={key} onClick={()=>setScreen(key)}><Icon/><span>{t[key]}</span></button>)}</section></main>}
function K({label,value}){return <div className="kpi"><b>{value}</b><span>{label}</span></div>}
function ModulePage({name,t,db,setDb}){const prefix=modules.find(m=>m[0]===name)?.[1]||'REG'; const rows=db[name]||[]; const [form,setForm]=useState({petId:'',name:'',date:'',notes:''}); const add=()=>{if(!form.name)return alert('Informe o nome'); const item={...form,id:nextCode(prefix,rows),status:'PENDENTE',createdAt:new Date().toISOString()}; setDb(v=>({...v,[name]:[...(v[name]||[]),item]})); setForm({petId:'',name:'',date:'',notes:''});};return <main><h1>{t[name]}</h1><section className="panel form"><select value={form.petId} onChange={e=>setForm({...form,petId:e.target.value})}><option value="">Pet</option>{db.pets.map(p=><option key={p.id} value={p.id}>{p.name}</option>)}</select><input value={form.name} onChange={e=>setForm({...form,name:e.target.value})} placeholder={t.name}/><input value={form.date} onChange={e=>setForm({...form,date:e.target.value})} type="date"/><textarea value={form.notes} onChange={e=>setForm({...form,notes:e.target.value})} placeholder={t.notes}/><button onClick={add}>{t.add}</button></section><section className="list">{rows.map(r=><article className="row" key={r.id}><b>{r.id} - {r.name}</b><span>{r.date||'--'} • {r.petId||'Sem pet'}</span><p>{r.notes}</p></article>)}</section></main>}
function Reports({t,db}){const total=db.pets.length||1, care=db.vaccines.length+db.meds.length+db.bath.length+db.consult.length;return <main><h1>{t.reports} - {t.dashboard}</h1><section className="kpis"><K label={t.pets} value={db.pets.length}/><K label={t.vaccines} value={db.vaccines.length}/><K label={t.meds} value={db.meds.length}/><K label={t.consult} value={db.consult.length}/></section><section className="bi"><div className="donut"><span>94%</span></div><div className="bars">{['vaccines','meds','bath','consult','weight'].map(k=><div key={k}><label>{t[k]}</label><i style={{width:Math.min(100,((db[k]?.length||0)+1)*18)+'%'}}></i></div>)}</div></section><button onClick={()=>window.print()}>{t.reports} PDF</button></main>}
function SettingsPage({t,db,update}){return <main><h1>{t.settings}</h1><section className="panel"><p>{t.language}</p><select value={db.lang} onChange={e=>update({lang:e.target.value})}>{Object.keys(translations).map(k=><option key={k} value={k}>{k.toUpperCase()}</option>)}</select><button onClick={()=>{localStorage.removeItem(STORE);location.reload()}}>Apagar dados locais</button></section></main>}
function Premium({t}){return <main><h1>{t.premium}</h1><section className="panel premium"><h2>Premium</h2><p>Pets ilimitados, PDF completo, backup futuro, sem anúncios e relatórios avançados.</p><button>Em breve</button></section></main>}
createRoot(document.getElementById('root')).render(<App/>);