import { Cart } from '@/components/orders/Cart'
import { TenantForm } from '@/components/orders/TenantForm'
import { APP_NAME } from '@/constants/app.constant'
import { CustomTenantDto } from '@/proxy/config/models'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { useStoreActions, useStoreState } from '@/store/store'
import {
  CartState,
  clearCart,
  removeItemFromCart,
  updateCartItemQuantity,
} from '@/utils/cartUtils'
import { useLocalization } from '@/utils/hooks/useLocalization'
import React, { useState, useEffect } from 'react'
import { Helmet } from 'react-helmet'
import { useNavigate } from 'react-router-dom'

const Checkout: React.FC = () => {
  const navigate = useNavigate()
  const [isCartOpen, setIsCartOpen] = useState(false)
  const { translate } = useLocalization()

  const storedCartState = useStoreState((state) => state.client.cartState)
  const { setCartState: persistCartState } = useStoreActions((actions) => actions.client)
  const { setTenantData } = useStoreActions((actions) => actions.client.order)
  const [cartState, setCartState] = useState<CartState>(storedCartState)

  useEffect(() => {
    persistCartState(cartState)
  }, [cartState, persistCartState])

  const handleTenantSubmit = (tenantData: CustomTenantDto) => {
    setTenantData(tenantData)
    navigate(ROUTES_ENUM.public.payment)
  }

  const handleBackToCatalog = () => {
    navigate(ROUTES_ENUM.public.home)
  }

  const handleCheckout = () => {
    setIsCartOpen(false)
    navigate(ROUTES_ENUM.public.checkout)
  }

  const handleUpdateQuantity = (id: string, quantity: number) => {
    setCartState((currentState) => updateCartItemQuantity(currentState, id, quantity))
  }

  const handleRemoveItem = (id: string) => {
    setCartState((currentState) => removeItemFromCart(currentState, id))
  }

  const handleClearCart = () => {
    setCartState(clearCart())
  }

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
      <Helmet
        titleTemplate={`%s | ${APP_NAME}`}
        title={translate('::' + 'Public.nav.checkout')}
        defaultTitle={APP_NAME}
      ></Helmet>

      {/* Hero Section */}
      <div className="relative bg-blue-900 text-white py-12">
        <div
          className="absolute inset-0 opacity-20"
          style={{
            backgroundSize: 'cover',
            backgroundPosition: 'center',
          }}
        ></div>
      </div>

      <div className="container mx-auto px-4 pt-12">
        <TenantForm onSubmit={handleTenantSubmit} onBack={handleBackToCatalog} />

        <Cart
          isOpen={isCartOpen}
          onClose={() => setIsCartOpen(false)}
          onCheckout={handleCheckout}
          cartState={cartState}
          updateQuantity={handleUpdateQuantity}
          removeItem={handleRemoveItem}
          clearCart={handleClearCart}
        />
      </div>
    </div>
  )
}

export default Checkout