recipe-app/frontend/app/admin/products/ResetProductsButton.tsx

'use client';

import { useState } from 'react';

export default function ResetProductsButton() {
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleClick() {
    if (
      !confirm(
        '⚠️ Detta raderar ALLA produkter, inventory, taggar, kvitto-alias och pantry.\n\nKategorier och användare behålls.\n\nÄr du säker?',
      )
    )
      return;

    setError(null);
    setIsPending(true);
    try {
      const res = await fetch('/api/admin/reset-products', { method: 'POST' });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data?.error || 'Återställning misslyckades');
      }
      window.dispatchEvent(new CustomEvent('product-list-changed'));
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Okänt fel');
    } finally {
      setIsPending(false);
    }
  }

  return (
    <div style={{ marginBottom: '1.5rem' }}>
      <button
        type="button"
        onClick={handleClick}
        disabled={isPending}
        style={{
          padding: '0.6rem 1.25rem',
          background: isPending ? '#ccc' : '#fff',
          color: '#c00',
          border: '1px solid #c00',
          borderRadius: '4px',
          cursor: isPending ? 'not-allowed' : 'pointer',
          fontWeight: 600,
          fontSize: '0.9rem',
        }}
      >
        {isPending ? 'Återställer...' : '🗑 Återställ alla produkter'}
      </button>
      {error && (
        <p style={{ color: 'crimson', marginTop: '0.5rem', fontSize: '0.9rem' }}>{error}</p>
      )}
    </div>
  );
}