import { z } from 'zod';

export const designSchema = z.object({
  layout: z.object({
    isActive: z.boolean().optional(),
    display: z.string().optional().describe('Flex | block | inline-block | grid | hidden'),
    flexDirection: z.string().optional(),
    flexWrap: z.string().optional(),
    justifyContent: z.string().optional(),
    alignItems: z.string().optional(),
    gap: z.string().optional(),
    columnGap: z.string().optional(),
    rowGap: z.string().optional(),
    gridTemplateColumns: z.string().optional(),
    gridTemplateRows: z.string().optional(),
  }).optional(),
  typography: z.object({
    isActive: z.boolean().optional(),
    fontSize: z.string().optional(),
    fontWeight: z.string().optional(),
    fontFamily: z.string().optional(),
    fontStyle: z.string().optional(),
    lineHeight: z.string().optional(),
    letterSpacing: z.string().optional(),
    textAlign: z.string().optional(),
    textTransform: z.string().optional(),
    textDecoration: z.string().optional(),
    color: z.string().optional(),
  }).optional(),
  spacing: z.object({
    isActive: z.boolean().optional(),
    padding: z.string().optional(),
    paddingTop: z.string().optional(),
    paddingRight: z.string().optional(),
    paddingBottom: z.string().optional(),
    paddingLeft: z.string().optional(),
    margin: z.string().optional(),
    marginTop: z.string().optional(),
    marginRight: z.string().optional(),
    marginBottom: z.string().optional(),
    marginLeft: z.string().optional(),
  }).optional(),
  sizing: z.object({
    isActive: z.boolean().optional(),
    width: z.string().optional(),
    height: z.string().optional(),
    minWidth: z.string().optional(),
    minHeight: z.string().optional(),
    maxWidth: z.string().optional(),
    maxHeight: z.string().optional(),
    aspectRatio: z.string().optional(),
    objectFit: z.string().optional(),
  }).optional(),
  borders: z.object({
    isActive: z.boolean().optional(),
    borderWidth: z.string().optional(),
    borderStyle: z.string().optional(),
    borderColor: z.string().optional(),
    borderRadius: z.string().optional(),
    borderTopLeftRadius: z.string().optional(),
    borderTopRightRadius: z.string().optional(),
    borderBottomLeftRadius: z.string().optional(),
    borderBottomRightRadius: z.string().optional(),
  }).optional(),
  backgrounds: z.object({
    isActive: z.boolean().optional(),
    backgroundColor: z.string().optional(),
    backgroundSize: z.string().optional(),
    backgroundPosition: z.string().optional(),
    backgroundRepeat: z.string().optional(),
    backgroundClip: z.string().optional().describe('"text" for gradient text effect, "border" or "padding"'),
    bgGradientVars: z.record(z.string(), z.string()).optional()
      .describe('Gradient CSS values keyed by var name. Use "--bg-img" for desktop neutral. Value is a CSS gradient like "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"'),
  }).optional(),
  effects: z.object({
    isActive: z.boolean().optional(),
    opacity: z.string().optional(),
    boxShadow: z.string().optional(),
    blur: z.string().optional(),
    backdropBlur: z.string().optional(),
  }).optional(),
  positioning: z.object({
    isActive: z.boolean().optional(),
    position: z.string().optional(),
    top: z.string().optional(),
    right: z.string().optional(),
    bottom: z.string().optional(),
    left: z.string().optional(),
    zIndex: z.string().optional(),
  }).optional(),
}).describe('Design properties object. Set isActive: true on any category to apply it.');
