/**
 * 通知中心 — 烽火台
 * 显示系统通知、审批请求、告警信息
 */

import { useState } from 'react';
import { useStore } from '../store';

export interface Notification {
  id: string;
  type: 'info' | 'warning' | 'success' | 'error';
  title: string;
  message: string;
  time: string;
  read: boolean;
}

const TYPE_STYLES: Record<string, { icon: string; color: string }> = {
  info: { icon: 'ℹ️', color: '#6a9eff' },
  warning: { icon: '⚠️', color: '#f5c842' },
  success: { icon: '✅', color: '#2ecc8a' },
  error: { icon: '🚨', color: '#ff5270' },
};

export default function NotificationCenter({ onClose }: { onClose: () => void }) {
  const [notifications] = useState<Notification[]>([]);
  const unread = notifications.filter((n) => !n.read).length;

  return (
    <div className="confirm-bg open" onClick={onClose}>
      <div className="confirm-box" style={{ maxWidth: 400, maxHeight: 500 }} onClick={(e) => e.stopPropagation()}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <span style={{ fontSize: 14, fontWeight: 700 }}>🔔 烽火台</span>
          {unread > 0 && (
            <span style={{ fontSize: 10, padding: '2px 8px', borderRadius: 10, background: '#ff5270', color: '#fff', fontWeight: 600 }}>
              {unread}
            </span>
          )}
        </div>

        {notifications.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '20px 0' }}>
            <div style={{ fontSize: 28, marginBottom: 8 }}>🔕</div>
            <div style={{ fontSize: 12, color: 'var(--muted)' }}>暂无烽火（通知功能待后端支持）</div>
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, maxHeight: 380, overflow: 'auto' }}>
            {notifications.map((n) => {
              const style = TYPE_STYLES[n.type] || TYPE_STYLES.info;
              return (
                <div
                  key={n.id}
                  style={{
                    padding: '10px 12px', borderRadius: 8,
                    background: 'var(--panel2)', border: `1px solid ${n.read ? 'var(--line)' : style.color + '44'}`,
                    opacity: n.read ? 0.6 : 1,
                  }}
                >
                  <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginBottom: 4 }}>
                    <span>{style.icon}</span>
                    <span style={{ fontSize: 12, fontWeight: 600 }}>{n.title}</span>
                    <span style={{ marginLeft: 'auto', fontSize: 10, color: 'var(--muted)' }}>{n.time}</span>
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--muted)' }}>{n.message}</div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}
