"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { ArrowLeft, Lock } from "lucide-react";
import React from "react";
import {
  Controller,
  FormProvider,
  useForm,
  useFormContext,
} from "react-hook-form";
import z from "zod";

import { Button } from "@/components/ui/button";
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface OrderItem {
  id: string;
  name: string;
  price: number;
}

interface OrderSummary {
  companyName: string;
  items: OrderItem[];
  currency: string;
}

interface Checkout5Props {
  order: OrderSummary;
  className?: string;
}

const formatPrice = (price: number, currency = "IRR") =>
  new Intl.NumberFormat("fa-IR", {
    style: "currency",
    currency,
  }).format(price);

const checkoutFormSchema = z.object({
  email: z.string().email("ایمیل نامعتبر است"),
  cardNumber: z.string().min(1, "شماره کارت الزامی است"),
  expiryDate: z
    .string()
    .regex(/^(0[1-9]|1[0-2])\/\d{2}$/, "فرمت نامعتبر (MM/YY)")
    .refine((value) => {
      const [mm, yy] = value.split("/").map(Number);
      const now = new Date();
      const currentMonth = now.getMonth() + 1;
      const currentYear = now.getFullYear() % 100;
      if (yy < currentYear) return false;
      if (yy === currentYear && mm < currentMonth) return false;
      return true;
    }, "کارت منقضی شده است"),
  cvc: z.string().min(3, "کد امنیتی الزامی است"),
  cardholderName: z.string().min(1, "نام روی کارت الزامی است"),
  country: z.string().min(1, "انتخاب کشور الزامی است"),
  promoCode: z.string().optional(),
});

type CheckoutFormType = z.infer<typeof checkoutFormSchema>;

const COUNTRIES = [
  { value: "AU", label: "استرالیا" },
  { value: "IR", label: "ایران" },
  { value: "TR", label: "ترکیه" },
  { value: "IQ", label: "عراق" },
  { value: "PK", label: "پاکستان" },
  { value: "AFG", label: "افغانستان" },

];

const DEFAULT_ORDER: OrderSummary = {
  companyName: "ریو آی",
  items: [
    {
      id: "pro-subscription",
      name: "اشتراک حرفه‌ای (سالانه)",
      price: 199.0,
    },
  ],
  currency: "IRR",
};

const Checkout5 = ({ order = DEFAULT_ORDER, className }: Checkout5Props) => {
  const form = useForm<CheckoutFormType>({
    resolver: zodResolver(checkoutFormSchema),
    defaultValues: {
      email: "",
      cardNumber: "",
      expiryDate: "ماه/سال",
      cvc: "کد امنیتی",
      cardholderName: "",
      country: "IR",
      promoCode: "",
    },
  });

  const onSubmit = (data: CheckoutFormType) => {
    console.log("Form submitted:", data);
  };

  const subtotal = order.items.reduce((sum, item) => sum + item.price, 0);
  const total = subtotal;

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("min-h-screen bg-background", className)}
    >
      <FormProvider {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <div className="grid min-h-screen lg:grid-cols-2">
            <div className="border-e border-border bg-muted/20 p-8 pt-32 lg:p-12 lg:pt-40 xl:p-16 xl:pt-48">
              <div className="mx-auto w-full max-w-md">
                <div className="mb-8 flex items-center gap-3">
                  <button
                    type="button"
                    className="flex size-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                    aria-label="بازگشت به سبد"
                  >
                    <ArrowLeft className="size-4 rtl:rotate-180" />
                  </button>
                  <img
                    src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg"
                    alt={order.companyName}
                    className="size-8"
                  />
                </div>

                {/* Company and Total */}
                <div className="mb-8">
                  <p className="text-muted-foreground">{order.companyName}</p>
                  <p className="text-xl font-semibold tracking-tight tabular-nums">
                    {formatPrice(total, order.currency)}
                  </p>
                </div>

                {/* Order Items */}
                <div className="space-y-4">
                  {order.items.map((item) => (
                    <div
                      key={item.id}
                      className="flex items-center justify-between"
                    >
                      <span className="text-sm text-foreground">
                        {item.name}
                      </span>
                      <span className="text-sm tabular-nums text-foreground">
                        {formatPrice(item.price, order.currency)}
                      </span>
                    </div>
                  ))}
                </div>

                <Separator className="my-4" />

                {/* Subtotal */}
                <div className="flex items-center justify-between">
                  <span className="text-sm text-foreground">جمع سفارش</span>
                  <span className="text-sm tabular-nums text-foreground">
                    {formatPrice(subtotal, order.currency)}
                  </span>
                </div>

                {/* Promo Code Button */}
                <div className="mt-4">
                  <PromoCodeField />
                </div>

                <Separator className="my-4" />

                {/* Total */}
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium text-foreground">
                    مبلغ قابل پرداخت
                  </span>
                  <span className="text-sm font-medium tabular-nums text-foreground">
                    {formatPrice(total, order.currency)}
                  </span>
                </div>
              </div>
            </div>

            <div className="p-8 pt-32 lg:p-12 lg:pt-40 xl:p-16 xl:pt-48">
              <div className="mx-auto w-full max-w-md">
              

                <div className="my-6 flex items-center gap-4">
                  <Separator className="flex-1" />
                  <span className="text-sm text-muted-foreground">
                     با کارت بانکی پرداخت کنید
                                                        </span>
                  <Separator className="flex-1" />
                </div>

                <div className="space-y-6">
                  <EmailField />

                  <div>
                    <h2 className="mb-4 text-sm font-medium">جزئیات کارت</h2>
                    <PaymentFields />
                  </div>

                  <CountryField />

                  <Button
                    type="submit"
                    size="lg"
                    className="h-12 w-full bg-blue-600 text-base text-white hover:bg-blue-700"
                  >
                    پرداخت و ثبت سفارش
                                                        </Button>

                  <p className="text-center text-xs text-muted-foreground">
                    با ثبت سفارش، شرایط استفاده و سیاست حفظ حریم خصوصی را می‌پذیرید. اطلاعات پرداخت شما با استانداردهای امنیتی محافظت و رمزنگاری می‌شود.
                                                        </p>

                  <div className="flex items-center justify-center gap-4 pt-4 text-xs text-muted-foreground">
                    <span className="flex items-center gap-1">
                      <Lock className="size-3" />
                      پرداخت امن اشتراک
                                                              </span>
                    <Separator orientation="vertical" className="h-4" />
                    <a
                      href="#"
                      className="hover:text-foreground hover:underline"
                    >
                      شرایط استفاده
                                                              </a>
                    <a
                      href="#"
                      className="hover:text-foreground hover:underline"
                    >
                      حریم خصوصی
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </FormProvider>
    </section>
  );
};

const PromoCodeField = () => {
  const form = useFormContext<CheckoutFormType>();
  const [showInput, setShowInput] = React.useState(false);

  if (!showInput) {
    return (
      <Button
        type="button"
        variant="outline"
        size="sm"
        className="h-9 text-sm"
        onClick={() => setShowInput(true)}
      >
        افزودن کد تخفیف
      </Button>
    );
  }

  return (
    <Controller
      name="promoCode"
      control={form.control}
      render={({ field }) => (
        <div className="flex gap-2">
          <Input
            {...field}
            dir="rtl"
            placeholder="کد تخفیف"
            className="h-9 flex-1 text-sm"
          />
          <Button type="button" variant="outline" size="sm" className="h-9">
            اعمال
          </Button>
        </div>
      )}
    />
  );
};

const EmailField = () => {
  const form = useFormContext<CheckoutFormType>();

  return (
    <Controller
      name="email"
      control={form.control}
      render={({ field, fieldState }) => (
        <Field data-invalid={fieldState.invalid}>
          <FieldLabel className="text-sm font-medium" htmlFor="checkout-email">
            ایمیل
                            </FieldLabel>
          <Input
            {...field}
            id="checkout-email"
            type="email"
            dir="rtl"
            placeholder="example@email.com"
            aria-invalid={fieldState.invalid}
          />
          {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
        </Field>
      )}
    />
  );
};

const PaymentFields = () => {
  const form = useFormContext<CheckoutFormType>();

  return (
    <div className="space-y-4">
      {/* Card Number */}
      <Controller
        name="cardNumber"
        control={form.control}
        render={({ field, fieldState }) => (
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <FieldLabel
                className="text-sm text-muted-foreground"
                htmlFor="checkout-card-number"
              >
                شماره کارت
              </FieldLabel>
              <div className="flex items-center gap-1">
                <img
                  src="/block-media/shadcnblocks/block/logos/visa-icon.svg"
                  alt="Visa"
                  className="h-5 w-auto"
                />
                <img
                  src="/block-media/shadcnblocks/block/logos/mastercard-logo.svg"
                  alt="Mastercard"
                  className="h-5 w-auto"
                />
                <img
                  src="/block-media/shadcnblocks/block/logos/american-express-icon.svg"
                  alt="کارت ویژه"
                  className="h-5 w-auto"
                />
              </div>
            </div>
            <Field data-invalid={fieldState.invalid}>
              <Input
                {...field}
                id="checkout-card-number"
                dir="rtl"
                placeholder="1234 1234 1234 1234"
                aria-invalid={fieldState.invalid}
                className="rounded-b-none border-b-0"
              />
              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
            </Field>
          </div>
        )}
      />

      {/* Expiry and CVC Row */}
      <div className="-mt-4 grid grid-cols-2">
        <Controller
          name="expiryDate"
          control={form.control}
          render={({ field, fieldState }) => (
            <Field data-invalid={fieldState.invalid}>
              <Input
                {...field}
                onChange={(e) => {
                  let val = e.target.value;
                  val = val.replace(/[^0-9/]/g, "");
                  const prev = field.value ?? "";
                  const isDeleting = val.length < prev.length;
                  if (!isDeleting) {
                    if (val.length === 2 && !val.includes("/")) {
                      val = val + "/";
                    }
                  }
                  if (val.length > 5) {
                    val = val.slice(0, 5);
                  }
                  field.onChange(val);
                }}
                placeholder="MM/YY"
                dir="rtl"
                className="rounded-none rounded-bl-md border-r-0"
                aria-label="تاریخ انقضا"
                aria-invalid={fieldState.invalid}
              />
              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
            </Field>
          )}
        />
        <Controller
          name="cvc"
          control={form.control}
          render={({ field, fieldState }) => (
            <Field data-invalid={fieldState.invalid}>
              <Input
                {...field}
                dir="rtl"
                placeholder="CVC"
                aria-label="کد امنیتی (CVC)"
                className="rounded-none rounded-br-md"
                aria-invalid={fieldState.invalid}
              />
              {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
            </Field>
          )}
        />
      </div>

      {/* Cardholder Name */}
      <Controller
        name="cardholderName"
        control={form.control}
        render={({ field, fieldState }) => (
          <Field data-invalid={fieldState.invalid}>
            <FieldLabel
              className="text-sm font-medium"
              htmlFor="checkout-cardholder-name"
            >
              نام روی کارت
                                </FieldLabel>
            <Input
              {...field}
              id="checkout-cardholder-name"
              placeholder="نام و نام خانوادگی"
              aria-invalid={fieldState.invalid}
            />
            {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
          </Field>
        )}
      />
    </div>
  );
};

const CountryField = () => {
  const form = useFormContext<CheckoutFormType>();

  return (
    <Controller
      name="country"
      control={form.control}
      render={({ field, fieldState }) => (
        <Field data-invalid={fieldState.invalid}>
          <FieldLabel
            className="text-sm font-medium"
            htmlFor="checkout-country"
          >
            کشور صورتحساب
          </FieldLabel>
          <Select dir="rtl" value={field.value} onValueChange={field.onChange}>
            <SelectTrigger id="checkout-country" className="w-full ">
              <SelectValue placeholder="کشور را انتخاب کنید" />
            </SelectTrigger>
            <SelectContent>
              {COUNTRIES.map((country) => (
                <SelectItem key={country.value} value={country.value}>
                  {country.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
        </Field>
      )}
    />
  );
};

export { Checkout5 };