'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { MessageCircle } from 'lucide-react';
import {
  buildDeliveryInquiryMessage,
  buildPickupInquiryMessage,
} from '@/application/messaging/whatsapp-message-builder';
import type { FulfillmentMode } from '@/domain/cart/inquiry';
import type { DeliveryInquiryDetails, PickupInquiryDetails } from '@/domain/cart/inquiry';
import {
  calculateLineTotal,
  formatLineQuantityLabel,
} from '@/domain/shared/order-line';
import { RESTAURANT_CONTACT } from '@/domain/shared/constants';
import { container } from '@/infrastructure/di/container';
import { useCart } from '@/presentation/providers/cart-provider';
import { useLanguage } from '@/presentation/providers/language-provider';
import { getTranslation } from '@/presentation/i18n/translations';
import { getMenuItemName } from '@/application/i18n/menu-localization';
import { useMenu } from '@/presentation/providers/menu-provider';
import CartInquiryModal from '@/components/CartInquiryModal';
import {
  buildCartInquiryCopy,
  getWhatsAppInquiryLanguage,
  getWhatsAppInquiryTranslation,
} from '@/application/messaging/inquiry-language';
import { useCustomerAuth } from '@/presentation/providers/customer-auth-provider';

const CART_INQUIRY_INTENT_KEY = 'shahi-cart-inquiry-intent';

function GoogleIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" aria-hidden="true">
      <path
        fill="#4285F4"
        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
      />
      <path
        fill="#34A853"
        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
      />
      <path
        fill="#FBBC05"
        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
      />
      <path
        fill="#EA4335"
        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
      />
    </svg>
  );
}

export default function CartDrawer() {
  const {
    items,
    isOpen,
    closeCart,
    openCart,
    totalPrice,
    removeFromCart,
    updateQuantity,
    clearCart,
  } = useCart();

  const { language, isRtl } = useLanguage();
  const { getItemById } = useMenu();
  const {
    email: customerEmail,
    name: customerName,
    isAuthenticated,
    isLoading: isAuthLoading,
  } = useCustomerAuth();
  const t = getTranslation(language);
  const [inquiryMode, setInquiryMode] = useState<FulfillmentMode | null>(null);
  const [authGateMode, setAuthGateMode] = useState<FulfillmentMode | null>(null);

  useEffect(() => {
    if (isAuthLoading || !isAuthenticated) return;

    const intent = sessionStorage.getItem(CART_INQUIRY_INTENT_KEY) as FulfillmentMode | null;
    if (intent !== 'pickup' && intent !== 'delivery') return;

    sessionStorage.removeItem(CART_INQUIRY_INTENT_KEY);
    openCart();
    setAuthGateMode(null);
    setInquiryMode(intent);
  }, [isAuthenticated, isAuthLoading, openCart]);

  const openWhatsApp = (message: string | null) => {
    if (!message) return;
    container.messagingGateway.openWhatsApp(message);
    setInquiryMode(null);
  };

  const startInquiry = (mode: FulfillmentMode) => {
    if (isAuthLoading) return;

    if (!isAuthenticated) {
      setAuthGateMode(mode);
      setInquiryMode(null);
      return;
    }

    setAuthGateMode(null);
    setInquiryMode(mode);
  };

  const handleGoogleSignInForInquiry = () => {
    if (!authGateMode) return;

    try {
      sessionStorage.setItem(CART_INQUIRY_INTENT_KEY, authGateMode);
    } catch {
      // Ignore storage errors.
    }

    const returnTo = encodeURIComponent(`${window.location.pathname}${window.location.search}`);
    window.location.href = `/api/auth/google?returnTo=${returnTo}`;
  };

  const handlePickupSubmit = (details: PickupInquiryDetails) => {
    const inquiryLang = getWhatsAppInquiryLanguage(language);
    const inquiryCopy = buildCartInquiryCopy(getWhatsAppInquiryTranslation(language));
    openWhatsApp(buildPickupInquiryMessage(items, details, inquiryCopy, inquiryLang));
  };

  const handleDeliverySubmit = (details: DeliveryInquiryDetails) => {
    const inquiryLang = getWhatsAppInquiryLanguage(language);
    const inquiryCopy = buildCartInquiryCopy(getWhatsAppInquiryTranslation(language));
    openWhatsApp(buildDeliveryInquiryMessage(items, details, inquiryCopy, inquiryLang));
  };

  if (!isOpen) return null;

  return (
    <>
      <div
        className="fixed inset-0 bg-black/40 z-[980]"
        onClick={closeCart}
      />

      <div
        className={`fixed top-0 h-[100dvh] w-full max-w-md bg-[#F8F5F0] z-[990] shadow-2xl flex flex-col ${
          isRtl ? 'left-0 border-r border-[#EDE6D9]' : 'right-0 border-l border-[#EDE6D9]'
        }`}
      >
        <div className="flex shrink-0 items-center justify-between border-b border-[#EDE6D9] px-4 py-4 sm:px-6 sm:py-5">
          <div className="flex items-center gap-3">
            <h2 className="text-2xl tracking-[-0.5px]">{t.cartDrawer.title}</h2>
            {items.length > 0 && (
              <span className="text-xs px-2.5 py-0.5 rounded-full bg-[#EDE6D9] text-[#6B665F]">
                {items.length} {items.length === 1 ? t.cartDrawer.item : t.cartDrawer.items}
              </span>
            )}
          </div>
          <div className="flex items-center gap-3">
            {items.length > 0 && (
              <button
                onClick={clearCart}
                className="text-xs text-[#B38B4D] hover:underline"
              >
                {t.cartDrawer.clear}
              </button>
            )}
            <button
              onClick={closeCart}
              aria-label="Close cart"
              className="flex min-h-11 min-w-11 items-center justify-center text-[#6B665F] hover:text-[#2C2A26] text-2xl leading-none touch-manipulation"
            >
              ×
            </button>
          </div>
        </div>

        <div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain px-4 py-4 sm:px-6 sm:py-6">
          {items.length === 0 ? (
            <div className="flex flex-col items-center justify-center h-full text-center">
              <div className="text-6xl mb-4">🛒</div>
              <p className="text-lg text-[#6B665F]">{t.cartDrawer.empty}</p>
              <Link
                href="/menu"
                onClick={closeCart}
                className="mt-6 text-[#B38B4D] hover:underline"
              >
                {t.cartDrawer.browseMenu}
              </Link>
            </div>
          ) : (
            <div className="space-y-6">
              {items.map((item) => (
                <div key={item.id} className="flex gap-4 border-b border-[#EDE6D9] pb-6">
                  <div className="flex-1">
                    <div className="flex justify-between">
                      <div>
                        <h4 className="font-medium tracking-[-0.3px]">
                          {getMenuItemName(language, {
                            id: item.id,
                            name: getItemById(item.id)?.name ?? item.name,
                          })}
                        </h4>
                        <p className="text-sm text-[#6B665F]">
                          {item.pricingMode === 'weight'
                            ? `${item.pricePerHalfKg ?? item.price} kr / ½ kg`
                            : `${item.price} kr × ${item.quantity}`}
                        </p>
                      </div>
                      <div className="text-right font-medium">
                        {calculateLineTotal(item)} kr
                      </div>
                    </div>

                    <div className="flex items-center gap-3 mt-3">
                      <button
                        onClick={() => updateQuantity(item.id, item.quantity - 1)}
                        className="w-11 h-11 flex items-center justify-center border border-[#EDE6D9] rounded hover:bg-white transition touch-manipulation"
                      >
                        −
                      </button>
                      <span className="min-w-12 text-center font-medium tabular-nums">
                        {formatLineQuantityLabel(item)}
                      </span>
                      <button
                        onClick={() => updateQuantity(item.id, item.quantity + 1)}
                        className="w-11 h-11 flex items-center justify-center border border-[#EDE6D9] rounded hover:bg-white transition touch-manipulation"
                      >
                        +
                      </button>

                      <button
                        onClick={() => removeFromCart(item.id)}
                        className="ml-auto text-xs text-[#B38B4D] hover:underline"
                      >
                        {t.cartDrawer.remove}
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {items.length > 0 && (
          <div className="shrink-0 border-t border-[#EDE6D9] bg-white px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-6 sm:py-6">
            <button
              onClick={clearCart}
              className="text-xs text-[#8A8478] hover:text-[#B38B4D] mb-3 underline"
            >
              {t.cartDrawer.clearBasket}
            </button>

            <div className="flex justify-between text-lg font-medium mb-4">
              <span>{t.cartDrawer.total}</span>
              <span>{totalPrice.toFixed(0)} kr</span>
            </div>

            {authGateMode ? (
              <div className="mb-3 rounded-2xl border border-[#EDE6D9] bg-gradient-to-br from-[#FFFCF7] to-[#FFF6DC]/50 p-4 text-center sm:p-5">
                <h3 className="mb-2 font-serif text-base tracking-tight text-[#101724] sm:text-lg">
                  {t.cartDrawer.signInRequiredTitle}
                </h3>
                <p className="mb-4 text-sm leading-relaxed text-[#6B665F]">
                  {t.cartDrawer.signInRequiredSubtitle}
                </p>
                <button
                  type="button"
                  onClick={handleGoogleSignInForInquiry}
                  className="mb-3 flex w-full items-center justify-center gap-3 rounded-2xl border border-[#EDE6D9] bg-white px-4 py-3.5 text-sm font-semibold text-[#101724] shadow-sm transition hover:border-[#c99a2e]/40 hover:bg-[#FFFCF7] active:scale-[0.985] min-h-[52px] touch-manipulation"
                >
                  <GoogleIcon className="h-5 w-5 shrink-0" />
                  <span className="text-left leading-snug">{t.auth.customer.signInWithGoogle}</span>
                </button>
                <button
                  type="button"
                  onClick={() => setAuthGateMode(null)}
                  className="inline-flex min-h-[44px] w-full items-center justify-center text-sm font-medium text-[#6B665F] hover:text-[#101724] active:underline touch-manipulation"
                >
                  {t.cartDrawer.inquiryCancel}
                </button>
              </div>
            ) : (
              <>
                <p className="text-xs text-center text-[#6B665F] mb-4">
                  {t.cartDrawer.inquiryHint}
                </p>

                <button
                  type="button"
                  onClick={() => startInquiry('pickup')}
                  disabled={isAuthLoading}
                  className="btn-primary mb-2 flex w-full min-h-[52px] items-center justify-center gap-2 rounded-full py-4 text-base font-medium tracking-[0.5px] touch-manipulation active:scale-[0.985] disabled:opacity-60"
                >
                  <MessageCircle className="h-5 w-5" aria-hidden />
                  {t.cartDrawer.pickupInquiry}
                </button>

                <button
                  type="button"
                  onClick={() => startInquiry('delivery')}
                  disabled={isAuthLoading}
                  className="btn-outline mb-2 flex w-full min-h-[52px] items-center justify-center gap-2 rounded-full border-[#25D366] py-4 text-base font-medium tracking-[0.5px] text-[#128C7E] hover:bg-[#25D366]/10 touch-manipulation active:scale-[0.985] disabled:opacity-60"
                >
                  <MessageCircle className="h-5 w-5" aria-hidden />
                  {t.cartDrawer.deliveryInquiry}
                </button>
              </>
            )}

            <button
              onClick={() => window.open(`tel:${RESTAURANT_CONTACT.phonePrimary}`, '_self')}
              className="btn-outline w-full py-3 rounded-full text-sm tracking-[0.5px] font-medium mb-3"
            >
              {t.cartDrawer.call}
            </button>

            <button
              onClick={closeCart}
              className="w-full text-sm text-[#6B665F] hover:text-[#2C2A26] pt-1"
            >
              {t.cartDrawer.continueBrowsing}
            </button>
          </div>
        )}
      </div>

      {inquiryMode && isAuthenticated && (
        <CartInquiryModal
          mode={inquiryMode}
          isOpen={!!inquiryMode}
          language={language}
          customerEmail={customerEmail}
          customerName={customerName}
          onClose={() => setInquiryMode(null)}
          onSubmitPickup={handlePickupSubmit}
          onSubmitDelivery={handleDeliverySubmit}
          labels={{
            titlePickup: t.cartDrawer.inquiryModalTitlePickup,
            titleDelivery: t.cartDrawer.inquiryModalTitleDelivery,
            signedInAs: t.cartDrawer.signedInAs,
            nameLabel: t.cartDrawer.nameLabel,
            namePlaceholder: t.cartDrawer.namePlaceholder,
            emailLabel: t.cartDrawer.emailLabel,
            emailPlaceholder: t.cartDrawer.emailPlaceholder,
            emailRequired: t.cartDrawer.emailRequired,
            branchLabel: t.cartDrawer.branchLabel,
            branchAskim: t.cartDrawer.branchAskim,
            branchBackaplan: t.cartDrawer.branchBackaplan,
            askimOnlineUnavailable: t.cartDrawer.askimOnlineUnavailable,
            addressLabel: t.cartDrawer.addressLabel,
            addressPlaceholder: t.cartDrawer.addressPlaceholder,
            addressHint:
              (t.cartDrawer as { addressHint?: string }).addressHint ??
              'Only Gothenburg addresses can be selected. Pick one from the suggestions.',
            addressFallbackPlaceholder:
              (t.cartDrawer as { addressFallbackPlaceholder?: string }).addressFallbackPlaceholder ??
              'Street, postcode, city…',
            addressFallbackHint:
              (t.cartDrawer as { addressFallbackHint?: string }).addressFallbackHint ??
              'Address search is temporarily unavailable. Type your full delivery address manually.',
            addressSearching:
              (t.cartDrawer as { addressSearching?: string }).addressSearching ??
              'Searching addresses…',
            addressNoResults:
              (t.cartDrawer as { addressNoResults?: string }).addressNoResults ??
              'No matching addresses. Try street name and number.',
            addressOutsideGothenburg:
              (t.cartDrawer as { addressOutsideGothenburg?: string }).addressOutsideGothenburg ??
              'This address is outside Gothenburg. We only deliver within the city.',
            addressSelectSuggestion:
              (t.cartDrawer as { addressSelectSuggestion?: string }).addressSelectSuggestion ??
              'Please pick an address from the suggestions.',
            addressInvalid:
              (t.cartDrawer as { addressInvalid?: string }).addressInvalid ??
              'Select a valid Gothenburg address from the list.',
            preferredDateLabel: t.cartDrawer.preferredDateLabel,
            preferredDatePlaceholder: t.cartDrawer.preferredDatePlaceholder,
            dateToday: t.cartDrawer.dateToday,
            dateTomorrow: t.cartDrawer.dateTomorrow,
            preferredTimeLabel: t.cartDrawer.preferredTimeLabel,
            scheduleOptionalHint: t.cartDrawer.scheduleOptionalHint,
            submitPickup: t.cartDrawer.submitPickup,
            submitDelivery: t.cartDrawer.submitDelivery,
            cancel: t.cartDrawer.inquiryCancel,
            close: t.cartDrawer.inquiryClose,
            nameRequired: t.cartDrawer.nameRequired,
            branchRequired: t.cartDrawer.branchRequired,
            scheduleIncomplete: t.cartDrawer.scheduleIncomplete,
            scheduleTooSoon: t.cartDrawer.scheduleTooSoon,
          }}
        />
      )}
    </>
  );
}