import type { ControlDef, SectionDef } from './types';

/**
 * Theme style: site-wide defaults for plain HTML elements (body, headings, links, buttons, form fields,
 * images). Values live in `global.settings.themeStyle` with the usual key encoding and are emitted by
 * `generateGlobalCss` under the low-specificity wrapper `:where(body.zadex-page)`, so element-level
 * styles (`.zx-<id>`) always win.
 *
 * Hover/focus variants are separate controls with explicit selectors (the generator applies `::state`
 * keys to the wrapper, which would target the body instead of the tag).
 */
export interface ThemeGroup {
  id: string;
  label: string;
  /** Section ids that belong to this group (rendered as one tab). */
  sections: string[];
}

export const themeGroups: ThemeGroup[] = [
  { id: 'body', label: 'Body', sections: ['t_body'] },
  { id: 'headings', label: 'Headings', sections: ['t_h1', 't_h2', 't_h3', 't_h4', 't_h5', 't_h6'] },
  { id: 'links', label: 'Links', sections: ['t_links'] },
  { id: 'buttons', label: 'Buttons', sections: ['t_buttons'] },
  { id: 'fields', label: 'Form fields', sections: ['t_fields'] },
  { id: 'images', label: 'Images', sections: ['t_images'] },
];

export const themeSections: SectionDef[] = [
  { id: 't_body', label: 'Body', tab: 'style' },
  { id: 't_h1', label: 'H1', tab: 'style' },
  { id: 't_h2', label: 'H2', tab: 'style' },
  { id: 't_h3', label: 'H3', tab: 'style' },
  { id: 't_h4', label: 'H4', tab: 'style' },
  { id: 't_h5', label: 'H5', tab: 'style' },
  { id: 't_h6', label: 'H6', tab: 'style' },
  { id: 't_links', label: 'Links', tab: 'style' },
  { id: 't_buttons', label: 'Buttons', tab: 'style' },
  { id: 't_fields', label: 'Form fields', tab: 'style' },
  { id: 't_images', label: 'Images', tab: 'style' },
];

const BUTTON = '{{WRAPPER}} button, {{WRAPPER}} .zx-button, {{WRAPPER}} input[type=submit], {{WRAPPER}} input[type=button]';
const BUTTON_HOVER = '{{WRAPPER}} button:hover, {{WRAPPER}} .zx-button:hover, {{WRAPPER}} input[type=submit]:hover, {{WRAPPER}} input[type=button]:hover';
const FIELD = '{{WRAPPER}} input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]), {{WRAPPER}} textarea, {{WRAPPER}} select';
const FIELD_FOCUS = '{{WRAPPER}} input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):focus, {{WRAPPER}} textarea:focus, {{WRAPPER}} select:focus';

function heading(tag: string): ControlDef[] {
  const section = `t_${tag}`;
  return [
    { id: `${tag}_color`, type: 'color', label: 'Color', tab: 'style', section, responsive: true, css: [{ selector: `{{WRAPPER}} ${tag}`, property: 'color' }] },
    { id: `${tag}_typography`, type: 'typography', label: 'Typography', tab: 'style', section, responsive: true, css: [{ selector: `{{WRAPPER}} ${tag}` }] },
    { id: `${tag}_margin`, type: 'dimensions', label: 'Margin', tab: 'style', section, responsive: true, allowNegative: true, units: ['px', 'em', 'rem'], css: [{ selector: `{{WRAPPER}} ${tag}`, property: 'margin' }] },
  ];
}

export const themeControls: ControlDef[] = [
  /* Body */
  { id: 'body_background', type: 'background', label: 'Background', tab: 'style', section: 't_body', responsive: true, css: [{ selector: '{{WRAPPER}}' }] },
  { id: 'body_color', type: 'color', label: 'Text color', tab: 'style', section: 't_body', responsive: true, css: [{ selector: '{{WRAPPER}}', property: 'color' }] },
  { id: 'body_typography', type: 'typography', label: 'Typography', tab: 'style', section: 't_body', responsive: true, css: [{ selector: '{{WRAPPER}}' }] },
  { id: 'p_margin', type: 'dimensions', label: 'Paragraph margin', tab: 'style', section: 't_body', responsive: true, units: ['px', 'em', 'rem'], css: [{ selector: '{{WRAPPER}} p', property: 'margin' }] },

  /* Headings */
  ...heading('h1'),
  ...heading('h2'),
  ...heading('h3'),
  ...heading('h4'),
  ...heading('h5'),
  ...heading('h6'),

  /* Links */
  { id: 'link_color', type: 'color', label: 'Color', tab: 'style', section: 't_links', responsive: true, css: [{ selector: '{{WRAPPER}} a', property: 'color' }] },
  { id: 'link_color_hover', type: 'color', label: 'Hover color', tab: 'style', section: 't_links', responsive: true, css: [{ selector: '{{WRAPPER}} a:hover', property: 'color' }] },
  { id: 'link_decoration', type: 'select', label: 'Decoration', tab: 'style', section: 't_links', options: [{ value: '', label: 'Default' }, { value: 'none', label: 'None' }, { value: 'underline', label: 'Underline' }], css: [{ selector: '{{WRAPPER}} a', property: 'text-decoration' }] },
  { id: 'link_decoration_hover', type: 'select', label: 'Hover decoration', tab: 'style', section: 't_links', options: [{ value: '', label: 'Default' }, { value: 'none', label: 'None' }, { value: 'underline', label: 'Underline' }], css: [{ selector: '{{WRAPPER}} a:hover', property: 'text-decoration' }] },

  /* Buttons */
  { id: 'button_typography', type: 'typography', label: 'Typography', tab: 'style', section: 't_buttons', responsive: true, css: [{ selector: BUTTON }] },
  { id: 'button_color', type: 'color', label: 'Text color', tab: 'style', section: 't_buttons', responsive: true, css: [{ selector: BUTTON, property: 'color' }] },
  { id: 'button_background', type: 'color', label: 'Background', tab: 'style', section: 't_buttons', responsive: true, css: [{ selector: BUTTON, property: 'background-color' }] },
  { id: 'button_color_hover', type: 'color', label: 'Hover text color', tab: 'style', section: 't_buttons', responsive: true, css: [{ selector: BUTTON_HOVER, property: 'color' }] },
  { id: 'button_background_hover', type: 'color', label: 'Hover background', tab: 'style', section: 't_buttons', responsive: true, css: [{ selector: BUTTON_HOVER, property: 'background-color' }] },
  { id: 'button_padding', type: 'dimensions', label: 'Padding', tab: 'style', section: 't_buttons', responsive: true, units: ['px', 'em', 'rem'], css: [{ selector: BUTTON, property: 'padding' }] },
  { id: 'button_border', type: 'border', label: 'Border', tab: 'style', section: 't_buttons', responsive: true, css: [{ selector: BUTTON }] },
  { id: 'button_border_color_hover', type: 'color', label: 'Hover border color', tab: 'style', section: 't_buttons', responsive: true, css: [{ selector: BUTTON_HOVER, property: 'border-color' }] },

  /* Form fields */
  { id: 'field_color', type: 'color', label: 'Text color', tab: 'style', section: 't_fields', responsive: true, css: [{ selector: FIELD, property: 'color' }] },
  { id: 'field_background', type: 'color', label: 'Background', tab: 'style', section: 't_fields', responsive: true, css: [{ selector: FIELD, property: 'background-color' }] },
  { id: 'field_border', type: 'border', label: 'Border', tab: 'style', section: 't_fields', responsive: true, css: [{ selector: FIELD }] },
  { id: 'field_padding', type: 'dimensions', label: 'Padding', tab: 'style', section: 't_fields', responsive: true, units: ['px', 'em', 'rem'], css: [{ selector: FIELD, property: 'padding' }] },
  { id: 'field_border_color_focus', type: 'color', label: 'Focus border color', tab: 'style', section: 't_fields', responsive: true, css: [{ selector: FIELD_FOCUS, property: 'border-color' }] },
  { id: 'field_background_focus', type: 'color', label: 'Focus background', tab: 'style', section: 't_fields', responsive: true, css: [{ selector: FIELD_FOCUS, property: 'background-color' }] },

  /* Images */
  { id: 'image_radius', type: 'dimensions', label: 'Border radius', tab: 'style', section: 't_images', responsive: true, units: ['px', '%'], css: [{ selector: '{{WRAPPER}} img', property: 'border-radius' }] },
  { id: 'image_opacity', type: 'slider', label: 'Opacity', tab: 'style', section: 't_images', units: ['custom'], range: { custom: [0, 1, 0.05] }, css: [{ selector: '{{WRAPPER}} img', property: 'opacity' }] },
  { id: 'image_opacity_hover', type: 'slider', label: 'Hover opacity', tab: 'style', section: 't_images', units: ['custom'], range: { custom: [0, 1, 0.05] }, css: [{ selector: '{{WRAPPER}} img:hover', property: 'opacity' }] },
  { id: 'image_transition', type: 'slider', label: 'Transition (s)', tab: 'style', section: 't_images', units: ['custom'], range: { custom: [0, 3, 0.1] }, css: [{ selector: '{{WRAPPER}} img', property: 'transition-duration', template: '{{VALUE}}s' }] },
];

let cache: Record<string, ControlDef> | null = null;
export function themeControlsById(): Record<string, ControlDef> {
  if (!cache) {
    cache = {};
    for (const c of themeControls) cache[c.id] = c;
  }
  return cache;
}

export function themeControlsForSection(section: string): ControlDef[] {
  return themeControls.filter((c) => c.section === section);
}