gg

src/components/coupons/coupon-builder-content.tsx

@@ -23,6 +23,7 @@ import {
   LuBadgeAlert,
   LuCheck,
   LuCircleHelp,
+  LuDatabase,
   LuEye,
   LuEyeOff,
   LuLayers3,
@@ -38,6 +39,7 @@ import {
 import { SlideUp } from "@/components/motion";
 import { useColorModeValue } from "@/components/ui/color-mode";
 import { Tooltip } from "@/components/ui/overlays/tooltip";
+import FrequencyPanel from "@/components/coupons/frequency-panel";
 import { useSuggestCoupon } from "@/lib/api/coupons/use-hooks";
 import type {
   CouponItemDto,
@@ -352,6 +354,7 @@ export default function CouponBuilderContent() {
     SmartCouponResultDto | undefined
   >(undefined);
   const [matchCount, setMatchCount] = React.useState<number>(5); // Default: 5 matches
+  const [engineMode, setEngineMode] = React.useState<"ai" | "frequency">("ai");
 
   React.useEffect(() => {
     if (!upcomingQuery.data && !upcomingQuery.isPending) {
@@ -763,6 +766,42 @@ export default function CouponBuilderContent() {
                   </HStack>
                 </Card.Header>
                 <Card.Body pt={0}>
+                  {/* Engine Mode Toggle */}
+                  <VStack align="stretch" gap={2} mb={4}>
+                    <HStack gap={2}>
+                      <Icon as={engineMode === "ai" ? LuSparkles : LuDatabase} color={engineMode === "ai" ? "teal.500" : "cyan.500"} />
+                      <Text fontWeight="semibold" fontSize="sm">{t("engine-mode-label")}</Text>
+                      <InfoIcon content={t("engine-mode-help")} label={t("engine-mode-label")} />
+                    </HStack>
+                    <HStack gap={2}>
+                      <Badge
+                        colorPalette={engineMode === "ai" ? "teal" : "gray"}
+                        variant={engineMode === "ai" ? "solid" : "outline"}
+                        cursor="pointer" px={3} py={1}
+                        onClick={() => setEngineMode("ai")}
+                      >
+                        <LuSparkles /> AI
+                      </Badge>
+                      <Badge
+                        colorPalette={engineMode === "frequency" ? "cyan" : "gray"}
+                        variant={engineMode === "frequency" ? "solid" : "outline"}
+                        cursor="pointer" px={3} py={1}
+                        onClick={() => setEngineMode("frequency")}
+                      >
+                        <LuDatabase /> Frekans
+                      </Badge>
+                    </HStack>
+                    <Text fontSize="xs" color={engineMode === "ai" ? "teal.500" : "cyan.500"}>
+                      {engineMode === "ai" ? t("ai-mode-active") : t("freq-mode-active")}
+                    </Text>
+                  </VStack>
+
+                  <Separator mb={4} />
+
+                  {engineMode === "frequency" ? (
+                    <FrequencyPanel />
+                  ) : (
+                  <>
                   <Text
                     fontSize="xs"
                     color="fg.muted"
@@ -920,6 +959,8 @@ export default function CouponBuilderContent() {
                       ? t("manual-selection-helper")
                       : t("automatic-selection-helper")}
                   </Text>
+                  </>
+                  )}
                 </Card.Body>
               </Card.Root>