'use client';

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

export default function InventoryView() {
  const [inventory, setInventory] = useState<InventoryItem[]>([]);
  const [products, setProducts] = useState<Product[]>([]);
  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 [invRes, prodRes] = await Promise.all([
        authFetch('/api/inventory'),
        fetch('/api/products'),
      ]);
      if (!invRes.ok) throw new Error('Kunde inte hämta inventarie');
      if (!prodRes.ok) throw new Error('Kunde inte hämta produkter');
      const [inv, prods] = await Promise.all([invRes.json(), prodRes.json()]);
      setInventory(inv);
      setProducts(prods);
    } 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 inventarie…</p>;
  if (error) return <p style={{ color: '#c00' }}>{error}</p>;

  return (
    <div>
      <p style={{ color: '#555', marginBottom: '1rem' }}>
        Lägg till, redigera och ta bort varor i ditt inventarie.
      </p>

      {/* Formulär för att lägga till vara — viker ut sig vid klick */}
      <InventoryForm products={products} onCreated={load} />

      {/* Lista med redigera/ta bort per rad */}
      <InventoryList inventory={inventory} onDeleted={load} />
    </div>
  );
}