import { useTranslation } from "react-i18next";
import { useState, useEffect } from "react";
import Cookies from "js-cookie";
import {
  Sheet,
  Input,
  Button,
  Checkbox,
  Chip,
  IconButton,
  Alert,
  Typography,
  FormControl,
  FormLabel,
  ButtonGroup,
  CircularProgress,
} from "@mui/joy";
import { submitFormData } from "../utils/api/form";
import type { FormData, Message } from "../config/interfaces.config";
import PersonIcon from "@mui/icons-material/Person";
import QrCodeIcon from "@mui/icons-material/QrCode";
import TranslateIcon from "@mui/icons-material/Translate";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { confirmUser, fetchInfo } from "../utils/api/users";
import { QRcodeModal } from "../components/modals/QR-CodeModal";
import { SelectUserModal } from "../components/modals/SelectUserModal";
import { useForm } from "@tanstack/react-form";
import { changeTranslation } from "../utils/uxFncs";
import { createFormSchema } from "../config/interfaces.config";
import { validateFieldWithZod } from "../utils/uxFncs";
import { TextField } from "../components/TextField";
import { PAYMENT_METHODS, PAYMENT_LABELS } from "../utils/uxFncs";

export const MainForm = () => {
  const { t } = useTranslation();
  const queryClient = useQueryClient();

  // States
  const [invoice, setInvoice] = useState(false);
  const [msg, setMsg] = useState<Message | null>(null);
  const [selectedUser, setSelectedUser] = useState<string | null>(null);
  const [selectedDraw, setSelectedDraw] = useState<string | null>(null);
  const [showSelectUser, setShowSelectUser] = useState(false);
  const [QRmodal, setQRmodal] = useState(false);

  const formSchema = createFormSchema(t, invoice);

  // Validates the fields and makes sure that the form is maching the zod schema
  const makeFieldValidator = (fieldName: string) => ({
    onSubmit: ({
      fieldApi,
    }: {
      fieldApi: { form: { state: { values: Record<string, unknown> } } };
    }) => {
      const allValues = fieldApi.form.state.values;
      return validateFieldWithZod(formSchema, fieldName, allValues);
    },
    onBlur: ({
      fieldApi,
    }: {
      fieldApi: { form: { state: { values: Record<string, unknown> } } };
    }) => {
      const allValues = fieldApi.form.state.values;
      return validateFieldWithZod(formSchema, fieldName, allValues);
    },
  });

  // Creates a form with tanstack form
  const { Field, Subscribe, handleSubmit, setFieldValue } = useForm({
    defaultValues: {
      firstName: "",
      lastName: "",
      email: "",
      phoneNumber: "",
      tickets: 0,
      chocolates: false,
      companyName: "",
      cmpFirstName: "",
      cpmLastName: "",
      cpmEmail: "",
      cpmPhoneNumber: "",
      street: "",
      postalCode: "",
      paymentMethod: "",
    },
    onSubmit: async ({ value }) => {
      const result = formSchema.safeParse(value);
      if (!result.success) return;
      mutateForm(value as FormData);
    },
  });

  // This function returns the errors for one field
  const getErrors = (field: {
    state: { meta: { errorMap: Record<string, unknown> } };
  }) => {
    const normalizeErrors = (value: unknown) => {
      if (Array.isArray(value)) return value as string[];
      if (typeof value === "string" && value.length > 0) return [value];
      return [] as string[];
    };

    const blurErrors = normalizeErrors(field.state.meta.errorMap["onBlur"]);
    const submitErrors = normalizeErrors(field.state.meta.errorMap["onSubmit"]);
    return [...blurErrors, ...submitErrors].filter(Boolean);
  };

  // useEffect that only executes on mount and is checking if there is a user selcted in the cookies
  useEffect(() => {
    const savedUser = Cookies.get("selectedUser");
    const savedDraw = Cookies.get("selectedDraw");
    if (savedDraw) {
      setSelectedDraw(savedDraw);
    }

    if (savedUser) {
      setSelectedUser(savedUser);
    } else {
      setMsg({
        type: "warning",
        headline: t("set-username-headline"),
        text: t("set-username-text"),
      });
    }
  }, []);

  // Fetch users tanstack query
  const { data: info, isLoading: infoIsLoading } = useQuery({
    queryKey: ["info"],
    queryFn: fetchInfo,
  });

  // Query for validating selcted user
  const { data: userData } = useQuery({
    queryKey: ["user", selectedUser],
    enabled: !!selectedUser,
    queryFn: () => confirmUser(selectedUser),
  });

  // Tanstack query (mutate) for sending the form
  const { mutate: mutateForm, isPending: mutateFormIsPending } = useMutation({
    mutationFn: (values: FormData) => submitFormData(values, selectedUser),
    onSuccess: (_, values) => {
      queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
      document.location.href = `/success?id=${nextID}&tickets=${values.tickets}`;
    },
    onError: () => {
      queryClient.invalidateQueries({ queryKey: ["user", selectedUser] });
      setMsg({
        type: "danger",
        headline: t("error"),
        text: t("form-submission-failed"),
      });
    },
  });

  const nextID = userData?.nextID ?? "N/A";

  // function for selecting user
  const handleUserSelection = (username: string | null) => {
    if (username == null || username == "") {
      return;
    }
    setSelectedUser(username);
  };

  // function for selecting draw
  const handleDrawSelection = (draw: string | null) => {
    if (draw == null || draw == "") {
      return;
    }
    setSelectedDraw(draw);
    Cookies.set("selectedDraw", draw);
  };

  return (
    <>
      <SelectUserModal
        showSelectUser={showSelectUser}
        setShowSelectUser={setShowSelectUser}
        info={info}
        infoIsLoading={infoIsLoading}
        selectedUser={selectedUser}
        selectedDraw={selectedDraw}
        handleUserSelection={handleUserSelection}
        handleDrawSelection={handleDrawSelection}
      />

      <QRcodeModal setQRmodal={setQRmodal} QRmodal={QRmodal} />

      <div className="flex-1 w-full flex items-center justify-center from-slate-100 to-blue-50 p-4">
        <Sheet
          variant="plain"
          className="w-full"
          sx={{
            position: "relative",
            maxWidth: 460,
            borderRadius: "24px",
            p: { xs: "1.5rem", sm: "2rem" },
            boxShadow: "0 24px 64px -12px rgba(0,0,0,0.18)",
            background: "#fff",
          }}
        >
          <ButtonGroup
            color="primary"
            disabled={false}
            size="lg"
            spacing={1}
            variant="soft"
          >
            <IconButton onClick={() => setShowSelectUser(true)}>
              <PersonIcon />
            </IconButton>
            <IconButton onClick={() => setQRmodal(true)}>
              <QrCodeIcon />
            </IconButton>
            <IconButton onClick={changeTranslation}>
              <TranslateIcon />
            </IconButton>
            <Typography
              level="title-sm"
              textColor="var(--joy-palette-success-plainColor)"
              sx={{
                fontFamily: "monospace",
                opacity: "100%",
                alignSelf: "center",
              }}
            >
              {`${t("greeting")} ${userData?.fullname ?? t("loading")}`}
            </Typography>
          </ButtonGroup>

          <form
            onSubmit={(e) => {
              e.preventDefault();
              handleSubmit();
            }}
            className="flex flex-col gap-4"
          >
            <Chip
              size="lg"
              variant="solid"
              color="neutral"
              sx={{
                alignSelf: "flex-start",
                borderRadius: "999px",
                fontWeight: 600,
                marginTop: 1,
              }}
            >
              #{nextID ?? "N/A"}
            </Chip>

            {/* Name row */}
            <div className="grid grid-cols-2 gap-3">
              <Field
                name="firstName"
                validators={makeFieldValidator("firstName")}
              >
                {(field) => (
                  <TextField
                    label={t("first-name")}
                    required
                    value={field.state.value}
                    onBlur={field.handleBlur}
                    onChange={field.handleChange}
                    errors={getErrors(field)}
                  />
                )}
              </Field>

              <Field
                name="lastName"
                validators={makeFieldValidator("lastName")}
              >
                {(field) => (
                  <TextField
                    label={t("last-name")}
                    required
                    value={field.state.value}
                    onBlur={field.handleBlur}
                    onChange={field.handleChange}
                    errors={getErrors(field)}
                  />
                )}
              </Field>
            </div>

            <Field name="email" validators={makeFieldValidator("email")}>
              {(field) => (
                <TextField
                  label={t("email")}
                  type="email"
                  required
                  value={field.state.value}
                  onBlur={field.handleBlur}
                  onChange={field.handleChange}
                  errors={getErrors(field)}
                />
              )}
            </Field>

            <Field
              name="phoneNumber"
              validators={makeFieldValidator("phoneNumber")}
            >
              {(field) => (
                <TextField
                  label={t("phone-number")}
                  type="tel"
                  required
                  value={field.state.value}
                  onBlur={field.handleBlur}
                  onChange={field.handleChange}
                  errors={getErrors(field)}
                />
              )}
            </Field>

            {/* Tickets + Invoice + Chocolate toggle */}
            <div className="grid grid-cols-2 gap-3 items-end">
              <FormControl required>
                <FormLabel>{t("tickets")}</FormLabel>
                <Field
                  name="tickets"
                  validators={makeFieldValidator("tickets")}
                >
                  {(field) => {
                    const errors = getErrors(field);
                    return (
                      <>
                        <Input
                          type="number"
                          value={
                            field.state.value === 0 ? "" : field.state.value
                          }
                          onBlur={field.handleBlur}
                          onChange={(e) => {
                            const val = e.target.value;
                            field.handleChange(val === "" ? 0 : Number(val));
                          }}
                          variant="soft"
                          sx={{ borderRadius: "10px" }}
                        />
                        {errors.length > 0 && (
                          <span className="text-red-500 text-sm">
                            {errors[0]}
                          </span>
                        )}
                      </>
                    );
                  }}
                </Field>
              </FormControl>
              <div className="flex flex-col gap-2 pb-2">
                <Checkbox
                  checked={invoice}
                  onChange={(e) => {
                    const checked = e.target.checked;
                    setInvoice(checked);
                    if (!checked) {
                      setFieldValue("companyName", "");
                      setFieldValue("cmpFirstName", "");
                      setFieldValue("cpmLastName", "");
                      setFieldValue("cpmEmail", "");
                      setFieldValue("cpmPhoneNumber", "");
                      setFieldValue("street", "");
                      setFieldValue("postalCode", "");
                    }
                  }}
                  label={t("invoice")}
                  variant="outlined"
                />
                <Field name="chocolates">
                  {(field) => (
                    <Checkbox
                      checked={!!field.state.value}
                      onChange={(e) => field.handleChange(e.target.checked)}
                      label={t("chocolates")}
                      variant="outlined"
                    />
                  )}
                </Field>
              </div>
            </div>

            {/* Invoice details (conditional) */}
            {invoice && (
              <div className="flex flex-col gap-3 pt-4 border-t border-blue-200">
                <Typography level="title-sm" color="primary">
                  {t("invoice-details")}
                </Typography>

                <Field
                  name="companyName"
                  validators={makeFieldValidator("companyName")}
                >
                  {(field) => (
                    <TextField
                      label={t("company-name")}
                      required
                      value={field.state.value}
                      onBlur={field.handleBlur}
                      onChange={field.handleChange}
                      errors={getErrors(field)}
                    />
                  )}
                </Field>

                <div className="grid grid-cols-2 gap-3">
                  <Field
                    name="cmpFirstName"
                    validators={makeFieldValidator("cmpFirstName")}
                  >
                    {(field) => (
                      <TextField
                        label={t("first-name")}
                        required
                        value={field.state.value}
                        onBlur={field.handleBlur}
                        onChange={field.handleChange}
                        errors={getErrors(field)}
                      />
                    )}
                  </Field>

                  <Field
                    name="cpmLastName"
                    validators={makeFieldValidator("cpmLastName")}
                  >
                    {(field) => (
                      <TextField
                        label={t("last-name")}
                        required
                        value={field.state.value}
                        onBlur={field.handleBlur}
                        onChange={field.handleChange}
                        errors={getErrors(field)}
                      />
                    )}
                  </Field>
                </div>

                <Field name="street" validators={makeFieldValidator("street")}>
                  {(field) => (
                    <TextField
                      label={t("street")}
                      required
                      value={field.state.value}
                      onBlur={field.handleBlur}
                      onChange={field.handleChange}
                      errors={getErrors(field)}
                    />
                  )}
                </Field>

                <Field
                  name="postalCode"
                  validators={makeFieldValidator("postalCode")}
                >
                  {(field) => (
                    <TextField
                      label={t("postal-code")}
                      required
                      value={field.state.value}
                      onBlur={field.handleBlur}
                      onChange={field.handleChange}
                      errors={getErrors(field)}
                    />
                  )}
                </Field>

                <Field
                  name="cpmPhoneNumber"
                  validators={makeFieldValidator("cpmPhoneNumber")}
                >
                  {(field) => (
                    <TextField
                      label={t("phone-number")}
                      type="tel"
                      required
                      value={field.state.value}
                      onBlur={field.handleBlur}
                      onChange={field.handleChange}
                      errors={getErrors(field)}
                    />
                  )}
                </Field>

                <Field
                  name="cpmEmail"
                  validators={makeFieldValidator("cpmEmail")}
                >
                  {(field) => (
                    <TextField
                      label={t("email")}
                      type="email"
                      required
                      value={field.state.value}
                      onBlur={field.handleBlur}
                      onChange={field.handleChange}
                      errors={getErrors(field)}
                    />
                  )}
                </Field>
              </div>
            )}

            {/* Payment method selection */}
            <FormControl required>
              <FormLabel>{t("select-payment-method")}</FormLabel>
              <Subscribe selector={(state) => state.values.paymentMethod}>
                {(paymentMethod) => (
                  <div className="flex gap-2 flex-wrap mt-1">
                    {PAYMENT_METHODS.map((method) => (
                      <Button
                        key={method}
                        variant={paymentMethod === method ? "solid" : "soft"}
                        color="primary"
                        onClick={() => {
                          setFieldValue("paymentMethod", method);
                          if (method === "paypal") {
                            setQRmodal(true);
                          }
                        }}
                        sx={{
                          flex: 1,
                          minWidth: "90px",
                          borderRadius: "12px",
                          py: 1.5,
                          textTransform: "none",
                          fontWeight: paymentMethod === method ? 700 : 400,
                        }}
                      >
                        {PAYMENT_LABELS[method]}
                      </Button>
                    ))}
                  </div>
                )}
              </Subscribe>
            </FormControl>

            {mutateFormIsPending ? (
              <div className="flex items-center justify-center">
                <CircularProgress />
              </div>
            ) : (
              <Subscribe selector={(state) => state.values.paymentMethod}>
                {(paymentMethod) => (
                  <Button
                    type="submit"
                    disabled={!paymentMethod}
                    size="lg"
                    sx={{
                      mt: 2,
                      borderRadius: "14px",
                      fontWeight: 700,
                      letterSpacing: "0.05em",
                      background: "linear-gradient(135deg, #2563eb, #1d4ed8)",
                      "&:hover": {
                        background: "linear-gradient(135deg, #1d4ed8, #1e40af)",
                      },
                    }}
                  >
                    {t("submit")}
                  </Button>
                )}
              </Subscribe>
            )}

            {msg && (
              <Alert
                color={msg.type}
                sx={{ flexDirection: "column", alignItems: "flex-start" }}
              >
                <Typography level="title-lg" sx={{ mb: 0.5 }}>
                  {msg.headline}
                </Typography>
                <Typography level="body-sm">{msg.text}</Typography>
              </Alert>
            )}
          </form>
        </Sheet>
      </div>
    </>
  );
};