'use client';

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

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

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

  return (
    <form
      onSubmit={async (e) => {
        e.preventDefault();
        setError(null);
        setIsPending(true);

        const form = e.currentTarget;
        const formData = new FormData(form);

        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',
        borderRadius: '8px',
        marginBottom: '1.5rem',
      }}
    >
      <h2 style={{ margin: 0 }}>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="number"
          step="0.01"
          min="0"
          required
          style={{ width: '100%', padding: '0.5rem' }}
        />
      </label>

      <label>
        Enhet
        <br />
        <input
          name="unit"
          type="text"
          required
          placeholder="g, kg, st, dl..."
          style={{ width: '100%', padding: '0.5rem' }}
        />
      </label>

      <label>
        Plats
        <br />
        <select name="location" required style={{ width: '100%', padding: '0.5rem' }}>
          <option value="">Välj plats</option>
          <option value="Kyl">Kyl</option>
          <option value="Frys">Frys</option>
          <option value="Skafferi">Skafferi</option>
          <option value="Annat">Annat</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>
  );
}