'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 style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
        Produktnamn
      </label>
      <input
        name="name"
        type="text"
        required
        placeholder="Till exempel Rödkål"
        style={{ 
          width: '100%', 
          padding: '0.75rem',
          border: '1px solid #ddd',
          borderRadius: '4px',
          fontSize: '1rem',
          boxSizing: 'border-box',
          minHeight: '44px',
        }}
      />

      <button 
        type="submit" 
        disabled={isPending} 
        style={{ 
          padding: '0.75rem 1.5rem',
          background: '#0070f3',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer',
          fontSize: '1rem',
          minHeight: '44px',
          fontWeight: 600,
        }}
      >
        {isPending ? 'Sparar...' : 'Skapa produkt'}
      </button>

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