recipe-app/frontend/app/inventory/InventoryForm.tsx

'use client';

import { useState } from 'react';
import { createInventoryItem } from './actions';
import type { Product } from '../../features/inventory/types';
import { UNIT_OPTIONS } from '../../lib/units';

type Props = {
  products: Product[];
};

export default function InventoryForm({ products }: Props) {
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [isOpen, setIsOpen] = useState(false);

  const LOCATION_OPTIONS = [
    { value: '', label: 'Välj plats' },
    { value: 'Kyl', label: 'Kyl' },
    { value: 'Frys', label: 'Frys' },
    { value: 'Skafferi', label: 'Skafferi' },
    { value: 'Annat', label: 'Annat' },
  ];

  function parseQuantityInput(input: string, defaultUnit: string) {
    const match = input.trim().match(/^([\d.,]+)\s*([a-zA-Z]*)$/);
     if (!match) return { quantity: NaN, unit: defaultUnit };
     let [, num, unit] = match;
     num = num.replace(',', '.');
     unit = unit.toLowerCase() || defaultUnit;
     const value = parseFloat(num);
     // Konvertera alltid till defaultUnit
     if (defaultUnit === 'kg') {
       if (unit === 'g' || unit === 'gram') return { quantity: value / 1000, unit: 'kg' };
       if (unit === 'hg' || unit === 'hektogram') return { quantity: value / 10, unit: 'kg' };
       if (unit === 'kg' || unit === 'kilogram' || unit === '') return { quantity: value, unit: 'kg' };
     }
     if (defaultUnit === 'g') {
       if (unit === 'kg' || unit === 'kilogram') return { quantity: value * 1000, unit: 'g' };
       if (unit === 'hg' || unit === 'hektogram') return { quantity: value * 100, unit: 'g' };
       if (unit === 'g' || unit === 'gram' || unit === '') return { quantity: value, unit: 'g' };
     }
     // Lägg till fler konverteringar vid behov
     return { quantity: value, unit: defaultUnit };
  }

  return (
    <div style={{ marginBottom: '1.5rem' }}>
      <button
        type="button"
        onClick={() => setIsOpen((v) => !v)}
        style={{
          padding: '0.6rem 1rem',
          border: '1px solid #ddd',
          borderRadius: '6px',
          background: '#fff',
          cursor: 'pointer',
          fontWeight: 500,
          fontSize: '1rem',
          width: '100%',
          textAlign: 'left',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <span>Lägg till hemmavara</span>
        <span>{isOpen ? '▲' : '▼'}</span>
      </button>

      {isOpen && (
      <form
        onSubmit={async (e) => {
        e.preventDefault();
        setError(null);
        setIsPending(true);
        const form = e.currentTarget;
        const formData = new FormData(form);
        const raw = formData.get('quantity') as string;
        const unit = formData.get('unit') as string;
        const { quantity, unit: parsedUnit } = parseQuantityInput(raw, unit);
        formData.set('quantity', String(quantity));
        formData.set('unit', parsedUnit);
        try {
          await createInventoryItem(formData);
          form.reset();
        } catch (err) {
          setError(err instanceof Error ? err.message : 'Okänt fel');
        } finally {
          setIsPending(false);
        }
      }}
      style={{
        display: 'grid',
        gap: '0.75rem',
        padding: '1rem',
        border: '1px solid #ddd',
        borderTop: 'none',
        borderRadius: '0 0 8px 8px',
        marginBottom: '0',
      }}
    >
      <h2 style={{ margin: 0, display: 'none' }}>Lägg till hemmavara</h2>

      <label>
        Produkt
        <br />
        <select name="productId" required style={{ width: '100%', padding: '0.5rem' }}>
          <option value="">Välj produkt</option>
          {products.map((product) => (
            <option key={product.id} value={product.id}>
              {product.canonicalName || product.name}
            </option>
          ))}
        </select>
      </label>

      <label>
        Mängd
        <br />
        <input
          name="quantity"
          type="text"
          required
          style={{ width: '100%', padding: '0.5rem' }}
        />
      </label>

      <label>
        Enhet
        <br />
        <select
          name="unit"
          required
          style={{ width: '100%', padding: '0.5rem' }}
        >
          {UNIT_OPTIONS.map((opt) => (
            <option key={opt.value} value={opt.value}>
              {opt.label}
            </option>
          ))}
        </select>
      </label>

      <label>
        Plats
        <br />
        <select
          name="location"
          required
          style={{ width: '100%', padding: '0.5rem' }}
        >
          {LOCATION_OPTIONS.map((opt) => (
            <option key={opt.value} value={opt.value}>
              {opt.label}
            </option>
          ))}
        </select>
      </label>
      
       <label>
        Varumärke
        <br />
        <input
          name="brand"
          type="text"
          placeholder="t.ex. Eldorado, Kronfågel, Garant, ICA Basic, Motti"
          style={{ width: '100%', padding: '0.5rem' }}
        />
      </label>

      <label>
        Passar till
        <br />
        <input
          name="suitableFor"
          type="text"
          placeholder="Wok, Gryta..."
          style={{ width: '100%', padding: '0.5rem' }}
        />
      </label>

      <label>
        Bäst före
        <br />
        <input
          name="bestBeforeDate"
          type="date"
          style={{ width: '100%', padding: '0.5rem' }}
        />
      </label>

      <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
        <input name="opened" type="checkbox" />
        Öppnad
      </label>

      <button type="submit" disabled={isPending} style={{ padding: '0.75rem' }}>
        {isPending ? 'Sparar...' : 'Lägg till'}
      </button>

      {error ? <p style={{ color: 'crimson', margin: 0 }}>{error}</p> : null}
    </form>
      )}
    </div>
  );
}