"use client";
import React, { useState } from "react";


interface Item {
  name: string;
  shop: string;
  quantity: number;
  price: number;
  checked: boolean;
}

const MyShoppingListApp: React.FC = () => {
  const [itemName, setItemName] = useState<string>("");
  const [itemShop, setItemShop] = useState<string>("");
  const [itemQuantity, setItemQuantity] = useState<string>("");
  const [itemPrice, setItemPrice] = useState<string>("");
  const [list, setList] = useState<Item[]>([
    { name: "Milk", shop: "CVS", quantity: 1, price: 2.65, checked: true },
    { name: "Bread", shop: "CVS", quantity: 1, price: 2.15, checked: true },
    { name: "Eggs", shop: "CVS", quantity: 1, price: 1.75, checked: true },
    { name: "Chow Mein", shop: "Trader Joe's", quantity: 1, price: 3.1, checked: false },
    { name: "Bacon", shop: "CVS", quantity: 1, price: 2.2, checked: false },
    { name: "Yoghurt", shop: "Trader Joe's", quantity: 6, price: 3.1, checked: false },
    { name: "Chocolate", shop: "CVS", quantity: 6, price: 3.1, checked: false },
  ]);

  const [successMessage, setSuccessMessage] = useState<boolean>(false);
  const [errorMessage, setErrorMessage] = useState<boolean>(false);

  const getTotal = (): string => {
    return list.reduce((total, item) => total + item.price * item.quantity, 0).toFixed(2);
  };

  const removeItem = (item: Item) => {
    setList(list.filter((i) => i !== item));
  };

  const clearAll = () => {
    setList([]);
  };

  const addItem = () => {
    if (itemName && itemShop && itemQuantity && itemPrice) {
      setList([
        ...list,
        {
          name: itemName,
          shop: itemShop,
          quantity: Number(itemQuantity),
          price: Number(itemPrice),
          checked: false,
        },
      ]);

      setItemName("");
      setItemShop("");
      setItemQuantity("");
      setItemPrice("");
      setSuccessMessage(true);
      setTimeout(() => setSuccessMessage(false), 2000);
    } else {
      setErrorMessage(true);
      setTimeout(() => setErrorMessage(false), 2000);
    }
  };

  return (
    <div className="container mx-auto p-4">
      <div className="box bg-gray-100 p-4 rounded-lg shadow-md">
        <h1 className="text-center text-2xl mb-4">My pantry</h1>
        {errorMessage && (
          <div className="text-red-500 text-center mb-2">
            <i className="icon-cross"></i>Please enter all inputs!
          </div>
        )}
        {successMessage && (
          <div className="text-green-500 text-center mb-2">
            <i className="icon-checkmark"></i>Item added to shopping list!
          </div>
        )}
        <div className="flex justify-between mb-2">
          <input
            type="text"
            className="searchButton flex-1 mr-1 p-2 border border-gray-300 rounded-md"
            placeholder="Item Name"
            value={itemName}
            onChange={(e) => setItemName(e.target.value)}
          />
          <input
            type="text"
            className="searchButton flex-1 p-2 border border-gray-300 rounded-md"
            placeholder="Shop Name"
            value={itemShop}
            onChange={(e) => setItemShop(e.target.value)}
          />
        </div>
        <div className="flex justify-between mb-2">
          <input
            type="number"
            className="searchButton flex-1 mr-1 p-2 border border-gray-300 rounded-md"
            placeholder="Quantity"
            value={itemQuantity}
            onChange={(e) => setItemQuantity(e.target.value)}
          />
          <div className="flex-1 flex items-center">
            <span className="mr-1"></span>
            <input
              type="number"
              className="searchButton p-2 border border-gray-300 rounded-md flex-grow"
              placeholder="Price (each)"
              value={itemPrice}
              onChange={(e) => setItemPrice(e.target.value)}
            />
          </div>
        </div>
        <button
          className="w-full bg-red-500 text-white p-2 rounded-md"
          onClick={addItem}
        >
          Add Item
        </button>

        <div className="list mt-4">
          {list.length > 0 ? (
            <>
              <table className="w-full mb-4">
                <thead>
                  <tr className="table-header bg-gray-300">
                    <td></td>
                    <td className="text-left p-2">Item Name</td>
                    <td className="text-left p-2">Shop</td>
                    <td className="p-2">Quantity</td>
                    <td className="text-right p-2">Expiration</td>
                    <td className="text-center p-2">Delete</td>
                  </tr>
                </thead>
                <tbody>
                  {list.map((item, index) => (
                    <tr
                      key={index}
                      className={`${
                        index % 2 === 0 ? "bg-gray-100" : "bg-white"
                      } ${item.checked ? "line-through text-gray-500" : ""}`}
                    >
                      <td className="p-2">
                        <input
                          type="checkbox"
                          checked={item.checked}
                          onChange={() => {
                            const newList = [...list];
                            newList[index].checked = !newList[index].checked;
                            setList(newList);
                          }}
                        />
                      </td>
                      <td className="p-2">{item.name}</td>
                      <td className="p-2">{item.shop}</td>
                      <td className="p-2 text-center">{item.quantity}</td>
                      <td className="p-2 text-right">{item.price.toFixed(2)}</td>
                      <td className="p-2 text-center">
                        <button
                          className="text-red-500"
                          onClick={() => removeItem(item)}
                        >
                          <i className="">x</i>
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
              <div className="cost flex justify-between items-center">
                <span className="text-lg">Total Cost:</span>
                <span className="text-lg font-bold">${getTotal()}</span>
              </div>
              <button
                className="clear w-full bg-gray-600 text-white p-2 rounded-md mt-2"
                onClick={clearAll}
              >
                Clear Shopping List
              </button>
            </>
          ) : (
            <div className="text-center text-gray-500">
              Your shopping list is empty.
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default MyShoppingListApp;