/**
 * 星环OPC中心 — Dashboard 监控中心 UI
 *
 * 生成 Dashboard 页面的 HTML/CSS，包含：
 * - 4个关键指标卡片（本月收入、本月利润、现金余额、应收账款）
 * - 风险预警列表
 * - 今日待办列表
 * - AI 建议区域
 */

export interface DashboardMetrics {
  monthlyIncome: number;
  monthlyIncomeChange: number; // 同比变化百分比
  monthlyProfit: number;
  monthlyProfitChange: number;
  cashBalance: number;
  monthsOfRunway: number; // 可撑月数
  receivables: number;
  overdueReceivables: number;
}

export interface DashboardAlert {
  id: string;
  title: string;
  severity: 'critical' | 'warning' | 'info';
  category: string;
  message: string;
  created_at: string;
}

export interface DashboardTodo {
  id: string;
  title: string;
  priority: 'urgent' | 'high' | 'normal';
  category: string;
  due_date?: string;
  description?: string;
}

export interface DashboardSuggestion {
  id: string;
  title: string;
  description: string;
  action?: {
    label: string;
    url?: string;
    onclick?: string;
  };
}

export interface DashboardData {
  metrics: DashboardMetrics;
  alerts: DashboardAlert[];
  todos: DashboardTodo[];
  suggestions: DashboardSuggestion[];
}

/**
 * 生成 Dashboard HTML
 */
export function generateDashboardHtml(data: DashboardData): string {
  return `
    <div class="dashboard-container">
      ${generateMetricsSection(data.metrics)}
      <div class="dashboard-two-column">
        <div class="dashboard-left-column">
          ${generateAlertsSection(data.alerts)}
          ${generateTodosSection(data.todos)}
        </div>
        <div class="dashboard-right-column">
          ${generateSuggestionsSection(data.suggestions)}
        </div>
      </div>
    </div>
  `;
}

/**
 * 生成关键指标卡片区域
 */
function generateMetricsSection(metrics: DashboardMetrics): string {
  const formatMoney = (amount: number) => {
    if (amount >= 10000) {
      return (amount / 10000).toFixed(1) + '万';
    }
    return amount.toFixed(0);
  };

  const formatChange = (change: number) => {
    const sign = change >= 0 ? '+' : '';
    const className = change >= 0 ? 'trend-up' : 'trend-down';
    const arrow = change >= 0 ? '↑' : '↓';
    return `<span class="${className}">${arrow} ${sign}${change.toFixed(1)}%</span>`;
  };

  return `
    <div class="stats-grid dashboard-metrics">
      <div class="stat-card">
        <div class="label">
          <span>本月收入</span>
          ${formatChange(metrics.monthlyIncomeChange)}
        </div>
        <div class="value">
          ¥${formatMoney(metrics.monthlyIncome)}
          <span class="unit">元</span>
        </div>
      </div>

      <div class="stat-card">
        <div class="label">
          <span>本月利润</span>
          ${formatChange(metrics.monthlyProfitChange)}
        </div>
        <div class="value">
          ¥${formatMoney(metrics.monthlyProfit)}
          <span class="unit">元</span>
        </div>
      </div>

      <div class="stat-card ${metrics.monthsOfRunway < 2 ? 'stat-card-warning' : ''}">
        <div class="label">
          <span>现金余额</span>
          ${metrics.monthsOfRunway < 2 ? '<span class="badge badge-critical">预警</span>' : ''}
        </div>
        <div class="value">
          ¥${formatMoney(metrics.cashBalance)}
          <span class="unit">元</span>
        </div>
        <div class="stat-card-footer">
          可撑 ${metrics.monthsOfRunway.toFixed(1)} 个月
        </div>
      </div>

      <div class="stat-card ${metrics.overdueReceivables > 0 ? 'stat-card-warning' : ''}">
        <div class="label">
          <span>应收账款</span>
          ${metrics.overdueReceivables > 0 ? '<span class="badge badge-warning">逾期</span>' : ''}
        </div>
        <div class="value">
          ¥${formatMoney(metrics.receivables)}
          <span class="unit">元</span>
        </div>
        ${metrics.overdueReceivables > 0 ? `
          <div class="stat-card-footer stat-card-footer-warning">
            逾期金额: ¥${formatMoney(metrics.overdueReceivables)}
          </div>
        ` : ''}
      </div>
    </div>
  `;
}

/**
 * 生成风险预警列表
 */
function generateAlertsSection(alerts: DashboardAlert[]): string {
  if (alerts.length === 0) {
    return `
      <div class="card dashboard-section">
        <h2>风险预警</h2>
        <div class="dashboard-empty-state">
          <div class="dashboard-empty-icon">✓</div>
          <p>暂无风险预警</p>
        </div>
      </div>
    `;
  }

  const alertItems = alerts.map(alert => {
    const severityClass = `alert-${alert.severity}`;
    const severityIcon = alert.severity === 'critical' ? '⚠️' :
                         alert.severity === 'warning' ? '⚡' : 'ℹ️';

    return `
      <div class="alert-banner ${severityClass}" data-alert-id="${alert.id}">
        <span class="alert-icon">${severityIcon}</span>
        <div class="alert-content">
          <div class="alert-title">${alert.title}</div>
          <div class="alert-message">${alert.message}</div>
        </div>
        <button class="alert-dismiss" onclick="dismissAlert('${alert.id}')" title="忽略">×</button>
      </div>
    `;
  }).join('');

  return `
    <div class="card dashboard-section">
      <h2>风险预警 <span class="badge badge-warning">${alerts.length}</span></h2>
      <div class="dashboard-alerts">
        ${alertItems}
      </div>
    </div>
  `;
}

/**
 * 生成今日待办列表
 */
function generateTodosSection(todos: DashboardTodo[]): string {
  if (todos.length === 0) {
    return `
      <div class="card dashboard-section">
        <h2>今日待办</h2>
        <div class="dashboard-empty-state">
          <div class="dashboard-empty-icon">✓</div>
          <p>太棒了！今天没有待办事项</p>
        </div>
      </div>
    `;
  }

  // 按优先级排序
  const sortedTodos = [...todos].sort((a, b) => {
    const priorityOrder = { urgent: 0, high: 1, normal: 2 };
    return priorityOrder[a.priority] - priorityOrder[b.priority];
  });

  const todoItems = sortedTodos.map(todo => {
    const priorityBadge = todo.priority === 'urgent' ? 'badge-critical' :
                          todo.priority === 'high' ? 'badge-warning' : 'badge-info';
    const priorityLabel = todo.priority === 'urgent' ? '紧急' :
                          todo.priority === 'high' ? '重要' : '一般';

    return `
      <div class="dashboard-todo-item">
        <div class="dashboard-todo-header">
          <span class="badge ${priorityBadge}">${priorityLabel}</span>
          <span class="dashboard-todo-category">${todo.category}</span>
        </div>
        <div class="dashboard-todo-title">${todo.title}</div>
        ${todo.description ? `<div class="dashboard-todo-desc">${todo.description}</div>` : ''}
        ${todo.due_date ? `<div class="dashboard-todo-due">截止: ${todo.due_date}</div>` : ''}
      </div>
    `;
  }).join('');

  return `
    <div class="card dashboard-section">
      <h2>今日待办 <span class="badge badge-info">${todos.length}</span></h2>
      <div class="dashboard-todos">
        ${todoItems}
      </div>
    </div>
  `;
}

/**
 * 生成 AI 建议区域
 */
function generateSuggestionsSection(suggestions: DashboardSuggestion[]): string {
  if (suggestions.length === 0) {
    return `
      <div class="card dashboard-section">
        <h2>AI 建议</h2>
        <div class="dashboard-empty-state">
          <div class="dashboard-empty-icon">💡</div>
          <p>暂无建议</p>
        </div>
      </div>
    `;
  }

  const suggestionItems = suggestions.map(suggestion => {
    const actionButton = suggestion.action ? `
      <button
        class="dashboard-suggestion-action"
        ${suggestion.action.onclick ? `onclick="${suggestion.action.onclick}"` : ''}
        ${suggestion.action.url ? `onclick="window.location.href='${suggestion.action.url}'"` : ''}
      >
        ${suggestion.action.label}
      </button>
    ` : '';

    return `
      <div class="dashboard-suggestion-item">
        <div class="dashboard-suggestion-title">${suggestion.title}</div>
        <div class="dashboard-suggestion-desc">${suggestion.description}</div>
        ${actionButton}
      </div>
    `;
  }).join('');

  return `
    <div class="card dashboard-section">
      <h2>💡 AI 建议</h2>
      <div class="dashboard-suggestions">
        ${suggestionItems}
      </div>
    </div>
  `;
}

/**
 * Dashboard 专用 CSS
 */
export function getDashboardCss(): string {
  return `
/* Dashboard Container */
.dashboard-container {
  animation: fadeIn 0.3s ease;
}

.dashboard-two-column {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 1200px) {
  .dashboard-two-column {
    grid-template-columns: 1fr;
  }
}

/* Metrics Cards */
.dashboard-metrics {
  margin-bottom: 28px;
}

.stat-card-warning {
  border-color: #fde68a;
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
}

.stat-card-footer {
  margin-top: 12px;
  font-size: 12px;
  color: var(--tx3);
}

.stat-card-footer-warning {
  color: #92400e;
  font-weight: 500;
}

/* Dashboard Sections */
.dashboard-section {
  margin-bottom: 20px;
}

/* Empty State */
.dashboard-empty-state {
  text-align: center;
  padding: 40px 20px;
}

.dashboard-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.3;
}

.dashboard-empty-state p {
  color: var(--tx3);
  font-size: 14px;
}

/* Alerts */
.dashboard-alerts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alert-banner {
  position: relative;
  padding-right: 40px;
}

.alert-icon {
  font-size: 18px;
  line-height: 1;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.alert-message {
  font-size: 12px;
  opacity: 0.9;
}

.alert-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: currentColor;
  opacity: 0.5;
  transition: all 0.15s;
}

.alert-dismiss:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

/* Todos */
.dashboard-todos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dashboard-todo-item {
  padding: 14px;
  background: #f9fafb;
  border-radius: 6px;
  border-left: 3px solid var(--bd);
  transition: all 0.15s;
}

.dashboard-todo-item:hover {
  background: #f3f4f6;
  border-left-color: var(--tx);
}

.dashboard-todo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.dashboard-todo-category {
  font-size: 11px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dashboard-todo-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--tx);
  margin-bottom: 4px;
}

.dashboard-todo-desc {
  font-size: 12px;
  color: var(--tx2);
  margin-bottom: 6px;
}

.dashboard-todo-due {
  font-size: 11px;
  color: var(--tx3);
}

/* Suggestions */
.dashboard-suggestions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dashboard-suggestion-item {
  padding: 16px;
  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
  border-radius: 8px;
  border: 1px solid #bae6fd;
}

.dashboard-suggestion-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--tx);
  margin-bottom: 6px;
}

.dashboard-suggestion-desc {
  font-size: 13px;
  color: var(--tx2);
  margin-bottom: 12px;
  line-height: 1.5;
}

.dashboard-suggestion-action {
  padding: 8px 16px;
  background: var(--tx);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font);
}

.dashboard-suggestion-action:hover {
  background: var(--pri-l);
  transform: translateY(-1px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-two-column {
    grid-template-columns: 1fr;
  }

  .main {
    padding: 20px 16px;
  }
}
`;
}

/**
 * Dashboard 专用 JavaScript
 */
export function getDashboardJs(): string {
  return `
// 忽略预警
async function dismissAlert(alertId) {
  if (!confirm('确定忽略此预警？')) return;

  try {
    const res = await fetch('/opc/admin/api/alerts/' + alertId + '/dismiss', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' }
    });

    if (res.ok) {
      showToast('预警已忽略', 'ok');
      // 移除元素
      const alertEl = document.querySelector('[data-alert-id="' + alertId + '"]');
      if (alertEl) {
        alertEl.style.opacity = '0';
        setTimeout(() => alertEl.remove(), 200);
      }
    } else {
      showToast('操作失败', 'err');
    }
  } catch (err) {
    showToast('网络错误', 'err');
  }
}

// 加载 Dashboard 数据
async function loadDashboard() {
  showLoading();

  try {
    const res = await fetch('/opc/admin/api/dashboard');
    if (!res.ok) throw new Error('加载失败');

    const data = await res.json();
    renderDashboard(data);
  } catch (err) {
    document.getElementById('app').innerHTML =
      '<div class="card"><p style="color:var(--err);">加载失败: ' + err.message + '</p></div>';
  } finally {
    hideLoading();
  }
}

// 渲染 Dashboard
function renderDashboard(data) {
  // Dashboard HTML 已在服务端生成，这里只需要绑定事件
  // 实际渲染逻辑在 config-ui.ts 的 renderDashboard 函数中
}
`;
}