import type React from 'react';
import {
  TeamOutlined,
  PhoneOutlined,
  TagsOutlined,
  RiseOutlined,
  DashboardOutlined,
  BarChartOutlined,
  PieChartOutlined,
  LineChartOutlined,
  FunnelPlotOutlined,
  AppstoreOutlined,
  UserOutlined,
  ShoppingOutlined,
  FileTextOutlined,
  DatabaseOutlined,
} from '@ant-design/icons';

// ── 通用调色板 ──

const UNIVERSAL_COLORS = [
  { gradient: 'linear-gradient(135deg, #2563eb, #60a5fa)', iconBg: 'rgba(79, 70, 229, 0.12)', tagColor: 'purple' },
  { gradient: 'linear-gradient(135deg, #059669, #10B981)', iconBg: 'rgba(5, 150, 105, 0.12)', tagColor: 'green' },
  { gradient: 'linear-gradient(135deg, #d97706, #F59E0B)', iconBg: 'rgba(217, 119, 6, 0.12)', tagColor: 'orange' },
  { gradient: 'linear-gradient(135deg, #7C3AED, #A78BFA)', iconBg: 'rgba(124, 58, 237, 0.12)', tagColor: 'volcano' },
  { gradient: 'linear-gradient(135deg, #E11D48, #F43F5E)', iconBg: 'rgba(225, 29, 72, 0.12)', tagColor: 'red' },
  { gradient: 'linear-gradient(135deg, #0891B2, #06B6D4)', iconBg: 'rgba(8, 145, 178, 0.12)', tagColor: 'cyan' },
  { gradient: 'linear-gradient(135deg, #EA580C, #F97316)', iconBg: 'rgba(234, 88, 12, 0.12)', tagColor: 'orange' },
  { gradient: 'linear-gradient(135deg, #DB2777, #EC4899)', iconBg: 'rgba(219, 39, 119, 0.12)', tagColor: 'magenta' },
];

export const DEFAULT_PALETTE = {
  gradient: 'linear-gradient(135deg, #2563EB, #3B82F6)',
  iconBg: 'rgba(37, 99, 235, 0.12)',
  tagColor: 'blue',
};

export const TAG_COLORS = [
  'blue', 'green', 'orange', 'red', 'purple', 'cyan',
  'magenta', 'gold', 'lime', 'geekblue', 'volcano',
];

// ── 按实体顺序自动分配颜色 ──

const paletteCache = new Map<string, { gradient: string; iconBg: string; tagColor: string }>();

export function getEntityPalette(entityName: string, index: number) {
  const cached = paletteCache.get(entityName);
  if (cached) return cached;
  const safeIndex = index >= 0 ? index : 0;
  const palette = UNIVERSAL_COLORS[safeIndex % UNIVERSAL_COLORS.length];
  paletteCache.set(entityName, palette);
  return palette;
}

// ── 通用图标映射 ──

const ICON_MAP: Record<string, React.ReactNode> = {
  team: <TeamOutlined />,
  user: <UserOutlined />,
  users: <TeamOutlined />,
  message: <PhoneOutlined />,
  phone: <PhoneOutlined />,
  tags: <TagsOutlined />,
  tag: <TagsOutlined />,
  apartment: <RiseOutlined />,
  dashboard: <DashboardOutlined />,
  shopping: <ShoppingOutlined />,
  file: <FileTextOutlined />,
  database: <DatabaseOutlined />,
  appstore: <AppstoreOutlined />,
};

export function getEntityIcon(iconName?: string): React.ReactNode {
  if (!iconName) return <AppstoreOutlined />;
  return ICON_MAP[iconName.toLowerCase().replace('outlined', '')] ?? <AppstoreOutlined />;
}

export const WIDGET_ICON_MAP: Record<string, React.ReactNode> = {
  stat_card: <DashboardOutlined />,
  bar_chart: <BarChartOutlined />,
  pie_chart: <PieChartOutlined />,
  funnel_chart: <FunnelPlotOutlined />,
  line_chart: <LineChartOutlined />,
  stat_cards: <DashboardOutlined />,
  action_list: <AppstoreOutlined />,
  funnel: <FunnelPlotOutlined />,
  card_list: <DatabaseOutlined />,
};

// ── 延迟类名工具 ──

const DELAY_CLASSES = [
  'erp-fade-in erp-fade-in-delay-1',
  'erp-fade-in erp-fade-in-delay-2',
  'erp-fade-in erp-fade-in-delay-3',
  'erp-fade-in erp-fade-in-delay-4',
  'erp-fade-in erp-fade-in-delay-4',
];

export function getDelayClass(index: number): string {
  return DELAY_CLASSES[index % DELAY_CLASSES.length];
}