"use client";

import { useEffect, useRef, useState } from "react";

import axios from "axios";

import Cookies from "js-cookie";

import Image from "next/image";

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";
import toast, { Toaster } from "react-hot-toast";

const roles = [
  "PLUMBER",
  "MASON",
  "INTERIOR",
  "ARCHITECT",
  "DEALER",
  "DISTRIBUTOR",
  "SALES",
];

const categorySchema = z.object({
  name: z.string().min(3, "Name required"),

  description: z.string().min(3, "Description required"),

  allowedRoles: z.array(z.string()).min(1, "At least one role required"),

  icon: z.string(),
});

type CategoryFormType = z.infer<typeof categorySchema>;

interface CategoryType {
  _id: string;

  name: string;

  description: string;

  icon: string;

  allowedRoles: string[];

  isActive: boolean;
}

const ProductCategory = () => {
  const [categories, setCategories] = useState<CategoryType[]>([]);

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

  const [icon, setIcon] = useState<File | null>(null);

  const [editId, setEditId] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement | null>(null);

  const token = Cookies.get("kero_token");

  const form = useForm<CategoryFormType>({
    resolver: zodResolver(categorySchema),

    defaultValues: {
      name: "",
      description: "",

      allowedRoles: [],
      icon: "",
    },
  });

  const getAllCategories = async () => {
    try {
      const response = await axios.get(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}/categories/all_Categories`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );

      if (response.data.success) {
        setCategories(response.data.categories);
      }
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getAllCategories();
  }, []);

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

      // const allowedRoles = [
      //   values.role1,
      //   values.role2,
      //   values.role3,
      //   values.role4,
      //   values.role5,
      //   values.role6,
      // ].filter(Boolean);

      const formData = new FormData();

      formData.append("name", values.name);

      formData.append("description", values.description);

      // allowedRoles.forEach((role) => {
      //   if (role) {
      //     formData.append("allowedRoles[]", role);
      //   }
      // });
      values.allowedRoles.forEach((role) => {
        formData.append("allowedRoles[]", role);
      });

      if (icon) {
        formData.append("icon", icon);
      }

      if (editId) {
        await axios.put(
          `${process.env.NEXT_PUBLIC_API_BASE_URL}/categories/${editId}`,
          formData,
          {
            headers: {
              Authorization: `Bearer ${token}`,
              "Content-Type": "multipart/form-data",
            },
          },
        );

        toast.success("Category updated!");
      } else {
        await axios.post(
          `${process.env.NEXT_PUBLIC_API_BASE_URL}/categories`,
          formData,
          {
            headers: {
              Authorization: `Bearer ${token}`,
              "Content-Type": "multipart/form-data",
            },
          },
        );

        toast.success("Category created!");
      }

      form.reset();

      setIcon(null);
      if (fileInputRef.current) {
        fileInputRef.current.value = "";
      }

      setEditId(null);

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

      if (axios.isAxiosError(error)) {
        const message =
          error.response?.data?.message || error.response?.data?.error || "";

        if (
          message.toLowerCase().includes("duplicate") ||
          message.toLowerCase().includes("already") ||
          message.toLowerCase().includes("exists")
        ) {
          toast.error("Category already exists");
        } else {
          toast.error(message || "Unable to save category");
        }

        console.log(error.response?.data);
      } else {
        toast.error("Something went wrong");
      }
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async (id: string) => {
    try {
      await axios.delete(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}/categories/${id}`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );
      toast.error("Category deleted!");

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

  const handleEdit = (category: CategoryType) => {
    setEditId(category._id);

    form.setValue("name", category.name);

    form.setValue("description", category.description);

    form.setValue("allowedRoles", category.allowedRoles || []);
  };

  return (
    <div className="mt-6 space-y-8">
      <Card>
        <CardHeader>
          <CardTitle>{editId ? "Edit Category" : "Create Category"}</CardTitle>
        </CardHeader>

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

                      <Input
                        {...field}
                        placeholder="Enter category name"
                      />

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

                <Controller
                  name="description"
                  control={form.control}
                  render={({ field, fieldState }) => (
                    <Field data-invalid={fieldState.invalid}>
                      <FieldLabel>Description</FieldLabel>

                      <Input
                        {...field}
                        placeholder="Enter description"
                      />

                      {fieldState.invalid && (
                        <FieldError errors={[fieldState.error]} />
                      )}
                    </Field>
                  )}
                />
                <div className="">
                  <Controller
                    name="allowedRoles"
                    control={form.control}
                    render={({ field, fieldState }) => (
                      <Field
                        className="w-140"
                        data-invalid={fieldState.invalid}>
                        <FieldLabel>Allowed Roles</FieldLabel>
                        <Toaster />
                        <div className="grid grid-cols-2 gap-3 rounded-lg border p-4 md:grid-cols-3">
                          {roles.map((role) => {
                            const checked = field.value?.includes(role);

                            return (
                              <label
                                key={role}
                                className="flex cursor-pointer items-center gap-2 rounded-md border p-3 hover:bg-gray-100 dark:hover:bg-gray-900">
                                <input
                                  type="checkbox"
                                  className=""
                                  checked={checked}
                                  onChange={(e) => {
                                    if (e.target.checked) {
                                      field.onChange([...field.value, role]);
                                    } else {
                                      field.onChange(
                                        field.value.filter(
                                          (item) => item !== role,
                                        ),
                                      );
                                    }
                                  }}
                                />

                                <span>{role}</span>
                              </label>
                            );
                          })}
                        </div>

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

                  <Field>
                    <FieldLabel>Icon</FieldLabel>

                    <Input
                      ref={fileInputRef}
                      type="file"
                      onChange={(e) => {
                        if (e.target.files && e.target.files[0]) {
                          setIcon(e.target.files[0]);
                        }
                      }}
                    />
                  </Field>
                </div>
              </div>
            </FieldGroup>

            <Button
              type="submit"
              disabled={loading}>
              {loading ?
                "Saving..."
              : editId ?
                "Update Category"
              : "Create Category"}
            </Button>
          </form>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>All Categories</CardTitle>
        </CardHeader>

        <CardContent className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Icon</TableHead>

                <TableHead>Name</TableHead>

                <TableHead>Description</TableHead>

                <TableHead>Allowed Roles</TableHead>

                <TableHead>Status</TableHead>

                <TableHead>Actions</TableHead>
              </TableRow>
            </TableHeader>

            <TableBody>
              {categories.map((item) => (
                <TableRow key={item._id}>
                  <TableCell>
                    <Image
                      src={`http://app.keroindia.com${item.icon}`}
                      alt={item.name}
                      width={50}
                      height={50}
                      className="rounded-md object-cover"
                    />
                  </TableCell>

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

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

                  <TableCell>{item.allowedRoles?.join(", ")}</TableCell>

                  <TableCell>{item.isActive ? "Active" : "Inactive"}</TableCell>

                  <TableCell>
                    <div className="flex gap-2">
                      <Button
                        type="button"
                        size="sm"
                        onClick={() => handleEdit(item)}>
                        Edit
                      </Button>

                      <Button
                        type="button"
                        size="sm"
                        variant="destructive"
                        onClick={() => handleDelete(item._id)}>
                        Delete
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
};

export default ProductCategory;