import type { Preset, BuilderConfig, ThemeColor } from "./types";

// Helper to create a ThemeColor
const color = (light: string, dark: string): ThemeColor => ({ light, dark });

export const PRESETS: Preset[] = [
  {
    id: "default",
    name: "Default",
    description: "Clean, modern design with all features enabled",
    config: {
      components: {
        attachments: true,
        branchPicker: true,
        editMessage: true,
        actionBar: {
          copy: true,
          reload: true,
          speak: false,
          feedback: false,
        },
        threadWelcome: true,
        suggestions: true,
        scrollToBottom: true,
        markdown: true,
        codeHighlightTheme: "vitesse",
        reasoning: false,
        sources: false,
        followUpSuggestions: false,
        avatar: false,
        typingIndicator: "dot",
        loadingIndicator: "text",
        loadingText: "Thinking...",
      },
      styles: {
        theme: "light",
        colors: {
          accent: color("#0ea5e9", "#0ea5e9"),
        },
        borderRadius: "lg",
        maxWidth: "44rem",
        fontFamily: "system-ui",
        fontSize: "14px",
        messageSpacing: "comfortable",
        userMessagePosition: "right",
        animations: true,
      },
    },
  },
  {
    id: "chatgpt",
    name: "ChatGPT",
    description: "Dark theme inspired by ChatGPT's interface",
    config: {
      components: {
        attachments: true,
        branchPicker: true,
        editMessage: true,
        actionBar: {
          copy: true,
          reload: true,
          speak: false,
          feedback: true,
        },
        threadWelcome: true,
        suggestions: false,
        scrollToBottom: false,
        markdown: true,
        codeHighlightTheme: "github",
        reasoning: false,
        sources: false,
        followUpSuggestions: false,
        avatar: true,
        typingIndicator: "dot",
        loadingIndicator: "text",
        loadingText: "Thinking...",
      },
      styles: {
        theme: "dark",
        colors: {
          accent: color("#10a37f", "#ffffff"),
          background: color("#ffffff", "#212121"),
          foreground: color("#0d0d0d", "#ececec"),
          mutedForeground: color("#6e6e6e", "#9b9b9b"),
          border: color("#e5e5e5", "#424242"),
          userMessage: color("#f7f7f8", "#2f2f2f"),
          composer: color("#f7f7f8", "#2f2f2f"),
          userAvatar: color("#10a37f", "#19c37d"),
          assistantAvatar: color("#000000", "#ab68ff"),
        },
        borderRadius: "full",
        maxWidth: "48rem",
        fontFamily: "system-ui",
        fontSize: "14px",
        messageSpacing: "comfortable",
        userMessagePosition: "right",
        animations: true,
      },
    },
  },
  {
    id: "claude",
    name: "Claude",
    description: "Warm, elegant design inspired by Claude's interface",
    config: {
      components: {
        attachments: true,
        branchPicker: false,
        editMessage: true,
        actionBar: {
          copy: true,
          reload: true,
          speak: false,
          feedback: true,
        },
        threadWelcome: false,
        suggestions: false,
        scrollToBottom: false,
        markdown: true,
        codeHighlightTheme: "vitesse",
        reasoning: true,
        sources: false,
        followUpSuggestions: false,
        avatar: true,
        typingIndicator: "dot",
        loadingIndicator: "text",
        loadingText: "Thinking...",
      },
      styles: {
        theme: "light",
        colors: {
          accent: color("#c96442", "#d4a27a"),
          background: color("#faf9f5", "#2b2a27"),
          foreground: color("#3d3929", "#e8e4d9"),
          mutedForeground: color("#8b8579", "#9b9589"),
          border: color("#e5e0d5", "#3d3b36"),
          userMessage: color("#f5f0e6", "#3d3b36"),
          composer: color("#ffffff", "#1f1e1b"),
          userAvatar: color("#c96442", "#d4a27a"),
          assistantAvatar: color("#c96442", "#d4a27a"),
          suggestion: color("#faf8f5", "#3d3b36"),
          suggestionBorder: color("#e5e0d5", "#4d4b46"),
        },
        borderRadius: "lg",
        maxWidth: "48rem",
        fontFamily: "Georgia, serif",
        fontSize: "14px",
        messageSpacing: "spacious",
        userMessagePosition: "right",
        animations: true,
      },
    },
  },
  {
    id: "perplexity",
    name: "Perplexity",
    description: "Search-focused design with prominent answers",
    config: {
      components: {
        attachments: true,
        branchPicker: true,
        editMessage: false,
        actionBar: {
          copy: true,
          reload: true,
          speak: false,
          feedback: false,
        },
        threadWelcome: true,
        suggestions: false,
        scrollToBottom: true,
        markdown: true,
        codeHighlightTheme: "tokyo-night",
        reasoning: false,
        sources: false,
        followUpSuggestions: true,
        avatar: false,
        typingIndicator: "dot",
        loadingIndicator: "text",
        loadingText: "Thinking...",
      },
      styles: {
        theme: "dark",
        colors: {
          accent: color("#20b8cd", "#22d3ee"),
          background: color("#ffffff", "#0f172a"),
          foreground: color("#1e293b", "#e2e8f0"),
          mutedForeground: color("#64748b", "#94a3b8"),
          border: color("#e2e8f0", "#334155"),
          userMessage: color("#f1f5f9", "#1e293b"),
          composer: color("#f8fafc", "#1e293b"),
        },
        borderRadius: "lg",
        maxWidth: "42rem",
        fontFamily: "system-ui",
        fontSize: "14px",
        messageSpacing: "comfortable",
        userMessagePosition: "left",
        animations: true,
      },
    },
  },
  {
    id: "minimal",
    name: "Minimal",
    description: "Stripped-down interface with only essential features",
    config: {
      components: {
        attachments: false,
        branchPicker: false,
        editMessage: false,
        actionBar: {
          copy: true,
          reload: false,
          speak: false,
          feedback: false,
        },
        threadWelcome: false,
        suggestions: false,
        scrollToBottom: false,
        markdown: true,
        codeHighlightTheme: "none",
        reasoning: false,
        sources: false,
        followUpSuggestions: false,
        avatar: false,
        typingIndicator: "none",
        loadingIndicator: "text",
        loadingText: "Thinking...",
      },
      styles: {
        theme: "light",
        colors: {
          accent: color("#171717", "#fafafa"),
        },
        borderRadius: "md",
        maxWidth: "40rem",
        fontFamily: "system-ui",
        fontSize: "14px",
        messageSpacing: "compact",
        userMessagePosition: "right",
        animations: false,
      },
    },
  },
  {
    id: "gemini",
    name: "Gemini",
    description: "Google's Gemini-inspired clean interface",
    config: {
      components: {
        attachments: true,
        branchPicker: false,
        editMessage: true,
        actionBar: {
          copy: true,
          reload: true,
          speak: true,
          feedback: true,
        },
        threadWelcome: true,
        suggestions: true,
        scrollToBottom: true,
        markdown: true,
        codeHighlightTheme: "vitesse",
        reasoning: false,
        sources: false,
        followUpSuggestions: true,
        avatar: false,
        typingIndicator: "dot",
        loadingIndicator: "text",
        loadingText: "Thinking...",
      },
      styles: {
        theme: "light",
        colors: {
          accent: color("#1a73e8", "#8ab4f8"),
          background: color("#ffffff", "#1f1f1f"),
          foreground: color("#1f1f1f", "#e3e3e3"),
          mutedForeground: color("#5f6368", "#9aa0a6"),
          border: color("#e8eaed", "#3c4043"),
          userMessage: color("#e8f0fe", "#303134"),
          composer: color("#ffffff", "#303134"),
          suggestion: color("#f8f9fa", "#303134"),
          suggestionBorder: color("#dadce0", "#5f6368"),
        },
        borderRadius: "full",
        maxWidth: "44rem",
        fontFamily: "system-ui",
        fontSize: "14px",
        messageSpacing: "comfortable",
        userMessagePosition: "right",
        animations: true,
      },
    },
  },
  {
    id: "copilot",
    name: "Copilot",
    description: "GitHub Copilot inspired developer chat",
    config: {
      components: {
        attachments: true,
        branchPicker: true,
        editMessage: true,
        actionBar: {
          copy: true,
          reload: true,
          speak: false,
          feedback: true,
        },
        threadWelcome: true,
        suggestions: true,
        scrollToBottom: true,
        markdown: true,
        codeHighlightTheme: "one-dark-pro",
        reasoning: true,
        sources: false,
        followUpSuggestions: false,
        avatar: true,
        typingIndicator: "dot",
        loadingIndicator: "text",
        loadingText: "Thinking...",
      },
      styles: {
        theme: "dark",
        colors: {
          accent: color("#8b5cf6", "#8b5cf6"),
          background: color("#ffffff", "#0d1117"),
          foreground: color("#1f2328", "#e6edf3"),
          mutedForeground: color("#656d76", "#7d8590"),
          border: color("#d0d7de", "#30363d"),
          userMessage: color("#f6f8fa", "#161b22"),
          composer: color("#f6f8fa", "#161b22"),
          userAvatar: color("#1a7f37", "#238636"),
          assistantAvatar: color("#8b5cf6", "#8b5cf6"),
          suggestion: color("#f6f8fa", "#161b22"),
          suggestionBorder: color("#d0d7de", "#30363d"),
        },
        borderRadius: "lg",
        maxWidth: "56rem",
        fontFamily: "ui-monospace, monospace",
        fontSize: "13px",
        messageSpacing: "compact",
        userMessagePosition: "right",
        animations: true,
      },
    },
  },
  {
    id: "slack",
    name: "Slack",
    description: "Team chat inspired collaborative interface",
    config: {
      components: {
        attachments: true,
        branchPicker: false,
        editMessage: true,
        actionBar: {
          copy: true,
          reload: false,
          speak: false,
          feedback: true,
        },
        threadWelcome: false,
        suggestions: false,
        scrollToBottom: true,
        markdown: true,
        codeHighlightTheme: "vitesse",
        reasoning: false,
        sources: false,
        followUpSuggestions: false,
        avatar: true,
        typingIndicator: "dot",
        loadingIndicator: "text",
        loadingText: "Thinking...",
      },
      styles: {
        theme: "light",
        colors: {
          accent: color("#007a5a", "#2eb67d"),
          background: color("#ffffff", "#1a1d21"),
          foreground: color("#1d1c1d", "#d1d2d3"),
          mutedForeground: color("#616061", "#ababad"),
          border: color("#dddddd", "#323539"),
          userAvatar: color("#007a5a", "#2eb67d"),
          assistantAvatar: color("#4a154b", "#611f69"),
        },
        borderRadius: "sm",
        maxWidth: "100%",
        fontFamily: "system-ui",
        fontSize: "14px",
        messageSpacing: "compact",
        userMessagePosition: "left",
        animations: false,
      },
    },
  },
  {
    id: "grok",
    name: "Grok",
    description: "xAI's Grok-inspired minimal dark interface",
    config: {
      components: {
        attachments: true,
        branchPicker: false,
        editMessage: true,
        actionBar: {
          copy: true,
          reload: true,
          speak: false,
          feedback: true,
        },
        threadWelcome: false,
        suggestions: false,
        scrollToBottom: false,
        markdown: true,
        codeHighlightTheme: "dracula",
        reasoning: false,
        sources: false,
        followUpSuggestions: false,
        avatar: false,
        typingIndicator: "dot",
        loadingIndicator: "text",
        loadingText: "Thinking...",
      },
      styles: {
        theme: "dark",
        colors: {
          accent: color("#000000", "#ffffff"),
          background: color("#ffffff", "#000000"),
          foreground: color("#000000", "#ffffff"),
          mutedForeground: color("#52525b", "#71717a"),
          border: color("#e4e4e7", "#27272a"),
          userMessage: color("#f4f4f5", "#18181b"),
          composer: color("#f4f4f5", "#18181b"),
        },
        borderRadius: "full",
        maxWidth: "48rem",
        fontFamily: "system-ui",
        fontSize: "14px",
        messageSpacing: "comfortable",
        userMessagePosition: "right",
        animations: true,
      },
    },
  },
];

export function getPresetById(id: string): Preset | undefined {
  return PRESETS.find((preset) => preset.id === id);
}

export function configMatchesPreset(config: BuilderConfig): Preset | undefined {
  return PRESETS.find(
    (preset) => JSON.stringify(preset.config) === JSON.stringify(config),
  );
}