"use client";

import { useEffect, useState } from "react";

import axios from "axios";

import Cookies from "js-cookie";

import toast from "react-hot-toast";

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

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

import { Textarea } from "@/components/shadcnui/textarea";

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

interface SchemeType {
  _id: string;

  title: string;

  description: string;

  type: string;

  applicableRoles: string[];

  pdfUrl: string;

  validTill: string;

  isActive: boolean;

  uploadedBy: {
    name: string;

    role: string;
  };
}

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

const schemeTypes = ["QUARTERLY", "ANNUAL"];

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

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

  const [editId, setEditId] = useState("");

  const [schemes, setSchemes] = useState<SchemeType[]>([]);

  const [form, setForm] = useState({
    title: "",

    description: "",

    type: "ANNUAL",

    validTill: "",

    applicableRoles: [] as string[],

    pdf: null as File | null,
  });

  const resetForm = () => {
    setEditId("");

    setForm({
      title: "",

      description: "",

      type: "ANNUAL",

      validTill: "",

      applicableRoles: [],

      pdf: null,
    });
  };

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

      if (response.data.success) {
        setSchemes(response.data.schemes);
      }
    } catch (error) {
      console.log(error);

      toast.error("Failed to load schemes");
    }
  };

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

  const handleRole = (role: string) => {
    if (form.applicableRoles.includes(role)) {
      setForm({
        ...form,

        applicableRoles: form.applicableRoles.filter((item) => item !== role),
      });
    } else {
      setForm({
        ...form,

        applicableRoles: [...form.applicableRoles, role],
      });
    }
  };

  const submitScheme = async () => {
    try {
      if (!form.title.trim()) {
        toast.error("Title required");

        return;
      }

      if (!form.description.trim()) {
        toast.error("Description required");

        return;
      }

      if (!form.validTill.trim()) {
        toast.error("Valid Till required");

        return;
      }

      if (form.applicableRoles.length === 0) {
        toast.error("Select roles");

        return;
      }

      if (!editId && !form.pdf) {
        toast.error("PDF required");

        return;
      }

      setLoading(true);

      const body = new FormData();

      body.append("title", form.title);

      body.append("description", form.description);

      body.append("type", form.type);

      body.append("validTill", form.validTill);

      form.applicableRoles.forEach((role) => {
        body.append(
          "applicableRoles",

          role,
        );
      });

      if (form.pdf) {
        body.append(
          "pdf",

          form.pdf,
        );
      }

      if (editId) {
        await axios.put(
          `${process.env.NEXT_PUBLIC_API_BASE_URL}/schemes/${editId}`,

          body,

          {
            headers: {
              Authorization: `Bearer ${token}`,

              "Content-Type": "multipart/form-data",
            },
          },
        );

        toast.success("Scheme updated successfully");
      } else {
        await axios.post(
          `${process.env.NEXT_PUBLIC_API_BASE_URL}/schemes/create`,

          body,

          {
            headers: {
              Authorization: `Bearer ${token}`,

              "Content-Type": "multipart/form-data",
            },
          },
        );

        toast.success("Scheme created successfully");
      }

      resetForm();

      getSchemes();
    } catch (error: any) {
      console.log(error);

      toast.error(error?.response?.data?.message || "Something went wrong");
    } finally {
      setLoading(false);
    }
  };

  const deleteScheme = async (id: string) => {
    try {
      await axios.delete(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}/schemes/${id}`,

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

      toast.success("Scheme deleted");

      getSchemes();
    } catch (error: any) {
      toast.error(error?.response?.data?.message || "Delete failed");
    }
  };

  const editScheme = (item: SchemeType) => {
    setEditId(item._id);

    setForm({
      title: item.title,

      description: item.description,

      type: item.type,

      validTill: item.validTill,

      applicableRoles: item.applicableRoles,

      pdf: null,
    });

    window.scrollTo({
      top: 0,

      behavior: "smooth",
    });
  };

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

        <CardContent className="space-y-4">
          <Input
            placeholder="Title"
            value={form.title}
            onChange={(e) =>
              setForm({
                ...form,

                title: e.target.value,
              })
            }
          />

          <Textarea
            placeholder="Description"
            value={form.description}
            onChange={(e) =>
              setForm({
                ...form,

                description: e.target.value,
              })
            }
          />

          <select
            className="w-full rounded-md border p-3"
            value={form.type}
            onChange={(e) =>
              setForm({
                ...form,

                type: e.target.value,
              })
            }>
            {schemeTypes.map((item) => (
              <option
                key={item}
                value={item}>
                {item}
              </option>
            ))}
          </select>

          <Input
            placeholder="Valid Till"
            value={form.validTill}
            onChange={(e) =>
              setForm({
                ...form,

                validTill: e.target.value,
              })
            }
          />

          <div className="flex flex-wrap gap-2">
            {roles.map((role) => (
              <Button
                key={role}
                type="button"
                variant={
                  form.applicableRoles.includes(role) ? "default" : "outline"
                }
                onClick={() => handleRole(role)}>
                {role}
              </Button>
            ))}
          </div>

          <Input
            type="file"
            accept=".pdf"
            onChange={(e) => {
              const file = e.target.files?.[0];

              if (!file) return;

              if (file.type !== "application/pdf") {
                toast.error("Only PDF allowed");

                return;
              }

              setForm({
                ...form,

                pdf: file,
              });
            }}
          />

          <Button
            disabled={loading}
            onClick={submitScheme}>
            {loading ?
              "Please Wait..."
            : editId ?
              "Update Scheme"
            : "Create Scheme"}
          </Button>
        </CardContent>
      </Card>

      {schemes.map((item) => (
        <Card key={item._id}>
          <CardContent className="space-y-3 pt-6">
            <h2 className="font-semibold">{item.title}</h2>

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

            <p>Type: {item.type}</p>

            <p>Roles: {item.applicableRoles.join(", ")}</p>

            <p>Valid Till: {item.validTill}</p>

            <a
              href={`https://app.keroindia.com${item.pdfUrl}`}
              target="_blank">
              View PDF
            </a>

            <div className="flex gap-3">
              <Button onClick={() => editScheme(item)}>Edit</Button>

              <Button
                variant="destructive"
                onClick={() => deleteScheme(item._id)}>
                Delete
              </Button>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
};

export default CreateSchema;