import { Switch } from "@/components/ui/switch";
import { clx } from "@/helpers/utils";
import { useEditorStore } from "@/pages/editor/store/editorStore";

type MaskSettingsProps = {
  objectId: string;
};

/**
 * MaskSettings - تنظیمات masking برای objects
 * 
 * دو حالت دارد:
 * 1. برای shapes: تبدیل shape به mask (isMask)
 * 2. برای objects: انتخاب یک mask برای apply کردن (maskId)
 */
const MaskSettings = ({ objectId }: MaskSettingsProps) => {
  const { objects, updateObject, selectedObjectId, setSelectedObjectId } = useEditorStore();

  const object = objects.find((obj) => obj.id === objectId);

  if (!object) return null;

  const canBeMask = object.type === "rectangle";
  const isMask = object.isMask || false;
  const currentShowGuide = object.showMaskGuide !== false;

  // Get all available masks (excluding self if it's a shape)
  const availableMasks = objects.filter(
    (obj) => obj.isMask && obj.id !== objectId && obj.visible !== false
  );

  const handleToggleMask = (checked: boolean) => {
    useEditorStore.getState().commitObjectHistoryBeforeChange();
    updateObject(objectId, {
      isMask: checked,
      showMaskGuide: checked ? true : undefined,
      maskId: undefined // Clear maskId when becoming a mask
    });

    if (checked && selectedObjectId === objectId) {
      setSelectedObjectId(null);
    }
  };

  const handleToggleGuide = (checked: boolean) => {
    useEditorStore.getState().commitObjectHistoryBeforeChange();
    updateObject(objectId, { showMaskGuide: checked });
  };

  const handleSelectMask = (maskId: string) => {
    useEditorStore.getState().commitObjectHistoryBeforeChange();
    updateObject(objectId, { maskId: maskId || undefined });
  };

  const handleToggleMaskInvert = (checked: boolean) => {
    useEditorStore.getState().commitObjectHistoryBeforeChange();
    updateObject(objectId, { maskInvert: checked });
  };

  return (
    <div className={clx(
      "p-4 border-b space-y-4 border-t border-border",
      !canBeMask && "border-b-0 p-0"
    )}>
      {/* Section 1: Convert shape to mask (only for shapes) */}
      {canBeMask && (
        <div>
          <div className="flex items-center justify-between mb-3">
            <div className="flex flex-col gap-1">
              <span className="text-sm font-medium">استفاده به عنوان ماسک</span>
              <span className="text-xs text-gray-500">
                این شکل را به ماسک تبدیل کن
              </span>
            </div>
            <Switch
              checked={isMask}
              onCheckedChange={handleToggleMask}
            />
          </div>

          {isMask && (
            <>
              <div className="flex items-center justify-between mb-3">
                <span className="text-sm">نمایش راهنمای ماسک</span>
                <Switch
                  checked={currentShowGuide}
                  onCheckedChange={handleToggleGuide}
                />
              </div>

              <div className="p-2 bg-blue-50 rounded-md">
                <p className="text-xs text-blue-700">
                  💡 این شکل به ماسک تبدیل شد. از تنظیمات objects دیگر می‌توانید این ماسک را apply کنید.
                </p>
              </div>
            </>
          )}
        </div>
      )}

      {/* Section 2: Apply mask to object (for all non-mask objects) */}
      {!isMask && availableMasks.length > 0 && (
        <div>
          <div className="mb-3">
            <span className="text-sm font-medium">اعمال ماسک</span>
            <p className="text-xs text-gray-500 mt-1">
              یک ماسک برای این object انتخاب کنید
            </p>
          </div>

          <div className="space-y-2 max-h-48 overflow-y-auto">
            {availableMasks.map((mask) => {
              const isActive = object.maskId === mask.id;
              const maskLabel = `${mask.shapeType === "circle" ? "دایره" : mask.shapeType === "triangle" ? "مثلث" : mask.shapeType === "abstract" ? "ستاره" : "مربع"} `;

              return (
                <div
                  key={mask.id}
                  className={`flex items-center justify-between p-2 rounded-lg border transition-colors ${isActive ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300"
                    }`}
                >
                  <span className="text-sm flex-1">{maskLabel}</span>
                  <Switch
                    checked={isActive}
                    onCheckedChange={(checked) => handleSelectMask(checked ? mask.id : "")}
                  />
                </div>
              );
            })}
          </div>

          {object.maskId && (
            <>
              <div className="flex items-center justify-between mt-4 pt-3 border-t">
                <div className="flex flex-col gap-0.5">
                  <span className="text-xs font-medium">معکوس کردن ماسک</span>
                  <span className="text-[10px] text-gray-400">نمایش خارج از محدوده ماسک</span>
                </div>
                <Switch
                  checked={object.maskInvert === false}
                  onCheckedChange={(checked) => handleToggleMaskInvert(!checked)}
                />
              </div>

              {/* نمایش وضعیت گروه‌بندی */}
              {(() => {
                const maskObj = objects.find(m => m.id === object.maskId);
                const isGrouped = object.groupId && maskObj?.groupId === object.groupId;

                return (
                  <div className={`mt-3 p-2 rounded-md ${isGrouped ? "bg-purple-50" : "bg-green-50"}`}>
                    <p className={`text-xs ${isGrouped ? "text-purple-700" : "text-green-700"}`}>
                      {isGrouped ? (
                        <>
                          🔗 گروه‌بندی شده: Object و ماسک با هم حرکت می‌کنند. برای لغو، object را انتخاب کنید و دکمه "لغو گروه‌بندی" را بزنید.
                        </>
                      ) : (
                        <>
                          ✓ ماسک اعمال شد. {object.maskInvert === false ? "قسمت‌های خارج از ماسک نمایش داده می‌شوند." : "فقط داخل محدوده ماسک نمایش داده می‌شود."}
                          <br />
                          💡 برای گروه‌بندی با ماسک، object را انتخاب کنید و دکمه "گروه‌بندی با ماسک" را بزنید.
                        </>
                      )}
                    </p>
                  </div>
                );
              })()}
            </>
          )}
        </div>
      )}
    </div>
  );
};

export default MaskSettings;

