SettingsPanel

"use client";

import { useState, useCallback, useRef, type ReactNode } from "react";
import { Composite, CompositeItem, CompositeProvider, cn, SurfaceLayout } from "@reopt-ai/opt-ui";

/** Defines the settings section shape. */
export interface SettingsSectionDef {
  id: string;
  label: string;
  icon?: ReactNode;
  badge?: string;
  description?: string;
}

/** Localized labels for the settings panel component. */
export interface SettingsPanelLabels {
  sidebarTitle?: string;
  settingsLabel?: (sectionLabel: string) => string;
  addSectionLabel?: string;
  removeSectionAriaLabel?: string;
  emptyMessage?: string;
}

const defaultLabels: Required<SettingsPanelLabels> = {
  sidebarTitle: "설정",
  settingsLabel: (sectionLabel: string) => `${sectionLabel} 설정`,
  addSectionLabel: "추가",
  removeSectionAriaLabel: "삭제",
  emptyMessage: "설정 섹션이 없습니다.",
};

/** Props for the settings panel component. */
export interface SettingsPanelProps {
  sections: SettingsSectionDef[];
  activeSection?: string;
  defaultActiveSection?: string;
  onSectionChange?: (sectionId: string) => void;
  children: ReactNode;
  sidebarTitle?: string;
  sidebarWidth?: "sm" | "md" | "lg";
  className?: string;
  loading?: boolean;
  header?: ReactNode;
  actions?: ReactNode;
  labels?: SettingsPanelLabels;
  /** Enable add/remove controls on sidebar items */
  editable?: boolean;
  /** Called when user clicks the add section button */
  onAddSection?: () => void;
  /** Called when user clicks a section's remove button */
  onRemoveSection?: (sectionId: string) => void;
}

const NAV_ID_PREFIX = "settings-nav-";

function domId(id: string) {
  return `${NAV_ID_PREFIX}${id}`;
}

const sidebarWidthClass = {
  sm: "w-48",
  md: "w-56",
  lg: "w-64",
};

/** Renders the settings panel component. */
export function SettingsPanel({
  sections,
  activeSection: controlledActiveSection,
  defaultActiveSection,
  onSectionChange,
  children,
  sidebarTitle,
  sidebarWidth = "md",
  className,
  loading = false,
  header,
  actions,
  labels: customLabels,
  editable = false,
  onAddSection,
  onRemoveSection,
}: SettingsPanelProps) {
  const labels = { ...defaultLabels, ...customLabels };
  const [internalActiveSection, setInternalActiveSection] = useState(
    defaultActiveSection ?? sections[0]?.id ?? "",
  );

  const activeSection = controlledActiveSection ?? internalActiveSection;
  const contentRef = useRef<HTMLElement>(null);

  const handleSectionChange = useCallback(
    (sectionId: string) => {
      if (onSectionChange) {
        onSectionChange(sectionId);
      } else {
        setInternalActiveSection(sectionId);
      }

      // Move focus to content heading after section change
      requestAnimationFrame(() => {
        const heading = contentRef.current?.querySelector("h1, h2, h3");
        if (heading instanceof HTMLElement) {
          heading.setAttribute("tabindex", "-1");
          heading.focus();
          heading.addEventListener(
            "blur",
            () => heading.removeAttribute("tabindex"),
            { once: true },
          );
        }
      });
    },
    [onSectionChange],
  );

  const [activeId, setActiveId] = useState<string | null | undefined>(
    activeSection ? domId(activeSection) : undefined,
  );

  if (sections.length === 0) {
    return (
      <SurfaceLayout
        loading={loading}
        className={className}
        data-opt-id="7PTXR"
        data-opt-slug="settings-panel.SettingsPanel"
      >
        {header}
        {actions && <div className="flex justify-end">{actions}</div>}
        <div className="text-text-tertiary text-sm">{labels.emptyMessage}</div>
      </SurfaceLayout>
    );
  }

  return (
    <SurfaceLayout
      loading={loading}
      className={cn("flex-row gap-0", className)}
      data-opt-id="7PTXR"
      data-opt-slug="settings-panel.SettingsPanel"
    >
      {(header || actions) && (
        <div className="gap-element flex items-center justify-between pb-6">
          <div>{header}</div>
          <div>{actions}</div>
        </div>
      )}
      {/* 사이드바 네비게이션 */}
      <aside
        className={cn(
          "border-border shrink-0 border-r pr-6",
          sidebarWidthClass[sidebarWidth],
        )}
      >
        {(sidebarTitle ?? labels.sidebarTitle) && (
          <h3 className="text-text-primary mb-4 text-sm font-semibold tracking-wide uppercase">
            {sidebarTitle ?? labels.sidebarTitle}
          </h3>
        )}
        <CompositeProvider
          focusLoop
          orientation="vertical"
          activeId={activeId}
          onActiveIdChange={setActiveId}
        >
          <Composite
            role="navigation"
            aria-label={sidebarTitle ?? labels.sidebarTitle}
            className="flex flex-col gap-0.5"
          >
            {sections.map((section) => {
              const isSelected = activeSection === section.id;

              const hasRemoveButton = editable && onRemoveSection;

              return (
                <CompositeItem
                  key={section.id}
                  id={domId(section.id)}
                  onClick={() => handleSectionChange(section.id)}
                  {...(hasRemoveButton && {
                    render: <div role="button" tabIndex={0} />,
                  })}
                  className={cn(
                    // Base styles
                    "group gap-element relative flex items-center rounded-lg px-3 py-2.5 text-sm outline-none",
                    "cursor-pointer transition-all duration-150",

                    // Default state
                    !isSelected && [
                      "text-text-secondary",
                      "hover:bg-bg-subtle hover:text-text-primary",
                    ],

                    // Selected
                    isSelected && ["bg-accent-subtle text-accent font-medium"],

                    // Keyboard navigation focus
                    "data-[active-item]:bg-accent-subtle data-[active-item]:text-accent",

                    // Focus visible
                    "data-[focus-visible]:ring-ring data-[focus-visible]:ring-2",
                    "data-[focus-visible]:ring-offset-ring-offset data-[focus-visible]:ring-offset-2",
                  )}
                >
                  {/* 선택 인디케이터 */}
                  <span
                    className={cn(
                      "absolute top-1/2 left-0 h-5 w-0.5 -translate-y-1/2 rounded-full transition-all duration-150",
                      isSelected && "bg-accent",
                      !isSelected &&
                        "group-data-[active-item]:bg-accent bg-transparent",
                    )}
                  />

                  {/* 아이콘 */}
                  {section.icon && (
                    <span
                      className={cn(
                        "shrink-0",
                        isSelected ? "text-accent" : "text-text-tertiary",
                      )}
                    >
                      {section.icon}
                    </span>
                  )}

                  {/* 레이블 + 설명 */}
                  <span className="flex min-w-0 flex-1 flex-col">
                    <span className="truncate">{section.label}</span>
                    {section.description && (
                      <span className="text-text-tertiary truncate text-xs font-normal">
                        {section.description}
                      </span>
                    )}
                  </span>

                  {/* 뱃지 */}
                  {section.badge && (
                    <span
                      className={cn(
                        "inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium",
                        isSelected
                          ? "bg-accent/20 text-accent"
                          : "bg-bg-muted text-text-tertiary",
                      )}
                    >
                      {section.badge}
                    </span>
                  )}

                  {/* 삭제 버튼 */}
                  {editable && onRemoveSection && (
                    <button
                      type="button"
                      aria-label={`${section.label} ${labels.removeSectionAriaLabel}`}
                      className="text-text-tertiary hover:text-danger ml-auto shrink-0 rounded p-0.5 opacity-0 transition-opacity group-hover:opacity-100 group-data-[active-item]:opacity-100"
                      onClick={(e) => {
                        e.stopPropagation();
                        onRemoveSection(section.id);
                      }}
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        aria-hidden="true"
                      >
                        <line x1="18" y1="6" x2="6" y2="18" />
                        <line x1="6" y1="6" x2="18" y2="18" />
                      </svg>
                    </button>
                  )}
                </CompositeItem>
              );
            })}
          </Composite>
        </CompositeProvider>

        {/* 섹션 추가 버튼 */}
        {editable && onAddSection && (
          <button
            type="button"
            onClick={onAddSection}
            className="text-text-tertiary hover:text-text-primary hover:bg-bg-subtle mt-2 flex w-full items-center justify-center rounded-lg px-3 py-2 text-sm transition-colors"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden="true"
              className="mr-1.5"
            >
              <line x1="12" y1="5" x2="12" y2="19" />
              <line x1="5" y1="12" x2="19" y2="12" />
            </svg>
            {labels.addSectionLabel}
          </button>
        )}
      </aside>

      {/* 콘텐츠 영역 */}
      <main
        ref={contentRef}
        className="min-w-0 flex-1 pl-8"
        role="region"
        aria-label={labels.settingsLabel(
          sections.find((s) => s.id === activeSection)?.label ??
            sidebarTitle ??
            labels.sidebarTitle,
        )}
      >
        {children}
      </main>
    </SurfaceLayout>
  );
}