import { useState, type ReactNode } from 'react';
import { CircleCheck, Info, TriangleAlert, X } from 'lucide-react';
import { Icon } from '~/components/Icon';

interface Props {
  /** 严重度：错误与警告共用一支琥珀色（和输入框的错误描边同色） */
  tone?: 'info' | 'success' | 'warning';
  title: string;
  description?: ReactNode;
  /** 一个动作：链接或按钮，放正文之后 */
  action?: ReactNode;
  /** 可关：常驻不等于不能收，但绝不自动消失（决策 17） */
  dismissible?: boolean;
  className?: string;
}

const TONE = {
  info: {
    icon: Info,
    role: 'status' as const,
    fg: 'text-[var(--color-info-fg)]',
    box: 'bg-[var(--color-info-bg)] border-[var(--color-info-bd)]',
  },
  success: {
    icon: CircleCheck,
    role: 'status' as const,
    fg: 'text-[var(--color-success-fg)]',
    box: 'bg-[var(--color-success-bg)] border-[var(--color-success-bd)]',
  },
  warning: {
    icon: TriangleAlert,
    role: 'alert' as const,
    fg: 'text-[var(--color-warning-fg)]',
    box: 'bg-[var(--color-warning-bg)] border-[var(--color-warning-bd)]',
  },
};

/** 极简提示条：平底 + 一条语义色发丝边，零模糊零 inset；层级靠字号，不靠阴影 */
export function MinimalBanner({
  tone = 'info',
  title,
  description,
  action,
  dismissible = false,
  className = '',
}: Props) {
  const [hidden, setHidden] = useState(false);
  const t = TONE[tone];

  if (hidden) return null;

  return (
    <div role={t.role} className={`flex items-start gap-3 px-4 py-3.5 rounded-md border ${t.box} ${className}`}>
      <Icon icon={t.icon} size={16} className={`shrink-0 mt-0.5 ${t.fg}`} />
      <div className="min-w-0 flex-1">
        <p className={`text-sm font-semibold ${t.fg}`}>{title}</p>
        {(description || action) && (
          <div className="mt-1 text-sm text-[var(--color-text-muted)] leading-relaxed">
            {description}
            {action && <span className="mt-2 block">{action}</span>}
          </div>
        )}
      </div>
      {dismissible && (
        <button
          type="button"
          onClick={() => setHidden(true)}
          aria-label={`关闭提示：${title}`}
          className="press-feedback shrink-0 grid place-items-center size-6 -mr-1 rounded
            text-[var(--color-text-subtle)] hover:text-[var(--color-text)] cursor-pointer"
        >
          <Icon icon={X} size={14} />
        </button>
      )}
    </div>
  );
}