import Button from '../../components/Button';
import Icon from '../../components/Icon';
import { ArtifactIcon } from '../../components/ChatMessage';
import { ARTIFACT_DETAIL_PLACEHOLDER } from './artifact-detail-content';

const SHELL = 'flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden';
const HEADER = [
  'flex shrink-0 items-center gap-2 px-2',
  'bg-blueGrey-50 border-b border-border-default min-h-12',
].join(' ');
const HEADER_TAB = [
  'flex min-w-0 max-w-full items-center gap-2 px-3',
  'h-12 rounded-t-lg border border-white/[0.03]',
].join(' ');
const BODY = 'flex min-h-0 flex-1 flex-col overflow-hidden bg-white';
const BODY_SLOT_BASE = 'flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden w-full min-w-0';
const BODY_SLOT_PADDED = `${BODY_SLOT_BASE} p-6`;
const HEADER_ICON_FRAME = 'flex size-6 shrink-0 items-center justify-center rounded-md bg-blueGrey-900';
const PLACEHOLDER = 'flex flex-1 min-h-0 items-center justify-center px-6 py-8 text-sm text-foreground-muted/60';

/**
 * Copilot / AI 对话页共用的「产物详情」白卡面板。
 *
 * 结构：固定 Header（产物身份 + 操作） + 可滚动 Body（业务内容通用槽位）。
 * - 选中产物时：header 标题与图标与左侧产物卡一致
 * - 正文通过 `children` 注入任意 TFDS 组件组合；未传时展示 `placeholder`
 */
export default function CopilotArtifactDetailPanel({
  artifact = null,
  headerTitle = '服务策略',
  headerIconName = 'share-07-stroked',
  headerActionLabel = '编辑',
  placeholder = ARTIFACT_DETAIL_PLACEHOLDER,
  children = null,
  onEdit = null,
  onClose = null,
  closeActionLabel = '关闭产物详情',
  /** shellless 业务页（如 StrategyListPage）已自带 24px 内边距时设为 false，避免与槽位 p-6 叠加 */
  bodySlotPadding = true,
  className = '',
}) {
  const showCloseAction = typeof onClose === 'function';
  const resolvedTitle = artifact?.title || headerTitle;
  const useArtifactHeaderIcon = Boolean(artifact?.type);
  const hasBodyContent = children !== null && children !== undefined && children !== false;

  return (
    <div
      className={[SHELL, className].filter(Boolean).join(' ')}
      style={{
        background: 'var(--color-white, #FFFFFF)',
        borderRadius: '12px',
      }}
      data-tfds-component="CopilotArtifactDetailPanel"
    >
      <div
        className={HEADER}
        data-tfds-component="CopilotArtifactDetailPanel.Header"
      >
        <div className="flex min-w-0 flex-1 items-end">
          <div className={HEADER_TAB}>
            {useArtifactHeaderIcon ? (
              <ArtifactIcon type={artifact.type} size={24} alt="" />
            ) : (
              <div className={HEADER_ICON_FRAME}>
                <Icon name={headerIconName} size={12} color="#ffffff" />
              </div>
            )}
            <span
              className="min-w-0 truncate text-sm font-semibold leading-5 text-foreground"
              title={resolvedTitle}
            >
              {resolvedTitle}
            </span>
          </div>
        </div>

        <div className="flex shrink-0 items-center gap-1 px-2">
          <Button
            variant="ghost-black"
            onClick={typeof onEdit === 'function' ? () => onEdit(artifact) : undefined}
          >
            {headerActionLabel}
          </Button>
          {showCloseAction ? (
            <Button
              type="button"
              variant="ghost-black"
              size="md"
              icon={<Icon name="x-close-stroked" size={16} />}
              iconOnly
              tooltip={closeActionLabel}
              aria-label={closeActionLabel}
              onClick={onClose}
              data-tfds-component="CopilotArtifactDetailPanel.Close"
            />
          ) : null}
        </div>
      </div>

      <div className={BODY} data-tfds-component="CopilotArtifactDetailPanel.Body">
        {hasBodyContent ? (
          <div
            className={bodySlotPadding ? BODY_SLOT_PADDED : BODY_SLOT_BASE}
            data-tfds-region="artifact-detail-content-slot"
            data-artifact-type={artifact?.type || undefined}
          >
            {children}
          </div>
        ) : (
          <div className={PLACEHOLDER} data-tfds-region="artifact-detail-content-slot-empty">
            {placeholder}
          </div>
        )}
      </div>
    </div>
  );
}
