"use client";

import { memo } from "react";
import Icon from "../../../../components/asset/icon";
import { ADD_CUSTOM_FIELD_TYPE_ICONS } from "../../../../components/controls/AddCustomField/AddCustomField.types";
import type { AddCustomFieldType } from "../../../../components/controls/AddCustomField/AddCustomField.types";
import type { CustomMethodCardWizardBlocksListViewProps } from "./CustomMethodCardWizardBlocksList.types";

function DragHandleGlyph({ className }: { className?: string }) {
  return (
    <svg
      width={16}
      height={16}
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      aria-hidden
    >
      <circle cx={4} cy={4} r={1.25} fill="currentColor" />
      <circle cx={12} cy={4} r={1.25} fill="currentColor" />
      <circle cx={4} cy={8} r={1.25} fill="currentColor" />
      <circle cx={12} cy={8} r={1.25} fill="currentColor" />
      <circle cx={4} cy={12} r={1.25} fill="currentColor" />
      <circle cx={12} cy={12} r={1.25} fill="currentColor" />
    </svg>
  );
}

function CustomMethodCardWizardBlocksListViewComponent({
  blocks,
  fieldTypeLabels,
  dragHandleAriaLabel,
  listLabel,
  draggingIndex,
  overIndex,
  onDragStart,
  onDragOver,
  onDrop,
  onDragEnd,
  onHandlePointerDown,
  onEditBlock,
}: CustomMethodCardWizardBlocksListViewProps) {
  return (
    <ul
      className="flex list-none flex-col gap-2 p-0"
      aria-label={listLabel}
    >
      {blocks.map((block, index) => {
        const kind = block.kind as AddCustomFieldType;
        const typeLabel = fieldTypeLabels[kind];
        const title = block.blockTitle.trim() || typeLabel;
        const isDragging = draggingIndex === index;
        const isDropTarget = overIndex === index && draggingIndex !== index;
        return (
          <li
            key={block.id}
            draggable
            aria-grabbed={isDragging ? true : undefined}
            className={`group flex min-h-[52px] items-stretch gap-2 rounded-[var(--measures-radius-medium,8px)] border-2 bg-[var(--color-surface-default-secondary)] py-2 pl-1 pr-3 transition-[border-color,box-shadow,opacity] ${
              isDropTarget
                ? "relative z-10 border-[var(--color-border-invert-primary)]"
                : isDragging
                  ? "relative z-20 border-[var(--color-border-default-primary)] opacity-60 shadow-[0_4px_12px_rgba(0,0,0,0.12)]"
                  : "border-[var(--color-border-default-primary)] hover:border-[var(--color-content-default-secondary)]"
            }`}
            onDragStart={onDragStart(index)}
            onDragOver={onDragOver(index)}
            onDrop={onDrop(index)}
            onDragEnd={onDragEnd}
          >
            <span
              role="button"
              tabIndex={0}
              aria-label={dragHandleAriaLabel}
              onPointerDown={onHandlePointerDown}
              className="flex shrink-0 cursor-grab touch-manipulation items-center self-stretch rounded-[var(--measures-radius-200,8px)] px-1 text-[var(--color-content-default-secondary)] transition-colors active:cursor-grabbing focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-invert-primary)] group-hover:text-[var(--color-content-default-primary)]"
            >
              <DragHandleGlyph />
            </span>
            <button
              type="button"
              aria-label={title}
              onClick={() => onEditBlock(block)}
              className="flex min-w-0 flex-1 items-center gap-2 self-stretch rounded-[var(--measures-radius-200,8px)] border-0 bg-transparent px-0 text-left cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-invert-primary)]"
            >
            <span className="flex h-8 w-8 shrink-0 items-center justify-center self-center">
              <Icon
                name={ADD_CUSTOM_FIELD_TYPE_ICONS[kind]}
                size={24}
                className="text-[var(--color-content-default-brand-primary,#fefcc9)]"
              />
            </span>
            <div className="flex min-w-0 flex-1 flex-col justify-center gap-0.5">
              <span className="truncate text-[14px] font-medium leading-[18px] text-[var(--color-content-default-primary)]">
                {title}
              </span>
              <span className="text-x-small-paragraph text-[var(--color-content-default-secondary)]">
                {typeLabel}
              </span>
            </div>
            </button>
          </li>
        );
      })}
    </ul>
  );
}

export const CustomMethodCardWizardBlocksListView = memo(
  CustomMethodCardWizardBlocksListViewComponent,
);
CustomMethodCardWizardBlocksListView.displayName =
  "CustomMethodCardWizardBlocksListView";