import { fetchJson } from '../../lib/api';
import type { Product } from '../../features/inventory/types';
import Navigation from '../Navigation';
import AddToPantryForm from './AddToPantryForm';
import PantryList from './PantryList';

type PantryItem = {
  id: number;
  productId: number;
  createdAt: string;
  updatedAt: string;
  product: Product;
};

export default async function BaslagerPage() {
  const [pantryItems, products] = await Promise.all([
    fetchJson<PantryItem[]>('/api/pantry'),
    fetchJson<Product[]>('/api/products'),
  ]);

  const pantryProductIds = new Set(pantryItems.map((i) => i.productId));


  return (
    <main style={{ padding: '1rem', maxWidth: '700px', margin: '0 auto' }}>
      <Navigation />
      <h1 style={{ marginBottom: '0.5rem' }}>Baslager</h1>
      <p style={{ color: '#666', marginBottom: '1.5rem' }}>
        Produkter du alltid räknar med att ha hemma.
      </p>

      <section style={{ marginBottom: '2rem' }}>
        <h2 style={{ fontSize: '1.1rem', marginBottom: '0.75rem' }}>Lägg till produkt</h2>
        <AddToPantryForm products={products} pantryProductIds={pantryProductIds} />
      </section>

      <section>
        <h2 style={{ fontSize: '1.1rem', marginBottom: '0.75rem' }}>
          {pantryItems.length} {pantryItems.length === 1 ? 'produkt' : 'produkter'} i baslagret
        </h2>
        <PantryList items={pantryItems} />
      </section>
    </main>
  );
}