import React from 'react';

const svgProps = {
  xmlns: 'http://www.w3.org/2000/svg',
  width: 18,
  height: 18,
  viewBox: '0 0 24 24',
  fill: 'none',
  stroke: 'currentColor',
  strokeWidth: 2,
  strokeLinecap: 'round',
  strokeLinejoin: 'round',
  'aria-hidden': true,
};

export const KPI_HELP_ICON = (
  <svg {...svgProps} width={14} height={14}>
    <circle cx="12" cy="12" r="10" />
    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
    <path d="M12 17h.01" />
  </svg>
);

export const VIEW_KPI_ICONS = {
  all: (
    <svg {...svgProps}>
      <rect width="7" height="7" x="3" y="3" rx="1" />
      <rect width="7" height="7" x="14" y="3" rx="1" />
      <rect width="7" height="7" x="14" y="14" rx="1" />
      <rect width="7" height="7" x="3" y="14" rx="1" />
    </svg>
  ),
  published: (
    <svg {...svgProps}>
      <path d="M12 20h9" />
      <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
    </svg>
  ),
  supervise: (
    <svg {...svgProps}>
      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
      <circle cx="9" cy="7" r="4" />
      <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
    </svg>
  ),
};

export const STATUS_KPI_ICONS = {
  pending: (
    <svg {...svgProps}>
      <circle cx="12" cy="12" r="10" />
      <polyline points="12 6 12 12 16 14" />
    </svg>
  ),
  overdue: (
    <svg {...svgProps}>
      <circle cx="12" cy="12" r="10" />
      <line x1="12" x2="12" y1="8" y2="12" />
      <line x1="12" x2="12.01" y1="16" y2="16" />
    </svg>
  ),
  in_progress: (
    <svg {...svgProps}>
      <circle cx="12" cy="12" r="10" />
      <polygon points="10 8 16 12 10 16 10 8" />
    </svg>
  ),
  mileage: (
    <svg {...svgProps}>
      <path d="M14 16H9m10 0h3v-3.15a1 1 0 0 0-.84-.99L16 11l-2.7-3.6a1 1 0 0 0-.8-.4H8.24a1 1 0 0 0-.96.74L5 11H2" />
      <circle cx="6" cy="16" r="2" />
      <circle cx="18" cy="16" r="2" />
    </svg>
  ),
};

export const EXPORT_ICON = (
  <svg {...svgProps} width={16} height={16}>
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
    <polyline points="7 10 12 15 17 10" />
    <line x1="12" x2="12" y1="15" y2="3" />
  </svg>
);

export const SEARCH_ICON = (
  <svg {...svgProps} width={16} height={16}>
    <circle cx="11" cy="11" r="8" />
    <path d="m21 21-4.3-4.3" />
  </svg>
);

export function KpiHelpTip({ title, desc }) {
  return (
    <span
      className="vm-kpi-tip"
      tabIndex={0}
      role="note"
      aria-label={`${title}说明`}
      onClick={(e) => e.stopPropagation()}
      onMouseDown={(e) => e.stopPropagation()}
    >
      {KPI_HELP_ICON}
      <span className="vm-kpi-tooltip" role="tooltip">
        {desc}
      </span>
    </span>
  );
}

export function KpiCardButton({ active, icon, title, count, desc, className, onClick, ariaLabel }) {
  return (
    <button
      type="button"
      className={`vm-kpi-card${active ? ' active' : ''}${className ? ` ${className}` : ''}`}
      onClick={onClick}
      aria-pressed={active}
      aria-label={ariaLabel || `${title}，${count} 条`}
    >
      <KpiHelpTip title={title} desc={desc} />
      <span className="vm-kpi-icon">{icon}</span>
      <span className="vm-kpi-main">
        <span className="vm-kpi-eyebrow">{title}</span>
        <span className="vm-kpi-val tabular-nums">{count}</span>
      </span>
    </button>
  );
}
