"use client";

import React from "react";
import { Controller } from "react-hook-form";
import Image from "next/image";
import Button from "./common/Button";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { FaTimes } from "react-icons/fa";
import { useTranslations } from "next-intl";
import { PaymentFormValues ,createPaymentSchema} from "@/lib/validations/authSchema";
import { getExpiryYears } from "@/lib/utils/getExpiryYears";
 
 interface PaymentModalProps {
  onClose: () => void;
  onSubmit: (data: PaymentFormValues) => void;
  isSubmitting?: boolean;
}

// ----------------------
// ✅ Component
// ----------------------
export default function PaymentModal({
  onClose,
  onSubmit,
  isSubmitting = false,
}: PaymentModalProps) {
    const t=useTranslations("payment");
    const tcheckout=useTranslations();
    const paymentSchema = createPaymentSchema(t);
    const {
    register,
    control,
    handleSubmit,
    watch,
    setValue,
    formState: { errors },
  } = useForm<PaymentFormValues>({
    resolver: zodResolver(paymentSchema),
    defaultValues: {
      paymentMethod: "",
      cardholderName: "",
      cardNumber: "",
      expiryMonth: "",
      expiryYear: "",
      cvc: "",
    },
  });

  const cardNumber = watch("cardNumber");
  const cvcNumber = watch("cvc");

  const paymentOptions = [
  {
    value: "mada",
    label: t("mada"),
    logo: "/Mada_Logo.png",
    classes: "max-w-[62px] m-auto mb-2 h-fit",
  },
  {
    value: "sadad",
    label: t("sadad"),
    logo: "/sadad_logo.png",
    classes: "max-w-[62px] m-auto mb-2 h-fit",
  },
  {
    value: "mastercard",
    label: t("master_card"),
    logo: "/master_logo.png",
    classes: "max-w-[40px] m-auto mb-2 h-fit",
  },
];
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const input = e.target.value.replace(/\D/g, "").slice(0, 16);
    const formatted = input.replace(/(.{4})/g, "$1 ").trim();
    setValue("cardNumber", formatted);
  };

  const handleChangeCVC = (e: React.ChangeEvent<HTMLInputElement>) => {
    const input = e.target.value.replace(/\D/g, "").slice(0, 4);
    setValue("cvc", input);
  };

  const handleFormSubmit = (data: PaymentFormValues) => {
    onSubmit(data);
  };

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30"
      onClick={onClose}
    >
      <div
        className="bg-white dark:bg-card rounded-xl shadow-2xl w-full max-w-md"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex justify-between items-center border-b border-neutrals100 dark:border-darkborder px-6 py-4">
          <h2 className="text-lg font-semibold text-neutrals800 dark:text-neutrals100">
            {t("title")}
            
          </h2>
          <Button className="border rounded-full w-8 h-8 flex justify-center items-center !p-0 bg-transparent !text-gray-600 hover:!bg-primary400 hover:!border-primary400 hover:!text-white"
            label={
              <span className="flex items-center">
                <FaTimes className="text-sm" />
              </span>
            }
            onClick={onClose}
          />
        </div>
        <div className="p-6">
          <form className="space-y-4" onSubmit={handleSubmit(handleFormSubmit)}>
            {/* Payment Method */}
            <Controller
              name="paymentMethod"
              control={control}
              render={({ field }) => (
                <div className="flex gap-2 mb-4">
                  {paymentOptions.map((method) => (
                    <label
                      key={method.value}
                      className="flex flex-col items-center cursor-pointer w-1/3"
                    >
                      <input
                        type="radio"
                        value={method.value}
                        checked={field.value === method.value}
                        onChange={() => field.onChange(method.value)}
                        className="peer hidden"
                      />
                      <div className="w-full min-h-[85px] flex flex-col items-center justify-center gap-2 border-2 border-neutrals100 rounded-lg px-2 py-2 peer-checked:border-primary500 peer-checked:shadow-lg dark:border-darkborder dark:peer-checked:border-primary400">
                        <Image
                          src={method.logo}
                          alt={method.label}
                          className={method.classes}
                          width={60}
                          height={60}
                        />
                        <span className="text-sm font-medium">
                          {method.label}
                        </span>
                      </div>
                    </label>
                  ))}
                </div>
              )}
            />
            {errors.paymentMethod && (
              <p className="text-red-500 text-sm mt-1">
                {errors.paymentMethod.message}
              </p>
            )}

            {/* Cardholder Name */}
            <div>
              <label className="block text-sm font-medium text-neutrals800 dark:text-gray-200 mb-1">
                {t("cardholderName")}
              </label>
              <input
                type="text"
                {...register("cardholderName")}
                placeholder={t("cardholderPlaceholder")}
                className="w-full px-2 py-3 rounded-lg border border-neutrals100 dark:border-darkborder text-sm text-neutrals800 dark:text-neutrals400 bg-white dark:bg-card outline-none focus:border-primary500 dark:focus:border-primary400"
              />
              {errors.cardholderName && (
                <p className="text-red-500 text-sm mt-1">
                  {errors.cardholderName.message}
                </p>
              )}
            </div>

            {/* Card Number */}
            <div>
              <label className="block text-sm font-medium text-neutrals800 dark:text-gray-200 mb-1">
                {t("cardNumber")}
              </label>
              <input
                type="text"
                inputMode="numeric"
                autoComplete="cc-number"
                {...register("cardNumber")}
                value={cardNumber}
                onChange={handleChange}
                placeholder={t("cardNumberPlaceholder")}
                className="w-full px-2 py-3 rounded-lg border border-neutrals100 dark:border-darkborder text-sm text-neutrals800 dark:text-neutrals400 bg-white dark:bg-card outline-none focus:border-primary500 dark:focus:border-primary400"
              />
              {errors.cardNumber && (
                <p className="text-red-500 text-sm mt-1">
                  {errors.cardNumber.message}
                </p>
              )}
            </div>

            {/* Expiration Date */}
            <div>
              {/* <label className="block text-sm font-medium text-neutrals800 dark:text-gray-200 mb-1">
               {t("expirationDate")}
              </label>  {/* <label className="block text-sm font-medium text-neutrals800 dark:text-gray-200 mb-1">
               {t("expirationDate")}
              </label> */}
              <div className="grid grid-cols-2 gap-3">
                <select
                  {...register("expiryMonth")}
                  defaultValue=""
                  className="w-full px-2 py-3 rounded-lg border border-neutrals100 dark:border-darkborder text-sm text-neutrals800 dark:text-neutrals400 bg-white dark:bg-card outline-none focus:border-primary500 dark:focus:border-primary400"
                >
                  <option value="" disabled>
                   {t("month")}
                  </option>
                       <option value="01">{tcheckout("checkout.months.01")}</option>
                        <option value="02">{tcheckout("checkout.months.02")}</option>
                        <option value="03">{tcheckout("checkout.months.03")}</option>
                        <option value="04">{tcheckout("checkout.months.04")}</option>
                        <option value="05">{tcheckout("checkout.months.05")}</option>
                        <option value="06">{tcheckout("checkout.months.06")}</option>
                        <option value="07">{tcheckout("checkout.months.07")}</option>
                        <option value="08">{tcheckout("checkout.months.08")}</option>
                        <option value="09">{tcheckout("checkout.months.09")}</option>
                        <option value="10">{tcheckout("checkout.months.10")}</option>
                        <option value="11">{tcheckout("checkout.months.11")}</option>
                        <option value="12">{tcheckout("checkout.months.12")}</option>
                </select>

                <select
                  {...register("expiryYear")}
                  defaultValue=""
                  className="w-full px-2 py-3 rounded-lg border border-neutrals100 dark:border-darkborder text-sm text-neutrals800 dark:text-neutrals400 bg-white dark:bg-card outline-none focus:border-primary500 dark:focus:border-primary400"
                >
                  <option value="" disabled>
                    {t("year")}
                  </option>
                   {getExpiryYears(10).map((year:any) => (
                    <option key={year} value={year}>
                      {year}
                    </option>
                  ))}
                </select>
              </div>
              {(errors.expiryMonth || errors.expiryYear) && (
                <p className="text-red-500 text-sm mt-1">
                 {t("errors.expiry")}
                </p>
              )}
            </div>

            {/* CVC */}
            <div>
              <label className="block text-sm font-medium text-neutrals800 dark:text-gray-200 mb-1">
                {t("cvc")}
              </label>
              <input
                type="text"
                inputMode="numeric"
                autoComplete="cvc-number"
                {...register("cvc")}
                value={cvcNumber}
                onChange={handleChangeCVC}
                placeholder={t("cvcPlaceholder")}
                className="w-full px-2 py-3 rounded-lg border border-neutrals100 dark:border-darkborder text-sm text-neutrals800 dark:text-neutrals400 bg-white dark:bg-card outline-none focus:border-primary500 dark:focus:border-primary400"
              />
              {errors.cvc && (
                <p className="text-red-500 text-sm mt-1">{errors.cvc.message}</p>
              )}
            </div>

            {/* Buttons */}
            <div className="flex justify-end gap-3 mt-4">
              <Button variant="outline" label={t("cancel")} onClick={onClose} />
              <Button
                label={isSubmitting ? t("processing") : t("payNow")}
                disabled={isSubmitting}
                type="submit"
              />
            </div>
          </form>    
        </div>
      </div>
    </div>
  );
}