'use client';

import React, { useState } from 'react';
import { createCategory, updateCategory } from '../actions';

interface CategoryFormProps {
  initialData?: any;
  onClose: () => void;
}

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

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

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <div className="card-header">
          <h2 className="card-title">{initialData ? 'Kategoriyi Düzenle' : 'Yeni Kategori Ekle'}</h2>
          <button onClick={onClose} className="action-btn">✕</button>
        </div>
        <form action={handleSubmit} className="admin-form">
          <div className="form-group">
            <label htmlFor="title">Kategori Başlığı</label>
            <input
              id="title"
              name="title"
              defaultValue={initialData?.title}
              className="admin-input"
              placeholder="Örn: Klasik Kokteyller"
              required
            />
          </div>
          <div className="form-group">
            <label htmlFor="externalId">Harici ID (İkon eşleşmesi için)</label>
            <input
              id="externalId"
              name="externalId"
              defaultValue={initialData?.externalId}
              className="admin-input"
              placeholder="Örn: classic_cocktails"
            />
          </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>
  );
}