import type { NodeType, EdgeType, NodeStatus } from '@/types'

export type ThemeId = 'default' | 'dark' | 'light' | 'neon' | 'matrix' | 'custom'

export interface ThemeColors {
  // Per node-type accent (border + icon)
  nodeAccents: Record<NodeType, { border: string; icon: string }>
  // Node surfaces
  nodeCardBackground: string
  nodeIconBackground: string
  nodeLabelColor: string
  nodeSubtextColor: string
  // Status indicator dots
  statusColors: Record<NodeStatus, string>
  // Edges
  edgeColors: Record<EdgeType, string>
  edgeSelectedColor: string
  edgeLabelBackground: string
  edgeLabelColor: string
  edgeLabelBorder: string
  // Canvas
  canvasBackground: string
  canvasDotColor: string
  // React Flow handles
  handleBackground: string
  handleBorder: string
  // React Flow colorMode for built-in controls
  reactFlowColorMode: 'dark' | 'light'
}

export interface ThemePreset {
  id: ThemeId
  label: string
  description: string
  colors: ThemeColors
}

export const THEMES: Record<ThemeId, ThemePreset> = {
  default: {
    id: 'default',
    label: 'Default',
    description: 'Dark futuristic — the original Homelable look',
    colors: {
      nodeAccents: {
        isp:          { border: '#00d4ff', icon: '#00d4ff' },
        router:       { border: '#00d4ff', icon: '#00d4ff' },
        switch:       { border: '#39d353', icon: '#39d353' },
        server:       { border: '#a855f7', icon: '#a855f7' },
        proxmox:      { border: '#ff6e00', icon: '#ff6e00' },
        vm:           { border: '#a855f7', icon: '#a855f7' },
        lxc:          { border: '#00d4ff', icon: '#00d4ff' },
        nas:          { border: '#39d353', icon: '#39d353' },
        iot:          { border: '#e3b341', icon: '#e3b341' },
        ap:           { border: '#00d4ff', icon: '#00d4ff' },
        camera:       { border: '#8b949e', icon: '#8b949e' },
        printer:      { border: '#8b949e', icon: '#8b949e' },
        computer:     { border: '#a855f7', icon: '#a855f7' },
        cpl:          { border: '#e3b341', icon: '#e3b341' },
        docker_host:       { border: '#2496ED', icon: '#2496ED' },
        docker_container:  { border: '#0ea5e9', icon: '#0ea5e9' },
        generic:           { border: '#8b949e', icon: '#8b949e' },
        groupRect:         { border: '#00d4ff', icon: '#00d4ff' },
        group:             { border: '#00d4ff', icon: '#00d4ff' },
      },
      nodeCardBackground: '#21262d',
      nodeIconBackground: '#161b22',
      nodeLabelColor: '#e6edf3',
      nodeSubtextColor: '#8b949e',
      statusColors: {
        online:  '#39d353',
        offline: '#f85149',
        pending: '#e3b341',
        unknown: '#8b949e',
      },
      edgeColors: {
        ethernet: '#30363d',
        wifi:     '#00d4ff',
        iot:      '#e3b341',
        vlan:     '#00d4ff',
        virtual:  '#8b949e',
        cluster:  '#ff6e00',
      },
      edgeSelectedColor:  '#00d4ff',
      edgeLabelBackground:'#161b22',
      edgeLabelColor:     '#8b949e',
      edgeLabelBorder:    '#30363d',
      canvasBackground:   '#0d1117',
      canvasDotColor:     '#30363d',
      handleBackground:   '#30363d',
      handleBorder:       '#8b949e',
      reactFlowColorMode: 'dark',
    },
  },

  dark: {
    id: 'dark',
    label: 'Dark',
    description: 'Pure black with maximum contrast',
    colors: {
      nodeAccents: {
        isp:           { border: '#22d3ee', icon: '#22d3ee' },
        router:        { border: '#22d3ee', icon: '#22d3ee' },
        switch:        { border: '#4ade80', icon: '#4ade80' },
        server:        { border: '#c084fc', icon: '#c084fc' },
        proxmox:       { border: '#fb923c', icon: '#fb923c' },
        vm:            { border: '#c084fc', icon: '#c084fc' },
        lxc:           { border: '#22d3ee', icon: '#22d3ee' },
        nas:           { border: '#4ade80', icon: '#4ade80' },
        iot:           { border: '#fbbf24', icon: '#fbbf24' },
        ap:            { border: '#22d3ee', icon: '#22d3ee' },
        camera:        { border: '#94a3b8', icon: '#94a3b8' },
        printer:       { border: '#94a3b8', icon: '#94a3b8' },
        computer:      { border: '#c084fc', icon: '#c084fc' },
        cpl:           { border: '#fbbf24', icon: '#fbbf24' },
        docker_host:       { border: '#2496ED', icon: '#2496ED' },
        docker_container:  { border: '#38bdf8', icon: '#38bdf8' },
        generic:           { border: '#94a3b8', icon: '#94a3b8' },
        groupRect:         { border: '#22d3ee', icon: '#22d3ee' },
        group:             { border: '#22d3ee', icon: '#22d3ee' },
      },
      nodeCardBackground: '#0a0a0a',
      nodeIconBackground: '#111111',
      nodeLabelColor:     '#ffffff',
      nodeSubtextColor:   '#666666',
      statusColors: {
        online:  '#4ade80',
        offline: '#ef4444',
        pending: '#fbbf24',
        unknown: '#6b7280',
      },
      edgeColors: {
        ethernet: '#1c1c1e',
        wifi:     '#22d3ee',
        iot:      '#fbbf24',
        vlan:     '#22d3ee',
        virtual:  '#6b7280',
        cluster:  '#fb923c',
      },
      edgeSelectedColor:  '#22d3ee',
      edgeLabelBackground:'#111111',
      edgeLabelColor:     '#666666',
      edgeLabelBorder:    '#1c1c1e',
      canvasBackground:   '#000000',
      canvasDotColor:     '#1a1a1a',
      handleBackground:   '#1c1c1e',
      handleBorder:       '#444444',
      reactFlowColorMode: 'dark',
    },
  },

  light: {
    id: 'light',
    label: 'Light',
    description: 'Clean light theme with dark text',
    colors: {
      nodeAccents: {
        isp:           { border: '#0284c7', icon: '#0284c7' },
        router:        { border: '#0284c7', icon: '#0284c7' },
        switch:        { border: '#16a34a', icon: '#16a34a' },
        server:        { border: '#7c3aed', icon: '#7c3aed' },
        proxmox:       { border: '#ea580c', icon: '#ea580c' },
        vm:            { border: '#7c3aed', icon: '#7c3aed' },
        lxc:           { border: '#0284c7', icon: '#0284c7' },
        nas:           { border: '#16a34a', icon: '#16a34a' },
        iot:           { border: '#b45309', icon: '#b45309' },
        ap:            { border: '#0284c7', icon: '#0284c7' },
        camera:        { border: '#6b7280', icon: '#6b7280' },
        printer:       { border: '#6b7280', icon: '#6b7280' },
        computer:      { border: '#7c3aed', icon: '#7c3aed' },
        cpl:           { border: '#b45309', icon: '#b45309' },
        docker_host:       { border: '#2496ED', icon: '#2496ED' },
        docker_container:  { border: '#0369a1', icon: '#0369a1' },
        generic:           { border: '#6b7280', icon: '#6b7280' },
        groupRect:         { border: '#0284c7', icon: '#0284c7' },
        group:             { border: '#0284c7', icon: '#0284c7' },
      },
      nodeCardBackground: '#ffffff',
      nodeIconBackground: '#f0f6ff',
      nodeLabelColor:     '#1f2328',
      nodeSubtextColor:   '#57606a',
      statusColors: {
        online:  '#16a34a',
        offline: '#dc2626',
        pending: '#d97706',
        unknown: '#6b7280',
      },
      edgeColors: {
        ethernet: '#d0d7de',
        wifi:     '#0284c7',
        iot:      '#d97706',
        vlan:     '#0284c7',
        virtual:  '#9ca3af',
        cluster:  '#ea580c',
      },
      edgeSelectedColor:  '#0284c7',
      edgeLabelBackground:'#ffffff',
      edgeLabelColor:     '#57606a',
      edgeLabelBorder:    '#d0d7de',
      canvasBackground:   '#f6f8fa',
      canvasDotColor:     '#d0d7de',
      handleBackground:   '#d0d7de',
      handleBorder:       '#9ca3af',
      reactFlowColorMode: 'light',
    },
  },

  neon: {
    id: 'neon',
    label: 'Neon',
    description: 'Cyberpunk vibes with vivid glowing accents',
    colors: {
      nodeAccents: {
        isp:          { border: '#00ffff', icon: '#00ffff' },
        router:       { border: '#00ffff', icon: '#00ffff' },
        switch:       { border: '#00ff80', icon: '#00ff80' },
        server:       { border: '#ff00ff', icon: '#ff00ff' },
        proxmox:      { border: '#ff8800', icon: '#ff8800' },
        vm:           { border: '#ff00ff', icon: '#ff00ff' },
        lxc:          { border: '#00ffff', icon: '#00ffff' },
        nas:          { border: '#00ff80', icon: '#00ff80' },
        iot:          { border: '#ffff00', icon: '#ffff00' },
        ap:           { border: '#00ffff', icon: '#00ffff' },
        camera:       { border: '#8888ff', icon: '#8888ff' },
        printer:      { border: '#8888ff', icon: '#8888ff' },
        computer:     { border: '#ff00ff', icon: '#ff00ff' },
        cpl:          { border: '#ffff00', icon: '#ffff00' },
        docker_host:       { border: '#00aaff', icon: '#00aaff' },
        docker_container:  { border: '#00ddff', icon: '#00ddff' },
        generic:           { border: '#8888ff', icon: '#8888ff' },
        groupRect:         { border: '#00ffff', icon: '#00ffff' },
        group:             { border: '#00ffff', icon: '#00ffff' },
      },
      nodeCardBackground: '#0f0f2a',
      nodeIconBackground: '#0a0a1a',
      nodeLabelColor:     '#ffffff',
      nodeSubtextColor:   '#8888cc',
      statusColors: {
        online:  '#00ff80',
        offline: '#ff0040',
        pending: '#ffff00',
        unknown: '#8888cc',
      },
      edgeColors: {
        ethernet: '#1a1a3a',
        wifi:     '#00ffff',
        iot:      '#ffff00',
        vlan:     '#00ffff',
        virtual:  '#8888cc',
        cluster:  '#ff8800',
      },
      edgeSelectedColor:  '#00ffff',
      edgeLabelBackground:'#0a0a1a',
      edgeLabelColor:     '#8888cc',
      edgeLabelBorder:    '#1a1a3a',
      canvasBackground:   '#05050f',
      canvasDotColor:     '#1a1a3a',
      handleBackground:   '#1a1a3a',
      handleBorder:       '#8888cc',
      reactFlowColorMode: 'dark',
    },
  },

  matrix: {
    id: 'matrix',
    label: 'Matrix',
    description: 'Everything in terminal green',
    colors: {
      nodeAccents: {
        isp:          { border: '#00ff41', icon: '#00ff41' },
        router:       { border: '#00ff41', icon: '#00ff41' },
        switch:       { border: '#00cc33', icon: '#00cc33' },
        server:       { border: '#008822', icon: '#008822' },
        proxmox:      { border: '#33ff66', icon: '#33ff66' },
        vm:           { border: '#008822', icon: '#008822' },
        lxc:          { border: '#00ff41', icon: '#00ff41' },
        nas:          { border: '#00cc33', icon: '#00cc33' },
        iot:          { border: '#66ff33', icon: '#66ff33' },
        ap:           { border: '#00ff41', icon: '#00ff41' },
        camera:       { border: '#005500', icon: '#005500' },
        printer:      { border: '#005500', icon: '#005500' },
        computer:     { border: '#008822', icon: '#008822' },
        cpl:          { border: '#66ff33', icon: '#66ff33' },
        docker_host:       { border: '#00cc88', icon: '#00cc88' },
        docker_container:  { border: '#00aacc', icon: '#00aacc' },
        generic:           { border: '#006600', icon: '#006600' },
        groupRect:         { border: '#00ff41', icon: '#00ff41' },
        group:             { border: '#00ff41', icon: '#00ff41' },
      },
      nodeCardBackground: '#001100',
      nodeIconBackground: '#002200',
      nodeLabelColor:     '#00ff41',
      nodeSubtextColor:   '#006600',
      statusColors: {
        online:  '#00ff41',
        offline: '#ff0000',
        pending: '#88ff00',
        unknown: '#004400',
      },
      edgeColors: {
        ethernet: '#003300',
        wifi:     '#00ff41',
        iot:      '#66ff33',
        vlan:     '#00cc33',
        virtual:  '#004400',
        cluster:  '#33ff66',
      },
      edgeSelectedColor:  '#00ff41',
      edgeLabelBackground:'#001100',
      edgeLabelColor:     '#006600',
      edgeLabelBorder:    '#003300',
      canvasBackground:   '#000000',
      canvasDotColor:     '#002200',
      handleBackground:   '#003300',
      handleBorder:       '#006600',
      reactFlowColorMode: 'dark',
    },
  },

  custom: {
    id: 'custom',
    label: 'Custom',
    description: 'Your own colors per node and edge type',
    colors: {
      nodeAccents: {
        isp:              { border: '#00d4ff', icon: '#00d4ff' },
        router:           { border: '#00d4ff', icon: '#00d4ff' },
        switch:           { border: '#39d353', icon: '#39d353' },
        server:           { border: '#a855f7', icon: '#a855f7' },
        proxmox:          { border: '#ff6e00', icon: '#ff6e00' },
        vm:               { border: '#a855f7', icon: '#a855f7' },
        lxc:              { border: '#00d4ff', icon: '#00d4ff' },
        nas:              { border: '#39d353', icon: '#39d353' },
        iot:              { border: '#e3b341', icon: '#e3b341' },
        ap:               { border: '#00d4ff', icon: '#00d4ff' },
        camera:           { border: '#8b949e', icon: '#8b949e' },
        printer:          { border: '#8b949e', icon: '#8b949e' },
        computer:         { border: '#a855f7', icon: '#a855f7' },
        cpl:              { border: '#e3b341', icon: '#e3b341' },
        docker_host:      { border: '#2496ED', icon: '#2496ED' },
        docker_container: { border: '#0ea5e9', icon: '#0ea5e9' },
        generic:          { border: '#8b949e', icon: '#8b949e' },
        groupRect:        { border: '#00d4ff', icon: '#00d4ff' },
        group:            { border: '#00d4ff', icon: '#00d4ff' },
      },
      nodeCardBackground: '#21262d',
      nodeIconBackground: '#161b22',
      nodeLabelColor:     '#e6edf3',
      nodeSubtextColor:   '#8b949e',
      statusColors: {
        online:  '#39d353',
        offline: '#f85149',
        pending: '#e3b341',
        unknown: '#8b949e',
      },
      edgeColors: {
        ethernet: '#30363d',
        wifi:     '#00d4ff',
        iot:      '#e3b341',
        vlan:     '#00d4ff',
        virtual:  '#8b949e',
        cluster:  '#ff6e00',
      },
      edgeSelectedColor:  '#00d4ff',
      edgeLabelBackground:'#161b22',
      edgeLabelColor:     '#8b949e',
      edgeLabelBorder:    '#30363d',
      canvasBackground:   '#0d1117',
      canvasDotColor:     '#30363d',
      handleBackground:   '#30363d',
      handleBorder:       '#8b949e',
      reactFlowColorMode: 'dark',
    },
  },
}

// Ordered list for display in the modal
export const THEME_ORDER: ThemeId[] = ['default', 'dark', 'light', 'neon', 'matrix', 'custom']