import React, { useState } from 'react';
import { Button, Card, Flex, Typography } from 'antd';
import { CloseOutlined, RightOutlined, StepForwardOutlined } from '@ant-design/icons';

export interface NextStepHintProps {
  /** 提示标题，如「下一步：分班」 */
  title: string;
  /** 补充说明 */
  description?: string;
  /** 主操作按钮（跳转到下一步） */
  action?: { label: string; onClick: () => void };
  /** 是否可关闭，默认 true */
  closable?: boolean;
  /** 关闭回调 */
  onClose?: () => void;
}

/**
 * 「下一步」引导卡片：在操作成功后或空状态下提示用户业务闭环的下一步，
 * 让用户始终知道接下来该做什么。
 */
export const NextStepHint: React.FC<NextStepHintProps> = ({
  title,
  description,
  action,
  closable = true,
  onClose,
}) => {
  const [dismissed, setDismissed] = useState(false);
  if (dismissed) return null;

  return (
    <Card
      size="small"
      className="next-step-hint"
      style={{ marginBottom: 16, borderColor: '#b7d4ff', background: '#f0f7ff' }}
      styles={{ body: { padding: '10px 16px' } }}
    >
      <Flex align="center" justify="space-between" gap={8} wrap>
        <Flex align="center" gap={8} wrap>
          <StepForwardOutlined style={{ color: '#1677ff' }} />
          <Typography.Text strong>{title}</Typography.Text>
          {description ? <Typography.Text type="secondary">{description}</Typography.Text> : null}
        </Flex>
        <Flex gap={4} align="center">
          {action ? (
            <Button type="primary" size="small" onClick={action.onClick}>
              {action.label} <RightOutlined />
            </Button>
          ) : null}
          {closable ? (
            <Button
              type="text"
              size="small"
              icon={<CloseOutlined />}
              aria-label="关闭提示"
              onClick={() => {
                setDismissed(true);
                onClose?.();
              }}
            />
          ) : null}
        </Flex>
      </Flex>
    </Card>
  );
};

export default NextStepHint;