import {
  ThemeDocument,
  ThemeElementStyles,
  ThemeLayoutEntry
} from '../models/theme.model';
import { THEME_LAYOUT_CONTAINERS, getLayoutEditableThemeKeys } from './theme-registry.logic';

function createProvidedDefaultLayout(): Record<string, ThemeLayoutEntry> {
  return {
    serversRail: {
      container: 'appShell',
      grid: { x: 0, y: 0, w: 1, h: 1 }
    },
    appWorkspace: {
      container: 'appShell',
      grid: { x: 1, y: 0, w: 19, h: 1 }
    },
    chatRoomChannelsPanel: {
      container: 'roomLayout',
      grid: { x: 0, y: 0, w: 4, h: 12 }
    },
    chatRoomMainPanel: {
      container: 'roomLayout',
      grid: { x: 4, y: 0, w: 12, h: 12 }
    },
    chatRoomMembersPanel: {
      container: 'roomLayout',
      grid: { x: 16, y: 0, w: 4, h: 12 }
    }
  };
}

export function createDefaultThemeLayout(): Record<string, ThemeLayoutEntry> {
  const layoutEntries: Record<string, ThemeLayoutEntry> = {};

  for (const key of getLayoutEditableThemeKeys()) {
    if (key === 'serversRail') {
      layoutEntries[key] = {
        container: 'appShell',
        grid: { x: 0, y: 0, w: 1, h: 1 }
      };

      continue;
    }

    if (key === 'appWorkspace') {
      const appShell = THEME_LAYOUT_CONTAINERS.find((container) => container.key === 'appShell');

      layoutEntries[key] = {
        container: 'appShell',
        grid: { x: 1, y: 0, w: (appShell?.columns ?? 20) - 1, h: 1 }
      };

      continue;
    }

    if (key === 'chatRoomChannelsPanel') {
      layoutEntries[key] = {
        container: 'roomLayout',
        grid: { x: 0, y: 0, w: 4, h: 12 }
      };

      continue;
    }

    if (key === 'chatRoomMainPanel') {
      layoutEntries[key] = {
        container: 'roomLayout',
        grid: { x: 4, y: 0, w: 12, h: 12 }
      };

      continue;
    }

    if (key === 'chatRoomMembersPanel') {
      layoutEntries[key] = {
        container: 'roomLayout',
        grid: { x: 16, y: 0, w: 4, h: 12 }
      };

      continue;
    }

    if (key === 'dmConversationsPanel') {
      layoutEntries[key] = {
        container: 'dmLayout',
        grid: { x: 0, y: 0, w: 4, h: 12 }
      };

      continue;
    }

    if (key === 'dmChatPanel') {
      layoutEntries[key] = {
        container: 'dmLayout',
        grid: { x: 4, y: 0, w: 16, h: 12 }
      };
    }
  }

  return layoutEntries;
}

function hasOnlyLegacyRadius(radii: Record<string, string>): boolean {
  const keys = Object.keys(radii);

  return keys.length === 1 && radii['radius'] === '0.375rem';
}

function allElementsEmpty(elements: Record<string, ThemeElementStyles>): boolean {
  return Object.values(elements).every((elementStyles) => Object.keys(elementStyles).length === 0);
}

export function createDefaultThemeDocument(): ThemeDocument {
  return {
    css: '',
    meta: {
      name: 'Toju Default Dark',
      version: '2.0.0',
      description: 'Built-in dark glass theme for the full Toju app shell.'
    },
    tokens: {
      colors: {
        background: '224 28% 7%',
        foreground: '210 40% 96%',
        card: '224 25% 10%',
        cardForeground: '210 40% 96%',
        popover: '224 26% 9%',
        popoverForeground: '210 40% 96%',
        primary: '193 95% 68%',
        primaryForeground: '222 47% 11%',
        secondary: '223 19% 16%',
        secondaryForeground: '210 40% 96%',
        muted: '223 18% 14%',
        mutedForeground: '215 20% 70%',
        accent: '218 22% 18%',
        accentForeground: '210 40% 98%',
        destructive: '0 72% 55%',
        destructiveForeground: '0 0% 100%',
        border: '222 18% 22%',
        input: '222 18% 22%',
        ring: '193 95% 68%',
        railBackground: '226 33% 8%',
        workspaceBackground: '224 30% 9%',
        panelBackground: '224 24% 11%',
        panelBackgroundAlt: '222 22% 13%',
        titleBarBackground: '226 34% 7%',
        surfaceHighlight: '193 95% 68%',
        surfaceHighlightAlt: '261 82% 72%'
      },
      spacing: {},
      radii: {
        radius: '0.875rem',
        surface: '1.35rem',
        pill: '999px'
      },
      effects: {
        panelShadow: '0 24px 60px rgba(0, 0, 0, 0.42)',
        softShadow: '0 14px 36px rgba(0, 0, 0, 0.28)',
        glassBlur: 'blur(18px) saturate(135%)'
      }
    },
    layout: createProvidedDefaultLayout(),
    elements: {},
    animations: {}
  };
}

export function isLegacyDefaultThemeDocument(document: ThemeDocument): boolean {
  return (
    document.meta.name === 'Toju Default Theme' &&
    document.meta.version === '1.0.0' &&
    document.meta.description === 'Safe baseline theme that matches the built-in Toju shell layout.' &&
    Object.keys(document.tokens.colors).length === 0 &&
    Object.keys(document.tokens.spacing).length === 0 &&
    hasOnlyLegacyRadius(document.tokens.radii) &&
    Object.keys(document.tokens.effects).length === 0 &&
    allElementsEmpty(document.elements) &&
    Object.keys(document.animations).length === 0 &&
    document.css.length === 0
  );
}

export const DEFAULT_THEME_DOCUMENT: ThemeDocument = createDefaultThemeDocument();
export const DEFAULT_THEME_JSON = JSON.stringify(
  {
    meta: DEFAULT_THEME_DOCUMENT.meta,
    tokens: DEFAULT_THEME_DOCUMENT.tokens,
    layout: DEFAULT_THEME_DOCUMENT.layout
  },
  null,
  2
);
