import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { useState } from 'react'
import {
  p,
  MyButton,
  Quantifier,
  div,
} from 'web-components'
import { useCentralProductStore } from '../lib/stores/central-product-store'
import { useCentralSlotStore } from '../lib/stores/central-slot-store'
import { useAddToCart } from '../hooks/cart-query-hooks'
import { AppLayout } from '../components/AppLayout'
import { ShoppingCart, Zap } from 'lucide-react'

export const Route = createFileRoute('/flash')({ component: FlashDeliveryPage })

function FlashDeliveryPage() {
  const navigate = useNavigate()
  const products = useCentralProductStore((s) => s.products)
  const productSlotsMap = useCentralSlotStore((s) => s.productSlotsMap)
  const [selectedQty, setSelectedQty] = useState<Record<number, number>>({})
  const addToCart = useAddToCart('flash')

  const flashProducts = products.filter(
    (p) => productSlotsMap[p.id]?.isFlashAvailable && !productSlotsMap[p.id]?.isOutOfStock
  )

  const handleAddToCart = (product: any) => {
    const qty = selectedQty[product.id] || 1
    addToCart.mutate(
      { productId: product.id, quantity: qty, storeId: product.storeId },
      { onSuccess: () => navigate({ to: '/flash/cart' }) }
    )
  }

  return (
    <AppLayout isFlashDelivery={true}>
    <div className="p-4">
      <div className="mb-4 flex items-center gap-2">
        <Zap className="h-6 w-6 text-yellow-500" />
        <p className="font-bold text-xl">
          1 Hr Delivery
        </p>
      </div>

      <div className="mb-4 rounded-xl bg-yellow-50 p-3">
        <p className="text-sm text-yellow-800">
          Get these products delivered within 1 hour! Only available for select items.
        </p>
      </div>

      <div className="grid grid-cols-2 gap-3">
        {flashProducts.map((product) => {
          const price = product.discountedPrice ?? product.price
          const qty = selectedQty[product.id] || 1
          return (
            <div
              key={product.id}
              className="rounded-xl border border-gray-100 bg-white p-3 shadow-sm"
            >
              <div className="mb-2 aspect-square w-full overflow-hidden rounded-lg bg-gray-100">
                {product.images?.[0] && (
                  <img
                    src={product.images[0].uri}
                    alt={product.name}
                    className="h-full w-full object-cover"
                  />
                )}
              </div>
              <p className="font-semibold text-sm">
                {product.name}
              </p>
              <p className="font-bold text-brand-600">
                ₹{price}
              </p>
              <div className="mt-2 flex items-center gap-2">
                <Quantifier
                  value={qty}
                  setValue={(v) =>
                    setSelectedQty((prev) => ({ ...prev, [product.id]: v }))
                  }
                />
              </div>
              <MyButton
                fullWidth
                onClick={() => handleAddToCart(product)}
                className="mt-2 flex items-center justify-center gap-1 bg-brand-500 text-white text-xs"
                disabled={addToCart.isPending}
              >
                <ShoppingCart className="h-3 w-3" />
                Add
              </MyButton>
            </div>
          )
        })}
      </div>

      {flashProducts.length === 0 && (
        <div className="py-20 text-center">
          <p className="text-gray-500">No flash delivery products available</p>
        </div>
      )}
    </div>
    </AppLayout>
  )
}