'use client';

import { useTransition } from 'react';
import { removePantryItem } from './actions';

type PantryItem = {
  id: number;
  product: { id: number; name: string; canonicalName: string | null; category: string | null };
};

type Props = {
  items: PantryItem[];
};

export default function PantryList({ items }: Props) {
  const [isPending, startTransition] = useTransition();

  function handleRemove(id: number, name: string) {
    if (!confirm(`Ta bort "${name}" från baslagret?`)) return;
    startTransition(async () => {
      await removePantryItem(id);
    });
  }

  if (items.length === 0) {
    return (
      <p style={{ color: '#888', fontStyle: 'italic' }}>
        Baslagret är tomt. Lägg till produkter ovan.
      </p>
    );
  }

  // Gruppera per kategori
  const grouped = items.reduce<Record<string, PantryItem[]>>((acc, item) => {
    const cat = item.product.category || 'Övrigt';
    if (!acc[cat]) acc[cat] = [];
    acc[cat].push(item);
    return acc;
  }, {});

  const sortedCategories = Object.keys(grouped).sort((a, b) => {
    if (a === 'Övrigt') return 1;
    if (b === 'Övrigt') return -1;
    return a.localeCompare(b, 'sv');
  });

  return (
    <div style={{ display: 'grid', gap: '1.5rem' }}>
      {sortedCategories.map((category) => (
        <section key={category}>
          <h3 style={{ margin: '0 0 0.5rem', fontSize: '1rem', color: '#555', fontWeight: 600 }}>
            {category}
          </h3>
          <div style={{ display: 'grid', gap: '0.4rem' }}>
            {grouped[category].map((item) => {
              const displayName = item.product.canonicalName || item.product.name;
              return (
                <div
                  key={item.id}
                  style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    padding: '0.6rem 0.75rem',
                    border: '1px solid #eee',
                    borderRadius: '6px',
                    background: '#fafafa',
                  }}
                >
                  <span>{displayName}</span>
                  <button
                    type="button"
                    onClick={() => handleRemove(item.id, displayName)}
                    disabled={isPending}
                    style={{
                      background: 'none',
                      border: 'none',
                      color: '#c00',
                      cursor: isPending ? 'not-allowed' : 'pointer',
                      fontSize: '1.1rem',
                      padding: '0.2rem 0.5rem',
                      lineHeight: 1,
                    }}
                    title="Ta bort från baslagret"
                  >
                    ×
                  </button>
                </div>
              );
            })}
          </div>
        </section>
      ))}
    </div>
  );
}