import { useEffect, useState } from 'react';

// Props descritas com interface: passar texto={42} vira erro no editor
interface BotaoProps { texto: string; onClick?: () => void; }

function Botao({ texto, onClick }: BotaoProps) {
  return <button className="botao" onClick={onClick}>{texto}</button>;
}

function Exemplo() {
  const [valor, setValor] = useState(0);            // [valor atual, função para alterar] = useState(inicial)
  const [itens, setItens] = useState<string[]>([]);

  useEffect(() => { setItens(['a', 'b']); }, []);  // roda depois de aparecer na tela; [] = só uma vez

  return (
    <div>
      <Botao texto={`Cliques: ${valor}`} onClick={() => setValor((v) => v + 1)} />
      {valor > 5 && <p>Mais de 5 cliques!</p>}      {/* só aparece se a condição for verdadeira */}
      <ul>{itens.map((i) => <li key={i}>{i}</li>)}</ul> {/* listas sempre com key única */}
    </div>
  );
}

// src/components/Contador.tsx
import { useState } from 'react';

interface ContadorProps { rotulo: string; passo?: number; }

export default function Contador({ rotulo, passo = 1 }: ContadorProps) {
  const [valor, setValor] = useState(0);
  return (
    <p>
      {rotulo}: {valor}{' '}
      <button onClick={() => setValor((v) => v - passo)}>-{passo}</button>
      <button onClick={() => setValor(0)}>Zerar</button>
      <button onClick={() => setValor((v) => v + passo)}>+{passo}</button>
    </p>
  );
}

// src/pages/Ola.tsx
import { useState } from 'react';
import Contador from '../components/Contador';

export default function Ola() {
  const [nome, setNome] = useState('');
  return (
    <>
      <input value={nome} onChange={(e) => setNome(e.target.value)} placeholder="Seu nome" />
      <h1>Olá, {nome || 'mundo'}!</h1>
      <Contador rotulo="Contador A" />
      <Contador rotulo="Contador B" passo={5} />
    </>
  );
}

// src/pages/Tarefas.tsx
import { useState, type FormEvent } from 'react';
import { Link } from 'react-router';
import { useTarefas } from '../hooks/useTarefas';
import { usePreferencias } from '../hooks/usePreferencias';

export default function Tarefas() {
  const { tarefas, carregando, erro, adicionar, alternar, remover } = useTarefas();
  const { prefs } = usePreferencias();
  const [titulo, setTitulo] = useState('');

  function enviar(e: FormEvent) {
    e.preventDefault();                            // sem isso o navegador recarrega a página
    if (titulo.trim()) adicionar(titulo).then(() => setTitulo(''));
  }

  if (carregando) return <p>Carregando...</p>;
  const visiveis = prefs.ocultarConcluidas ? tarefas.filter((t) => !t.concluida) : tarefas;

  return (
    <>
      {prefs.nome && <h2>Olá, {prefs.nome}!</h2>}
      {erro && <p style={{ background: '#fde68a' }}>{erro}</p>}
      <form onSubmit={enviar}>
        <input value={titulo} onChange={(e) => setTitulo(e.target.value)} />
        <button>Adicionar</button>
      </form>
      <ul>
        {visiveis.map((t) => (
          <li key={t.id}>
            <input type="checkbox" checked={t.concluida} onChange={() => alternar(t)} />
            <Link to={`/tarefa/${t.id}`}>{t.titulo}</Link>
            <button onClick={() => remover(t.id)}>🗑</button>
          </li>
        ))}
      </ul>
    </>
  );
}

// src/pages/Configuracoes.tsx
import { usePreferencias } from '../hooks/usePreferencias';

export default function Configuracoes() {
  const { prefs, atualizar } = usePreferencias();
  return (
    <>
      <input value={prefs.nome} onChange={(e) => atualizar({ nome: e.target.value })} placeholder="Seu nome" />
      <label>
        <input type="checkbox" checked={prefs.ocultarConcluidas}
               onChange={(e) => atualizar({ ocultarConcluidas: e.target.checked })} />
        Ocultar tarefas concluídas
      </label>
    </>
  );
}

// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router';
import App from './App';

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

// src/App.tsx
import { NavLink, Route, Routes } from 'react-router';
import Tarefas from './pages/Tarefas';
import DetalheTarefa from './pages/DetalheTarefa';
import Estatisticas from './pages/Estatisticas';
import Configuracoes from './pages/Configuracoes';
import Ola from './pages/Ola';

export default function App() {
  return (
    <>
      <nav>  {/* NavLink marca sozinho o link da página atual */}
        <NavLink to="/">Tarefas</NavLink> | <NavLink to="/estatisticas">Estatísticas</NavLink> |{' '}
        <NavLink to="/configuracoes">Configurações</NavLink> | <NavLink to="/ola">Olá</NavLink>
      </nav>
      <Routes>
        <Route path="/" element={<Tarefas />} />
        <Route path="/tarefa/:id" element={<DetalheTarefa />} />  {/* rota dinâmica */}
        <Route path="/estatisticas" element={<Estatisticas />} />
        <Route path="/configuracoes" element={<Configuracoes />} />
        <Route path="/ola" element={<Ola />} />
        <Route path="*" element={<h1>404 — Página não encontrada</h1>} />
      </Routes>
    </>
  );
}

// src/pages/DetalheTarefa.tsx
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router';
import { api } from '../services/api';

export default function DetalheTarefa() {
  const id = Number(useParams().id);               // parâmetro da URL sempre chega como texto
  const navigate = useNavigate();
  const [titulo, setTitulo] = useState('');
  const [msg, setMsg] = useState('');

  useEffect(() => { api.buscar(id).then((t) => setTitulo(t.titulo)); }, [id]);

  async function salvar() {
    await api.atualizar(id, { titulo });
    setMsg('Salvo no servidor!');
  }

  return (
    <>
      <input value={titulo} onChange={(e) => setTitulo(e.target.value)} />
      <button onClick={salvar}>Salvar</button>
      <button onClick={() => navigate(-1)}>Voltar</button>
      {msg && <p>{msg}</p>}
    </>
  );
}

// src/pages/Estatisticas.tsx
import { Bar, BarChart, Cell, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { useTarefas } from '../hooks/useTarefas';

export default function Estatisticas() {
  const { tarefas } = useTarefas();

  const status = [
    { nome: 'Concluídas', valor: tarefas.filter((t) => t.concluida).length },
    { nome: 'Pendentes', valor: tarefas.filter((t) => !t.concluida).length },
  ];

  const contagem: Record<string, number> = {};
  for (const t of tarefas) {
    const dia = t.criada_em.slice(0, 10);
    contagem[dia] = (contagem[dia] ?? 0) + 1;
  }
  const porDia = Object.entries(contagem).map(([dia, total]) => ({ dia, total }));

  return (
    <>
      <ResponsiveContainer width="100%" height={250}>
        <PieChart>
          <Pie data={status} dataKey="valor" nameKey="nome" label>
            <Cell fill="#22c55e" />
            <Cell fill="#f59e0b" />
          </Pie>
          <Tooltip />
        </PieChart>
      </ResponsiveContainer>
      <ResponsiveContainer width="100%" height={250}>
        <BarChart data={porDia}>
          <XAxis dataKey="dia" />
          <YAxis allowDecimals={false} />
          <Tooltip />
          <Bar dataKey="total" fill="#3b82f6" />
        </BarChart>
      </ResponsiveContainer>
    </>
  );
}