"use client";

import { useState } from "react";
import { products } from "../data/products";
import { useCart } from "../contexts/CartContext";
import type { Product, CartItem } from "../types/product";

export default function ProductSelection() {
  const { dispatch } = useCart();
  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
  const [quantity, setQuantity] = useState(1);
  const [deliveryOption, setDeliveryOption] = useState<
    "shulker" | "chests" | "pickup"
  >("chests");
  const [variant, setVariant] = useState("");

  const handleAddToCart = () => {
    if (!selectedProduct) return;

    const item: CartItem = {
      product: selectedProduct,
      quantity,
      unit: "stacks",
      deliveryOption,
      variant: variant || undefined,
    };

    dispatch({ type: "ADD_ITEM", payload: item });

    setSelectedProduct(null);
    setQuantity(1);
    setVariant("");
  };

  const getProductPrice = (product: Product) => {
    if (product.defaultStacksPerDia) {
      return `${product.defaultStacksPerDia} Stacks = 1 Dia`;
    }
    return `1 Stack = ${product.pricePerStack} Dia`;
  };

  return (
    <div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
      <h2 className="text-2xl font-bold text-green-400 mb-6">
        Lägg till produkt
      </h2>

      <div className="space-y-6">
        <div>
          <label className="block text-gray-300 mb-2">Produkt:</label>
          <select
            value={selectedProduct?.id || ""}
            onChange={(e) => {
              const product = products.find((p) => p.id === e.target.value);
              setSelectedProduct(product || null);
              setVariant("");
            }}
            className="w-full bg-gray-700 text-white p-3 rounded border border-gray-600 focus:border-green-400 focus:outline-none"
          >
            <option value="">Välj en produkt</option>
            {products.map((product) => (
              <option key={product.id} value={product.id}>
                {product.name} ({getProductPrice(product)})
              </option>
            ))}
          </select>
        </div>

        {selectedProduct?.variants && (
          <div>
            <label className="block text-gray-300 mb-2">Variant:</label>
            <select
              value={variant}
              onChange={(e) => setVariant(e.target.value)}
              className="w-full bg-gray-700 text-white p-3 rounded border border-gray-600 focus:border-green-400 focus:outline-none"
            >
              <option value="">Välj variant</option>
              {selectedProduct.variants.map((variant) => (
                <option key={variant} value={variant}>
                  {variant}
                </option>
              ))}
            </select>
          </div>
        )}

        <div>
          <label className="block text-gray-300 mb-2">Antal stackar:</label>
          <input
            type="number"
            value={quantity}
            onChange={(e) =>
              setQuantity(Math.max(1, parseInt(e.target.value) || 1))
            }
            min="1"
            className="w-full bg-gray-700 text-white p-3 rounded border border-gray-600 focus:border-green-400 focus:outline-none"
          />
        </div>

        <div>
          <label className="block text-gray-300 mb-2">Leveransbehållare:</label>
          <select
            value={deliveryOption}
            onChange={(e) =>
              setDeliveryOption(
                e.target.value as "shulker" | "chests" | "pickup",
              )
            }
            className="w-full bg-gray-700 text-white p-3 rounded border border-gray-600 focus:border-green-400 focus:outline-none"
          >
            <option value="chests">Kistor (standard)</option>
            <option value="shulker">Shulker (+1 Dia)</option>
            <option value="pickup">Pickup (-10% rabatt)</option>
          </select>
        </div>

        <button
          onClick={handleAddToCart}
          disabled={!selectedProduct || (selectedProduct.variants && !variant)}
          className="w-full bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white font-semibold py-3 px-4 rounded transition-colors"
        >
          Lägg till i kundvagn
        </button>
      </div>
    </div>
  );
}