import React, { useMemo, useState } from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
import { supabase } from './lib/supabase';

type Plan = { name: string; price: string; tag?: string; features: string[] };
type Asset = { ticker: string; name: string; kind: string; qty: string; avg: string; now: string; current: string; yield: string };

const plans: Plan[] = [
  { name: 'Iniciante', price: 'R$ 9,90', features: ['Aba Financeiro completa', 'Transações ilimitadas', 'Importação OFX e Excel', 'Orçamentos por categoria', 'Relatórios mensais e anuais'] },
  { name: 'Intermediário', price: 'R$ 15,90', tag: 'Mais popular', features: ['Tudo do Iniciante', 'Aba Investimentos', 'Carteira de ações, FIIs, RF', 'Importação B3', 'Rentabilidade e dividendos'] },
  { name: 'Avançado', price: 'R$ 20,90', tag: 'Tudo incluso', features: ['Tudo do Intermediário', 'Aba Patrimônio (bens e dívidas)', 'Metas financeiras', 'Consolidado DRE / BP', 'Snapshots e comparativos'] },
];

const features = [
  ['Controle Financeiro Completo', 'Gerencie receitas, despesas e categorias com facilidade. Tudo em um só lugar.'],
  ['Carteira de Investimentos', 'Acompanhe ações, FIIs e renda fixa. Importe extratos da B3 automaticamente.'],
  ['Orçamentos Inteligentes', 'Defina metas por categoria e receba alertas visuais quando se aproximar do limite.'],
  ['Análise Patrimonial', 'Visualize seu DRE e Balanço Patrimonial completos, como uma empresa de verdade.'],
  ['Importação de Extratos', 'Suporte para arquivos OFX, Excel e notas de corretagem da B3 sem retrabalho.'],
  ['Relatórios Detalhados', 'Comparativos anuais, evolução mensal e gráficos interativos para decisões melhores.'],
  ['Evolução do Patrimônio', 'Acompanhe o crescimento da sua riqueza ao longo do tempo com gráficos claros.'],
  ['Seus Dados Protegidos', 'Privacidade, isolamento entre usuários e controles de exportação/exclusão.'],
  ['Acesso Multiplataforma', 'Use no computador, tablet ou celular. Seus dados sincronizados em tempo real.'],
];

const mockAssets: Asset[] = [
  { ticker: 'ALFA3', name: 'Empresa Alpha', kind: 'Ações', qty: '120', avg: 'R$ 24,10', now: 'R$ 31,50', current: 'R$ 3.780,00', yield: '+30.7%' },
  { ticker: 'FIIX11', name: 'Fundo Imobiliário X', kind: 'FIIs', qty: '80', avg: 'R$ 96,20', now: 'R$ 101,30', current: 'R$ 8.104,00', yield: '+5.3%' },
  { ticker: 'CDB-2029', name: 'CDB Pós-fixado', kind: 'Renda Fixa', qty: '1', avg: 'R$ 10.000,00', now: 'R$ 10.842,00', current: 'R$ 10.842,00', yield: '+8.4%' },
  { ticker: 'BETA4', name: 'Companhia Beta', kind: 'Ações', qty: '60', avg: 'R$ 42,00', now: 'R$ 37,80', current: 'R$ 2.268,00', yield: '-10.0%' },
];

function path() { return window.location.pathname || '/'; }
function go(to: string) { history.pushState(null, '', to); window.dispatchEvent(new PopStateEvent('popstate')); }
function useRoute() { const [route, setRoute] = useState(path()); React.useEffect(() => { const f = () => setRoute(path()); addEventListener('popstate', f); return () => removeEventListener('popstate', f); }, []); return route; }
function isAuthed() { return localStorage.getItem('granaflow.mockAuth') === 'true'; }
function login() { localStorage.setItem('granaflow.mockAuth', 'true'); void supabase.auth.getSession(); go('/app'); }
function logout() { localStorage.removeItem('granaflow.mockAuth'); go('/auth'); }

function Icon({ children }: { children: string }) { return <span className="icon" aria-hidden="true">{children}</span>; }
function Button({ children, variant = 'primary', onClick }: { children: React.ReactNode; variant?: 'primary'|'ghost'|'outline'|'danger'; onClick?: () => void }) { return <button className={`btn ${variant}`} onClick={onClick}>{children}</button>; }
function Card({ children, className = '' }: { children: React.ReactNode; className?: string }) { return <section className={`card ${className}`}>{children}</section>; }

function Landing() { return <div className="page landing">
  <header className="nav"><div className="brand"><Icon>◇</Icon><b>FinControl</b></div><nav><a onClick={() => go('/auth')}>Entrar</a><Button onClick={() => go('/auth')}>Começar Agora</Button></nav></header>
  <main>
    <section className="hero"><div><span className="pill">Sua vida financeira no controle</span><h1>Domine suas finanças <span>como um profissional</span></h1><p>O FinControl reúne controle de gastos, orçamentos, investimentos e análise patrimonial em uma única plataforma intuitiva. Decisões melhores, vida financeira mais leve.</p><div className="actions"><Button onClick={() => go('/auth')}>Criar minha conta</Button><Button variant="outline" onClick={() => document.querySelector('#funcionalidades')?.scrollIntoView()}>Ver funcionalidades</Button></div></div><div className="hero-card"><div className="mini-chart"/><b>Patrimônio em evolução</b><p>Visão consolidada do seu dinheiro.</p></div></section>
    <section id="funcionalidades"><h2>Tudo que você precisa em um só lugar</h2><p>Funcionalidades desenhadas para quem quer ter clareza total sobre o próprio dinheiro.</p><div className="grid features">{features.map(([title, text], i) => <Card key={title}><Icon>{['💳','📈','🎯','🏛','📄','📊','🚀','🔒','💻'][i]}</Icon><h3>{title}</h3><p>{text}</p></Card>)}</div></section>
    <section className="why"><h2>Por que escolher o FinControl?</h2><p>Mais do que um app de finanças — um verdadeiro sistema de gestão patrimonial pessoal, com a mesma estrutura usada por empresas para tomar decisões.</p><Button onClick={() => go('/auth')}>Quero começar</Button></section>
    <section><h2>Planos que cabem no seu bolso</h2><p>Escolha o plano ideal e comece hoje mesmo.</p><PlanGrid cta="Assinar agora" /></section>
    <section className="cta"><h2>Pronto para transformar suas finanças?</h2><p>Pagamento via PIX. Acesso liberado após confirmação.</p><Button onClick={() => go('/auth')}>Começar gratuitamente</Button></section>
  </main><Footer /></div>; }

function Auth() { const [tab, setTab] = useState<'login'|'signup'>('login'); return <div className="auth-shell"><Card className="auth-card"><div className="center"><Icon>◇</Icon><h3>FinControl</h3><p>Controle suas finanças pessoais</p></div><div className="tabs"><button className={tab==='login'?'active':''} onClick={() => setTab('login')}>Entrar</button><button className={tab==='signup'?'active':''} onClick={() => setTab('signup')}>Cadastrar</button></div>{tab==='login' ? <form onSubmit={(e)=>{e.preventDefault(); login();}}><label>Email<input type="email" placeholder="seu@email.com" /></label><label>Senha<input type="password" placeholder="Sua senha" /></label><Button>Entrar</Button><button className="link" type="button" onClick={() => go('/reset-password')}>Esqueceu sua senha?</button></form> : <form onSubmit={(e)=>{e.preventDefault(); login();}}><label>Nome<input placeholder="Seu nome" /></label><label>Email<input type="email" placeholder="seu@email.com" /></label><label>Senha<input type="password" placeholder="Crie uma senha" /></label><Button>Cadastrar</Button></form>}</Card></div>; }

function AppHeader({ title='FinControl', subtitle='Controle suas finanças' }: { title?: string; subtitle?: string }) { return <header className="app-header"><div className="brand"><Icon>◇</Icon><div><h1>{title}</h1><p>{subtitle}</p></div></div><div className="toolbar"><Button variant="outline">Exportar Excel</Button><Button variant="outline">Importar Excel</Button><Button variant="outline">Importar OFX</Button><Button>Nova Transação</Button><Button variant="outline">Orçamentos</Button><Button variant="outline">Configurar Categorias</Button><Button variant="outline" onClick={() => go('/investimentos')}>Investimentos</Button><Button variant="outline" onClick={() => go('/patrimonio')}>Patrimônio</Button><Button variant="outline" onClick={() => go('/subscription')}>Assinatura</Button><Button variant="ghost" onClick={logout}>Sair</Button></div></header>; }
function BackHeader({ title, subtitle }: { title: string; subtitle: string }) { return <header className="app-header"><div className="brand"><Button variant="ghost" onClick={() => go('/app')}>←</Button><Icon>◇</Icon><div><h1>{title}</h1><p>{subtitle}</p></div></div></header>; }
function Stat({ label, value, tone }: { label: string; value: string; tone?: string }) { return <Card className="stat"><small>{label}</small><strong className={tone}>{value}</strong></Card>; }

function Dashboard() { const months = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']; return <><AppHeader /><main className="app-main"><div className="monthbar"><Button variant="ghost">‹</Button>{months.map(m => <button className={m==='Mai'?'active':''} key={m}>{m}</button>)}<b>2026</b><Button variant="ghost">›</Button></div><div className="grid stats"><Stat label="Receitas" value="R$ 0,00"/><Stat label="Despesas" value="R$ 0,00"/><Stat label="Saldo" value="R$ 0,00"/></div><Card><h2>Orçado x Realizado</h2><div className="tabs"><button className="active">Mensal</button><button>Consolidado</button></div><h3>Comparativo de maio de 2026</h3><p>Sem dados consolidados para 2026.</p></Card><Card><h2>Transações do Mês</h2><div className="empty"><Icon>🧾</Icon><b>Nenhuma transação ainda</b><p>Adicione sua primeira transação para começar</p></div><div className="tabs"><button className="active">Orçamentos</button><button>Categorias</button></div><p>Nenhum orçamento definido para este mês. Clique em “Orçamentos” para definir limites por categoria.</p></Card></main><Footer app /></>; }

function Investments() { return <><BackHeader title="Investimentos" subtitle="Carteira e desempenho"/><main className="app-main"><div className="toolbar top"><Button variant="outline">Cotações</Button><Button variant="outline">Calculadora</Button><Button variant="outline">Exportar</Button><Button variant="outline">Importar B3</Button><Button>Movimentação</Button><Button>Novo Ativo</Button></div><div className="grid stats"><Stat label="Patrimônio Atual" value="R$ 25.000,00"/><Stat label="Total Investido" value="R$ 22.500,00"/><Stat label="Rentabilidade" value="R$ 2.500,00 · +11,1%" tone="positive"/><Stat label="Proventos" value="R$ 480,00"/></div><Card><div className="row"><Button variant="outline">Filtrar ativos ▾</Button><div className="seg"><button>1M</button><button>3M</button><button>6M</button><button>YTD</button><button>1A</button><button className="active">Tudo</button></div></div><h2>Evolução Patrimonial</h2><div className="chart"><span/><span/><span/><span/><span/></div></Card><div className="grid two"><Card><h2>Distribuição da Carteira</h2><div className="donut"/><ul><li>Renda Fixa</li><li>Ações</li><li>FIIs</li></ul></Card><Card><h2>Proventos Recebidos por Mês</h2><p>Total 2026</p><strong>R$ 480,00</strong><div className="bar-chart"><i/><i/><i/><i/><i/></div></Card></div><Card><h2>Carteira · Tudo</h2><div className="tabs"><button className="active">Ativos</button><button>Métricas</button><button>Histórico</button></div><input className="search" placeholder="Buscar ativo..."/><table><thead><tr><th>Ativo</th><th>Tipo</th><th>Qtd</th><th>Preço Médio</th><th>Preço Atual</th><th>Valor Atual</th><th>Rentabilidade</th></tr></thead><tbody>{mockAssets.map(a => <tr key={a.ticker}><td><b>{a.ticker}</b><br/><small>{a.name}</small></td><td>{a.kind}</td><td>{a.qty}</td><td>{a.avg}</td><td>{a.now}</td><td>{a.current}</td><td className={a.yield.startsWith('+')?'positive':'negative'}>{a.yield}</td></tr>)}</tbody></table></Card></main></>; }

function Patrimony() { const [tab, setTab] = useState('bens'); return <><BackHeader title="Patrimônio" subtitle="Bens, direitos e dívidas"/><main className="app-main"><div className="grid stats"><Stat label="Bens e direitos" value="R$ 0,00"/><Stat label="Dívidas" value="R$ 0,00"/><Stat label="Investimentos" value="R$ 25.000,00"/></div><Card><div className="row"><div><h2>Resumo de Investimentos</h2><p>Carteira atual sincronizada com a aba Investimentos</p></div><Button variant="outline" onClick={()=>go('/investimentos')}>Ver carteira</Button></div><div className="grid stats"><Stat label="Total investido" value="R$ 22.500,00"/><Stat label="Valor atual" value="R$ 25.000,00"/><Stat label="Lucro/Prejuízo" value="R$ 2.500,00 · +11,1%" tone="positive"/><Stat label="Proventos recebidos" value="R$ 480,00"/></div></Card><Card><div className="tabs"><button className={tab==='bens'?'active':''} onClick={()=>setTab('bens')}>Bens e direitos</button><button onClick={()=>setTab('dividas')}>Dívidas</button><button onClick={()=>setTab('metas')}>Metas</button><button onClick={()=>setTab('consolidado')}>Consolidado (DRE/BP)</button></div>{tab==='bens' && <><div className="row"><div><h3>Posições salvas</h3><p>Compare seu patrimônio atual com fotos anteriores</p></div><Button>Salvar posição</Button></div><p>Nenhuma posição salva. Use “Salvar posição” para registrar uma foto do seu patrimônio.</p><div className="row"><h2>Bens e direitos</h2><Button>Novo bem</Button></div><p>Nenhum bem cadastrado.</p></>}{tab==='dividas' && <p>Nenhuma dívida cadastrada.</p>}{tab==='metas' && <p>Defina metas financeiras para acompanhar avanço e prazo.</p>}{tab==='consolidado' && <p>DRE e Balanço Patrimonial consolidados aparecerão aqui.</p>}</Card></main></>; }

function Subscription() { const [selected, setSelected] = useState('Intermediário'); return <><BackHeader title="FinControl" subtitle="Planos e Assinatura"/><main className="app-main"><h2>Escolha seu plano</h2><p>Selecione o melhor plano para suas necessidades</p><Card><h3>Conta de casal</h3><p>Ative para dividir despesas e receitas entre você e seu(sua) parceiro(a) por percentual.</p><label className="check"><input type="checkbox"/> Habilitar conta de casal</label><Button variant="outline">Salvar</Button></Card><PlanGrid selected={selected} setSelected={setSelected}/><Button>Assinar com PIX — {plans.find(p=>p.name===selected)?.price}</Button></main></>; }
function PlanGrid({ cta, selected, setSelected }: { cta?: string; selected?: string; setSelected?: (s:string)=>void }) { return <div className="grid plans">{plans.map(p => <button className={`plan card ${p.name===selected?'selected':''}`} key={p.name} onClick={() => setSelected?.(p.name)}>{p.tag && <span className="tag">{p.tag}</span>}<h3>{p.name}</h3><strong>{p.price}</strong><span>/ mês</span><ul>{p.features.map(f => <li key={f}>✓ {f}</li>)}</ul>{cta && <em>{cta}</em>}</button>)}</div>; }

function Privacy() { return <div><header className="app-header"><div className="brand"><Button variant="ghost" onClick={()=>go('/')}>←</Button><Icon>🔒</Icon><h1>Privacidade & LGPD</h1></div></header><main className="app-main narrow"><Card><h2>Política de Privacidade</h2><p><b>Dados coletados:</b> nome, e-mail, transações financeiras, orçamentos, categorias e investimentos cadastrados por você.</p><p><b>Finalidade:</b> permitir o controle e visualização das suas finanças pessoais.</p><p><b>Armazenamento:</b> servidores seguros, criptografia em trânsito e boas práticas de segurança.</p><p><b>Compartilhamento:</b> seus dados não são vendidos a terceiros.</p><p><b>Retenção:</b> dados mantidos enquanto sua conta estiver ativa.</p><p><b>Cookies:</b> usamos cookies essenciais para manter sua sessão.</p><p><b>Auditoria:</b> registros internos ajudam na segurança e rastreabilidade.</p></Card><Card><h2>Termos de Uso</h2><p>A plataforma é uma ferramenta de organização financeira pessoal, não consultoria financeira.</p><p>Contas que violem os termos ou apresentem uso suspeito podem ser bloqueadas.</p></Card><Card><h2>Seus direitos (LGPD)</h2><p>Você tem o direito de acessar, exportar e excluir seus dados.</p><div className="grid two"><div><b>Exportar meus dados</b><p>Baixe um arquivo JSON com seus dados.</p><Button variant="outline">Exportar</Button></div><div><b>Excluir minha conta</b><p>Remove permanentemente todos os seus dados. Ação irreversível.</p><Button variant="danger">Excluir</Button></div></div></Card></main></div>; }
function ResetPassword() { return <div className="auth-shell"><Card className="auth-card center"><Icon>◇</Icon><h3>Link inválido</h3><p>Este link de redefinição de senha é inválido ou expirou.</p><Button onClick={()=>go('/auth')}>Voltar ao login</Button></Card></div>; }
function Protected({ children }: { children: React.ReactNode }) { const authed = useMemo(isAuthed, []); React.useEffect(() => { if (!authed) go('/auth'); }, [authed]); return authed ? <>{children}</> : null; }
function Footer({ app=false }: { app?: boolean }) { return <footer className={app?'app-footer':''}><p>© 2026 FinControl. {app ? 'Controle suas finanças pessoais.' : 'Todos os direitos reservados.'}</p><a onClick={()=>go('/privacidade')}>Privacidade{app ? ' & LGPD' : ''}</a><a onClick={()=>go('/auth')}>Entrar</a></footer>; }
function NotFound() { return <div className="auth-shell"><Card><h2>Rota não encontrada</h2><Button onClick={()=>go('/')}>Voltar</Button></Card></div>; }
function App() { const route = useRoute(); if (route === '/' || route === '/landing') return <Landing/>; if (route === '/auth') return isAuthed() ? <Protected><Dashboard/></Protected> : <Auth/>; if (route === '/privacidade') return <Privacy/>; if (route === '/reset-password') return <ResetPassword/>; if (route === '/app' || route === '/admin') return <Protected><Dashboard/></Protected>; if (route === '/investimentos') return <Protected><Investments/></Protected>; if (route === '/patrimonio') return <Protected><Patrimony/></Protected>; if (route === '/subscription') return <Protected><Subscription/></Protected>; return <NotFound/>; }

createRoot(document.getElementById('root')!).render(<App />);