import { defineConfig, presetWind4, presetIcons, presetTypography } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4(),
    presetTypography({
      cssExtend: {
        ':not(pre) > code': {
          'font-family': '"SF Mono", "Fira Code", Consolas, monospace',
          'font-size': '0.875em',
          'background': '#fafafa',
          'padding': '0.175rem 0.375rem',
          'border-radius': '0.25rem',
        },
        'p': {
          'margin': '1.25rem 0',
          'line-height': '1.7',
        },
        'h1': {
          'margin-top': '0',
          'margin-bottom': '1.25rem',
          'font-size': '2rem',
          'font-weight': '700',
          'letter-spacing': '-0.025em',
          'line-height': '1.2',
        },
        'h2': {
          'margin-top': '2.5rem',
          'margin-bottom': '1.25rem',
          'font-size': '1.5rem',
          'font-weight': '650',
          'letter-spacing': '-0.02em',
          'line-height': '1.3',
        },
        'h3': {
          'margin-top': '2rem',
          'margin-bottom': '1rem',
          'font-size': '1.25rem',
          'font-weight': '600',
          'letter-spacing': '-0.015em',
          'line-height': '1.35',
        },
        'h4': {
          'margin-top': '1.625rem',
          'margin-bottom': '0.8rem',
          'font-size': '1.0625rem',
          'font-weight': '600',
          'letter-spacing': '-0.01em',
        },
        'ul': {
          'list-style-type': 'disc',
          'margin': '1.25rem 0',
          'padding-left': '1.375rem',
        },
        'ol': {
          'list-style-type': 'decimal',
          'margin': '1.25rem 0',
          'padding-left': '1.375rem',
        },
        'li': {
          'margin': '0.5rem 0',
          'padding-left': '0.25rem',
        },
        'li::marker': {
          'color': '#71717a',
        },
        'a': {
          'color': '#2563eb',
          'text-decoration': 'underline',
          'text-underline-offset': '2px',
          'text-decoration-color': 'rgba(37, 99, 235, 0.4)',
        },
        'a:hover': {
          'text-decoration-color': '#2563eb',
        },
        'pre': {
          'margin': '1.75rem 0',
          'padding': '1.125rem 1.25rem',
          'background': '#fafafa',
          'border': '1px solid #e4e4e7',
          'border-radius': '0.375rem',
          'overflow-x': 'auto',
          'font-family': '"SF Mono", "Fira Code", Consolas, monospace',
          'font-size': '0.875rem',
          'line-height': '1.6',
        },
        'pre code': {
          'background': 'transparent',
          'padding': '0',
          'font-size': 'inherit',
        },
        'blockquote': {
          'margin': '1.75rem 0',
          'padding': '0 0 0 1.25rem',
          'border-left': '2px solid #e4e4e7',
          'color': '#71717a',
          'font-style': 'normal',
        },
        'blockquote p': {
          'margin': '0',
        },
        'hr': {
          'border': 'none',
          'border-top': '1px solid #e4e4e7',
          'margin': '2.5rem 0',
        },
        'img': {
          'max-width': '100%',
          'height': 'auto',
          'border-radius': '0.375rem',
          'margin': '1.75rem 0',
        },
        'table': {
          'width': '100%',
          'margin': '1.75rem 0',
          'border-collapse': 'collapse',
          'font-size': '0.9375rem',
        },
        'th': {
          'padding': '0.625rem 0.75rem',
          'border': '1px solid #e4e4e7',
          'text-align': 'left',
          'background': '#fafafa',
          'font-weight': '600',
        },
        'td': {
          'padding': '0.625rem 0.75rem',
          'border': '1px solid #e4e4e7',
          'text-align': 'left',
        },
        'strong': {
          'font-weight': '600',
        },
      },
    }),
    presetIcons({
      scale: 1.2,
      cdn: 'https://esm.sh/',
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
    }),
  ],
  rules: [
    ['animate-shimmer', { animation: 'shimmer 1.5s ease-in-out infinite' }],
  ],
  preflights: [
    {
      getCSS: () => `
        @keyframes shimmer {
          0% { opacity: 1; }
          50% { opacity: 0.5; }
          100% { opacity: 1; }
        }
        @keyframes fade-in {
          from { opacity: 0; transform: translateY(4px); }
          to { opacity: 1; transform: translateY(0); }
        }

        /* ProseMirror editor placeholder */
        .ProseMirror p.is-editor-empty:first-child::before {
          color: #a3a3a3;
          content: attr(data-placeholder);
          float: left;
          height: 0;
          pointer-events: none;
        }

        /* Task list styling */
        .prose ul[data-type="taskList"] {
          list-style: none;
          padding-left: 0;
        }

        .prose ul[data-type="taskList"] li {
          display: flex;
          align-items: baseline;
          gap: 0.5rem;
        }

        .prose ul[data-type="taskList"] li > label {
          flex-shrink: 0;
          user-select: none;
          display: flex;
          align-items: center;
          height: 1.5em;
        }

        .prose ul[data-type="taskList"] li > label input[type="checkbox"] {
          cursor: pointer;
          accent-color: #10b981;
          width: 1em;
          height: 1em;
          margin: 0;
        }

        .prose ul[data-type="taskList"] li > div {
          flex: 1;
        }

        /* Code block syntax highlighting */
        .prose pre .hljs {
          background: transparent;
        }
      `,
    },
  ],
  theme: {
    colors: {
      bg: '#fafafa',
      surface: '#ffffff',
      text: '#0a0a0a',
      muted: '#737373',
      border: '#e5e5e5',
      accent: '#10b981',
      success: '#10b981',
      warning: '#f59e0b',
      danger: '#ef4444',
    },
    fontFamily: {
      sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
      mono: '"SF Mono", "JetBrains Mono", "Fira Code", Consolas, monospace',
    },
  },
  shortcuts: {
    // Buttons - dark bg with light text for primary
    'btn': 'inline-flex items-center justify-center gap-2 px-4 py-2 text-xs font-medium border border-border transition-all duration-150 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',
    'btn-primary': 'btn bg-text text-bg border-text hover:bg-[#1a1a1a]',
    'btn-secondary': 'btn bg-bg text-text hover:border-muted',
    'btn-danger': 'btn text-danger border-danger hover:bg-danger hover:text-white hover:border-danger',
    'btn-ghost': 'btn border-transparent hover:bg-border',

    // Inputs - clean borders, minimal styling
    'input': 'w-full px-3 py-2 text-sm bg-bg border border-border font-sans focus:outline-none focus:border-muted transition-colors placeholder:text-muted/60',
    'textarea': 'input resize-none',

    // Labels - small, muted
    'label': 'block text-xs text-muted font-medium mb-1',

    // Cards - minimal borders, no shadows
    'card': 'bg-surface border border-border p-6',
    'section': 'card',

    // Navigation - matching old dashboard
    'nav-item': 'relative flex items-center gap-2.5 px-2.5 py-2 text-[13px] font-[450] text-muted transition-all duration-150 hover:text-text hover:bg-black/4',
    'nav-item-active': 'relative flex items-center gap-2.5 px-2.5 py-2 text-[13px] font-[450] text-text bg-black/4 before:content-[""] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-[3px] before:h-4 before:bg-accent before:rounded-r-sm',
    'nav-section': 'text-[10px] uppercase tracking-[0.06em] text-muted font-semibold px-2.5 pt-3 pb-1.5',

    // Badges
    'badge': 'inline-flex items-center text-xs px-2 py-0.5 border',
    'badge-draft': 'badge text-warning border-warning/40 bg-warning/10',
    'badge-published': 'badge text-success border-success/40 bg-success/10',

    // Page structure
    'page-header': 'flex items-center justify-between mb-6',
    'page-title': 'text-base font-medium text-text',
  },
})