'use client';

import React, { useState } from 'react';
import { createItem, updateItem } from '../actions';

interface ItemFormProps {
  categories: any[];
  initialData?: any;
  onClose: () => void;
}

export default function ItemForm({ categories, initialData, onClose }: ItemFormProps) {
  const [loading, setLoading] = useState(false);

  async function handleSubmit(formData: FormData) {
    setLoading(true);
    if (initialData) {
      await updateItem(initialData.id, formData);
    } else {
      await createItem(formData);
    }
    setLoading(false);
    onClose();
  }

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <div className="card-header">
          <h2 className="card-title">{initialData ? 'Ürünü Düzenle' : 'Yeni Ürün Ekle'}</h2>
          <button onClick={onClose} className="action-btn">✕</button>
        </div>
        <form action={handleSubmit} className="admin-form">
          <div className="form-group">
            <label htmlFor="name">Ürün Adı</label>
            <input
              id="name"
              name="name"
              defaultValue={initialData?.name}
              className="admin-input"
              placeholder="Örn: Mojito"
              required
            />
          </div>
          <div className="form-group">
            <label htmlFor="categoryId">Kategori</label>
            <select
              id="categoryId"
              name="categoryId"
              defaultValue={initialData?.categoryId || categories[0]?.id}
              className="admin-select"
              required
            >
              {categories.map(cat => (
                <option key={cat.id} value={cat.id}>{cat.title}</option>
              ))}
            </select>
          </div>
          <div className="form-group">
            <label htmlFor="price">Fiyat (Metin veya JSON)</label>
            <textarea
              id="price"
              name="price"
              defaultValue={typeof initialData?.price === 'object' ? JSON.stringify(initialData.price) : initialData?.price}
              className="admin-textarea"
              placeholder='Örn: 590 tl veya {"single": "370 tl", "double": "560 tl"}'
              required
            />
          </div>
          <div className="form-group">
            <label htmlFor="ingredients">İçerik</label>
            <input
              id="ingredients"
              name="ingredients"
              defaultValue={initialData?.ingredients}
              className="admin-input"
              placeholder="Örn: Rom, Nane, Lime"
            />
          </div>
          <div className="form-group">
            <label htmlFor="tasteProfile">Tat Profili</label>
            <input
              id="tasteProfile"
              name="tasteProfile"
              defaultValue={initialData?.tasteProfile}
              className="admin-input"
              placeholder="Örn: Tatlı-Ekşi-Ferah"
            />
          </div>
          <div className="form-group">
            <label htmlFor="grapeVariety">Üzüm Çeşidi (Şaraplar için)</label>
            <input
              id="grapeVariety"
              name="grapeVariety"
              defaultValue={initialData?.grapeVariety}
              className="admin-input"
              placeholder="Örn: Merlot"
            />
          </div>
          <div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
            <button type="submit" className="admin-btn" disabled={loading}>
              {loading ? 'Kaydediliyor...' : 'Kaydet'}
            </button>
            <button type="button" onClick={onClose} className="admin-btn" style={{ background: 'rgba(255,255,255,0.05)', color: '#fff' }}>
              İptal
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}