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

/* ── 尺寸 → 面板宽度 ── */
const SIZE_CLASS = {
  sm: 'w-[400px]',
  md: 'w-[560px]',
  lg: 'w-[800px]',
};

/* ── 面板容器 ── */
const PANEL = [
  'flex flex-col items-stretch',
  'bg-surface h-full px-6',
  'shadow-xl',
].join(' ');

/* ── 头部 / 内容 / 底部 ── */
const HEADER = 'flex shrink-0 w-full items-start justify-between gap-2 py-6';
const TITLE = 'm-0 text-lg [font-weight:var(--font-semibold)] leading-6 text-foreground';
const SUBTITLE = 'm-0 text-sm font-normal leading-6 text-foreground-muted';

const BODY = 'flex-1 min-h-0 w-full overflow-y-auto';

const FOOTER = 'flex shrink-0 w-full flex-col py-6';
const FOOTER_ROW =
  'flex w-full flex-wrap items-center justify-between gap-x-6 gap-y-2';
const FOOTER_HINT =
  'm-0 min-w-[7.5rem] flex-1 text-xs font-normal leading-4 text-foreground-secondary';
const ACTIONS = 'flex shrink-0 items-center justify-end gap-3';

/**
 * Sheet — 侧边抽屉面板（仅面板本体，遮罩与滑入动画由外层处理）
 * @prop {'sm'|'md'|'lg'} [size='md'] — 宽度档位
 * @prop {boolean} [showFooterHint=true] — 是否显示底部提示
 * @prop {string} [title='侧边标题'] — 标题
 * @prop {string|null} [subtitle='侧边副标题'] — 副标题，为 null 时不展示
 * @prop {string} [footerHint='提示信息'] — 底部提示文案
 * @prop {string} [cancelText='取消'] — 取消按钮文案
 * @prop {string} [confirmText='确定'] — 确定按钮文案
 * @prop {function} [onClose=null] — 关闭回调，传入才显示关闭按钮
 * @prop {function} [onCancel=null] — 取消回调，传入才显示取消按钮
 * @prop {function} [onConfirm=null] — 确定回调，传入才显示确定按钮
 * @prop {ReactNode} [footer=null] — 自定义底栏，传入则替换默认底栏
 * @prop {string} [className=''] — 附加类名
 * @prop {object} [style] — 内联样式
 */
export default function Sheet({
  size = 'md',
  title = '侧边标题',
  subtitle = '侧边副标题',
  children,
  showFooterHint = true,
  footerHint = '提示信息',
  cancelText = '取消',
  confirmText = '确定',
  onCancel,
  onConfirm,
  onClose,
  footer,
  className = '',
  style,
}) {
  const uid = useId();
  const titleId = `${uid}-title`;
  const subtitleId = `${uid}-subtitle`;

  return (
    <div
      className={[`tfds-sheet`, [PANEL, SIZE_CLASS[size], className].filter(Boolean).join(' ')].filter(Boolean).join(' ')}
      style={style}
      role="dialog"
      aria-modal="true"
      aria-labelledby={titleId}
      {...(subtitle ? { 'aria-describedby': subtitleId } : {})}
     data-tfds-component="Sheet">
      <header className={HEADER}>
        <div className="flex min-w-0 flex-1 flex-col items-start gap-0">
          <h2 id={titleId} className={TITLE}>
            {title}
          </h2>
          {subtitle ? (
            <p id={subtitleId} className={SUBTITLE}>
              {subtitle}
            </p>
          ) : null}
        </div>
        {onClose ? (
          <Button
            type="button"
            variant="ghost-black"
            size="sm"
            icon={<X size={16} strokeWidth={2} />}
            iconOnly
            onClick={onClose}
            tooltip="关闭"
            aria-label="关闭"
            className="shrink-0"
          />
        ) : null}
      </header>

      <div className={BODY}>{children}</div>

      {footer != null ? (
        <div className={FOOTER}>{footer}</div>
      ) : (
        <footer className={FOOTER}>
          <div className={FOOTER_ROW}>
            {showFooterHint && footerHint ? (
              <p className={FOOTER_HINT}>{footerHint}</p>
            ) : (
              <span className="min-w-0 flex-1" />
            )}
            <div className={ACTIONS}>
              {onCancel ? (
                <Button type="button" variant="outline-black" size="md" onClick={onCancel}>
                  {cancelText}
                </Button>
              ) : null}
              {onConfirm ? (
                <Button type="button" variant="primary" size="md" onClick={onConfirm}>
                  {confirmText}
                </Button>
              ) : null}
            </div>
          </div>
        </footer>
      )}
    </div>
  );
}
