export interface Theme {
  id: string;
  name: string;
  description: string;
  icon: string;
  prompt: string;
}

export const DEFAULT_THEME_ID = "default";

const DEFAULT_THEME_PROMPT = `
<theme>
Any instruction in this theme should override other instructions if there's a contradiction.
### Default Theme
<rules>
All the rules are critical and must be strictly followed, otherwise it's a failure state.
#### Core Principles
- This is the default theme used by Dyad users, so it is important to create websites that leave a good impression.
- AESTHETICS ARE VERY IMPORTANT. All web apps should LOOK AMAZING and have GREAT FUNCTIONALITY!
- You are expected to deliver interfaces that balance creativity and functionality.
#### Component Guidelines
- Never ship default shadcn components — every component must be customized in style, spacing, and behavior.
- Always prefer rounded shapes.
#### Typography
- Type should actively shape the interface's character, not fade into neutrality.
#### Color System
- Establish a clear and confident color system.
- Centralize colors through variables to maintain consistency.
- Avoid using gradient backgrounds.
- Avoid using black as the primary color. Aim for colorful websites.
#### Motion & Interaction
- Apply motion with restraint and purpose.
- A small number of carefully composed sequences (like a coordinated entrance with delayed elements) creates more impact than numerous minor effects.
- Motion should clarify structure and intent, not act as decoration.
#### Visual Content
- Visuals are essential: Use images to create mood, context, and appeal.
- Don't build text-only walls.
#### Contrast Guidelines
Never use closely matched colors for an element's background and its foreground content. Insufficient contrast reduces readability and degrades the overall user experience.
**Bad Examples:**
- Light gray text (#B0B0B0) on a white background (#FFFFFF)
- Dark blue text (#1A1A4E) on a black background (#000000)
- Pale yellow button (#FFF9C4) with white text (#FFFFFF)
**Good Examples:**
- Dark charcoal text (#333333) on a white or light gray background
- White or light cream text (#FFFDF5) on a deep navy or dark background (#1A1A2E)
- Vibrant accent button (#6366F1) with white text for clear call-to-action visibility
### Layout structure
- ALWAYS design mobile-first, then enhance for larger screens.
</rules>
<workflow>
Follow this workflow when building web apps:
1. **Determine Design Direction**
   - Analyze the industry and target users of the website.
   - Define colors, fonts, mood, and visual style.
   - Ensure the design direction does NOT contradict the rules defined for this theme.
2. **Build the Application**
   - Do not neglect functionality in the pursuit of making a beautiful website.
   - You must achieve both great aesthetics AND great functionality.
</workflow>
</theme>`;

export const themesData: Theme[] = [
  {
    id: "default",
    name: "Default Theme",
    description:
      "Balanced design system emphasizing aesthetics, contrast, and functionality.",
    icon: "palette",
    prompt: DEFAULT_THEME_PROMPT,
  },
];

export function getThemeById(themeId: string | null): Theme | null {
  // null means "no theme" - return null
  if (!themeId) {
    return null;
  }
  return themesData.find((t) => t.id === themeId) ?? null;
}

export function getThemePrompt(themeId: string | null): string {
  // null means "no theme" - return empty string (no prompt)
  if (!themeId) {
    return "";
  }
  const theme = getThemeById(themeId);
  return theme?.prompt ?? "";
}
