Pien-Studio/apps/web/components/editor/layers-panel.tsx

"use client";

import {
  getLayerRuntimeSource,
  type Layer,
  type LayerEffect,
} from "@pien-studio/types";
import Image from "next/image";
import { Eye, EyeOff } from "lucide-react";
import { useTranslations } from "../../hooks/use-translations";
import {
  panelClass,
  panelCounterClass,
  panelInsetClass,
  panelTitleClass,
} from "../../lib/theme";

const EFFECT_LABELS: Record<string, string> = {
  "face-blur": "Face Blur",
};

type Props = {
  layers: Layer[];
  selectedLayerId: string | null;
  isDark: boolean;
  onSelectLayer: (layerId: string) => void;
  onSetLayerVisible: (layerId: string, visible: boolean) => void;
  onSetEffectEnabled: (
    layerId: string,
    kind: LayerEffect["kind"],
    enabled: boolean,
  ) => void;
  onMoveLayerOrder: (direction: "up" | "down") => void;
  onRemoveSelectedLayer: () => void;
  onAddLayer?: () => void;
};

export function LayersPanel({
  layers,
  selectedLayerId,
  isDark,
  onSelectLayer,
  onSetLayerVisible,
  onSetEffectEnabled,
  onMoveLayerOrder,
  onRemoveSelectedLayer,
  onAddLayer,
}: Props) {
  const { t } = useTranslations();

  return (
    <div className={panelClass(isDark)}>
      <div className="flex items-center justify-between">
        <h2
          className={`text-xs font-semibold uppercase tracking-wide ${panelTitleClass(isDark)}`}
        >
          {t("editor.layers")}
        </h2>
        <div className="flex items-center gap-1.5">
          {onAddLayer ? (
            <button
              type="button"
              onClick={onAddLayer}
              title={t("editor.newLayer")}
              className={`rounded border px-1.5 py-0.5 text-[10px] font-semibold ${isDark ? "border-white/20 text-[#d7dae0] hover:bg-white/10" : "border-black/20 text-[#1f2430] hover:bg-black/5"}`}
            >
              + New
            </button>
          ) : null}
          <span
            className={`rounded-full px-2 py-0.5 text-[10px] font-semibold ${panelCounterClass(isDark)}`}
          >
            {layers.length}
          </span>
        </div>
      </div>
      <div
        className={`mt-3 max-h-[420px] space-y-0.5 overflow-auto rounded-md border p-1 ${panelInsetClass(isDark)}`}
      >
        {layers
          .slice()
          .reverse()
          .map((layer, idx) => {
            const isSelected = layer.id === selectedLayerId;
            const isRaster =
              layer.type === "raster" || layer.type === "sticker";
            const sourceUri = getLayerRuntimeSource(layer);
            const hasEffects = layer.effects.length > 0;
            const isHidden = layer.visible === false;
            return (
              <div key={layer.id}>
                <div
                  className={`group flex w-full items-center gap-2 rounded px-2 py-2 text-xs transition ${
                    isSelected
                      ? "bg-[var(--color-accent-strong)] text-white"
                      : isDark
                        ? "text-[#d7dae0] hover:bg-white/10"
                        : "text-[#1f2430] hover:bg-black/5"
                  } ${isHidden ? "opacity-40" : ""}`}
                >
                  <button
                    type="button"
                    onClick={() => onSelectLayer(layer.id)}
                    className="shrink-0"
                  >
                    <div
                      className={`h-10 w-10 overflow-hidden rounded border ${isSelected ? "border-white/40 bg-white/10" : isDark ? "border-white/15 bg-[#1a1c20]" : "border-black/10 bg-[#eef1f6]"}`}
                    >
                      {isRaster && sourceUri ? (
                        <Image
                          src={sourceUri}
                          alt={layer.name ?? layer.type}
                          width={40}
                          height={40}
                          unoptimized
                          className="h-full w-full object-cover"
                          draggable={false}
                        />
                      ) : (
                        <div
                          className={`flex h-full w-full items-center justify-center text-[8px] font-bold uppercase tracking-wide ${isSelected ? "text-white/80" : isDark ? "text-[#b7bdc8]" : "text-[#596274]"}`}
                        >
                          {layer.type}
                        </div>
                      )}
                    </div>
                  </button>

                  <button
                    type="button"
                    onClick={() => onSelectLayer(layer.id)}
                    className="min-w-0 flex-1 text-left"
                  >
                    <p className="truncate font-semibold leading-tight">
                      {layer.name ?? layer.type}
                    </p>
                    <p
                      className={`text-[10px] leading-tight mt-0.5 ${isSelected ? "text-white/70" : isDark ? "text-[#9aa1ad]" : "text-[#7b8392]"}`}
                    >
                      {layer.type}
                      {layer.opacity < 1
                        ? ` · ${Math.round(layer.opacity * 100)}%`
                        : ""}
                    </p>
                  </button>

                  <button
                    type="button"
                    title={isHidden ? "Show layer" : "Hide layer"}
                    onClick={(e) => {
                      e.stopPropagation();
                      onSetLayerVisible(layer.id, !isHidden);
                    }}
                    className={`shrink-0 rounded p-0.5 opacity-0 group-hover:opacity-100 transition-opacity ${isHidden ? "!opacity-100" : ""} ${isSelected ? "hover:bg-white/20" : isDark ? "hover:bg-white/10" : "hover:bg-black/10"}`}
                  >
                    {isHidden ? (
                      <EyeOff className="h-3.5 w-3.5" />
                    ) : (
                      <Eye className="h-3.5 w-3.5" />
                    )}
                  </button>

                  <span
                    className={`shrink-0 text-[10px] font-semibold ${isSelected ? "text-white/60" : isDark ? "text-[#9aa1ad]" : "text-[#6b7280]"}`}
                  >
                    {layers.length - idx}
                  </span>
                </div>

                {hasEffects ? (
                  <div className="ml-12 mb-0.5 flex flex-wrap gap-1 px-1">
                    {layer.effects.map((effect) => {
                      const isDisabled = effect.enabled === false;
                      return (
                        <button
                          key={effect.kind}
                          type="button"
                          title={
                            isDisabled ? "Enable effect" : "Disable effect"
                          }
                          onClick={() =>
                            onSetEffectEnabled(
                              layer.id,
                              effect.kind,
                              isDisabled,
                            )
                          }
                          className={`flex items-center gap-1 rounded px-1.5 py-0.5 text-[9px] font-semibold transition ${
                            isDisabled
                              ? isDark
                                ? "bg-white/10 text-[#6b7280] line-through"
                                : "bg-black/5 text-[#9ca3af] line-through"
                              : isSelected
                                ? "bg-white/20 text-white"
                                : isDark
                                  ? "bg-[var(--color-accent-strong)]/20 text-[var(--color-accent-strong)]"
                                  : "bg-[var(--color-accent-strong)]/15 text-[var(--color-accent-strong)]"
                          }`}
                        >
                          {isDisabled ? (
                            <EyeOff className="h-2.5 w-2.5" />
                          ) : (
                            <Eye className="h-2.5 w-2.5" />
                          )}
                          {EFFECT_LABELS[effect.kind] ?? effect.kind}
                        </button>
                      );
                    })}
                  </div>
                ) : null}
              </div>
            );
          })}
        {layers.length === 0 ? (
          <div
            className={`px-2 py-8 text-center text-xs ${isDark ? "text-[#aeb3bc]" : "text-[#5f6672]"}`}
          >
            {t("editor.noLayersYet")}
          </div>
        ) : null}
      </div>
      <div className="mt-2 flex gap-1.5">
        <button
          type="button"
          onClick={() => onMoveLayerOrder("up")}
          className={`flex-1 rounded border px-2 py-1 text-xs ${isDark ? "border-white/20 text-[#d7dae0] hover:bg-white/10" : "border-black/20 text-[#1f2430] hover:bg-black/5"}`}
        >
          {t("editor.up")}
        </button>
        <button
          type="button"
          onClick={() => onMoveLayerOrder("down")}
          className={`flex-1 rounded border px-2 py-1 text-xs ${isDark ? "border-white/20 text-[#d7dae0] hover:bg-white/10" : "border-black/20 text-[#1f2430] hover:bg-black/5"}`}
        >
          {t("editor.down")}
        </button>
        <button
          type="button"
          onClick={onRemoveSelectedLayer}
          className={`flex-1 rounded border px-2 py-1 text-xs ${isDark ? "border-red-400/30 bg-red-400/10 text-red-200 hover:bg-red-400/20" : "border-red-500/30 bg-red-500/10 text-red-600 hover:bg-red-500/15"}`}
        >
          {t("editor.delete")}
        </button>
      </div>
    </div>
  );
}