مخطط الفعاليات

import React, { useState } from "react";

function EventPlanner() {
  // حالة التطبيق
  const [suppliers, setSuppliers] = useState([]); // قائمة الموردين
  const [schedule, setSchedule] = useState([]); // الجدول الزمني
  const [guests, setGuests] = useState([]); // بيانات الضيوف
  const [seatingArrangement, setSeatingArrangement] = useState({}); // ترتيبات الجلوس
  const [activeEvent, setActiveEvent] = useState(null); // الفعالية النشطة

  // إضافة مورد جديد
  const addSupplier = (supplier) => {
    setSuppliers([...suppliers, supplier]);
  };

  // إضافة حدث إلى الجدول الزمني
  const addEventToSchedule = (event) => {
    setSchedule([...schedule, event]);
  };

  // تحديث رد الضيف على الدعوة
  const updateGuestResponse = (guestId, response) => {
    const updatedGuests = guests.map((guest) =>
      guest.id === guestId ? { ...guest, response } : guest
    );
    setGuests(updatedGuests);
  };

  // تحديث ترتيبات الجلوس
  const updateSeating = (tableId, guestsAtTable) => {
    setSeatingArrangement({
      ...seatingArrangement,
      [tableId]: guestsAtTable,
    });
  };

  return (
    <div className="event-planner">
      <h1>مخطط الفعاليات</h1>

      {/* قسم الموردين */}
      <section>
        <h2>الموردون</h2>
        <SupplierList suppliers={suppliers} />
        <AddSupplierForm addSupplier={addSupplier} />
      </section>

      {/* قسم الجدول الزمني */}
      <section>
        <h2>الجدول الزمني</h2>
        <Schedule events={schedule} addEvent={addEventToSchedule} />
      </section>

      {/* قسم الضيوف */}
      <section>
        <h2>الضيوف</h2>
        <GuestList guests={guests} updateResponse={updateGuestResponse} />
      </section>

      {/* قسم ترتيبات الجلوس */}
      <section>
        <h2>ترتيبات الجلوس</h2>
        <SeatingArrangement
          seating={seatingArrangement}
          updateSeating={updateSeating}
        />
      </section>
    </div>
  );
}

// مكون قائمة الموردين
function SupplierList({ suppliers }) {
  return (
    <ul>
      {suppliers.map((supplier, index) => (
        <li key={index}>{supplier.name}</li>
      ))}
    </ul>
  );
}

// مكون إضافة مورد
function AddSupplierForm({ addSupplier }) {
  const [name, setName] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    addSupplier({ name });
    setName("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="اسم المورد"
        required
      />
      <button type="submit">إضافة مورد</button>
    </form>
  );
}

// مكون الجدول الزمني
function Schedule({ events, addEvent }) {
  const [eventName, setEventName] = useState("");
  const [time, setTime] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    addEvent({ eventName, time });
    setEventName("");
    setTime("");
  };

  return (
    <div>
      <ul>
        {events.map((event, index) => (
          <li key={index}>
            {event.eventName} - {event.time}
          </li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={eventName}
          onChange={(e) => setEventName(e.target.value)}
          placeholder="اسم الحدث"
          required
        />
        <input
          type="time"
          value={time}
          onChange={(e) => setTime(e.target.value)}
          required
        />
        <button type="submit">إضافة حدث</button>
      </form>
    </div>
  );
}

// مكون قائمة الضيوف
function GuestList({ guests, updateResponse }) {
  return (
    <ul>
      {guests.map((guest) => (
        <li key={guest.id}>
          {guest.name} -{" "}
          <select
            value={guest.response || ""}
            onChange={(e) => updateResponse(guest.id, e.target.value)}
          >
            <option value="">لم يتم الرد</option>
            <option value="yes">نعم</option>
            <option value="no">لا</option>
          </select>
        </li>
      ))}
    </ul>
  );
}

// مكون ترتيبات الجلوس
function SeatingArrangement({ seating, updateSeating }) {
  const [tableId, setTableId] = useState("");
  const [guestsAtTable, setGuestsAtTable] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    updateSeating(tableId, guestsAtTable.split(","));
    setTableId("");
    setGuestsAtTable("");
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={tableId}
          onChange={(e) => setTableId(e.target.value)}
          placeholder="رقم الطاولة"
          required
        />
        <input
          type="text"
          value={guestsAtTable}
          onChange={(e) => setGuestsAtTable(e.target.value)}
          placeholder="أسماء الضيوف (مفصولة بفواصل)"
          required
        />
        <button type="submit">تحديث ترتيب الجلوس</button>
      </form>
      <pre>{JSON.stringify(seating, null, 2)}</pre>
    </div>
  );
}

export default EventPlanner;