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

const supabase=createClient(import.meta.env.VITE_SUPABASE_URL,import.meta.env.VITE_SUPABASE_KEY);

function App(){
 const [session,setSession]=useState(null),[email,setEmail]=useState(''),[password,setPassword]=useState(''),[loading,setLoading]=useState(true),[error,setError]=useState(''),[tab,setTab]=useState('inicio');
 useEffect(()=>{supabase.auth.getSession().then(({data})=>{setSession(data.session);setLoading(false)});const {data:{subscription}}=supabase.auth.onAuthStateChange((_e,s)=>setSession(s));return()=>subscription.unsubscribe()},[]);
 if(loading)return <main className="center">Carregando...</main>;
 if(!session)return <main className="center"><div className="card login"><h1>🏗️ Alef Obras</h1><p>Gestão de obras simples e profissional.</p><input placeholder="E-mail" type="email" value={email} onChange={e=>setEmail(e.target.value)}/><input placeholder="Senha" type="password" value={password} onChange={e=>setPassword(e.target.value)}/><button onClick={async()=>{setError('');const {error}=await supabase.auth.signInWithPassword({email,password});if(error)setError(error.message)}}>Entrar</button><button className="secondary" onClick={async()=>{setError('');const {error}=await supabase.auth.signUp({email,password});if(error)setError(error.message);else alert('Cadastro criado. Verifique seu e-mail se solicitado.')}}>Criar conta</button>{error&&<div className="error">{error}</div>}</div></main>;
 return <div className="app"><header><div><b>Alef Obras</b><small>Gestão de obras</small></div><button className="logout" onClick={()=>supabase.auth.signOut()}>Sair</button></header><main><h2>{tab==='inicio'?'Painel':tab==='relatorios'?'Relatórios de Obras':'Obras'}</h2>{tab==='inicio'&&<div className="grid"><div className="card"><b>Obras</b><strong>0</strong></div><div className="card"><b>Relatórios</b><strong>0</strong></div><div className="card"><b>Financeiro</b><strong>R$ 0,00</strong></div><div className="card"><b>Fotos</b><strong>0</strong></div></div>}{tab==='relatorios'&&<div className="card"><h3>Novo relatório</h3><input placeholder="Nome da obra"/><input type="date"/><textarea placeholder="Descreva o serviço realizado"></textarea><input type="file" accept="image/*" multiple/><button onClick={()=>alert('Formulário pronto para conectar ao armazenamento de fotos.')}>Salvar relatório</button></div>}{tab==='obras'&&<div className="card"><h3>Obras</h3><p>Cadastro e acompanhamento das obras.</p><button>Nova obra</button></div>}</main><nav><button onClick={()=>setTab('inicio')}>🏠<span>Início</span></button><button onClick={()=>setTab('obras')}>🏗️<span>Obras</span></button><button onClick={()=>setTab('relatorios')}>📸<span>Relatórios</span></button></nav></div>
}
createRoot(document.getElementById('root')).render(<App/>);