"use client";

import React, { useState } from "react";

import { Col, Row } from "antd/lib/grid";

import "../css/App.scss"
import "../css/base/spacing.scss"
import "../css/base/modal.scss"
import "../css/base/tabs.scss"
import "../css/base/text.scss"
import "../css/base/display.scss"
import "../css/base/form.scss"
import "../css/base/button.scss"

import "../css/SpecialOfferModal.scss";
import "../css/onboardingFlow.scss"
import "../css/LinkEditorModal.scss";
import "../css/ProductEditorModal.scss";
import "../css/ModuleOndemandVideo.scss";
import "../css/ModuleShopify.scss"


import { Field, Form, Formik } from "formik";
import * as yup from "yup";
import Button from "antd/lib/button";


import { Text } from "@/components/Typography/Text";
import { AntInput, FieldType } from "@/components/Form/FormItem";
import Modal from "@/components/Modal/Modal";

const validateSpecialOfferSchema = yup.object().shape({
  specialOffer: yup.object().shape({
    title: yup
      .string()
      .required("Please add the offer information")
      .max(50, "Offer not more than 50 characters"),
    storeUrl: yup
      .string()
      .required("Please enter the URL")
      .url("Please enter a valid URL"),
  }),
});

export default function Page() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const initialValues = {
    specialOffer: {
      title: "offer",
      storeUrl: "https://google.com",
      couponCode: "5",
    },
  };

  const handleSubmit = (values: typeof initialValues) => {
    console.log("Form submit", values);
  };

  return (
    <>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>

      <Modal
        open={isModalOpen}
        width={520}
        centered
        style={{
            marginLeft: "auto",
            marginRight: "auto"
          }}
        closable={false}
        className="special-offer-modal p__x--0 p__y--24"
        onCancel={() => setIsModalOpen(false)}
        maskClosable={false}
        footer={null} // ← This removes the footer
      >
        <div
    className="ant-row special-offer-modal-header align__items--center position--relative p--16"
    style={{ rowGap: 0 }}
  >
    <svg
      className="close-icon"
      width={24}
      height={24}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M19 12a7 7 0 1 1-14 0 7 7 0 0 1 14 0z"
        fill="#121212"
        stroke="#121212"
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M14.812 9.187l-5.625 5.626m5.625 0L9.187 9.187"
        stroke="#fff"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
    <div className="ant-col special-offer-modal-header-left">
      <div
        className="image-skeleton image-skeleton__square"
        style={{ width: 110, height: 110, borderRadius: 16 }}
      >
        <img
          className="image-skeleton__image original isLoaded"
          src="./images.jpeg"
          alt="sb"
        />
        <div className="ant-skeleton ant-skeleton-element d--none">
          <span
            className="ant-skeleton-avatar ant-skeleton-avatar-square"
            style={{
              width: 220,
              height: 220,
              lineHeight: 110,
              borderRadius: 16
            }}
          />
        </div>
      </div>
    </div>
    <div className="ant-col music-card__right flex--1 p__l--16">
      <div
        className="ant-typography ant-typography-ellipsis ant-typography-ellipsis-multiple-line text text--semibold14 undefined"
        style={{ WebkitLineClamp: 2 }}
      >
        offer
      </div>
      <div className="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line text text--regular14  d--block opacity--05 cursor-pointer">
        https://google.com
      </div>
    </div>
  </div>
  <div className="special-offer-modal-content-wrapper">
    <div className="special-offer-modal-content p__x--16 p__y--16">
      <div className="ant-typography text text--regular14 text--default opacity--06">
        Copy the code below and visit the store to claim your discount.
      </div>
      <div className="ant-typography text text--regular12 m__t--16 m__b--4 text--default">
        Coupon Code
      </div>
      <div className="special-offer-modal-copy-btn d--flex p--12 cursor-pointer">
        <div className="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line text text--semibold16 special-offer-modal-copy-btn-text">
          5
        </div>
        <div className="copy-text">Copy Code</div>
      </div>
      <div className="special-offer-modal-btn-wrapper m__t--24 d--flex justify__content--end">
        <button type="button" className="ant-btn cancel-btn w__160">
          <span>CANCEL</span>
        </button>
        <button type="button" className="ant-btn visit-store-btn w__160">
          <span>VISIT STORE</span>
        </button>
      </div>
    </div>
  </div>
      </Modal>
    </>
  );
}
