import { formsBaseTheme } from '../forms.theme.js';

/**
 * Default theme for the CronInput component
 * Uses flat structure with CSS variable design tokens
 */
const cronInputTheme = {
    // Outer wrapper
    baseStyle: "relative w-full flex flex-col gap-3",
    // Label
    labelStyle: "text-base font-medium text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
    // Visual builder grid
    builderStyle: "grid grid-cols-5 gap-2",
    // Individual field group
    fieldGroupStyle: "flex flex-col gap-1",
    // Field label
    fieldLabelStyle: "text-sm font-medium text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]",
    // Select dropdown
    fieldSelectStyle: "w-full rounded-[var(--form-radius)] outline outline-1 outline-[var(--color-border)] " +
        "bg-white text-[var(--color-text-primary)] cursor-pointer transition-all " +
        "focus:outline-2 focus:outline-[var(--color-primary-600)] focus:-outline-offset-1 " +
        "focus:ring-4 focus:ring-[var(--color-primary)]/10 " +
        "disabled:cursor-not-allowed disabled:bg-[var(--color-background-disabled)] disabled:text-[var(--color-text-disabled)] " +
        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] dark:text-[var(--color-neutral-200)] " +
        "dark:focus:outline-[var(--color-primary-500)] dark:focus:ring-[var(--color-primary-500)]/20",
    // Size variants for field selects
    fieldSelectSizes: {
        sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
        md: `${formsBaseTheme.sizes.md.text} ${formsBaseTheme.sizes.md.padding} ${formsBaseTheme.sizes.md.height}`,
        lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.height}`,
    },
    // Raw input field
    rawInputStyle: "w-full rounded-[var(--form-radius)] outline outline-1 outline-[var(--color-border)] " +
        "bg-white text-[var(--color-text-primary)] font-mono transition-all " +
        "placeholder:text-[var(--color-text-placeholder)] focus:outline-none " +
        "focus:outline-2 focus:outline-[var(--color-primary-600)] focus:-outline-offset-1 " +
        "focus:ring-4 focus:ring-[var(--color-primary)]/10 " +
        "disabled:cursor-not-allowed disabled:bg-[var(--color-background-disabled)] disabled:text-[var(--color-text-disabled)] " +
        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] dark:text-[var(--color-neutral-200)] " +
        "dark:focus:outline-[var(--color-primary-500)] dark:focus:ring-[var(--color-primary-500)]/20",
    // Size variants for raw input
    rawInputSizes: {
        sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
        md: `${formsBaseTheme.sizes.md.text} ${formsBaseTheme.sizes.md.padding} ${formsBaseTheme.sizes.md.height}`,
        lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.height}`,
    },
    // Mode toggle button
    modeToggleStyle: "inline-flex items-center justify-center rounded-[var(--form-radius)] px-3 py-1.5 text-sm font-medium " +
        "cursor-pointer transition-all outline outline-1 outline-[var(--color-border)] " +
        "text-[var(--color-text-secondary)] bg-white hover:bg-[var(--color-background-secondary)] " +
        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] dark:text-[var(--color-neutral-400)] " +
        "dark:hover:bg-[var(--color-neutral-800)]",
    // Active mode toggle
    modeToggleActiveStyle: "outline-[var(--color-primary)] bg-[var(--color-primary-50)] text-[var(--color-primary)] " +
        "hover:bg-[var(--color-primary-50)] " +
        "dark:outline-[var(--color-primary-500)] dark:bg-[var(--color-primary-500)]/10 dark:text-[var(--color-primary-400)] " +
        "dark:hover:bg-[var(--color-primary-500)]/15",
    // Preset button
    presetButtonStyle: "inline-flex items-center rounded-[var(--form-radius)] px-2.5 py-1 text-sm font-medium " +
        "cursor-pointer transition-all outline outline-1 outline-[var(--color-border)] " +
        "text-[var(--color-text-secondary)] bg-white hover:bg-[var(--color-background-secondary)] " +
        "hover:text-[var(--color-text-primary)] " +
        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] dark:text-[var(--color-neutral-400)] " +
        "dark:hover:bg-[var(--color-neutral-800)] dark:hover:text-[var(--color-neutral-200)]",
    // Active preset button
    presetButtonActiveStyle: "outline-[var(--color-primary)] bg-[var(--color-primary-50)] text-[var(--color-primary)] " +
        "hover:bg-[var(--color-primary-100)] " +
        "dark:outline-[var(--color-primary-500)] dark:bg-[var(--color-primary-500)]/10 dark:text-[var(--color-primary-400)]",
    // Human-readable description
    descriptionStyle: "flex items-center gap-2 text-base text-[var(--color-text-muted)] " +
        "dark:text-[var(--color-neutral-400)]",
    // Next runs container
    nextRunsStyle: "flex flex-col gap-1",
    // Individual next run item
    nextRunItemStyle: "flex items-center gap-2 text-sm text-[var(--color-text-muted)] " +
        "dark:text-[var(--color-neutral-400)]",
    // Section heading
    sectionHeadingStyle: "text-sm font-medium text-[var(--color-text-secondary)] uppercase tracking-wide " +
        "dark:text-[var(--color-neutral-400)]",
    // Validation error
    errorStyle: "text-sm text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
};

export { cronInputTheme };
