"use client";

import React from "react";

/** Craft-inspired settings typography tokens (class names). */
export const settingsUI = {
  label: "pi-settings-label",
  description: "pi-settings-desc",
  descriptionSmall: "pi-settings-desc-sm",
  mono: "pi-settings-mono",
} as const;

/** Build a consistent modal subtitle: scope · path */
export function formatSettingsSubtitle(scope: string, path?: string | null): string {
  const p = path?.trim();
  if (p) return `${scope} · ${p}`;
  return scope;
}

export function SettingsModal({
  open = true,
  title,
  subtitle,
  modeHint,
  onClose,
  width = 860,
  height = "78vh",
  children,
  footer,
}: {
  open?: boolean;
  title: string;
  subtitle?: React.ReactNode;
  /** e.g. "配置 · 需保存" / "资源 · 即时生效" — shown as a pill next to title */
  modeHint?: string;
  onClose: () => void;
  width?: number | string;
  height?: number | string;
  children: React.ReactNode;
  footer?: React.ReactNode;
}) {
  if (!open) return null;
  return (
    <div
      className="pi-settings-backdrop"
      role="presentation"
      onClick={(e) => {
        if (e.target === e.currentTarget) onClose();
      }}
      onKeyDown={(e) => {
        if (e.key === "Escape") {
          e.stopPropagation();
          onClose();
        }
      }}
    >
      <div className="pi-settings-dialog" style={{ width, height }} role="dialog" aria-modal="true" aria-label={title}>
        <div className="pi-settings-header">
          <div className="pi-settings-header-left">
            <span className="pi-settings-title">{title}</span>
            {modeHint != null && modeHint !== "" && (
              <span className="pi-settings-mode-hint">{modeHint}</span>
            )}
            {subtitle != null && <span className="pi-settings-subtitle">{subtitle}</span>}
          </div>
          <SettingsCloseButton onClick={onClose} />
        </div>
        <div className="pi-settings-body">{children}</div>
        {footer != null && <div className="pi-settings-footer">{footer}</div>}
      </div>
    </div>
  );
}

export function SettingsCloseButton({ onClick }: { onClick: () => void }) {
  return (
    <button type="button" className="pi-settings-close" onClick={onClick} aria-label="Close" title="Close">
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
        <line x1="3" y1="3" x2="11" y2="11" />
        <line x1="11" y1="3" x2="3" y2="11" />
      </svg>
    </button>
  );
}

/** Secondary footer action (Cancel / Close) */
export function SettingsSecondaryButton({
  children,
  onClick,
  disabled,
  type = "button",
}: {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  type?: "button" | "submit";
}) {
  return (
    <button
      type={type}
      className="pi-settings-btn pi-settings-btn-secondary"
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
}

/** Primary footer action (Save) */
export function SettingsPrimaryButton({
  children,
  onClick,
  disabled,
  success,
  type = "button",
}: {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  /** Green success state (e.g. Saved) */
  success?: boolean;
  type?: "button" | "submit";
}) {
  return (
    <button
      type={type}
      className="pi-settings-btn pi-settings-btn-primary"
      data-success={success ? "true" : "false"}
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
}

/** Left rail wrapper for master-detail settings layouts */
export function SettingsSidebar({ children, footer }: { children: React.ReactNode; footer?: React.ReactNode }) {
  return (
    <div className="pi-settings-sidebar">
      <div className="pi-settings-sidebar-scroll">{children}</div>
      {footer != null && <div className="pi-settings-sidebar-footer">{footer}</div>}
    </div>
  );
}

export function SettingsGroupLabel({ children }: { children: React.ReactNode }) {
  return <div className="pi-settings-group-label">{children}</div>;
}

/**
 * Unified left-list row for Models / Skills / Plugins.
 * Supports single-line (nav) and two-line (title + meta/badges).
 */
export function SettingsListItem({
  selected,
  onClick,
  icon,
  statusDot,
  statusActive,
  children,
  meta,
  mono,
  dimmed,
  indent,
}: {
  selected?: boolean;
  onClick?: () => void;
  icon?: React.ReactNode;
  /** Colored status indicator (e.g. skill enabled) */
  statusDot?: boolean;
  statusActive?: boolean;
  children: React.ReactNode;
  /** Second line: badges / counts */
  meta?: React.ReactNode;
  mono?: boolean;
  dimmed?: boolean;
  /** Nested row (e.g. model under provider) */
  indent?: boolean;
}) {
  return (
    <button
      type="button"
      className="pi-settings-list-item"
      data-selected={selected ? "true" : "false"}
      data-dimmed={dimmed ? "true" : "false"}
      data-indent={indent ? "true" : "false"}
      data-twoline={meta != null ? "true" : "false"}
      onClick={onClick}
    >
      {statusDot && (
        <span
          className="pi-settings-status-dot"
          data-active={statusActive ? "true" : "false"}
          aria-hidden
        />
      )}
      {icon != null && <span className="pi-settings-nav-icon">{icon}</span>}
      <span className="pi-settings-list-item-body">
        <span className={mono ? "pi-settings-list-item-title mono" : "pi-settings-list-item-title"}>
          {children}
        </span>
        {meta != null && <span className="pi-settings-list-item-meta">{meta}</span>}
      </span>
    </button>
  );
}

/** Bottom-of-sidebar “+ Add …” control */
export function SettingsAddButton({
  active,
  onClick,
  children,
}: {
  active?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}) {
  return (
    <button
      type="button"
      className="pi-settings-add-btn"
      data-active={active ? "true" : "false"}
      onClick={onClick}
    >
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
        <line x1="12" y1="5" x2="12" y2="19" />
        <line x1="5" y1="12" x2="19" y2="12" />
      </svg>
      {children}
    </button>
  );
}

/** @deprecated Prefer SettingsListItem — kept for Models nested rows compatibility */
export function SettingsNavItem({
  selected,
  onClick,
  icon,
  children,
  mono,
}: {
  selected?: boolean;
  onClick?: () => void;
  icon?: React.ReactNode;
  children: React.ReactNode;
  mono?: boolean;
}) {
  return (
    <SettingsListItem selected={selected} onClick={onClick} icon={icon} mono={mono}>
      {children}
    </SettingsListItem>
  );
}

export function SettingsSection({
  title,
  description,
  children,
  actions,
}: {
  title?: string;
  description?: string;
  children: React.ReactNode;
  actions?: React.ReactNode;
}) {
  return (
    <section className="pi-settings-section">
      {(title || actions) && (
        <div className="pi-settings-section-head">
          <div>
            {title && <h3 className="pi-settings-section-title">{title}</h3>}
            {description && <p className="pi-settings-section-desc">{description}</p>}
          </div>
          {actions}
        </div>
      )}
      <div className="pi-settings-section-body">{children}</div>
    </section>
  );
}

export function SettingsRow({
  label,
  description,
  children,
  align = "center",
}: {
  label: React.ReactNode;
  description?: React.ReactNode;
  children: React.ReactNode;
  align?: "center" | "start";
}) {
  return (
    <div className="pi-settings-row" data-align={align}>
      <div className="pi-settings-row-label">
        <div className={settingsUI.label}>{label}</div>
        {description != null && <div className={settingsUI.description}>{description}</div>}
      </div>
      <div className="pi-settings-row-control">{children}</div>
    </div>
  );
}