"use client";

import { useEffect, useState, useRef } from "react";
import Drawer from "../common/Drawer";
import Dropdown from "../common/Dropdown";
import type { CategoryNode, CreateCategoryPayload, UpdateCategoryPayload } from "@/types/category";
import { getImageUrl, handleImageError, CATEGORY_PLACEHOLDER_SVG } from "@/lib/imageUrl";

const TYPE_OPTIONS = ["Main Category", "Sub Category", "Sub Sub Category"] as const;
type CategoryTypeOption = (typeof TYPE_OPTIONS)[number];

export interface EditTarget {
  id: string;
  name: string;
  type?: string;
  level?: number;
  description?: string;
  thumbnail?: string | null;
  categoryThumbnail?: string | null;
  navigation?: string;
  parentId?: string | null;
}

export default function AddCategoryModal({
  open,
  onClose,
  tree,
  onCreate,
  editTarget,
  onUpdate,
  loading = false,
}: {
  open: boolean;
  onClose: () => void;
  tree: CategoryNode[];
  onCreate: (payload: CreateCategoryPayload | FormData) => Promise<boolean | void>;
  editTarget?: EditTarget | null;
  onUpdate?: (id: string, payload: UpdateCategoryPayload | FormData) => Promise<boolean | void>;
  loading?: boolean;
}) {
  const isEdit = Boolean(editTarget);
  const [type, setType] = useState<CategoryTypeOption | "">("");
  const [navigation, setNavigation] = useState<string>("new");
  const [selectedMainId, setSelectedMainId] = useState<string>("");
  const [selectedSubId, setSelectedSubId] = useState<string>("");
  const [name, setName] = useState<string>("");
  const [description, setDescription] = useState<string>("");
  const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
  const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement | null>(null);

  // Derive navigation nodes from tree
  const navNodes =
    tree[0]?.id === "navigation-root"
      ? tree[0].children || tree[0].subCategories || []
      : tree;

  const navigationOptions = navNodes.map((n) => ({
    value: n.navigation || (n.name?.toLowerCase().includes("used") ? "used" : "new"),
    label: n.name || (n.navigation === "used" ? "Used Products" : "New Products"),
  }));

  // Find active navigation node
  const activeNavNode = navNodes.find(
    (n) =>
      n.navigation === navigation ||
      (navigation === "used" && n.name?.toLowerCase().includes("used")) ||
      (navigation === "new" && n.name?.toLowerCase().includes("new"))
  );

  // Main categories (level 1) under active navigation
  const mainCategories = (activeNavNode?.children || activeNavNode?.subCategories || []).filter(
    (c) => c.level === 1 || !c.level
  );
  const mainOptions = mainCategories
    .filter((c) => !isEdit || c.id !== editTarget?.id)
    .map((c) => ({ value: c.id, label: c.name }));

  // Sub categories (level 2) under selected main category
  const activeMainCat = mainCategories.find((c) => c.id === selectedMainId);
  const subCategories = (activeMainCat?.children || activeMainCat?.subCategories || []).filter(
    (c) => c.level === 2 || !c.level
  );
  const subOptions = subCategories
    .filter((c) => !isEdit || c.id !== editTarget?.id)
    .map((c) => ({ value: c.id, label: c.name }));

  useEffect(() => {
    if (open) {
      if (editTarget) {
        let detectedType: CategoryTypeOption = "Main Category";
        if (editTarget.level === 3 || editTarget.type === "sub-sub" || editTarget.type === "Sub Sub Category") {
          detectedType = "Sub Sub Category";
        } else if (editTarget.level === 2 || editTarget.type === "sub" || editTarget.type === "Sub Category") {
          detectedType = "Sub Category";
        }
        setType(detectedType);
        setName(editTarget.name || "");
        setDescription(editTarget.description || "");
        setThumbnailPreview(editTarget.categoryThumbnail || editTarget.thumbnail || null);
        setThumbnailFile(null);
      } else {
        setType("");
        setNavigation(navigationOptions[0]?.value || "new");
        setSelectedMainId("");
        setSelectedSubId("");
        setName("");
        setDescription("");
        setThumbnailFile(null);
        setThumbnailPreview(null);
      }
    }
  }, [open, editTarget]);

  const handleClose = () => {
    setType("");
    setName("");
    setDescription("");
    setSelectedMainId("");
    setSelectedSubId("");
    setThumbnailFile(null);
    setThumbnailPreview(null);
    onClose();
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setThumbnailFile(file);
      setThumbnailPreview(URL.createObjectURL(file));
    }
  };

  const isMain = type === "Main Category";
  const isSub = type === "Sub Category";
  const isSubSub = type === "Sub Sub Category";

  const canSubmit =
    Boolean(type) &&
    name.trim().length > 0 &&
    (isEdit || (
      (!isSub || Boolean(selectedMainId)) &&
      (!isSubSub || (Boolean(selectedMainId) && Boolean(selectedSubId)))
    ));

  const handleConfirm = async () => {
    if (!canSubmit || loading) return;

    if (isEdit && editTarget && onUpdate) {
      if (thumbnailFile) {
        const formData = new FormData();
        formData.append("name", name.trim());
        if (description.trim()) formData.append("description", description.trim());
        formData.append("categoryThumbnail", thumbnailFile);
        await onUpdate(editTarget.id, formData);
      } else {
        const payload: UpdateCategoryPayload = {
          name: name.trim(),
          description: description.trim() || undefined,
        };
        await onUpdate(editTarget.id, payload);
      }
      handleClose();
    } else {
      let resolvedParentId: string | null = null;
      if (isSub) resolvedParentId = selectedMainId;
      if (isSubSub) resolvedParentId = selectedSubId;

      const navLabel = navigation === "used" ? "Used Products" : "New Products";

      if (thumbnailFile) {
        const formData = new FormData();
        formData.append("name", name.trim());
        formData.append("type", type);
        formData.append("navigation", navLabel);
        if (resolvedParentId) formData.append("parentId", resolvedParentId);
        if (description.trim()) formData.append("description", description.trim());
        formData.append("categoryThumbnail", thumbnailFile);
        await onCreate(formData);
      } else {
        const payload: CreateCategoryPayload = {
          name: name.trim(),
          type: type as any,
          navigation: navLabel,
          parentId: resolvedParentId,
          description: description.trim() || undefined,
        };
        await onCreate(payload);
      }
      handleClose();
    }
  };

  return (
    <Drawer
      open={open}
      onClose={handleClose}
      title={isEdit ? "Edit Category" : "Add New Category"}
      width="600px"
      footer={
        <div className="flex items-center justify-end gap-3">
          <button
            type="button"
            onClick={handleClose}
            className="h-10 rounded-lg bg-[#F2F4F7] px-5 text-[13px] font-medium text-[#344054] transition-colors hover:bg-[#E4E7EC]"
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={handleConfirm}
            disabled={!canSubmit || loading}
            className="h-10 rounded-lg bg-[#1657D9] px-5 text-[13px] font-medium text-white transition-colors hover:bg-[#1445B0] disabled:cursor-not-allowed disabled:opacity-50"
          >
            {loading ? "Saving..." : isEdit ? "Save Changes" : "Add Category"}
          </button>
        </div>
      }
    >
      <div className="flex flex-col gap-4">
        <h3 className="text-[14px] font-semibold text-[#101828]">Basic Information</h3>

        {/* Category Type */}
        <div>
          <label className="mb-1.5 block text-[13px] font-medium text-[#344054]">
            Category Type <span className="text-[#DC2626]">*</span>
          </label>
          {isEdit ? (
            <div className="flex h-10 w-full items-center rounded-lg border border-[#E4E7EC] bg-[#F5F7F9] px-3 text-[13px] text-[#475467]">
              {type || "Category"}
            </div>
          ) : (
            <Dropdown
              value={type}
              placeholder="Select Category Type"
              options={TYPE_OPTIONS.map((opt) => ({ value: opt, label: opt }))}
              onChange={(value) => {
                setType(value as CategoryTypeOption);
                setSelectedMainId("");
                setSelectedSubId("");
              }}
            />
          )}
        </div>

        {/* Navigation Selector (for Add mode) */}
        {!isEdit && type && (
          <div>
            <label className="mb-1.5 block text-[13px] font-medium text-[#344054]">
              Navigation <span className="text-[#DC2626]">*</span>
            </label>
            <Dropdown
              value={navigation}
              placeholder="Select Navigation"
              options={
                navigationOptions.length > 0
                  ? navigationOptions
                  : [
                      { value: "new", label: "New Products" },
                      { value: "used", label: "Used Products" },
                    ]
              }
              onChange={(value) => {
                setNavigation(value);
                setSelectedMainId("");
                setSelectedSubId("");
              }}
            />
          </div>
        )}

        {/* Main Category Selector (for Sub and Sub-Sub categories) */}
        {!isEdit && (isSub || isSubSub) && (
          <div>
            <label className="mb-1.5 block text-[13px] font-medium text-[#344054]">
              Main Category <span className="text-[#DC2626]">*</span>
            </label>
            <Dropdown
              value={selectedMainId}
              placeholder="Select Main Category"
              options={mainOptions}
              onChange={(value) => {
                setSelectedMainId(value);
                setSelectedSubId("");
              }}
            />
          </div>
        )}

        {/* Sub Category Selector (for Sub-Sub categories) */}
        {!isEdit && isSubSub && (
          <div>
            <label className="mb-1.5 block text-[13px] font-medium text-[#344054]">
              Sub Category <span className="text-[#DC2626]">*</span>
            </label>
            <Dropdown
              value={selectedSubId}
              placeholder="Select Sub Category"
              options={subOptions}
              onChange={setSelectedSubId}
            />
          </div>
        )}

        {/* Category Name */}
        {type && (
          <div>
            <label className="mb-1.5 block text-[13px] font-medium text-[#344054]">
              {isMain ? "Main Category Name" : isSub ? "Sub Category Name" : "Category Name"}{" "}
              <span className="text-[#DC2626]">*</span>
            </label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Enter Name"
              className="h-10 w-full rounded-lg border border-[#D0D5DD] px-3 text-[13px] text-[#101828] outline-none placeholder:text-[#98A2B3] focus:border-[#1657D9]"
            />
          </div>
        )}

        {/* Description (optional) */}
        {type && (
          <div>
            <label className="mb-1.5 block text-[13px] font-medium text-[#344054]">
              Description <span className="text-[#98A2B3]">(Optional)</span>
            </label>
            <textarea
              rows={3}
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Enter category description..."
              className="w-full rounded-lg border border-[#D0D5DD] p-3 text-[13px] text-[#101828] outline-none placeholder:text-[#98A2B3] focus:border-[#1657D9]"
            />
          </div>
        )}

        {/* Thumbnail Upload (optional) */}
        {type && (
          <div>
            <label className="mb-1.5 block text-[13px] font-medium text-[#344054]">
              Category Thumbnail <span className="text-[#98A2B3]">(Optional)</span>
            </label>
            <div className="flex items-center gap-4">
              {thumbnailPreview && (
                <div className="relative h-16 w-16 overflow-hidden rounded-lg border border-[#E4E7EC]">
                  <img
                    src={getImageUrl(thumbnailPreview)}
                    alt="Thumbnail preview"
                    className="h-full w-full object-cover"
                    onError={(e) => handleImageError(e, CATEGORY_PLACEHOLDER_SVG)}
                  />
                  <button
                    type="button"
                    onClick={() => {
                      setThumbnailFile(null);
                      setThumbnailPreview(null);
                      if (fileInputRef.current) fileInputRef.current.value = "";
                    }}
                    className="absolute right-0.5 top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-black/60 text-[10px] text-white hover:bg-black"
                  >
                    ✕
                  </button>
                </div>
              )}
              <input
                ref={fileInputRef}
                type="file"
                accept="image/*"
                onChange={handleFileChange}
                className="hidden"
                id="category-thumbnail-file"
              />
              <label
                htmlFor="category-thumbnail-file"
                className="inline-flex h-9 cursor-pointer items-center justify-center rounded-lg border border-[#D0D5DD] bg-white px-3 text-[13px] font-medium text-[#344054] transition-colors hover:bg-[#F2F4F7]"
              >
                {thumbnailPreview ? "Change Image" : "Upload Thumbnail"}
              </label>
            </div>
          </div>
        )}
      </div>
    </Drawer>
  );
}