'use client';
/**
* =============================================================================
* CART DRAWER (SLIDE-IN BASKET PANEL)
* =============================================================================
*
* This is the visual "basket" that slides in from the right when the user
* clicks the cart icon in the navbar or the "View Cart" toast action.
*
* KEY DESIGN CHOICES:
* - Fixed position, full-height, max-w-md (beautiful on both mobile and desktop)
* - Backdrop click closes it (standard mobile pattern)
* - z-[990] sits above almost everything (including the sticky category nav) (below mobile menu)
* - All cart mutations go through the context — this component is "dumb" UI only
*
* THE ORDERING FLOW (very important for restaurant context):
* Instead of a traditional Stripe checkout, we generate a pre-filled WhatsApp
* message containing every line item + quantities + grand total.
* This matches the restaurant's current real-world ordering process.
* The number 46739381089 is the same one used in the homepage reservation form.
*
* FUTURE ENHANCEMENTS (documented here so nothing is forgotten):
* - Add "Special requests" textarea per order
* - Show estimated preparation time
* - Allow "Order for later" date/time picker
* - Split "Pickup" vs "Delivery" with different messaging
* - After WhatsApp opens, optionally clear the cart (or keep it — current choice)
*/
import { useCart } from './CartContext';
import Link from 'next/link';
import { useLanguage } from "@/lib/language-context";
import { getTranslation } from "@/lib/translations";
export default function CartDrawer() {
const {
items,
isOpen,
closeCart,
totalPrice,
removeFromCart,
updateQuantity,
clearCart
} = useCart();
const { language } = useLanguage();
const t = getTranslation(language);
/**
* WHATSAPP DEEP LINK ORDERING
*
* Builds a human-readable, copy-paste friendly message that the restaurant staff
* can immediately understand and action.
*
* The format deliberately mirrors how the restaurant currently receives orders
* over the phone or via Instagram DMs.
*/
const orderViaWhatsApp = () => {
if (items.length === 0) return;
const lines = items
.map((item) => `${item.quantity} × ${item.name} — ${item.price * item.quantity} kr`)
.join('\n');
const now = new Date();
const suggested = new Date(now.getTime() + 30 * 60 * 1000);
// Use locale-appropriate time formatting so the suggested time in the draft feels native
const timeLocale = language === 'sv' ? 'sv-SE' : 'en-GB';
const suggestedTime = suggested.toLocaleTimeString(timeLocale, { hour: '2-digit', minute: '2-digit' });
const msg = t.cartDrawer;
const message =
`${msg.messageHello}
${msg.messageIntro}
${lines}
${msg.messageConfirm.replace('{time}', suggestedTime)}
${msg.messageTotal}: ${totalPrice} kr
${msg.messageThanks}`;
const encoded = encodeURIComponent(message);
// This is the same WhatsApp business number used for table reservations on the homepage
window.open(`https://wa.me/46739381089?text=${encoded}`, '_blank');
};
// Guard clause — drawer only renders when explicitly opened via context
if (!isOpen) return null;
return (
<>
{/* SEMI-TRANSPARENT BACKDROP */}
{/* Clicking anywhere outside the drawer closes it (standard mobile pattern) */}
{/* THE ACTUAL DRAWER — slides in from right */}
{/* z-[990] ensures it sits above sticky nav, category pills, and most other UI (below mobile menu) */}
{/* HEADER — Title + item count + quick clear + close button */}