'use client';

import { useState, useTransition } from 'react';
import { createProduct } from './actions';

export default function ProductForm() {
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);

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

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

        startTransition(async () => {
          try {
            await createProduct(formData);
            form.reset();
          } catch (err) {
            setError(err instanceof Error ? err.message : 'Okänt fel');
          }
        });
      }}
      style={{
        display: 'grid',
        gap: '0.75rem',
        padding: '1rem',
        border: '1px solid #ddd',
        borderRadius: '8px',
        marginBottom: '1.5rem',
      }}
    >
      <h2 style={{ margin: 0 }}>Skapa produkt</h2>

      <label>
        Produktnamn
        <br />
        <input
          name="name"
          type="text"
          required
          placeholder="Till exempel Rödkål"
          style={{ width: '100%', padding: '0.5rem' }}
        />
      </label>

      <button type="submit" disabled={isPending} style={{ padding: '0.75rem' }}>
        {isPending ? 'Sparar...' : 'Skapa produkt'}
      </button>

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