import React, { useState } from 'react';
import './OrderTrackingScreen.css';

function OrderTrackingScreen() {
  // Пример данных для заказа
  const [orderData, setOrderData] = useState({
    orderId: 'ORD-90123',
    status: 'Подтвержден',
    deliveryAddress: 'Москва, ул. Тверская, д. 5',
    deliveryDateTime: '2025-04-20 18:00',
    items: [
      { name: 'Avocado', quantity: 4, image: '/images/avocado.jpg' },
      { name: 'Blueberries', quantity: 2, image: '/images/blueberries.jpg' },
      { name: 'Cheddar Cheese', quantity: 1, image: '/images/cheese.jpg' },
      { name: 'Dark Chocolate', quantity: 3, image: '/images/chocolate.jpg' },
      { name: 'Almonds', quantity: 1, image: '/images/almonds.jpg' },
    ],
    customerName: 'Анна Петрова',
    customerEmail: 'anna@example.com',
    shippingMethod: 'Самовывоз',
    paymentMethod: 'Наличными',
    orderDate: '2025-04-10',
    estimatedDelivery: '2025-04-20',
    contactNumber: '+7 (499) 765-43-21',
    discountCode: 'WELCOME10',
    totalAmount: 3200,
    notes: 'Позвонить за час до доставки',
  });
  const [orderData2, setOrderData2] = useState({
    orderId: 'ORD-90124',
    status: 'Создан',
    deliveryAddress: 'Санкт-Петербург, ул. невский пр., д. 5',
    deliveryDateTime: '2025-04-19 12:00',
    items: [
      { name: 'Mango', quantity: 2, image: '/images/mango.jpg' },
      { name: 'Pineapple', quantity: 2, image: '/images/pineapple.jpg' },
      { name: 'Tomatoes', quantity: 4, image: '/images/tomatoes.jpg' },
      { name: 'Cucumber', quantity: 4, image: '/images/cucumber.jpg' },
    ],
    customerName: 'Алексей Сидоров',
    customerEmail: 'Alex@example.com',
    shippingMethod: 'Экспресс',
    paymentMethod: 'Онлайн картой',
    orderDate: '2025-04-10',
    estimatedDelivery: '2025-04-19',
    contactNumber: '+7 (499) 765-43-22',
    discountCode: 'WELCOME11',
    totalAmount: 1000,
    notes: 'Позвонить при доставке',
  });
  const [orderData3, setOrderData3] = useState({
    orderId: 'ORD-90125',
    status: 'В пути',
    deliveryAddress: 'Казань, ул. Баумана, д. 5',
    deliveryDateTime: '2025-04-21 15:00',
    items: [
      { name: 'Orange', quantity: 2, image: '/images/orange.jpg' },
      { name: 'Kiwi', quantity: 2, image: '/images/kiwi.jpg' },
      { name: 'Potato', quantity: 4, image: '/images/potato.jpg' },
      { name: 'Onion', quantity: 4, image: '/images/onion.jpg' },
    ],
    customerName: 'Ольга Васильева',
    customerEmail: 'olga@example.com',
    shippingMethod: 'Стандарт',
    paymentMethod: 'Онлайн картой',
    orderDate: '2025-04-11',
    estimatedDelivery: '2025-04-21',
    contactNumber: '+7 (499) 765-43-23',
    discountCode: 'WELCOME12',
    totalAmount: 1200,
    notes: 'Позвонить при доставке',
  });
  const [orderData4, setOrderData4] = useState({
    orderId: 'ORD-90126',
    status: 'Доставлен',
    deliveryAddress: 'Самара, ул. Ленинградская, д. 5',
    deliveryDateTime: '2025-04-22 16:00',
    items: [
      { name: 'Apple', quantity: 2, image: '/images/apple.jpg' },
      { name: 'Lemon', quantity: 2, image: '/images/lemon.jpg' },
      { name: 'Meat', quantity: 1, image: '/images/meat.jpg' },
    ],
    customerName: 'Петр Иванов',
    customerEmail: 'petr@example.com',
    shippingMethod: 'Стандарт',
    paymentMethod: 'Онлайн картой',
    orderDate: '2025-04-12',
    estimatedDelivery: '2025-04-22',
    contactNumber: '+7 (499) 765-43-24',
    discountCode: 'WELCOME13',
    totalAmount: 3000,
    notes: 'Позвонить за час до доставки',
  });
  const [orderData5, setOrderData5] = useState({
    orderId: 'ORD-90127',
    status: 'Отменен',
    deliveryAddress: 'Ростов, ул. Пушкинская, д. 5',
    deliveryDateTime: '2025-04-23 17:00',
    items: [
      { name: 'Fish', quantity: 1, image: '/images/fish.jpg' },
      { name: 'Milk', quantity: 2, image: '/images/milk.jpg' },
      { name: 'Bread', quantity: 1, image: '/images/bread.jpg' },
    ],
    customerName: 'Екатерина Смирнова',
    customerEmail: 'kate@example.com',
    shippingMethod: 'Экспресс',
    paymentMethod: 'Онлайн картой',
    orderDate: '2025-04-13',
    estimatedDelivery: '2025-04-23',
    contactNumber: '+7 (499) 765-43-25',
    discountCode: 'WELCOME14',
    totalAmount: 1400,
    notes: 'Позвонить при доставке',
  });

  const handleStatusUpdate = (newStatus) => {
    setOrderData((prevData) => ({ ...prevData, status: newStatus }));
  };
  const handleStatusUpdate2 = (newStatus) => {
    setOrderData2((prevData) => ({ ...prevData, status: newStatus }));
  };
  const handleStatusUpdate3 = (newStatus) => {
    setOrderData3((prevData) => ({ ...prevData, status: newStatus }));
  };
  const handleStatusUpdate4 = (newStatus) => {
    setOrderData4((prevData) => ({ ...prevData, status: newStatus }));
  };
  const handleStatusUpdate5 = (newStatus) => {
    setOrderData5((prevData) => ({ ...prevData, status: newStatus }));
  };

  return (
    <div className="order-tracking-screen">
      <h2>Order tracking</h2>
      <table className="order-table">
        <thead>
          <tr>
            <th>Order Number</th>
            <th>Status</th>
            <th>Delivery Address</th>
            <th>Delivery Date and Time</th>
            <th>Products</th>
            <th>Customer Name</th>
            <th>Email</th>
            <th>Shipping</th>
            <th>Payment</th>
            <th>Order Date</th>
            <th>Expected Delivery</th>
            <th>Contacts</th>
            <th>Discount Code</th>
            <th>Order Total</th>
            <th>Notes</th>
            <th>Change Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{orderData.orderId}</td>
            <td>{orderData.status}</td>
            <td>{orderData.deliveryAddress}</td>
            <td>{orderData.deliveryDateTime}</td>
            <td>
              <ul className="order-items-list">
                {orderData.items.map((item, index) => (
                  <li key={index} className="order-item">
                    {item.name} (x{item.quantity})
                  </li>
                ))}
              </ul>
            </td>
            <td>{orderData.customerName}</td>
            <td>{orderData.customerEmail}</td>
            <td>{orderData.shippingMethod}</td>
            <td>{orderData.paymentMethod}</td>
            <td>{orderData.orderDate}</td>
            <td>{orderData.estimatedDelivery}</td>
            <td>{orderData.contactNumber}</td>
            <td>{orderData.discountCode}</td>
            <td>{orderData.totalAmount} руб.</td>
            <td>{orderData.notes}</td>
            <td>
              <select value={orderData.status} onChange={(e) => handleStatusUpdate(e.target.value)}>
                <option value="Создан">Создан</option>
                <option value="Подтвержден">Подтвержден</option>
                <option value="В пути">В пути</option>
                <option value="Доставлен">Доставлен</option>
                <option value="Отменен">Отменен</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>{orderData2.orderId}</td>
            <td>{orderData2.status}</td>
            <td>{orderData2.deliveryAddress}</td>
            <td>{orderData2.deliveryDateTime}</td>
            <td>
              <ul className="order-items-list">
                {orderData2.items.map((item, index) => (
                  <li key={index} className="order-item">
                    {item.name} (x{item.quantity})
                  </li>
                ))}
              </ul>
            </td>
            <td>{orderData2.customerName}</td>
            <td>{orderData2.customerEmail}</td>
            <td>{orderData2.shippingMethod}</td>
            <td>{orderData2.paymentMethod}</td>
            <td>{orderData2.orderDate}</td>
            <td>{orderData2.estimatedDelivery}</td>
            <td>{orderData2.contactNumber}</td>
            <td>{orderData2.discountCode}</td>
            <td>{orderData2.totalAmount} руб.</td>
            <td>{orderData2.notes}</td>
            <td>
              <select value={orderData2.status} onChange={(e) => handleStatusUpdate2(e.target.value)}>
                <option value="Создан">Создан</option>
                <option value="Подтвержден">Подтвержден</option>
                <option value="В пути">В пути</option>
                <option value="Доставлен">Доставлен</option>
                <option value="Отменен">Отменен</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>{orderData3.orderId}</td>
            <td>{orderData3.status}</td>
            <td>{orderData3.deliveryAddress}</td>
            <td>{orderData3.deliveryDateTime}</td>
            <td>
              <ul className="order-items-list">
                {orderData3.items.map((item, index) => (
                  <li key={index} className="order-item">
                    {item.name} (x{item.quantity})
                  </li>
                ))}
              </ul>
            </td>
            <td>{orderData3.customerName}</td>
            <td>{orderData3.customerEmail}</td>
            <td>{orderData3.shippingMethod}</td>
            <td>{orderData3.paymentMethod}</td>
            <td>{orderData3.orderDate}</td>
            <td>{orderData3.estimatedDelivery}</td>
            <td>{orderData3.contactNumber}</td>
            <td>{orderData3.discountCode}</td>
            <td>{orderData3.totalAmount} руб.</td>
            <td>{orderData3.notes}</td>
            <td>
              <select value={orderData3.status} onChange={(e) => handleStatusUpdate3(e.target.value)}>
                <option value="Создан">Создан</option>
                <option value="Подтвержден">Подтвержден</option>
                <option value="В пути">В пути</option>
                <option value="Доставлен">Доставлен</option>
                <option value="Отменен">Отменен</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>{orderData4.orderId}</td>
            <td>{orderData4.status}</td>
            <td>{orderData4.deliveryAddress}</td>
            <td>{orderData4.deliveryDateTime}</td>
            <td>
              <ul className="order-items-list">
                {orderData4.items.map((item, index) => (
                  <li key={index} className="order-item">
                    {item.name} (x{item.quantity})
                  </li>
                ))}
              </ul>
            </td>
            <td>{orderData4.customerName}</td>
            <td>{orderData4.customerEmail}</td>
            <td>{orderData4.shippingMethod}</td>
            <td>{orderData4.paymentMethod}</td>
            <td>{orderData4.orderDate}</td>
            <td>{orderData4.estimatedDelivery}</td>
            <td>{orderData4.contactNumber}</td>
            <td>{orderData4.discountCode}</td>
            <td>{orderData4.totalAmount} руб.</td>
            <td>{orderData4.notes}</td>
            <td>
              <select value={orderData4.status} onChange={(e) => handleStatusUpdate4(e.target.value)}>
                <option value="Создан">Создан</option>
                <option value="Подтвержден">Подтвержден</option>
                <option value="В пути">В пути</option>
                <option value="Доставлен">Доставлен</option>
                <option value="Отменен">Отменен</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>{orderData5.orderId}</td>
            <td>{orderData5.status}</td>
            <td>{orderData5.deliveryAddress}</td>
            <td>{orderData5.deliveryDateTime}</td>
            <td>
              <ul className="order-items-list">
                {orderData5.items.map((item, index) => (
                  <li key={index} className="order-item">
                    {item.name} (x{item.quantity})
                  </li>
                ))}
              </ul>
            </td>
            <td>{orderData5.customerName}</td>
            <td>{orderData5.customerEmail}</td>
            <td>{orderData5.shippingMethod}</td>
            <td>{orderData5.paymentMethod}</td>
            <td>{orderData5.orderDate}</td>
            <td>{orderData5.estimatedDelivery}</td>
            <td>{orderData5.contactNumber}</td>
            <td>{orderData5.discountCode}</td>
            <td>{orderData5.totalAmount} руб.</td>
            <td>{orderData5.notes}</td>
            <td>
              <select value={orderData5.status} onChange={(e) => handleStatusUpdate5(e.target.value)}>
                <option value="Создан">Создан</option>
                <option value="Подтвержден">Подтвержден</option>
                <option value="В пути">В пути</option>
                <option value="Отменен">Отменен</option>
              </select>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default OrderTrackingScreen;
