import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@workspace/ui/components/button";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@workspace/ui/components/form";
import { ScrollArea } from "@workspace/ui/components/scroll-area";
import {
  Sheet,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@workspace/ui/components/sheet";
import { Combobox } from "@workspace/ui/composed/combobox";
import { DatePicker } from "@workspace/ui/composed/date-picker";
import { ArrayInput } from "@workspace/ui/composed/dynamic-inputs";
import { EnhancedInput } from "@workspace/ui/composed/enhanced-input";
import { Icon } from "@workspace/ui/composed/icon";
import { unitConversion } from "@workspace/ui/utils/unit-conversions";
import { type KeyboardEvent, type ReactNode, useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { z } from "zod";
import { useSubscribe } from "@/stores/subscribe";

interface Props {
  trigger: ReactNode;
  title: string;
  loading?: boolean;
  initialData?: API.UserSubscribe;
  onSubmit: (values: SubscriptionFormValues) => Promise<boolean>;
}

type SubscriptionTrafficLimitRule = API.UserSubscribeTrafficLimitRule;

const defaultLimitRule: SubscriptionTrafficLimitRule = {
  stat_type: "day",
  stat_value: 1,
  traffic_usage: 0,
  speed_limit: 0,
};

const formSchema = z.object({
  subscribe_id: z.number().optional(),
  traffic: z.number().min(0).optional(),
  speed_limit: z.number().min(0).optional(),
  device_limit: z.number().min(0).optional(),
  expired_at: z.number().nullish().optional(),
  upload: z.number().min(0).optional(),
  download: z.number().min(0).optional(),
  id: z.number().optional(),
  traffic_limit: z
    .array(
      z.object({
        stat_type: z.string(),
        stat_value: z.number().int().min(1),
        traffic_usage: z.number().min(0),
        speed_limit: z.number().min(0),
      })
    )
    .optional(),
});

type SubscriptionFormValues = z.infer<typeof formSchema>;

export type { SubscriptionFormValues };

const normalizeLimitRule = (
  item: SubscriptionTrafficLimitRule
): SubscriptionTrafficLimitRule => ({
  stat_type: item.stat_type || "day",
  stat_value: Math.max(1, Math.floor(Number(item.stat_value) || 1)),
  traffic_usage: Math.max(0, Number(item.traffic_usage) || 0),
  speed_limit: Math.max(0, Number(item.speed_limit) || 0),
});

export function SubscriptionForm({
  trigger,
  title,
  loading,
  initialData,
  onSubmit,
}: Props) {
  const { t } = useTranslation("user");
  const [open, setOpen] = useState(false);

  const form = useForm<SubscriptionFormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      subscribe_id: initialData?.subscribe_id || 0,
      traffic: initialData?.traffic || 0,
      speed_limit: initialData?.speed_limit || 0,
      device_limit: initialData?.device_limit || 0,
      traffic_limit: initialData?.traffic_limit || [],
      upload: initialData?.upload || 0,
      download: initialData?.download || 0,
      expired_at: initialData?.expire_time || 0,
      ...(initialData && { id: initialData.id }),
    },
  });

  const handleSubmit = async (values: SubscriptionFormValues) => {
    const success = await onSubmit(values);
    if (success) {
      setOpen(false);
      form.reset();
    }
  };

  const { subscribes } = useSubscribe();

  return (
    <Sheet onOpenChange={setOpen} open={open}>
      <SheetTrigger asChild>
        <Button
          onClick={() => {
            form.reset();
            setOpen(true);
          }}
        >
          {trigger}
        </Button>
      </SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>{title}</SheetTitle>
        </SheetHeader>
        <ScrollArea className="h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))] px-4">
          <div className="pr-4">
            <Form {...form}>
              <form
                className="mt-4 space-y-4"
                onSubmit={form.handleSubmit(handleSubmit)}
              >
                <FormField
                  control={form.control}
                  name="subscribe_id"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("subscription", "Subscription")}</FormLabel>
                      <FormControl>
                        <Combobox<number, false>
                          onChange={(value) => {
                            form.setValue(field.name, value);
                          }}
                          options={subscribes?.map((item) => ({
                            value: item.id!,
                            label: item.name!,
                          }))}
                          placeholder="Select Subscription"
                          value={field.value}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="traffic"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>
                        {t("trafficLimit", "Traffic Limit")}
                      </FormLabel>
                      <FormControl>
                        <EnhancedInput
                          min={0}
                          placeholder={t("unlimited", "Unlimited")}
                          type="number"
                          {...field}
                          formatInput={(value) =>
                            unitConversion("bytesToGb", value)
                          }
                          formatOutput={(value) =>
                            unitConversion("gbToBytes", value)
                          }
                          onValueChange={(value) => {
                            form.setValue(field.name, value as number);
                          }}
                          suffix="GB"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="speed_limit"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("speedLimit", "Speed Limit")}</FormLabel>
                      <FormControl>
                        <EnhancedInput
                          min={0}
                          placeholder={t("unlimited", "Unlimited")}
                          type="number"
                          {...field}
                          onValueChange={(value) => {
                            form.setValue(field.name, value as number);
                          }}
                          suffix="Mbps"
                        />
                      </FormControl>
                      <FormDescription>
                        {t(
                          "userSpeedLimitDescription",
                          "Set to 0 to use the subscription default speed limit."
                        )}
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="device_limit"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("deviceLimit", "Device Limit")}</FormLabel>
                      <FormControl>
                        <EnhancedInput
                          min={0}
                          placeholder={t("unlimited", "Unlimited")}
                          step={1}
                          type="number"
                          {...field}
                          onValueChange={(value) => {
                            form.setValue(field.name, value as number);
                          }}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="upload"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>
                        {t("uploadTraffic", "Upload Traffic")}
                      </FormLabel>
                      <FormControl>
                        <EnhancedInput
                          min={0}
                          placeholder="0"
                          type="number"
                          {...field}
                          formatInput={(value) =>
                            unitConversion("bytesToGb", value)
                          }
                          formatOutput={(value) =>
                            unitConversion("gbToBytes", value)
                          }
                          onValueChange={(value) => {
                            form.setValue(field.name, value as number);
                          }}
                          suffix="GB"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="download"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>
                        {t("downloadTraffic", "Download Traffic")}
                      </FormLabel>
                      <FormControl>
                        <EnhancedInput
                          min={0}
                          placeholder="0"
                          type="number"
                          {...field}
                          formatInput={(value) =>
                            unitConversion("bytesToGb", value)
                          }
                          formatOutput={(value) =>
                            unitConversion("gbToBytes", value)
                          }
                          onValueChange={(value) => {
                            form.setValue(field.name, value as number);
                          }}
                          suffix="GB"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="traffic_limit"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>
                        {t("trafficLimitRules", "Traffic Limit Rules")}
                      </FormLabel>
                      <FormControl>
                        <ArrayInput<SubscriptionTrafficLimitRule>
                          className="grid grid-cols-2 gap-3 lg:grid-cols-4"
                          fields={[
                            {
                              name: "stat_type",
                              type: "select",
                              placeholder: t("statType", "Statistics Type"),
                              value: "day",
                              options: [
                                {
                                  label: t("statTypeHour", "Hour"),
                                  value: "hour",
                                },
                                {
                                  label: t("statTypeDay", "Day"),
                                  value: "day",
                                },
                              ],
                            },
                            {
                              name: "stat_value",
                              type: "number",
                              placeholder: t("statValue", "Time Value"),
                              min: 1,
                              step: 1,
                              onKeyDown: (
                                e: KeyboardEvent<HTMLInputElement>
                              ) => {
                                if (e.key === "." || e.key === ",") {
                                  e.preventDefault();
                                }
                              },
                              formatOutput: (value: string | number) => {
                                const num = Number(value);
                                return String(
                                  Number.isNaN(num) ? 1 : Math.floor(num)
                                );
                              },
                            },
                            {
                              name: "traffic_usage",
                              type: "number",
                              placeholder: t(
                                "trafficUsage",
                                "Traffic Usage (GB)"
                              ),
                              min: 0,
                              onKeyDown: (
                                e: KeyboardEvent<HTMLInputElement>
                              ) => {
                                if (e.key === "." || e.key === ",") {
                                  e.preventDefault();
                                }
                              },
                              formatOutput: (value: string | number) => {
                                const num = Number(value);
                                return String(
                                  Number.isNaN(num) ? 0 : Math.floor(num)
                                );
                              },
                            },
                            {
                              name: "speed_limit",
                              type: "number",
                              placeholder: t(
                                "speedLimitMbps",
                                "Speed Limit (Mbps)"
                              ),
                              min: 0,
                              onKeyDown: (
                                e: KeyboardEvent<HTMLInputElement>
                              ) => {
                                if (e.key === "." || e.key === ",") {
                                  e.preventDefault();
                                }
                              },
                              formatOutput: (value: string | number) => {
                                const num = Number(value);
                                return String(
                                  Number.isNaN(num) ? 0 : Math.floor(num)
                                );
                              },
                            },
                          ]}
                          onChange={(items) => {
                            field.onChange(items.map(normalizeLimitRule));
                          }}
                          value={
                            field.value && field.value.length > 0
                              ? field.value
                              : [defaultLimitRule]
                          }
                        />
                      </FormControl>
                      <FormDescription>
                        {t(
                          "trafficLimitDescription",
                          "Limit speed when usage reaches the configured amount in the selected time window."
                        )}
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="expired_at"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("expiredAt", "Expired At")}</FormLabel>
                      <FormControl>
                        <DatePicker
                          onChange={(value: number | null | undefined) => {
                            form.setValue(field.name, value || 0);
                          }}
                          placeholder={t("permanent", "Permanent")}
                          value={
                            field.value && field.value > 0
                              ? field.value
                              : undefined
                          }
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </form>
            </Form>
          </div>
        </ScrollArea>
        <SheetFooter className="flex-row justify-end gap-2 pt-3">
          <Button
            disabled={loading}
            onClick={() => {
              setOpen(false);
            }}
            variant="outline"
          >
            {t("cancel", "Cancel")}
          </Button>
          <Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
            {loading && (
              <Icon className="mr-2 animate-spin" icon="mdi:loading" />
            )}
            {t("confirm", "Confirm")}
          </Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}