'use client';

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

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

  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);
    startTransition(async () => {
      try {
        await resetAllProducts();
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Okänt fel');
      }
    });
  }

  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>
  );
}