"use client";

import { useState } from "react";

import { Coupon } from "@/components/widgets/Coupon/Coupon";
import Typography from "@/components/ui/Typography/Typography";

import { buildTypographyProps } from "@/lib/funnel/mappers";
import type { CouponScreenDefinition } from "@/lib/funnel/types";
import { TemplateLayout } from "../layouts/TemplateLayout";

interface CouponTemplateProps {
  screen: CouponScreenDefinition;
  onContinue: () => void;
  canGoBack: boolean;
  onBack: () => void;
  screenProgress?: { current: number; total: number };
  defaultTexts?: { nextButton?: string; continueButton?: string };
}

export function CouponTemplate({
  screen,
  onContinue,
  canGoBack,
  onBack,
  screenProgress,
  defaultTexts,
}: CouponTemplateProps) {
  const [copiedCode, setCopiedCode] = useState<string | null>(null);


  const handleCopyPromoCode = (code: string) => {
    navigator.clipboard.writeText(code);
    setCopiedCode(code);
    
    setTimeout(() => {
      setCopiedCode(null);
    }, 2000);
  };

  const couponProps = {
    title: buildTypographyProps(screen.coupon.title, {
      as: "h3" as const,
      defaults: {
        font: "manrope",
        weight: "bold",
        color: "primary",
      },
    }) ?? {
      as: "h3" as const,
      children: screen.coupon.title.text,
    },
    offer: {
      title: buildTypographyProps(screen.coupon.offer.title, {
        as: "h3" as const,
        defaults: {
          font: "manrope",
          weight: "black",
          color: "card",
          size: "4xl",
        },
      }) ?? {
        as: "h3" as const,
        children: screen.coupon.offer.title.text,
      },
      description: buildTypographyProps(screen.coupon.offer.description, {
        as: "p" as const,
        defaults: {
          font: "inter",
          weight: "semiBold",
          color: "card",
        },
      }) ?? {
        as: "p" as const,
        children: screen.coupon.offer.description.text,
      },
    },
    promoCode: buildTypographyProps(screen.coupon.promoCode, {
      as: "span" as const,
      defaults: {
        font: "inter",
        weight: "semiBold",
      },
    }) ?? {
      as: "span" as const,
      children: screen.coupon.promoCode.text,
    },
    footer: buildTypographyProps(screen.coupon.footer, {
      as: "p" as const,
      defaults: {
        font: "inter",
        weight: "medium",
        color: "muted",
        size: "sm",
      },
    }) ?? {
      as: "p" as const,
      children: screen.coupon.footer.text,
    },
    onCopyPromoCode: handleCopyPromoCode,
  };

  return (
    <TemplateLayout
      screen={screen}
      canGoBack={canGoBack}
      onBack={onBack}
      screenProgress={screenProgress}
      titleDefaults={{ font: "manrope", weight: "bold", align: "left", size: "2xl", color: "default" }}
      subtitleDefaults={{ font: "manrope", weight: "medium", color: "default", align: "left", size: "lg" }}
      actionButtonOptions={{
        defaultText: defaultTexts?.continueButton || "Continue",
        disabled: false,
        onClick: onContinue,
      }}
    >
      <div className="w-full flex flex-col items-center justify-center mt-[22px]">
        <div className="mb-8">
          <Coupon {...couponProps} />
        </div>

        {copiedCode && (
          <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg">
            <Typography
              as="p"
              size="sm"
              color="success"
              weight="medium"
              align="center"
            >
              {screen.copiedMessage 
                ? screen.copiedMessage.replace("{code}", copiedCode || "")
                : `Промокод "${copiedCode}" скопирован!`
              }
            </Typography>
          </div>
        )}
      </div>
    </TemplateLayout>
  );
}