// app/dashboard/page.js (Server Component)
import { getSalesData } from '../../lib/data'; // Função que busca dados no servidor
import SalesChart from './SalesChart'; // Client Component
 
export default async function DashboardPage() {
  const salesData = await getSalesData(); // Dados buscados no servidor
 
  return (
    <div className="container">
      <h1>Relatório de Vendas</h1>
      <p>Dados atualizados até {new Date().toLocaleDateString()}.</p>
      {/* O Server Component renderiza o Client Component e passa os dados como prop */}
      <SalesChart data={salesData} />
    </div>
  );
}

// app/dashboard/SalesChart.js (Client Component)
'use client'; // Marca este arquivo como um Client Component
 
import { useState, useEffect } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
export default function SalesChart({ data }) {
  const [chartData, setChartData] = useState([]);
 
  useEffect(() => {
    // Aqui você pode fazer alguma transformação ou usar os dados diretamente
    setChartData(data.map(item => ({ ...item, date: new Date(item.date).toLocaleDateString() })));
  }, [data]);
 
  return (
    <div style={{ width: '100%', height: 300 }}>
      <ResponsiveContainer>
        <LineChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="date" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Line type="monotone" dataKey="sales" stroke="#8884d8" activeDot={{ r: 8 }} />
        </LineChart>
      </ResponsiveContainer>
      <p>Clique nos pontos para ver detalhes!</p>
    </div>
  );
}

// app/todos/actions.js (Server Action File)
'use server'; // Marca todo o arquivo como server-only
 
import { revalidatePath } from 'next/cache';
import { saveTodo } from '../../lib/db'; // Função simulada para salvar no DB
 
export async function createTodo(formData) {
  const title = formData.get('title');
  if (!title) {
    return { error: 'O título da tarefa não pode ser vazio.' };
  }
 
  // Lógica de validação e salvamento no servidor
  await saveTodo({ title, completed: false });
  console.log(`Tarefa '${title}' salva no servidor!`);
 
  // Revalida o cache para que a lista de tarefas seja atualizada
  revalidatePath('/todos');
 
  return { success: true, message: `Tarefa '${title}' adicionada!` };
}

// app/todos/AddTodoForm.js (Client Component)
'use client'; // Marca este arquivo como um Client Component
 
import { useRef, useState } from 'react';
import { createTodo } from './actions'; // Importa a Server Action
 
export default function AddTodoForm() {
  const formRef = useRef(null);
  const [message, setMessage] = useState('');
  const [isPending, setIsPending] = useState(false);
 
  // Ação assíncrona que será disparada pelo formulário
  const handleSubmit = async (event) => {
    event.preventDefault(); // Evita o recarregamento padrão da página
 
    setIsPending(true);
    const formData = new FormData(formRef.current);
    const result = await createTodo(formData); // Chama a Server Action!
 
    if (result.error) {
      setMessage(`Erro: ${result.error}`);
    } else {
      setMessage(result.message);
      formRef.current.reset(); // Limpa o formulário
    }
    setIsPending(false);
  };
 
  return (
    <form ref={formRef} onSubmit={handleSubmit} className="p-4 border rounded-md shadow-sm">
      <input
        type="text"
        name="title"
        placeholder="Adicionar nova tarefa..."
        className="border p-2 rounded-md w-full mb-2"
        disabled={isPending}
      />
      <button
        type="submit"
        className="bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600 disabled:opacity-50"
        disabled={isPending}
      >
        {isPending ? 'Adicionando...' : 'Adicionar Tarefa'}
      </button>
      {message && <p className="mt-2 text-sm">{message}</p>}
    </form>
  );
}

// app/product/[id]/page.js (Server Component)
import ProductDetails from './ProductDetails'; // Client Component
 
// Função de exemplo para simular uma Server Action
async function updateProductRating(productId, rating) {
  'use server';
  console.log(`Atualizando rating do produto ${productId} para ${rating}`);
  // Lógica para atualizar no DB
  return { success: true };
}
 
export default function ProductPage({ params }) {
  const productId = params.id;
  const product = {
    id: productId,
    name: `Produto ${productId}`,
    price: 99.99,
    description: 'Um produto incrível.',
    // dataCriacao: new Date(), // ❌ NÃO serializável!
    // metodoExemplo: () => console.log('Olá'), // ❌ NÃO serializável!
  };
 
  return (
    <div>
      <h1>Detalhes do Produto</h1>
      <ProductDetails
        product={product}
        // ✅ Server Action é serializável e pode ser passada como prop
        onRateProduct={(rating) => updateProductRating(productId, rating)}
      />
    </div>
  );
}

// app/product/[id]/ProductDetails.js (Client Component)
'use client';
 
import { useState } from 'react';
 
export default function ProductDetails({ product, onRateProduct }) {
  const [rating, setRating] = useState(0);
 
  const handleRate = async () => {
    if (rating > 0) {
      const result = await onRateProduct(rating); // Chama a Server Action!
      if (result.success) {
        alert('Avaliação enviada com sucesso!');
      } else {
        alert('Erro ao enviar avaliação.');
      }
    }
  };
 
  return (
    <div className="p-4 border rounded-md shadow-sm">
      <h2 className="text-xl font-bold">{product.name}</h2>
      <p>Preço: R$ {product.price.toFixed(2)}</p>
      <p>{product.description}</p>
      {/* <p>Criado em: {product.dataCriacao.toLocaleDateString()}</p> */} {/* ❌ Isso falharia! */}
 
      <div className="mt-4">
        <label htmlFor="rating" className="block text-sm font-medium text-gray-700">
          Avalie o produto:
        </label>
        <select
          id="rating"
          value={rating}
          onChange={(e) => setRating(parseInt(e.target.value))}
          className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
        >
          <option value="0">Selecione...</option>
          <option value="1">1 Estrela</option>
          <option value="2">2 Estrelas</option>
          <option value="3">3 Estrelas</option>
          <option value="4">4 Estrelas</option>
          <option value="5">5 Estrelas</option>
        </select>
        <button
          onClick={handleRate}
          className="mt-2 bg-green-500 text-white p-2 rounded-md hover:bg-green-600"
          disabled={rating === 0}
        >
          Enviar Avaliação
        </button>
      </div>
    </div>
  );
}

// app/items/actions.js (Server Action File)
'use server';
 
import { revalidatePath } from 'next/cache';
import { deleteItemFromDB } from '../../lib/db'; // Simula a exclusão no DB
 
export async function deleteItem(id) {
  await deleteItemFromDB(id);
  revalidatePath('/items'); // Revalida a lista de itens
  console.log(`Item ${id} deletado.`);
  return { success: true };
}

// app/items/page.js (Server Component)
import { getItems } from '../../lib/db'; // Simula a busca de itens
import DeleteButton from './DeleteButton'; // Client Component
import { deleteItem } from './actions'; // Importa a Server Action
 
export default async function ItemsPage() {
  const items = await getItems();
 
  return (
    <div className="container p-4">
      <h1 className="text-2xl font-bold mb-4">Meus Itens</h1>
      <ul className="space-y-2">
        {items.map((item) => (
          <li key={item.id} className="flex items-center justify-between p-3 border rounded-md shadow-sm">
            <span>{item.name}</span>
            {/* Passa a Server Action 'deleteItem' como prop para o Client Component */}
            <DeleteButton itemId={item.id} onDelete={deleteItem} />
          </li>
        ))}
      </ul>
    </div>
  );
}

// app/items/DeleteButton.js (Client Component)
'use client';
 
import { useState } from 'react';
 
export default function DeleteButton({ itemId, onDelete }) {
  const [isDeleting, setIsDeleting] = useState(false);
 
  const handleDelete = async () => {
    if (window.confirm(`Tem certeza que deseja deletar o item ${itemId}?`)) {
      setIsDeleting(true);
      await onDelete(itemId); // Chama a Server Action passada como prop!
      setIsDeleting(false);
    }
  };
 
  return (
    <button
      onClick={handleDelete}
      className="bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 disabled:opacity-50"
      disabled={isDeleting}
    >
      {isDeleting ? 'Deletando...' : 'Deletar'}
    </button>
  );
}