import { useState, useEffect, useRef, type KeyboardEvent } from "react";
import type { ReactElement } from "react";
import { useLocation } from "react-router-dom";
import { Layout } from "@/components/layout/Layout";
import { usePermissions } from "@/hooks/usePermissions";
import {
  PrimaryButton,
  DataTable,
  ActionDropdown,
  DeleteConfirmationModal,
  Modal,
  FormField,
  FormTextArea,
  FormSelect,
  FilterDropdown,
  Pagination,
  type Column,
  SearchBox,
} from "@/components/shared";
import { Plus, Code, X, Tag } from "lucide-react";
import { notificationService } from "@/services/notification-service";
import { moduleService } from "@/services/module-service";
import { showToast } from "@/utils/toast";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const categorySchema = z.object({
  name: z.string().min(1, "Category name is required").max(100),
  code: z
    .string()
    .min(1, "Category slug is required")
    .regex(
      /^[a-z0-9_]+$/,
      "Slug must be lowercase alphanumeric with underscores",
    ),
  description: z.string().optional(),
  module_id: z.string().optional(),
});

const codeSchema = z.object({
  code: z.string().min(1, "Code is required").max(50),
  name: z.string().min(1, "Display name is required").max(100),
  description: z.string().optional(),
  default_channels: z.array(z.string()),
  default_priority: z.string(),
});

type CategoryFormValues = z.infer<typeof categorySchema>;
type CodeFormValues = z.infer<typeof codeSchema>;

// ── Variable Tag Input ──────────────────────────────────────────────────────
const VariableTagInput = ({
  variables,
  onChange,
}: {
  variables: string[];
  onChange: (vars: string[]) => void;
}) => {
  const [input, setInput] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

  const addTag = (val: string) => {
    const tag = val.trim().replace(/\s+/g, "_").toLowerCase();
    if (tag && !variables.includes(tag)) {
      onChange([...variables, tag]);
    }
    setInput("");
  };

  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter" || e.key === "," || e.key === " ") {
      e.preventDefault();
      addTag(input);
    } else if (e.key === "Backspace" && !input && variables.length > 0) {
      onChange(variables.slice(0, -1));
    }
  };

  const removeTag = (tag: string) =>
    onChange(variables.filter((v) => v !== tag));

  return (
    <div>
      <label className="block text-xs font-medium text-gray-700 mb-1.5">
        <span className="flex items-center gap-1.5">
          <Tag className="w-3.5 h-3.5 text-indigo-500" />
          Supported Variables
          <span className="text-gray-400 font-normal">
            (used in template placeholders)
          </span>
        </span>
      </label>
      <div
        className="flex flex-wrap gap-1.5 p-2 border border-gray-200 rounded-lg bg-white min-h-[42px] cursor-text focus-within:ring-2 focus-within:ring-indigo-500/20 focus-within:border-indigo-400 transition-all"
        onClick={() => inputRef.current?.focus()}
      >
        {variables.map((v) => (
          <span
            key={v}
            className="flex items-center gap-1 bg-indigo-50 border border-indigo-200 text-indigo-700 text-[11px] font-mono font-bold px-2 py-0.5 rounded-full"
          >
            {`{{${v}}}`}
            <button
              type="button"
              onClick={() => removeTag(v)}
              className="hover:text-red-600 transition-colors ml-0.5"
            >
              <X className="w-3 h-3" />
            </button>
          </span>
        ))}
        <input
          ref={inputRef}
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={handleKeyDown}
          onBlur={() => input && addTag(input)}
          placeholder={
            variables.length === 0
              ? "Type variable name, press Enter or comma..."
              : ""
          }
          className="flex-1 min-w-[120px] text-xs outline-none bg-transparent text-gray-700 placeholder-gray-300"
        />
      </div>
      <p className="text-[10px] text-gray-400 mt-1">
        These are the <code>{"{{variable}}"}</code> placeholders admins can use
        in templates for this event code.
      </p>
    </div>
  );
};

const NotificationMaster = (): ReactElement => {
  const { canCreate, canUpdate, canDelete } = usePermissions();
  const location = useLocation();
  const [categories, setCategories] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);

  // Pagination & Search for Categories
  const [currentPage, setCurrentPage] = useState(1);
  const [limit, setLimit] = useState(10);
  const [totalItems, setTotalItems] = useState(0);
  const [totalPages, setTotalPages] = useState(0);
  const [search, setSearch] = useState("");
  const [moduleFilter, setModuleFilter] = useState<string | null>(null);

  // Category Modal
  const [categoryModalOpen, setCategoryModalOpen] = useState<boolean>(false);
  const [editingCategory, setEditingCategory] = useState<any>(null);

  const {
    register: registerCategory,
    handleSubmit: handleCategorySubmit,
    reset: resetCategory,
    setValue: setCategoryValue,
    formState: { errors: categoryErrors },
    watch: watchCategory,
  } = useForm<CategoryFormValues>({
    resolver: zodResolver(categorySchema),
    defaultValues: { name: "", code: "", description: "", module_id: "" },
  });

  // View Mode
  const [viewMode, setViewMode] = useState<"categories" | "codes">(
    "categories",
  );
  const [codeFormModalOpen, setCodeFormModalOpen] = useState<boolean>(false);
  const [selectedCategory, setSelectedCategory] = useState<any>(null);
  const [codes, setCodes] = useState<any[]>([]);
  const [isCodesLoading, setIsCodesLoading] = useState<boolean>(false);

  // Pagination for Codes
  const [codePage, setCodePage] = useState(1);
  const [codeTotal, setCodeTotal] = useState(0);
  const [codePages, setCodePages] = useState(0);
  const [codeLimit, setCodeLimit] = useState(5);

  const [editingCode, setEditingCode] = useState<any>(null);
  const [codeVariables, setCodeVariables] = useState<string[]>([]);

  const {
    register: registerCode,
    handleSubmit: handleCodeSubmit,
    reset: resetCode,
    formState: { errors: codeErrors },
  } = useForm<CodeFormValues>({
    resolver: zodResolver(codeSchema),
    defaultValues: {
      code: "",
      name: "",
      description: "",
      default_channels: ["in_app", "email"],
      default_priority: "normal",
    },
  });

  // Delete Modal
  const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false);
  const [deleteTarget, setDeleteTarget] = useState<{
    id: string;
    name: string;
    type: "category" | "code";
  } | null>(null);

  const [modules, setModules] = useState<any[]>([]);

  const fetchCategories = async () => {
    try {
      setIsLoading(true);
      const res = await notificationService.getCategories({
        limit,
        offset: (currentPage - 1) * limit,
        search,
        module_id: moduleFilter || undefined,
      });
      if (res.success) {
        setCategories(res.data);
        setTotalItems(res.pagination?.total || res.data.length);
        setTotalPages(res.pagination?.pages || 1);
      }
    } catch (err: any) {
      showToast.error(err.message || "Failed to fetch categories");
    } finally {
      setIsLoading(false);
    }
  };

  const fetchModules = async () => {
    try {
      const res = await moduleService.getDropdown();
      if (res.success) setModules(res.data);
    } catch (err) {
      console.error("Failed to fetch modules", err);
    }
  };

  useEffect(() => {
    fetchCategories();
    fetchModules();
  }, [currentPage, limit, search, moduleFilter]);

  useEffect(() => {
    setViewMode("categories");
  }, [location]);

  const fetchCodes = async (
    category: any,
    page: number = 1,
    currentLimit: number = codeLimit,
  ) => {
    try {
      setIsCodesLoading(true);
      const res = await notificationService.getCodesByCategory(category.id, {
        limit: currentLimit,
        offset: (page - 1) * currentLimit,
      });
      if (res.success) {
        setCodes(res.data);
        setCodeTotal(res.pagination?.total || res.data.length);
        setCodePages(res.pagination?.pages || 1);
      }
    } catch (err: any) {
      showToast.error("Failed to fetch codes");
    } finally {
      setIsCodesLoading(false);
    }
  };

  const handleOpenCodes = async (category: any) => {
    setSelectedCategory(category);
    setCodePage(1);
    setEditingCode(null);
    setCodeVariables([]);
    resetCode({
      code: "",
      name: "",
      description: "",
      default_channels: ["in_app", "email"],
      default_priority: "normal",
    });
    await fetchCodes(category, 1, codeLimit);
    setViewMode("codes");
  };

  useEffect(() => {
    if (selectedCategory && viewMode === "codes") {
      fetchCodes(selectedCategory, codePage, codeLimit);
    }
  }, [codePage, codeLimit, selectedCategory, viewMode]);

  const onSaveCategory = async (data: CategoryFormValues) => {
    try {
      const payload = { ...data };
      if (!payload.module_id) delete payload.module_id;

      if (editingCategory) {
        await notificationService.updateCategory(editingCategory.id, payload);
        showToast.success("Category updated");
      } else {
        await notificationService.createCategory(payload);
        showToast.success("Category created");
      }
      setCategoryModalOpen(false);
      resetCategory();
      fetchCategories();
    } catch (err: any) {
      showToast.error(
        err.response?.data?.error?.message || err.message || "Action failed",
      );
    }
  };

  const onSaveCode = async (data: CodeFormValues) => {
    try {
      const payload = { ...data, variables: codeVariables };
      if (editingCode) {
        await notificationService.updateCode(editingCode.id, payload);
        showToast.success("Code updated");
      } else {
        await notificationService.createCode(selectedCategory.id, payload);
        showToast.success("Code created");
      }
      setEditingCode(null);
      setCodeVariables([]);
      resetCode({
        code: "",
        name: "",
        description: "",
        default_channels: ["in_app", "email"],
        default_priority: "normal",
      });
      setCodeFormModalOpen(false);
      fetchCodes(selectedCategory, codePage);
      fetchCategories();
    } catch (err: any) {
      showToast.error(
        err.response?.data?.error?.message || err.message || "Action failed",
      );
    }
  };

  const handleDelete = async () => {
    if (!deleteTarget) return;
    try {
      if (deleteTarget.type === "category") {
        await notificationService.deleteCategory(deleteTarget.id);
        fetchCategories();
      } else {
        await notificationService.deleteCode(deleteTarget.id);
        fetchCodes(selectedCategory, codePage);
        fetchCategories();
      }
      setDeleteModalOpen(false);
      showToast.success(
        `${deleteTarget.type === "category" ? "Category" : "Code"} deleted`,
      );
    } catch (err: any) {
      showToast.error(err.message || "Delete failed");
    }
  };

  const columns: Column<any>[] = [
    {
      key: "name",
      label: "Category Name",
      render: (c) => (
        <span className="font-semibold text-[#0f1724]">{c.name}</span>
      ),
    },
    {
      key: "code",
      label: "Slug / Code",
      render: (c) => (
        <code className="text-[10px] bg-gray-100 px-1.5 py-0.5 rounded font-mono text-gray-600">
          {c.code}
        </code>
      ),
    },
    {
      key: "description",
      label: "Description",
      render: (c) => (
        <span className="text-xs text-gray-500 line-clamp-1">
          {c.description || "-"}
        </span>
      ),
    },
    {
      key: "module_id",
      label: "Assoc. Module",
      render: (c) => (
        <span className="text-[10px] text-blue-500 font-bold uppercase">
          {c.module_code || "System"}
        </span>
      ),
    },
    {
      key: "actions",
      label: "Actions",
      align: "right",
      render: (c) => (
        <div className="flex justify-end gap-3 items-center">
          <button
            onClick={() => handleOpenCodes(c)}
            className="flex items-center gap-1.5 text-[11px] font-bold text-blue-600 hover:text-blue-800 transition-colors uppercase"
          >
            <Code className="w-3.5 h-3.5" />
            Codes ({c.code_count || 0})
          </button>
          <ActionDropdown
            onEdit={
              canUpdate("notifications")
                ? () => {
                    setEditingCategory(c);
                    resetCategory({
                      name: c.name,
                      code: c.code,
                      description: c.description || "",
                      module_id: c.module_id || "",
                    });
                    setCategoryModalOpen(true);
                  }
                : undefined
            }
            onDelete={
              canDelete("notifications")
                ? () => {
                    setDeleteTarget({ id: c.id, name: c.name, type: "category" });
                    setDeleteModalOpen(true);
                  }
                : undefined
            }
          />
        </div>
      ),
    },
  ];

  const codeColumns: Column<any>[] = [
    {
      key: "code",
      label: "Trigger Code",
      render: (c) => (
        <code className="text-[11px] font-mono font-bold text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded border border-indigo-100">
          {c.code}
        </code>
      ),
    },
    {
      key: "name",
      label: "Name",
      render: (c) => (
        <span className="font-semibold text-[#0f1724]">{c.name}</span>
      ),
    },
    {
      key: "variables",
      label: "Variables",
      render: (c) => (
        <div className="flex flex-wrap gap-1">
          {Array.isArray(c.variables) && c.variables.length > 0 ? (
            c.variables.map((v: string) => (
              <span
                key={v}
                className="text-[10px] font-mono bg-indigo-50 text-indigo-600 border border-indigo-100 px-1.5 py-0.5 rounded-full"
              >
                {`{{${v}}}`}
              </span>
            ))
          ) : (
            <span className="text-[10px] text-gray-300 italic">none</span>
          )}
        </div>
      ),
    },
    {
      key: "actions",
      label: "Actions",
      align: "right",
      render: (c) => (
        <div className="flex justify-end gap-3 whitespace-nowrap">
          {canUpdate("notifications") && (
            <button
              onClick={() => {
                setEditingCode(c);
                setCodeVariables(Array.isArray(c.variables) ? c.variables : []);
                resetCode({
                  code: c.code,
                  name: c.name,
                  description: c.description || "",
                  default_channels: c.default_channels,
                  default_priority: c.default_priority,
                });
                setCodeFormModalOpen(true);
              }}
              className="text-blue-600 hover:text-blue-800 font-bold text-[11px] uppercase"
            >
              Edit
            </button>
          )}
          {canDelete("notifications") && (
            <button
              onClick={() => {
                setDeleteTarget({
                  id: c.id,
                  name: c.code,
                  type: "code",
                });
                setDeleteModalOpen(true);
              }}
              className="text-red-500 hover:text-red-700 font-bold text-[11px] uppercase"
            >
              Delete
            </button>
          )}
        </div>
      ),
    },
  ];

  const breadcrumbs =
    viewMode === "codes"
      ? [
          { label: "Notification Master", path: "/notification-master" },
          { label: `Event Codes (${selectedCategory?.name})` },
        ]
      : [{ label: "Notification Master" }];

  return (
    <Layout
      currentPage="Notification Master"
      breadcrumbs={breadcrumbs}
      pageHeader={{
        title:
          viewMode === "codes"
            ? `Event Codes: ${selectedCategory?.name}`
            : "Notification Master Management",
        description:
          viewMode === "codes"
            ? `Manage event trigger codes and variables for the ${selectedCategory?.name} category.`
            : "Manage notification categories and event codes across the platform.",
        action:
          viewMode === "codes" ? (
            <div className="flex gap-3">
              <button
                onClick={() => setViewMode("categories")}
                className="flex items-center gap-1.5 px-3 py-1.5 border border-gray-200 rounded-lg text-xs font-semibold text-gray-600 bg-white hover:bg-gray-50 transition-all shadow-sm"
              >
                ← Back to Categories
              </button>
              {canCreate("notifications") && (
                <PrimaryButton
                  onClick={() => {
                    setEditingCode(null);
                    setCodeVariables([]);
                    resetCode({
                      code: "",
                      name: "",
                      description: "",
                      default_channels: ["in_app", "email"],
                      default_priority: "normal",
                    });
                    setCodeFormModalOpen(true);
                  }}
                  className="flex gap-2"
                >
                  <Plus className="w-4 h-4" /> New Code
                </PrimaryButton>
              )}
            </div>
          ) : undefined,
      }}
    >
      {viewMode === "categories" ? (
        <div className="overflow-hidden flex flex-col min-h-[500px]">
          <div className="pb-2 flex flex-wrap justify-between items-center bg-gray-50/50 gap-4">
            <div className="flex items-center gap-4 flex-1">
              <SearchBox
                value={search}
                onChange={(val) => {
                  setSearch(val);
                  setCurrentPage(1);
                }}
                placeholder="Search categories..."
                containerClassName="relative flex-1 max-w-sm"
              />

              <FilterDropdown
                label="Module"
                value={moduleFilter}
                onChange={(val) => {
                  setModuleFilter(val as string | null);
                  setCurrentPage(1);
                }}
                options={modules.map((m) => ({ value: m.id, label: m.name }))}
                placeholder="All Modules"
                isSearchable
              />
            </div>
            {canCreate("notifications") && (
              <PrimaryButton
                onClick={() => {
                  setEditingCategory(null);
                  resetCategory({
                    name: "",
                    code: "",
                    description: "",
                    module_id: "",
                  });
                  setCategoryModalOpen(true);
                }}
                className="flex gap-2"
              >
                <Plus className="w-4 h-4" /> New Category
              </PrimaryButton>
            )}
          </div>

          {/* <div className="flex-1"> */}
            <DataTable
              columns={columns}
              data={categories}
              isLoading={isLoading}
              keyExtractor={(c) => c.id}
            />
          {/* </div> */}

          <Pagination
            currentPage={currentPage}
            totalPages={totalPages}
            totalItems={totalItems}
            limit={limit}
            onPageChange={setCurrentPage}
            onLimitChange={(l) => {
              setLimit(l);
              setCurrentPage(1);
            }}
          />
        </div>
      ) : (
        <>
          <DataTable
            columns={codeColumns}
            data={codes}
            isLoading={isCodesLoading}
            keyExtractor={(c) => c.id}
            emptyMessage="No codes registered for this category."
          />

          <Pagination
            currentPage={codePage}
            totalPages={codePages}
            totalItems={codeTotal}
            limit={codeLimit}
            onPageChange={setCodePage}
            onLimitChange={(l) => {
              setCodeLimit(l);
              setCodePage(1);
            }}
          />
        </>
      )}

      {/* Category Modal */}
      <Modal
        isOpen={categoryModalOpen}
        onClose={() => setCategoryModalOpen(false)}
        title={editingCategory ? "Edit Category" : "New Category"}
        maxWidth="lg"
        footer={
          <>
            <button
              onClick={() => setCategoryModalOpen(false)}
              className="px-4 py-2 text-sm text-gray-600"
            >
              Cancel
            </button>
            <PrimaryButton onClick={handleCategorySubmit(onSaveCategory)}>
              {editingCategory ? "Update" : "Create"}
            </PrimaryButton>
          </>
        }
      >
        <div className="grid grid-cols-2 gap-4">
          <FormField
            label="Category Name"
            required
            placeholder="e.g. Workflow"
            error={categoryErrors.name?.message}
            {...registerCategory("name")}
          />
          <FormField
            label="Slug (Code)"
            required
            placeholder="e.g. workflow"
            error={categoryErrors.code?.message}
            {...registerCategory("code")}
          />
        </div>
        <FormTextArea
          label="Description"
          rows={2}
          error={categoryErrors.description?.message}
          {...registerCategory("description")}
        />
        <FormSelect
          label="Associated Module"
          value={watchCategory("module_id")}
          options={[
            { value: "", label: "System (No Module)" },
            ...modules.map((m) => ({ value: m.id, label: m.name })),
          ]}
          onValueChange={(val) =>
            setCategoryValue("module_id", val, { shouldValidate: true })
          }
          placeholder="Select a module"
          error={categoryErrors.module_id?.message}
        />
      </Modal>

      {/* Code Form Modal */}
      <Modal
        isOpen={codeFormModalOpen}
        onClose={() => {
          setCodeFormModalOpen(false);
          setEditingCode(null);
          setCodeVariables([]);
          resetCode({
            code: "",
            name: "",
            description: "",
            default_channels: ["in_app", "email"],
            default_priority: "normal",
          });
        }}
        title={editingCode ? "Edit Event Code" : "Add New Event Trigger"}
        maxWidth="lg"
        footer={
          <>
            <button
              onClick={() => {
                setCodeFormModalOpen(false);
                setEditingCode(null);
                setCodeVariables([]);
                resetCode({
                  code: "",
                  name: "",
                  description: "",
                  default_channels: ["in_app", "email"],
                  default_priority: "normal",
                });
              }}
              className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
            >
              Cancel
            </button>
            <PrimaryButton onClick={handleCodeSubmit(onSaveCode)}>
              {editingCode ? "Update Code" : "Add Code"}
            </PrimaryButton>
          </>
        }
      >
        <div className="grid grid-cols-2 gap-4">
          <FormField
            label="Code (e.g. task_assigned)"
            required
            error={codeErrors.code?.message}
            disabled={!!editingCode}
            {...registerCode("code")}
          />
          <FormField
            label="Display Name"
            required
            error={codeErrors.name?.message}
            {...registerCode("name")}
          />
        </div>
        <FormTextArea
          label="Description"
          rows={2}
          error={codeErrors.description?.message}
          {...registerCode("description")}
        />

        {/* Variables tag input */}
        <VariableTagInput
          variables={codeVariables}
          onChange={setCodeVariables}
        />

        <div className="text-[10px] text-gray-400 font-medium">
          Auto-populates default channels (In-App, Email)
        </div>
      </Modal>

      <DeleteConfirmationModal
        isOpen={deleteModalOpen}
        onClose={() => setDeleteModalOpen(false)}
        onConfirm={handleDelete}
        title={`Delete ${deleteTarget?.type}`}
        message={`Are you sure you want to delete ${deleteTarget?.name}? This action cannot be undone.`}
        itemName={deleteTarget?.name || ""}
      />
    </Layout>
  );
};

export default NotificationMaster;