'use client';

import { useState, useEffect, useCallback } from 'react';
import type { Product } from '../../../../features/inventory/types';
import AddToPantryForm from '../../../baslager/AddToPantryForm';
import PantryList from '../../../baslager/PantryList';
import { useAuthFetch } from '../../../../lib/use-auth-fetch';

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

type InventoryItem = {
  productId: number;
  quantity: string;
  unit: string;
};

export default function PantryView() {
  const [pantryItems, setPantryItems] = useState<PantryItem[]>([]);
  const [products, setProducts] = useState<Product[]>([]);
  const [inventoryByProductId, setInventoryByProductId] = useState<Record<number, InventoryItem[]>>({});
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const authFetch = useAuthFetch();

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const [pantryRes, prodRes, invRes] = await Promise.all([
        authFetch('/api/pantry'),
        fetch('/api/products'),
        authFetch('/api/inventory').catch(() => null),
      ]);
      if (!pantryRes.ok) throw new Error('Kunde inte hämta baslager');
      if (!prodRes.ok) throw new Error('Kunde inte hämta produkter');
      const [pantry, prods] = await Promise.all([pantryRes.json(), prodRes.json()]);
      const inv: InventoryItem[] = invRes?.ok ? await invRes.json() : [];
      setPantryItems(pantry);
      setProducts(prods);
      const byProd = inv.reduce<Record<number, InventoryItem[]>>((acc, item) => {
        if (!acc[item.productId]) acc[item.productId] = [];
        acc[item.productId].push(item);
        return acc;
      }, {});
      setInventoryByProductId(byProd);
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Okänt fel');
    } finally {
      setLoading(false);
    }
  }, [authFetch]);

  useEffect(() => { load(); }, [load]);

  if (loading) return <p style={{ color: '#888' }}>Laddar baslager…</p>;
  if (error) return <p style={{ color: '#c00' }}>{error}</p>;

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

  return (
    <div>
      <p style={{ color: '#555', marginBottom: '1rem' }}>
        Produkter du alltid räknar med att ha hemma. Lägg till och ta bort varor i ditt baslager.
      </p>

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

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