"use client";

import { useEffect, useState } from "react";

import axios from "axios";

import Cookies from "js-cookie";

import toast, { Toaster } from "react-hot-toast";

import { z } from "zod";

import { zodResolver } from "@hookform/resolvers/zod";

import { Controller, useForm } from "react-hook-form";

import { Button } from "@/components/shadcnui/button";

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/shadcnui/card";

import {
  Field,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/shadcnui/field";

import { Input } from "@/components/shadcnui/input";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/shadcnui/select";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/shadcnui/table";

const schema = z.object({
  userId: z.string().min(1, "Please select user"),

  quarterlyPoints: z
    .string()
    .min(1, "Quarterly points required")
    .refine((val) => !isNaN(Number(val)), {
      message: "Enter valid number",
    }),

  annualPoints: z
    .string()
    .min(1, "Annual points required")
    .refine((val) => !isNaN(Number(val)), {
      message: "Enter valid number",
    }),

  quarterlyValidTill: z.string().min(1, "Quarterly date required"),

  annualValidTill: z.string().min(1, "Annual date required"),
});

type FormType = z.infer<typeof schema>;

interface UserType {
  _id: string;
  name: string;
  role: string;
}

interface ClubPointType {
  _id: string;

  userId: UserType;

  quarterlyPoints: number;

  annualPoints: number;

  quarterlyValidTill: string;

  annualValidTill: string;
}

const ClubPointsPage = () => {
  const token = Cookies.get("kero_token");

  const [loading, setLoading] = useState(false);

  const [users, setUsers] = useState<UserType[]>([]);

  const [clubPoints, setClubPoints] = useState<ClubPointType[]>([]);

  const form = useForm<FormType>({
    resolver: zodResolver(schema),

    mode: "onSubmit",

    defaultValues: {
      userId: "",

      quarterlyPoints: "",

      annualPoints: "",

      quarterlyValidTill: "",

      annualValidTill: "",
    },
  });

  const getUsers = async () => {
    try {
      const response = await axios.get(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}/users/all_users?page=1&limit=500`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );

      setUsers(response.data.data || []);
    } catch {
      toast.error("Failed to load users");
    }
  };

  const getClubPoints = async () => {
    try {
      const response = await axios.get(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}/schemes/club-points/admin/all`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );

      setClubPoints(response.data.clubPoints || []);
    } catch {
      toast.error("Failed to load club points");
    }
  };

  useEffect(() => {
    getUsers();

    getClubPoints();
  }, []);

  const onSubmit = async (values: FormType) => {
    try {
      setLoading(true);

      await axios.put(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}/schemes/club-points/${values.userId}`,
        {
          quarterlyPoints: Number(values.quarterlyPoints),

          annualPoints: Number(values.annualPoints),

          quarterlyValidTill: values.quarterlyValidTill,

          annualValidTill: values.annualValidTill,
        },
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );

      toast.success("Club points saved successfully");

      form.reset();

      getClubPoints();
    } catch (error) {
      console.log(error);

      if (axios.isAxiosError(error)) {
        toast.error(
          error.response?.data?.message || "Failed to save club points",
        );
      }
    } finally {
      setLoading(false);
    }
  };

  const handleEdit = (item: ClubPointType) => {
    form.clearErrors();

    form.setValue("userId", item.userId._id);

    form.setValue("quarterlyPoints", String(item.quarterlyPoints));

    form.setValue("annualPoints", String(item.annualPoints));

    form.setValue("quarterlyValidTill", item.quarterlyValidTill.split("T")[0]);

    form.setValue("annualValidTill", item.annualValidTill.split("T")[0]);

    toast.success("Loaded for editing");

    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };

  return (
    <div className="mt-6 space-y-8">
      <Toaster position="top-center" />

      <Card>
        <CardHeader>
          <CardTitle>Assign / Update Club Points</CardTitle>
        </CardHeader>

        <CardContent>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="space-y-5">
            <FieldGroup>
              <div className="grid grid-cols-1 gap-4 md:grid-cols-1">
                <Controller
                  name="userId"
                  control={form.control}
                  render={({ field, fieldState }) => (
                    <Field data-invalid={fieldState.invalid}>
                      <FieldLabel>User</FieldLabel>

                      <Select
                        value={field.value}
                        onValueChange={(value) => field.onChange(value)}>
                        <SelectTrigger>
                          <SelectValue placeholder="Select User" />
                        </SelectTrigger>

                        <SelectContent>
                          {users.map((user) => (
                            <SelectItem
                              key={user._id}
                              value={user._id}>
                              {user.name} ({user.role})
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>

                      {fieldState.error && (
                        <FieldError errors={[fieldState.error]} />
                      )}
                    </Field>
                  )}
                />
                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                  {" "}
                  {[
                    "quarterlyPoints",
                    "quarterlyValidTill",
                    "annualPoints",
                    "annualValidTill",
                  ].map((name) => (
                    <Controller
                      key={name}
                      name={name as keyof FormType}
                      control={form.control}
                      render={({ field, fieldState }) => (
                        <Field data-invalid={fieldState.invalid}>
                          <FieldLabel>{name}</FieldLabel>

                          <Input
                            {...field}
                            type={name.includes("Till") ? "date" : "number"}
                          />

                          {fieldState.error && (
                            <FieldError errors={[fieldState.error]} />
                          )}
                        </Field>
                      )}
                    />
                  ))}
                </div>
              </div>
            </FieldGroup>

            <Button
              type="submit"
              disabled={loading}>
              {loading ? "Saving..." : "Save Club Points"}
            </Button>
          </form>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Club Points List</CardTitle>
        </CardHeader>

        <CardContent className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>User</TableHead>
                <TableHead>Role</TableHead>
                <TableHead>Quarterly</TableHead>
                <TableHead>Annual</TableHead>
                <TableHead>Quarterly Till</TableHead>
                <TableHead>Annual Till</TableHead>
                <TableHead>Action</TableHead>
              </TableRow>
            </TableHeader>

            <TableBody>
              {clubPoints.map((item) => (
                <TableRow key={item._id}>
                  <TableCell>{item.userId?.name}</TableCell>

                  <TableCell>{item.userId?.role}</TableCell>

                  <TableCell>{item.quarterlyPoints}</TableCell>

                  <TableCell>{item.annualPoints}</TableCell>

                  <TableCell>
                    {item.quarterlyValidTill ?
                      item.quarterlyValidTill.split("T")[0]
                    : "-"}
                  </TableCell>

                  <TableCell>
                    {item.annualValidTill ?
                      item.annualValidTill.split("T")[0]
                    : "-"}
                  </TableCell>

                  <TableCell>
                    <Button
                      size="sm"
                      onClick={() => handleEdit(item)}>
                      Edit
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
};

export default ClubPointsPage;