"use client";

import { TextInput } from "@/components/ui/TextInput/TextInput";
import type { CouponScreenDefinition } from "@/lib/funnel/types";
import type { BuilderScreen } from "@/lib/admin/builder/types";

interface CouponScreenConfigProps {
  screen: BuilderScreen & { template: "coupon" };
  onUpdate: (updates: Partial<CouponScreenDefinition>) => void;
}

export function CouponScreenConfig({ screen, onUpdate }: CouponScreenConfigProps) {
  const couponScreen = screen as CouponScreenDefinition & { position: { x: number; y: number } };

  const handleCouponUpdate = <T extends keyof CouponScreenDefinition["coupon"]>(
    field: T,
    value: CouponScreenDefinition["coupon"][T]
  ) => {
    onUpdate({
      coupon: {
        ...couponScreen.coupon,
        [field]: value,
      },
    });
  };

  return (
    <div className="space-y-6 rounded-2xl border border-border/70 bg-background/80 p-5 shadow-sm">
      <div className="space-y-3">
        <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
          Настройки оффера
        </h3>
        <label className="flex flex-col gap-2 text-xs font-medium text-muted-foreground">
          Заголовок оффера
          <TextInput
            placeholder="-50% на первый заказ"
            value={couponScreen.coupon?.offer?.title?.text ?? ""}
            onChange={(event) =>
              handleCouponUpdate("offer", {
                ...couponScreen.coupon.offer,
                title: {
                  ...(couponScreen.coupon.offer?.title ?? {}),
                  text: event.target.value,
                },
              })
            }
          />
        </label>
        <label className="flex flex-col gap-2 text-xs font-medium text-muted-foreground">
          Подзаголовок/описание
          <TextInput
            placeholder="Персональная акция только сегодня"
            value={couponScreen.coupon?.offer?.description?.text ?? ""}
            onChange={(event) =>
              handleCouponUpdate("offer", {
                ...couponScreen.coupon.offer,
                description: {
                  ...(couponScreen.coupon.offer?.description ?? {}),
                  text: event.target.value,
                },
              })
            }
          />
        </label>
      </div>

      <div className="space-y-3">
        <h4 className="text-sm font-semibold text-foreground">Промокод</h4>
        <label className="flex flex-col gap-2 text-xs font-medium text-muted-foreground">
          Текст промокода
          <TextInput
            placeholder="SALE50"
            value={couponScreen.coupon?.promoCode?.text ?? ""}
            onChange={(event) =>
              handleCouponUpdate("promoCode", {
                ...(couponScreen.coupon.promoCode ?? {}),
                text: event.target.value,
              })
            }
          />
        </label>
        <label className="flex flex-col gap-2 text-xs font-medium text-muted-foreground">
          Подпись под промокодом
          <TextInput
            placeholder="Нажмите, чтобы скопировать"
            value={couponScreen.coupon?.footer?.text ?? ""}
            onChange={(event) =>
              handleCouponUpdate("footer", {
                ...(couponScreen.coupon.footer ?? {}),
                text: event.target.value,
              })
            }
          />
        </label>
      </div>

      <div className="space-y-2">
        <h4 className="text-sm font-semibold text-foreground">Сообщение об успехе</h4>
        <TextInput
          placeholder="Промокод скопирован!"
          value={couponScreen.copiedMessage ?? ""}
          onChange={(event) => onUpdate({ copiedMessage: event.target.value || undefined })}
        />
      </div>
    </div>
  );
}