"use client";

import { MousePointer2, SlidersHorizontal } from "lucide-react";
import { useTranslations } from "next-intl";

import { CommonLayerControls } from "@/components/studio/properties/CommonLayerControls";
import { ImageLayerProperties } from "@/components/studio/properties/ImageLayerProperties";
import { ShapeLayerProperties } from "@/components/studio/properties/ShapeLayerProperties";
import { TextLayerProperties } from "@/components/studio/properties/TextLayerProperties";
import { getSelectedLayer, useStudioStore } from "@/lib/studio-store";
import { cn } from "@/lib/utils";

export interface PropertiesPanelProps {
  className?: string;
}

export function PropertiesPanel({ className }: PropertiesPanelProps) {
  const t = useTranslations("auto.componentsStudioPropertiesPanel");
  const scenes = useStudioStore((state) => state.scenes);
  const activeSceneId = useStudioStore((state) => state.activeSceneId);
  const selectedLayerId = useStudioStore((state) => state.selectedLayerId);

  const layer = getSelectedLayer({
    scenes,
    activeSceneId,
    selectedLayerId,
  });

  return (
    <aside
      className={cn(
        "flex h-full w-full flex-col overflow-hidden bg-white text-gray-900",
        className
      )}
    >
      <div className="flex shrink-0 items-center justify-between border-b border-gray-200 px-3 py-3">
        <h2 className="text-xs font-semibold uppercase tracking-wide text-gray-400">
          {t("title")}
        </h2>
        <SlidersHorizontal className="h-4 w-4 text-gray-400" aria-hidden />
      </div>

      {!layer ? (
        <div className="flex flex-1 flex-col items-center justify-center gap-3 px-6 text-center">
          <div className="flex h-14 w-14 items-center justify-center rounded-xl border border-dashed border-gray-200 bg-gray-50">
            <MousePointer2 className="h-6 w-6 text-gray-300" aria-hidden />
          </div>
          <p className="text-xs text-gray-400">
            {t("emptyState")}
          </p>
        </div>
      ) : (
        <div className="flex min-h-0 flex-1 flex-col">
          <div className="flex-1 space-y-5 overflow-y-auto p-3">
            <p className="text-[11px] font-medium capitalize text-gray-400">
              {t("layerLabel", { type: layer.type })}
            </p>
            {layer.type === "text" ? <TextLayerProperties layer={layer} /> : null}
            {layer.type === "image" ? (
              <ImageLayerProperties layer={layer} />
            ) : null}
            {layer.type === "shape" ? (
              <ShapeLayerProperties layer={layer} />
            ) : null}
            <CommonLayerControls layer={layer} />
          </div>
        </div>
      )}
    </aside>
  );
}
