/**
 * Component Styles
 * Phase 7: CMS Styling System
 * Reusable component style definitions
 */

export interface ComponentStyles {
  button: ButtonStyles;
  card: CardStyles;
  input: InputStyles;
  heading: HeadingStyles;
  link: LinkStyles;
}

export interface ButtonStyles {
  primary: ButtonVariant;
  secondary: ButtonVariant;
  outline: ButtonVariant;
  ghost: ButtonVariant;
}

export interface ButtonVariant {
  background: string;
  color: string;
  border?: string;
  hover: {
    background: string;
    color: string;
    border?: string;
  };
  active: {
    background: string;
    color: string;
  };
}

export interface CardStyles {
  background: string;
  border: string;
  borderRadius: string;
  padding: string;
  shadow: string;
}

export interface InputStyles {
  background: string;
  border: string;
  borderRadius: string;
  padding: string;
  focus: {
    border: string;
    ring: string;
  };
}

export interface HeadingStyles {
  fontFamily: string;
  fontWeight: string;
  lineHeight: string;
  color: string;
}

export interface LinkStyles {
  color: string;
  hoverColor: string;
  underline: boolean;
}

export const DEFAULT_COMPONENT_STYLES: ComponentStyles = {
  button: {
    primary: {
      background: '#3b82f6',
      color: '#ffffff',
      hover: {
        background: '#2563eb',
        color: '#ffffff',
      },
      active: {
        background: '#1d4ed8',
        color: '#ffffff',
      },
    },
    secondary: {
      background: '#6b7280',
      color: '#ffffff',
      hover: {
        background: '#4b5563',
        color: '#ffffff',
      },
      active: {
        background: '#374151',
        color: '#ffffff',
      },
    },
    outline: {
      background: 'transparent',
      color: '#3b82f6',
      border: '#3b82f6',
      hover: {
        background: '#3b82f6',
        color: '#ffffff',
        border: '#3b82f6',
      },
      active: {
        background: '#2563eb',
        color: '#ffffff',
      },
    },
    ghost: {
      background: 'transparent',
      color: '#6b7280',
      hover: {
        background: '#f3f4f6',
        color: '#1f2937',
      },
      active: {
        background: '#e5e7eb',
        color: '#111827',
      },
    },
  },
  card: {
    background: '#ffffff',
    border: '#e5e7eb',
    borderRadius: '0.5rem',
    padding: '1.5rem',
    shadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
  },
  input: {
    background: '#ffffff',
    border: '#d1d5db',
    borderRadius: '0.375rem',
    padding: '0.5rem 0.75rem',
    focus: {
      border: '#3b82f6',
      ring: '0 0 0 3px rgba(59, 130, 246, 0.1)',
    },
  },
  heading: {
    fontFamily: 'Inter, system-ui, sans-serif',
    fontWeight: '700',
    lineHeight: '1.2',
    color: '#111827',
  },
  link: {
    color: '#3b82f6',
    hoverColor: '#2563eb',
    underline: false,
  },
};

export function generateComponentCSS(styles: ComponentStyles): string {
  return `
/* Button Styles */
.btn-primary {
  background-color: ${styles.button.primary.background};
  color: ${styles.button.primary.color};
}

.btn-primary:hover {
  background-color: ${styles.button.primary.hover.background};
  color: ${styles.button.primary.hover.color};
}

.btn-secondary {
  background-color: ${styles.button.secondary.background};
  color: ${styles.button.secondary.color};
}

.btn-outline {
  background-color: ${styles.button.outline.background};
  color: ${styles.button.outline.color};
  border: 1px solid ${styles.button.outline.border};
}

.btn-outline:hover {
  background-color: ${styles.button.outline.hover.background};
  color: ${styles.button.outline.hover.color};
}

/* Card Styles */
.card {
  background-color: ${styles.card.background};
  border: 1px solid ${styles.card.border};
  border-radius: ${styles.card.borderRadius};
  padding: ${styles.card.padding};
  box-shadow: ${styles.card.shadow};
}

/* Input Styles */
.input {
  background-color: ${styles.input.background};
  border: 1px solid ${styles.input.border};
  border-radius: ${styles.input.borderRadius};
  padding: ${styles.input.padding};
}

.input:focus {
  border-color: ${styles.input.focus.border};
  box-shadow: ${styles.input.focus.ring};
  outline: none;
}

/* Heading Styles */
h1, h2, h3, h4, h5, h6 {
  font-family: ${styles.heading.fontFamily};
  font-weight: ${styles.heading.fontWeight};
  line-height: ${styles.heading.lineHeight};
  color: ${styles.heading.color};
}

/* Link Styles */
a {
  color: ${styles.link.color};
  text-decoration: ${styles.link.underline ? 'underline' : 'none'};
}

a:hover {
  color: ${styles.link.hoverColor};
}
  `.trim();
}

export function applyComponentStyles(styles: Partial<ComponentStyles>): ComponentStyles {
  return {
    ...DEFAULT_COMPONENT_STYLES,
    ...styles,
    button: {
      ...DEFAULT_COMPONENT_STYLES.button,
      ...styles.button,
    },
    card: {
      ...DEFAULT_COMPONENT_STYLES.card,
      ...styles.card,
    },
    input: {
      ...DEFAULT_COMPONENT_STYLES.input,
      ...styles.input,
    },
    heading: {
      ...DEFAULT_COMPONENT_STYLES.heading,
      ...styles.heading,
    },
    link: {
      ...DEFAULT_COMPONENT_STYLES.link,
      ...styles.link,
    },
  };
}

