import Button from './Button';

import imgFailure       from './empty-assets/failure.svg';
import imgIdle          from './empty-assets/idle.svg';
import imgNoResult      from './empty-assets/no-result.svg';
import imgNotFound      from './empty-assets/not-found.svg';
import imgSuccess       from './empty-assets/success.svg';
import imgConstruction  from './empty-assets/construction.svg';
import imgNoAccess      from './empty-assets/no-access.svg';
import imgNoContent     from './empty-assets/no-content.svg';
import imgAdmin1        from './empty-assets/administrator-1.svg';
import imgAdmin2        from './empty-assets/administrator-2.svg';

/**
 * Empty — B端空状态占位组件（Tailwind 内联）
 *
 * 固定布局：插画 → 文案区 → 操作区，所有内容区域均可按需配置，不传则不渲染。
 * 通过 props 自由组合出不同场景，见 components.js examples 中的常见用法建议。
 *
 * **插画选型建议**：
 *  - 数据为空       → illustrationType="no-content"
 *  - 搜索无结果     → illustrationType="no-result"
 *  - 页面不存在     → illustrationType="not-found"
 *  - 无权限         → illustrationType="no-access"
 *  - 加载/网络失败  → illustrationType="failure"
 *  - 功能建设中     → illustrationType="construction"
 *
 * @prop {'no-result'|'no-content'|'not-found'|'no-access'|'failure'|'idle'|'success'|'construction'|'administrator-1'|'administrator-2'} [illustrationType='no-content'] — 插画类型
 * @prop {string} [title=''] — 标题文案，不传则不渲染标题行
 * @prop {string} [description=''] — 描述文案，不传则不渲染描述行
 * @prop {string} [linkPrefix=''] — 内嵌链接前缀文案（如"页面出错了，"），不传则不渲染链接行
 * @prop {string} [linkText=''] — 内嵌链接可点击文字（如"刷新重试"），不传则不渲染链接行
 * @prop {Function} [onLinkClick=null] — 链接点击回调
 * @prop {string} [primaryLabel=''] — 一级按钮文案，不传则不渲染
 * @prop {Function} [onPrimary=null] — 一级按钮点击回调
 * @prop {string} [secondaryLabel=''] — 二级按钮文案（outline-black 样式），不传则不渲染
 * @prop {Function} [onSecondary=null] — 二级按钮点击回调
 * @prop {string} [tertiaryLabel=''] — 文字按钮文案（text-brand 样式），不传则不渲染
 * @prop {Function} [onTertiary=null] — 文字按钮点击回调
 * @prop {'row'|'column'} [buttonLayout='row'] — 按钮排列方向，row 横排 / column 竖排
 * @prop {string} [className=''] — 自定义类名
 */

/* ── 插画类型 → 图片资源 ── */
const ILLUSTRATION_SRC = {
  'no-result':       imgNoResult,
  'no-content':      imgNoContent,
  'not-found':       imgNotFound,
  'no-access':       imgNoAccess,
  'failure':         imgFailure,
  'idle':            imgIdle,
  'success':         imgSuccess,
  'construction':    imgConstruction,
  'administrator-1': imgAdmin1,
  'administrator-2': imgAdmin2,
};

/* ── 按钮组排列方向 ── */
const BUTTON_LAYOUT_CLASS = {
  row:    'flex-row',
  column: 'flex-col',
};

export default function Empty({
  illustrationType = 'no-content',
  title = '',
  description = '',
  linkPrefix = '',
  linkText = '',
  onLinkClick = null,
  primaryLabel = '',
  onPrimary = null,
  secondaryLabel = '',
  onSecondary = null,
  tertiaryLabel = '',
  onTertiary = null,
  buttonLayout = 'row',
  className = '',
  style,
}) {
  const src = ILLUSTRATION_SRC[illustrationType] ?? imgNoContent;
  const hasActions = primaryLabel || secondaryLabel || tertiaryLabel;
  const hasLinkLine = linkText;

  return (
    <div className={[`tfds-empty`, ['flex flex-col items-center gap-6', className].filter(Boolean).join(' ')].filter(Boolean).join(' ')} style={style} data-tfds-component="Empty">
      {/* 插画 */}
      <img src={src} alt="" className="size-[200px] shrink-0 object-contain" />

      {/* 文案区：标题 + 描述 */}
      {(title || description) && (
        <div className="flex flex-col items-center gap-4 text-center">
          {title && (
            <p className="text-xl [font-weight:var(--font-semibold)] text-foreground leading-7 w-[400px] max-w-full">
              {title}
            </p>
          )}
          {description && (
            <p className="text-sm text-foreground-secondary leading-5 w-[400px] max-w-full">
              {description}
            </p>
          )}
        </div>
      )}

      {/* 链接行：轻量错误提示专用（如"页面出错了，刷新试试"） */}
      {hasLinkLine && (
        <p className="text-sm text-foreground-secondary leading-5 text-center w-[400px] max-w-full">
          {linkPrefix}
          <button
            type="button"
            onClick={onLinkClick ?? undefined}
            className="[font-weight:var(--font-semibold)] text-brand-800 hover:text-brand-900 active:text-brand-950 focus-visible:outline-brand-300 focus-visible:outline-2 focus-visible:outline-offset-1 hover:underline underline-offset-2 cursor-pointer"
          >
            {linkText}
          </button>
        </p>
      )}

      {/* 操作区：按钮组 */}
      {hasActions && (
        <div className={['flex items-center gap-3', BUTTON_LAYOUT_CLASS[buttonLayout]].join(' ')}>
          {secondaryLabel && (
            <Button variant="outline-black" size="md" onClick={onSecondary ?? undefined}>
              {secondaryLabel}
            </Button>
          )}
          {primaryLabel && (
            <Button variant="primary" size="md" onClick={onPrimary ?? undefined}>
              {primaryLabel}
            </Button>
          )}
          {tertiaryLabel && (
            <Button variant="text-brand" size="md" onClick={onTertiary ?? undefined}>
              {tertiaryLabel}
            </Button>
          )}
        </div>
      )}
    </div>
  );
}
