function App() {
  
  /*===================
  CONFIGS
  ===================*/
  
  const [page, setPage] = React.useState("home")
  const [popUpOpen, setPopUpOpen] = React.useState(false);
  const [title, setTitle] = React.useState("");
  const [price, setPrice] = React.useState("");
  const [categories, setCategories] = React.useState([]);
  const [total, setTotal] = React.useState("");
  const [remaining, setRemaining] = React.useState(null);
  const [limit, setLimit] = React.useState(null);
  
  function report() {
    const totalNumber = Number(total);
    
    if (totalNumber <= 0 || categories.length === 0) return;
  
    const spent = categories.reduce(
      (sum, cat) => sum + cat.price,
      0
    );
  
    const remainingValue = totalNumber - spent;
    const limitValue = totalNumber * 0.1; // 10%
  
    setRemaining(remainingValue);
    setLimit(limitValue);
  }
  
  let statusColor = "";
  let statusText = "";
  
  if (remaining !== null && limit !== null) {
    if (remaining < limit) {
      statusColor = "text-red-500";
      statusText = "Ruim";
    } else if (remaining === limit) {
      statusColor = "text-yellow-400";
      statusText = "Regular";
    } else {
      statusColor = "text-green-500";
      statusText = "Bom";
    }
  }
  
  function addCategory() {
    const priceNumber = Number(price);

    if (!title || priceNumber <= 0) return;
    
  
    setCategories(prev => [
      ...prev,
      { title, price: Number(price) }
    ]);
  
    setTitle("");
    setPrice("");
    setPopUpOpen(false);
  }
  
  function excludeCategory(indexToRemove) {
    setCategories(prev =>
      prev.filter((_, index) => index !== indexToRemove)
    );
  }
  
  const popUp = (
    <div className="fixed inset-0 bg-black/50 flex justify-center items-center">
      <div className="bg-white p-5 rounded flex flex-col gap-3 w-64">
  
        <input
          type="text"
          value={title}
          onChange={e => setTitle(e.target.value)}
          placeholder="Título da classe"
          className="p-2"
        />
  
        <input
          type="number"
          min="0"
          step="0.01"
          value={price}
          onChange={e => {
            const value = Number(e.target.value);
            if (value >= 0) setPrice(e.target.value);
          }}
          placeholder="Valor"
          className="p-2"
        />
  
        <div className="flex justify-between">
          <button onClick={addCategory} className="bg-purple-500 text-white px-3 py-1 rounded">
            Adicionar
          </button>
  
          <button onClick={() => setPopUpOpen(false)}>
            Fechar
          </button>
        </div>
  
      </div>
    </div>
  );
  
  /*======================
  HOME
  ======================*/
  
  const home = (
    
      <div>
        
        <div className="py-20 px-10 flex justify-center flex-col gap-5 home md:px-20">
        
          <h1 className="text-3xl text-center">Gerenciador de finanças</h1>  
          
          <div className="w-full flex justify-center">
            <img src="/assets/freepik__pessoa-sentada-na-cama-sorrindo-mexendo-em-um-lapt__41986.png" className="h-80 w-80"/>  
          </div>
          
          <div className="line"></div>
            
          <h3 id="about">Sobre</h3>  
            
          <p>O objetivo desse Gerenciador de finanças é ajudar pessoal a ter total controle de seus gastos diáris, mensais e anuais com base no salário do indivíduo.</p>  
            
          <h3 id="functionality">Como funciona?</h3>  
            
          <ul>  
              
            <li>Vá para a aba de Análises indicada pelo ícone "<i className="bi bi-bar-chart"></i>"</li>  
              
            <li>Insira o valor total disponível</li>  
              
            <li>Crie categorias. Exemplo: contas, parcelas...</li>  
              
            <li>Insira o valor de cada categoria</li>  
              
            <li>Clique em "Relatório"</li>  
              
            <li>E pronto!</li>  
              
            <li>Você terá gerenciamento e visão dos gastos totais</li>  
              
          </ul>  
          
          <h3 id="benefits">Benefícios</h3>
          
          <ul className="benefits px-5 flex flex-col gap-5 md:px-10">
            
            <li>
              
              <h3>Controle de fluxo</h3>
              
              <p>Monitora receitas e despesas em tempo real, prevendo saldos futuros e evitando surpresas. Ajuda a identificar gastos desnecessários, como tarifas bancárias ocultas. Mantém contas a pagar e receber atualizadas com alertas de vencimento.</p>
              
            </li>
            
            <li>
              
              <h3>Economia de tempo</h3>
              
              <p>Automatiza conciliações bancárias e sincronizações com cartões, eliminando planilhas manuais. Permite foco em planejamento estratégico em vez de tarefas repetitivas. Acessível de qualquer lugar via mobile, aumentando a produtividade.</p>
              
            </li>
            
            <li>
              
              <h3>Relatórios e análises</h3>
              
              <p>Gera gráficos de fluxo de caixa e tendências de gastos para análises detalhadas. Facilita metas de economia e investimentos com dados precisos. Identifica oportunidades de corte de custos e otimização.</p>
              
            </li>
            
            <li>
              
              <h3>Segurança e conformidade</h3>
              
              <p>Centraliza dados em ambiente seguro, reduzindo riscos de perda ou acesso não autorizado. Garante precisão para evitar multas fiscais em empresas. Promove conformidade com relatórios atualizados.</p>
              
            </li>
            
          </ul>
          
          <button className="start" id="piggy" onClick={() => setPage("analysis")}>Começar agora</button>
          
          <h2 className="font-extrabold text-xl">Cofrinho <i className="bi bi-piggy-bank-fill"></i></h2>
          
          <p>Use o cofrinho para ver o total adquirido ao juntar uma determinada quantidade de dinheiro por um determinado tempo com base nas suas preferências</p>
          
          <button className="start" onClick={() => setPage("pig")}>Começar agora</button>
        
        </div>
        
        <footer className="w-full py-5 bg-purple-500 flex justify-center items-center gap-20 flex-col text-purple-300 md:flex-row gap-8">
          
          <a href="#about">Sobre</a>
          
          <a href="#functionality">Como funciona?</a>
          
          <a href="#benefits">Benefícios</a>
          
          <a href="#piggy">Cofrinho</a>
          
        </footer>
        
      </div>
  
    );
    
  /*====================
  ANALYSIS 
  ====================*/
    
  const analysis = (
    
    <div>
      
      <div className="py-20 px-10 flex justify-center flex-col gap-5 md:px-20">
      
        <h1 className="text-center text-3xl flex gap-2">Gerenciamento<i className="bi bi-bar-chart"></i></h1>
        
        <p>É recomendado que, ao final do mês, o saldo seja de 10%-20% do valor total para fins como: reserva de emergência, investimentos, compras pessoais e entre outros. O relatório final será categorizado como: <i className="bi bi-circle-fill text-red-500"></i>Ruim, <i className="bi bi-circle-fill text-yellow-400"></i>Regular, <i className="bi bi-circle-fill text-green-500"></i>Bom</p>
        
        <input
          type="number"
          min="0"
          step="0.01"
          value={total}
          onChange={e => {
            const value = Number(e.target.value);
            if (value >= 0) setTotal(e.target.value);
          }}
          placeholder="Valor total"
          className="p-2"
        />
        
        <div className="flex gap-2 text-xl">
          <span>Nova classe</span>
          <button onClick={() => setPopUpOpen(true)}><i className="bi bi-plus-square-fill text-purple-700"></i></button>
        </div>
        
        <div className="line"></div>
        
        <div>{popUpOpen && popUp}</div>
        
        <ul className="mt-5 flex gap-5 flex-wrap">
          {categories.map((cat, index) => (
            <li key={index} className="category rounded-md flex justify-between">
              <div className="flex flex-col gap-2 text-xl">
                <p>Título: {cat.title}</p> <br/>
                <p> Valor: {cat.price.toFixed(2)}</p>
              </div>
              <div>
                <button className="text-purple-700 text-xl" onClick={() => excludeCategory(index)}><i className="bi bi-x-square-fill"></i></button>
              </div>
            </li>
          ))}
        </ul>
        
        <button 
          onClick={() => report()} 
          className="w-40 p-4 bg-purple-700 text-purple-50 rounded-md"
          >Relatório <i className="bi bi-bar-chart-fill"></i></button>
          
        <div>
          {remaining !== null && limit !== null && (
            <div className="flex flex-col gap-2 mt-4">
          
              <div className="text-xl font-bold">
                Saldo restante: R$ {remaining.toFixed(2)}
              </div>
          
              <div className="flex items-center gap-2 text-lg">
                Status do saldo:
                <i className={`bi bi-circle-fill ${statusColor}`}></i>
                <span className="font-semibold">{statusText}</span>
              </div>
          
            </div>
          )}
        </div>
      
      </div>
      
    </div>
    
  )
  
  /*=============
  PIG
  =============*/
  
  const [period, setPeriod] = React.useState("")
  const [invest, setInvest] = React.useState("")
  const [typePeriod, setTypePeriod] = React.useState("dias")
  const [result, setResult] = React.useState(null)
  let calculator = 0
  
  
  function calculate() {
    const totalPeriod = Number(period)
    const totalInvest = Number(invest)
    calculator = totalPeriod * totalInvest
    
    setResult(calculator)
  }
  
  const pig = (
    <div className="w-full h-dvh py-20 px-10 flex justify-center items-center">
      
      <div className="flex flex-col gap-5">
        
        <h1 className="text-3xl">Cofrinho</h1>
        
        <p>Faça uma simulação do lucro obtido em um determinado tempo e com um valor do seu agrado.</p>
        
        <div className="line"></div>
        
        <div className="flex gap-5">

          <input 
            type="number"
            placeholder="Período"
            step="1"
            onChange={e => {
              const value = Number(e.target.value);
              if (value >= 0) setPeriod(e.target.value);
            }}
            className="p-2"
          />
          
          <select
            className="p-2 bg-slate-300 rounded-md outline-none"
            value={typePeriod}
            onChange={e => setTypePeriod(e.target.value)}
          >
            
            <option value="dias">Dia</option>
            
            <option value="semanas">Semana</option>
            
            <option value="meses">Mês</option>
            
            <option value="anos">Ano</option>
            
          </select>
        
        </div>
        
        <input 
          type="number"
          placeholder="Valor"
          min="0"
          step="0.01"
          onChange={e => {
            const value = Number(e.target.value);
            if (value >= 0) setInvest(e.target.value);
          }}
          className="p-2"
        />
        
        <button onClick={() => calculate()} className="p-2 bg-purple-700 rounded-md w-40 text-purple-50">Calcular</button>
        
        {result !== null && (
          
          <div className="flex flex-col gap-5 font-bold">
            
            <div className="line my-5"></div>
            
            Total: R${result}
            <br/>
            Tempo: {period} {typePeriod}
            
          </div>
          
        )}
        
      </div>
      
    </div>
  )

  return (
    <div>
      <Header page={page} setPage={setPage} />

      {page === "home" && home}

      {page === "analysis" && analysis}

      {page === "pig" && pig}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

/*====================
HEADER
====================*/

function Header({ page, setPage }) {
  return (
    <header className="w-full h-10 flex justify-center items-center bg-purple-700 text-stone-50 fixed">
      
      <nav className="flex gap-10">
        
        <button onClick={() => setPage("home")}>
          <i className={`bi ${page === "home" ? "bi-house-fill" : "bi-house"}`} />
        </button>

        <button onClick={() => setPage("analysis")}>
          <i className={`bi ${page === "analysis" ? "bi-bar-chart-fill" : "bi-bar-chart"}`} />
        </button>

        <button onClick={() => setPage("pig")}>
          <i className={`bi ${page === "pig" ? "bi-piggy-bank-fill" : "bi-piggy-bank"}`} />
        </button>
        
      </nav>
      
    </header>
  );
}