'use client';

import React, { useState } from 'react';
import ItemForm from '../components/ItemForm';
import DeleteButton from '../components/DeleteButton';
import { deleteItem } from '../actions';

interface ItemManagerProps {
  items: any[];
  categories: any[];
}

export default function ItemManager({ items, categories }: ItemManagerProps) {
  const [showForm, setShowForm] = useState(false);
  const [editingItem, setEditingItem] = useState<any>(null);

  const handleEdit = (item: any) => {
    setEditingItem(item);
    setShowForm(true);
  };

  const handleClose = () => {
    setShowForm(false);
    setEditingItem(null);
  };

  return (
    <div className="admin-items">
      <div className="admin-page-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
        <div>
          <h1>Ürünler</h1>
          <p>Tüm menü öğelerini yönetin</p>
        </div>
        <button className="admin-btn" onClick={() => setShowForm(true)}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{width: '16px'}}><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
          Yeni Ürün Ekle
        </button>
      </div>

      <div className="admin-card">
        <table className="admin-table">
          <thead>
            <tr>
              <th>Ürün Adı</th>
              <th>Kategori</th>
              <th>Fiyat</th>
              <th>İşlemler</th>
            </tr>
          </thead>
          <tbody>
            {items.map((item) => (
              <tr key={item.id}>
                <td>
                  <div style={{ fontWeight: 500, color: '#fff' }}>{item.name}</div>
                  <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>
                    {item.ingredients ? (item.ingredients.length > 50 ? item.ingredients.substring(0, 50) + '...' : item.ingredients) : 'İçerik yok'}
                  </div>
                </td>
                <td>
                  <span className="badge" style={{ background: 'rgba(124, 92, 191, 0.1)', color: 'var(--accent-purple)', borderColor: 'rgba(124, 92, 191, 0.2)' }}>
                    {item.category.title}
                  </span>
                </td>
                <td>
                  <div style={{ color: 'var(--gold)', fontWeight: 600 }}>
                    {typeof item.price === 'string' 
                      ? item.price 
                      : Object.entries(item.price as object).map(([k, v]) => `${k}: ${v}`).join(', ')
                    }
                  </div>
                </td>
                <td className="actions-cell">
                  <button className="action-btn" onClick={() => handleEdit(item)}>Düzenle</button>
                  <DeleteButton onDelete={async () => { await deleteItem(item.id); }} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {showForm && (
        <ItemForm 
          categories={categories}
          initialData={editingItem} 
          onClose={handleClose} 
        />
      )}
    </div>
  );
}