import { X } from 'lucide-react';
import Button from './Button';
import Icon from './Icon';

const SHADOW =
  'shadow-[0px_0px_1px_rgba(0,0,0,0.3),0px_4px_14px_rgba(0,0,0,0.1)]';

/* ── 语义类型 → 背景 + 阴影 ── */
const TYPE_BG = {
  info: ['bg-brand-50', SHADOW].join(' '),
  success: ['bg-green-50', SHADOW].join(' '),
  warning: ['bg-orange-50', SHADOW].join(' '),
  error: ['bg-red-50', SHADOW].join(' '),
};

/* ── 语义类型 → 描边颜色（bordered=true 时使用） ── */
const TYPE_BORDER = {
  info: 'border-brand-500',
  success: 'border-green-500',
  warning: 'border-orange-500',
  error: 'border-red-500',
};

/* ── 语义类型 → 状态图标（Icon name + 父级着色） ── */
const TYPE_ICON = {
  info: { name: 'info-circle-stroked', tint: 'text-teal-600' },
  success: { name: 'check-circle-stroked', tint: 'text-green-500' },
  warning: { name: 'alert-triangle-stroked', tint: 'text-orange-500' },
  error: { name: 'alert-circle-stroked', tint: 'text-red-500' },
};

/* ── 无描边时根容器边框类（占位透明，避免布局跳动） ── */
const BORDER_OFF = 'border-transparent';

const ROOT = [
  'inline-flex w-fit max-w-[min(100%,560px)] min-h-[44px] min-w-0 flex-wrap items-center',
  'gap-x-2 gap-y-1',
  'rounded-lg border border-solid p-3',
  'font-[inherit]',
].join(' ');

const ICON_WRAP = 'ml-1 inline-flex shrink-0 items-center';
const MESSAGE = 'min-w-0 shrink text-sm [font-weight:var(--font-semibold)] leading-5 text-foreground whitespace-pre-line break-words';
const ACTIONS_ROW = 'flex shrink-0 flex-wrap items-center gap-x-2';
const ACTION_BTN_CLASS =
  '!h-auto min-h-0 py-0.5 px-0 -my-0.5 !text-sm [font-weight:var(--font-semibold)] leading-5';

/**
 * Toast — 轻量反馈条（Tailwind 内联）
 *
 * HiUI 风格四态反馈条：图标 + 主文案 + 可选文字操作 + 关闭；仅单条视觉，不含全局队列与 Portal。
 * 根为 `w-fit max-w-[min(100%,560px)]`，图标与文案及操作与关闭之间水平间距 8px（`gap-x-2`）。
 *
 * @prop {'info'|'success'|'warning'|'error'} [type='info'] — 语义类型
 * @prop {string} [message] — 主文案（与 children 二选一，未传 children 时使用）
 * @prop {import('react').ReactNode} [children] — 覆盖 message 的展示内容
 * @prop {{ label: string, onClick?: () => void }[] | null} [actions=null] — 文字操作（建议 1～2 项，渲染为 Button text-brand sm）
 * @prop {boolean} [bordered=true] — 是否显示语义色描边（false 时为 border-transparent）
 * @prop {boolean} [showClose=true] — 是否允许展示关闭位（仍需传入 onClose 才渲染关闭按钮）
 * @prop {() => void} [onClose] — 关闭回调
 * @prop {string} [className=''] — 附加到根容器类名
 */
export default function Toast({
  type = 'info',
  message,
  children,
  actions = null,
  bordered = true,
  showClose = true,
  onClose,
  className = '',
  style,
}) {
  const bg = TYPE_BG[type] || TYPE_BG.info;
  const stroke = bordered ? (TYPE_BORDER[type] || TYPE_BORDER.info) : BORDER_OFF;
  const iconCfg = TYPE_ICON[type] || TYPE_ICON.info;
  const role = type === 'error' ? 'alert' : 'status';
  const live = type === 'error' ? 'assertive' : 'polite';
  const text = children ?? message;

  return (
    <div
      className={[`tfds-toast`, [ROOT, bg, stroke, className].filter(Boolean).join(' ')].filter(Boolean).join(' ')}
      role={role}
      aria-live={live}
      style={style}
     data-tfds-component="Toast">
      <span className={`${ICON_WRAP} ${iconCfg.tint}`} aria-hidden>
        <Icon name={iconCfg.name} size="md" />
      </span>
      <div className={MESSAGE}>{text}</div>
      {Array.isArray(actions) && actions.length > 0 ? (
        <div className={ACTIONS_ROW}>
          {actions.map((a, i) => (
            <Button
              key={`${a.label}-${i}`}
              type="button"
              variant="text-brand"
              size="sm"
              className={ACTION_BTN_CLASS}
              onClick={a.onClick}
            >
              {a.label}
            </Button>
          ))}
        </div>
      ) : null}
      {showClose && onClose ? (
        <Button
          type="button"
          variant="ghost-black"
          size="sm"
          icon={<X size={16} strokeWidth={2} />}
          iconOnly
          onClick={onClose}
          tooltip="关闭"
          aria-label="关闭"
          className="shrink-0 border-transparent bg-transparent shadow-none"
        />
      ) : null}
    </div>
  );
}
