async function getProducts() {
  try {
    const res = await fetch('http://web/api/products', { cache: 'no-store' });
    if (!res.ok) return { data: [] };
    return res.json();
  } catch {
    return { data: [] };
  }
}

export default async function HomePage() {
  const result = await getProducts();
  const products = result.data ?? [];

  return (
    <main style={{ maxWidth: 1000, margin: '0 auto', padding: 24 }}>
      <header style={{ marginBottom: 32 }}>
        <h1 style={{ color: '#e94057' }}>DigitalWorkshop 🛍️</h1>
        <p style={{ color: '#555' }}>আপনার আন্তর্জাতিক অনলাইন মার্কেটপ্লেস</p>
      </header>

      <h2>সব প্রোডাক্ট ({products.length})</h2>

      {products.length === 0 ? (
        <div style={{ padding: 40, textAlign: 'center', background: '#fff', borderRadius: 8 }}>
          <p>এখনো কোনো অ্যাপ্রুভড প্রোডাক্ট নেই।</p>
          <p style={{ color: '#888', fontSize: 14 }}>
            Backend API থেকে ডেটা আসছে কিনা যাচাই করুন: <code>http://localhost:8080/api/products</code>
          </p>
        </div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 16 }}>
          {products.map((p: any) => (
            <div key={p.id} style={{ background: '#fff', borderRadius: 8, padding: 16, boxShadow: '0 1px 3px rgba(0,0,0,0.1)' }}>
              <h3 style={{ fontSize: 16, margin: '0 0 8px' }}>
                {p.translations?.bn?.title ?? p.translations?.en?.title ?? p.sku}
              </h3>
              <p style={{ color: '#e94057', fontWeight: 'bold' }}>
                ৳{(p.base_price / 100).toFixed(2)}
              </p>
            </div>
          ))}
        </div>
      )}
    </main>
  );
}