"use client";

import { useEffect, useState } from "react";
import {
  LuPlus,
  LuSearch,
  LuPencil,
  LuTrash2,
  LuX,
  LuCheck,
} from "react-icons/lu";

const API_URL = "http://localhost:5000/api";

type Category = {
  id: number;
  name: string;
  slug: string;
  icon: string;
  status: "active" | "inactive";
  sort_order: number;
  product_count: number;
};

type Subcategory = {
  id: number;
  category_id: number;
  name: string;
  slug: string;
  status: "active" | "inactive";
  sort_order: number;
  category_name?: string;
  product_count: number;
};

type SubcategoryForm = {
  category_id: string;
  name: string;
  slug: string;
  status: "active" | "inactive";
  sort_order: number;
};

const emptyForm: SubcategoryForm = {
  category_id: "",
  name: "",
  slug: "",
  status: "active",
  sort_order: 0,
};

export default function SubcategoriesPage() {
  const [categories, setCategories] = useState<Category[]>([]);
  const [subcategories, setSubcategories] = useState<Subcategory[]>([]);

  const [search, setSearch] = useState("");
  const [loading, setLoading] = useState(true);

  const [showModal, setShowModal] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);

  const [form, setForm] =
    useState<SubcategoryForm>(emptyForm);

  const [saving, setSaving] = useState(false);

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

  async function loadData() {
    try {
      setLoading(true);

      const [categoriesResponse, subcategoriesResponse] =
        await Promise.all([
          fetch(`${API_URL}/categories`),
          fetch(`${API_URL}/subcategories`),
        ]);

      if (!categoriesResponse.ok) {
        throw new Error("Failed to fetch categories");
      }

      if (!subcategoriesResponse.ok) {
        throw new Error("Failed to fetch subcategories");
      }

      const categoriesData = await categoriesResponse.json();
      const subcategoriesData =
        await subcategoriesResponse.json();

      setCategories(categoriesData);
      setSubcategories(subcategoriesData);
    } catch (error) {
      console.error("Load data error:", error);

      alert(
        error instanceof Error
          ? error.message
          : "Failed to load data."
      );
    } finally {
      setLoading(false);
    }
  }

  function openAddModal() {
    setEditingId(null);

    setForm({
      ...emptyForm,
      category_id:
        categories.length > 0
          ? String(categories[0].id)
          : "",
    });

    setShowModal(true);
  }

  async function openEditModal(id: number) {
    try {
      const response = await fetch(
        `${API_URL}/subcategories/${id}`
      );

      if (!response.ok) {
        throw new Error("Failed to fetch subcategory");
      }

      const data = await response.json();

      setEditingId(id);

      setForm({
        category_id: String(data.category_id),
        name: data.name,
        slug: data.slug,
        status: data.status,
        sort_order: data.sort_order,
      });

      setShowModal(true);
    } catch (error) {
      console.error("Fetch subcategory error:", error);

      alert(
        error instanceof Error
          ? error.message
          : "Failed to load subcategory."
      );
    }
  }

  function closeModal() {
    if (saving) return;

    setShowModal(false);
    setEditingId(null);
    setForm(emptyForm);
  }

  function handleNameChange(value: string) {
    setForm((previous) => ({
      ...previous,
      name: value,
      slug:
        editingId === null
          ? value
              .toLowerCase()
              .trim()
              .replace(/[^a-z0-9]+/g, "-")
              .replace(/^-+|-+$/g, "")
          : previous.slug,
    }));
  }

  async function handleSubmit(
    event: React.FormEvent
  ) {
    event.preventDefault();

    if (!form.category_id) {
      alert("Please select a category.");
      return;
    }

    if (!form.name.trim()) {
      alert("Please enter subcategory name.");
      return;
    }

    if (!form.slug.trim()) {
      alert("Please enter subcategory slug.");
      return;
    }

    try {
      setSaving(true);

      const url = editingId
        ? `${API_URL}/subcategories/${editingId}`
        : `${API_URL}/subcategories`;

      const method = editingId ? "PUT" : "POST";

      const response = await fetch(url, {
        method,
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          category_id: Number(form.category_id),
          name: form.name.trim(),
          slug: form.slug.trim(),
          status: form.status,
          sort_order: form.sort_order,
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(
          data.message || "Something went wrong"
        );
      }

      closeModal();

      await loadData();
    } catch (error) {
      console.error("Save subcategory error:", error);

      alert(
        error instanceof Error
          ? error.message
          : "Failed to save subcategory."
      );
    } finally {
      setSaving(false);
    }
  }

  async function deleteSubcategory(id: number) {
    const subcategory = subcategories.find(
      (item) => item.id === id
    );

    if (!subcategory) return;

    const confirmed = window.confirm(
      `Are you sure you want to delete "${subcategory.name}"?`
    );

    if (!confirmed) return;

    try {
      const response = await fetch(
        `${API_URL}/subcategories/${id}`,
        {
          method: "DELETE",
        }
      );

      const data = await response.json();

      if (!response.ok) {
        throw new Error(
          data.message || "Failed to delete subcategory"
        );
      }

      await loadData();
    } catch (error) {
      console.error(
        "Delete subcategory error:",
        error
      );

      alert(
        error instanceof Error
          ? error.message
          : "Failed to delete subcategory."
      );
    }
  }

  const filteredSubcategories =
    subcategories.filter((subcategory) => {
      const searchText = search.toLowerCase();

      return (
        subcategory.name
          .toLowerCase()
          .includes(searchText) ||
        (subcategory.category_name || "")
          .toLowerCase()
          .includes(searchText)
      );
    });

  return (
    <div>
      {/* PAGE HEADER */}
      <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-800">
            Subcategories
          </h1>

          <p className="mt-1 text-sm text-gray-400">
            Manage pharmacy product subcategories.
          </p>
        </div>

        <button
          type="button"
          onClick={openAddModal}
          disabled={categories.length === 0}
          className="inline-flex items-center justify-center gap-2 rounded-xl bg-[#B570D4] px-5 py-3 text-sm font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
        >
          <LuPlus size={18} />
          Add Subcategory
        </button>
      </div>

      {/* SEARCH */}
      <div className="mb-5 rounded-2xl border border-[#EAECEF] bg-white p-4">
        <div className="relative max-w-md">
          <LuSearch
            size={19}
            className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
          />

          <input
            type="text"
            value={search}
            onChange={(event) =>
              setSearch(event.target.value)
            }
            placeholder="Search subcategories..."
            className="w-full rounded-xl border border-[#E5E7EB] py-3 pl-10 pr-4 text-sm outline-none transition focus:border-[#B570D4]"
          />
        </div>
      </div>

      {/* TABLE */}
      <div className="overflow-hidden rounded-2xl border border-[#EAECEF] bg-white">
        <div className="overflow-x-auto">
          <table className="w-full min-w-[800px]">
            <thead>
              <tr className="border-b border-[#EAECEF] bg-[#FAFAFB]">
                <th className="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide text-gray-400">
                  Subcategory
                </th>

                <th className="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide text-gray-400">
                  Category
                </th>

                <th className="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide text-gray-400">
                  Products
                </th>

                <th className="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide text-gray-400">
                  Status
                </th>

                <th className="px-6 py-4 text-right text-xs font-semibold uppercase tracking-wide text-gray-400">
                  Actions
                </th>
              </tr>
            </thead>

            <tbody>
              {loading ? (
                <tr>
                  <td
                    colSpan={5}
                    className="px-6 py-16 text-center text-sm text-gray-400"
                  >
                    Loading subcategories...
                  </td>
                </tr>
              ) : filteredSubcategories.length === 0 ? (
                <tr>
                  <td
                    colSpan={5}
                    className="px-6 py-16 text-center"
                  >
                    <p className="text-sm font-medium text-gray-600">
                      {search
                        ? "No subcategories found"
                        : "No subcategories yet"}
                    </p>

                    {!search && (
                      <p className="mt-1 text-xs text-gray-400">
                        Click "Add Subcategory" to create
                        your first subcategory.
                      </p>
                    )}
                  </td>
                </tr>
              ) : (
                filteredSubcategories.map(
                  (subcategory) => (
                    <tr
                      key={subcategory.id}
                      className="border-b border-[#F0F0F2] last:border-b-0 hover:bg-[#FCFCFD]"
                    >
                      <td className="px-6 py-4">
                        <div>
                          <p className="text-sm font-semibold text-gray-700">
                            {subcategory.name}
                          </p>

                          <p className="mt-1 text-xs text-gray-400">
                            {subcategory.slug}
                          </p>
                        </div>
                      </td>

                      <td className="px-6 py-4">
                        <span className="rounded-lg bg-[#F8F1FB] px-3 py-1.5 text-xs font-medium text-[#B570D4]">
                          {subcategory.category_name ||
                            "Unknown"}
                        </span>
                      </td>

                      <td className="px-6 py-4">
                        <span className="text-sm font-medium text-gray-700">
                          {subcategory.product_count}
                        </span>
                      </td>

                      <td className="px-6 py-4">
                        {subcategory.status ===
                        "active" ? (
                          <span className="inline-flex items-center gap-1.5 rounded-full bg-green-50 px-3 py-1 text-xs font-semibold text-green-600">
                            <LuCheck size={13} />
                            Active
                          </span>
                        ) : (
                          <span className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-500">
                            Inactive
                          </span>
                        )}
                      </td>

                      <td className="px-6 py-4">
                        <div className="flex justify-end gap-2">
                          <button
                            type="button"
                            onClick={() =>
                              openEditModal(
                                subcategory.id
                              )
                            }
                            className="flex h-9 w-9 items-center justify-center rounded-lg border border-[#EAECEF] text-gray-500 transition hover:border-[#B570D4] hover:text-[#B570D4]"
                            title="Edit"
                          >
                            <LuPencil size={16} />
                          </button>

                          <button
                            type="button"
                            onClick={() =>
                              deleteSubcategory(
                                subcategory.id
                              )
                            }
                            className="flex h-9 w-9 items-center justify-center rounded-lg border border-[#EAECEF] text-gray-500 transition hover:border-red-200 hover:bg-red-50 hover:text-red-500"
                            title="Delete"
                          >
                            <LuTrash2 size={16} />
                          </button>
                        </div>
                      </td>
                    </tr>
                  )
                )
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* MODAL */}
      {showModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
          <div className="w-full max-w-lg rounded-2xl bg-white shadow-2xl">
            {/* MODAL HEADER */}
            <div className="flex items-center justify-between border-b border-[#EAECEF] px-6 py-5">
              <div>
                <h2 className="text-lg font-bold text-gray-800">
                  {editingId
                    ? "Edit Subcategory"
                    : "Add Subcategory"}
                </h2>

                <p className="mt-1 text-xs text-gray-400">
                  {editingId
                    ? "Update subcategory information."
                    : "Create a new pharmacy subcategory."}
                </p>
              </div>

              <button
                type="button"
                onClick={closeModal}
                className="flex h-9 w-9 items-center justify-center rounded-lg text-gray-400 transition hover:bg-gray-100 hover:text-gray-700"
              >
                <LuX size={19} />
              </button>
            </div>

            {/* FORM */}
            <form onSubmit={handleSubmit}>
              <div className="space-y-5 p-6">
                {/* CATEGORY */}
                <div>
                  <label className="mb-2 block text-sm font-medium text-gray-700">
                    Parent Category
                  </label>

                  <select
                    value={form.category_id}
                    onChange={(event) =>
                      setForm((previous) => ({
                        ...previous,
                        category_id:
                          event.target.value,
                      }))
                    }
                    className="w-full rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 text-sm outline-none focus:border-[#B570D4]"
                  >
                    <option value="">
                      Select category
                    </option>

                    {categories
                      .filter(
                        (category) =>
                          category.status === "active"
                      )
                      .map((category) => (
                        <option
                          key={category.id}
                          value={category.id}
                        >
                          {category.name}
                        </option>
                      ))}
                  </select>
                </div>

                {/* NAME */}
                <div>
                  <label className="mb-2 block text-sm font-medium text-gray-700">
                    Subcategory Name
                  </label>

                  <input
                    type="text"
                    value={form.name}
                    onChange={(event) =>
                      handleNameChange(
                        event.target.value
                      )
                    }
                    placeholder="e.g. Pain Relief"
                    className="w-full rounded-xl border border-[#E5E7EB] px-4 py-3 text-sm outline-none focus:border-[#B570D4]"
                  />
                </div>

                {/* SLUG */}
                <div>
                  <label className="mb-2 block text-sm font-medium text-gray-700">
                    Slug
                  </label>

                  <input
                    type="text"
                    value={form.slug}
                    onChange={(event) =>
                      setForm((previous) => ({
                        ...previous,
                        slug: event.target.value,
                      }))
                    }
                    placeholder="pain-relief"
                    className="w-full rounded-xl border border-[#E5E7EB] px-4 py-3 text-sm outline-none focus:border-[#B570D4]"
                  />
                </div>

                {/* STATUS + SORT */}
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="mb-2 block text-sm font-medium text-gray-700">
                      Status
                    </label>

                    <select
                      value={form.status}
                      onChange={(event) =>
                        setForm((previous) => ({
                          ...previous,
                          status:
                            event.target.value as
                              | "active"
                              | "inactive",
                        }))
                      }
                      className="w-full rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 text-sm outline-none focus:border-[#B570D4]"
                    >
                      <option value="active">
                        Active
                      </option>

                      <option value="inactive">
                        Inactive
                      </option>
                    </select>
                  </div>

                  <div>
                    <label className="mb-2 block text-sm font-medium text-gray-700">
                      Sort Order
                    </label>

                    <input
                      type="number"
                      min="0"
                      value={form.sort_order}
                      onChange={(event) =>
                        setForm((previous) => ({
                          ...previous,
                          sort_order:
                            Number(
                              event.target.value
                            ) || 0,
                        }))
                      }
                      className="w-full rounded-xl border border-[#E5E7EB] px-4 py-3 text-sm outline-none focus:border-[#B570D4]"
                    />
                  </div>
                </div>
              </div>

              {/* MODAL FOOTER */}
              <div className="flex justify-end gap-3 border-t border-[#EAECEF] px-6 py-4">
                <button
                  type="button"
                  onClick={closeModal}
                  disabled={saving}
                  className="rounded-xl border border-[#EAECEF] px-5 py-2.5 text-sm font-medium text-gray-600 transition hover:bg-gray-50"
                >
                  Cancel
                </button>

                <button
                  type="submit"
                  disabled={saving}
                  className="rounded-xl bg-[#B570D4] px-5 py-2.5 text-sm font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
                >
                  {saving
                    ? "Saving..."
                    : editingId
                    ? "Update Subcategory"
                    : "Create Subcategory"}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}