import type { MembershipClubChargeCenter } from "@/lib/features/charge-centers/models";
import { useCoreFetcher } from "@/lib/features/useCoreFetcher";
import {
  Button,
  Flex,
  Grid,
  Stack,
  Textarea,
  TextInput,
  Title,
} from "@mantine/core";
import { useForm } from "@mantine/form";
import { zod4Resolver } from "mantine-form-zod-resolver";
import { toast } from "sonner";
import z from "zod";

const schema = z.object({
  name: z.string().min(2, "Name is required"),
  currency: z.string().min(2, "Currency is required"),
  viewpointChargeCenterID: z
    .string()
    .min(2, "Viewpoint charge center ID is required"),
  note: z.string().optional(),
});

type SchemaType = z.infer<typeof schema>;

const ChargeCenterFormBlock: React.FC<{
  chargeCenter?: MembershipClubChargeCenter;
}> = ({ chargeCenter }) => {
  const form = useForm<SchemaType>({
    initialValues: {
      name: chargeCenter?.name ?? "",
      currency: chargeCenter?.currency ?? "",
      viewpointChargeCenterID: chargeCenter?.viewpoint_charge_center_id ?? "",
      note: chargeCenter?.note ?? "",
    },
    validate: zod4Resolver(schema),
  });

  const { trigger: createTrigger, isLoading: createLoading } = useCoreFetcher(
    "create-membership-charge-center",
    "post",
    {
      onSuccess: () => {
        toast.success("Charge Center created successfully");
        form.reset();
      },
      onError: (error) => {
        toast.error(
          (error as Error)?.message ?? "Failed to create Charge Center",
        );
      },
    },
  );

  const { trigger: updateTrigger, isLoading: updateLoading } = useCoreFetcher(
    "update-membership-charge-center",
    "put",
    {
      onSuccess: () => toast.success("Charge Center updated successfully"),
      onError: (error) =>
        toast.error(
          (error as Error)?.message ?? "Failed to update Charge Center",
        ),
    },
  );

  const handleSubmit = async () => {
    const result = form.validate();
    if (!result.hasErrors) {
      const parsed = schema.safeParse(form.values);
      if (parsed.success) {
        if (chargeCenter?.id) {
          await updateTrigger(parsed.data);
        } else {
          await createTrigger(parsed.data);
        }
      }
    }
  };
  return (
    <Stack bg={"grey.0"} mih={"100vh"} p={"sm"}>
      <form>
        <Stack gap={20} bg={"white.0"} p={"sm"} bdrs={"sm"}>
          <Title order={6}>Charge Center Details</Title>
          <Grid columns={6} gutter={"lg"}>
            <Grid.Col span={3}>
              <TextInput
                label="Charge Center Name"
                placeholder="Enter Charge Center name"
                key={form.key("name")}
                {...form.getInputProps("name")}
              />
            </Grid.Col>
            <Grid.Col span={3}>
              <TextInput
                label="Currency"
                placeholder="Enter Currency"
                key={form.key("currency")}
                {...form.getInputProps("currency")}
              />
            </Grid.Col>
            <Grid.Col span={3}>
              <TextInput
                label="View Point Charge Center ID"
                placeholder="Enter View Point Charge Center ID"
                key={form.key("viewpointChargeCenterID")}
                {...form.getInputProps("viewpointChargeCenterID")}
              />
            </Grid.Col>
            <Grid.Col span={6}>
              <Textarea
                rows={5}
                label="Note"
                key={form.key("note")}
                {...form.getInputProps("note")}
              />
            </Grid.Col>
          </Grid>
        </Stack>
        <Flex justify={"end"} mt={20}>
          <Button
            variant="filled"
            bg="blue.1"
            c="blue.9"
            onClick={handleSubmit}
            loading={createLoading || updateLoading}
          >
            Save
          </Button>
        </Flex>
      </form>
    </Stack>
  );
};

export default ChargeCenterFormBlock;