{
  "id": "themes",
  "nameKey": "plugins.themes.title",
  "descriptionKey": "plugins.themes.themeDescription",
  "version": "0.0.1",
  "author": "Skeptic",
  "authorUrl": "https://github.com/Skeptic-systems",
  "homepageUrl": "https://docs.deadlockmods.app/plugins/themes",
  "icon": "public/icon.svg",
  "tags": ["official"],
  "entry": "./index.tsx",
  "disabledPlugins": ["background"]
}

type ThemeSettings = {
  activeSection: "pre-defined" | "custom";
  activeTheme?: string;
  customTheme?: {
    lineColor: string;
    iconData?: string;
    backgroundSource?: "url" | "local";
    backgroundUrl?: string;
    backgroundData?: string;
    backgroundOpacity?: number;
  };
  userThemes?: CustomExportedTheme[];
  editingThemeId?: string;
};

type CustomExportedTheme = {
  id: string;
  name: string;
  description?: string;
  subDescription?: string;
  previewData?: string;
  lineColor: string;
  iconData?: string;
  backgroundSource?: "url" | "local";
  backgroundUrl?: string;
  backgroundData?: string;
  backgroundOpacity?: number;
  userCreated: true;
};

const PRE_DEFINED_THEMES = [
  {
    id: "nightshift",
    name: "Nightshift",
    description: "A teal-accented cyberpunk theme with elegant UI elements",
    component: NightshiftTheme,
    previewImage: "/src/plugins/themes/public/pre-defiend/nightshift/preview.png",
  },
  {
    id: "bloodmoon",
    name: "Bloodmoon", 
    description: "A dark theme with black-red gradients and crimson accents",
    component: BloodmoonTheme,
    previewImage: "/src/plugins/themes/public/pre-defiend/bloodmoon/preview.png",
  },
];

const Render = () => {
  const settings = usePersistedStore((s) => s.pluginSettings[manifest.id]);
  const isEnabled = usePersistedStore((s) => s.enabledPlugins[manifest.id]);
  
  if (!isEnabled || !settings.activeTheme) return null;

  // Check for user-created themes first
  const userTheme = getUserThemes(settings).find(
    (t) => t.id === settings.activeTheme
  );
  if (userTheme) {
    return <CustomTheme theme={userTheme} />;
  }

  // Handle custom theme
  if (settings.activeTheme === "custom") {
    return <CustomTheme />;
  }

  // Handle pre-defined themes
  const activeTheme = PRE_DEFINED_THEMES.find(
    (theme) => theme.id === settings.activeTheme
  );
  
  if (activeTheme?.component) {
    const ThemeComponent = activeTheme.component;
    return <ThemeComponent />;
  }

  return null;
};

export const ExportCustomThemeButton = () => {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [subDescription, setSubDescription] = useState("");
  const [previewData, setPreviewData] = useState<string>("");

  const handleExport = () => {
    const newTheme: CustomExportedTheme = {
      id: uuidv4(),
      name: name.trim(),
      description: description.trim() || undefined,
      subDescription: subDescription.trim() || undefined,
      previewData: previewData || undefined,
      lineColor: current.customTheme?.lineColor ?? "#6b7280",
      iconData: current.customTheme?.iconData,
      backgroundSource: current.customTheme?.backgroundSource,
      backgroundUrl: current.customTheme?.backgroundUrl,
      backgroundData: current.customTheme?.backgroundData,
      backgroundOpacity: current.customTheme?.backgroundOpacity,
      userCreated: true,
    };

    const updatedThemes = [...(current.userThemes ?? []), newTheme];
    setSettings("themes", {
      ...current,
      userThemes: updatedThemes,
    });
  };
};

export const beginEditingUserTheme = (id: string) => {
  const settings = getState().pluginSettings["themes"] as ThemeSettings;
  const theme = settings.userThemes?.find((t) => t.id === id);
  
  if (theme) {
    setSettings("themes", {
      ...settings,
      activeSection: "custom",
      activeTheme: "custom",
      customTheme: {
        lineColor: theme.lineColor,
        iconData: theme.iconData,
        backgroundSource: theme.backgroundSource,
        backgroundUrl: theme.backgroundUrl,
        backgroundData: theme.backgroundData,
        backgroundOpacity: theme.backgroundOpacity,
      },
      editingThemeId: id,
    });
  }
};

export const saveEditingUserTheme = () => {
  const settings = getState().pluginSettings["themes"] as ThemeSettings;
  const editingId = settings.editingThemeId;
  
  if (editingId && settings.customTheme) {
    const updatedThemes = settings.userThemes?.map((theme) =>
      theme.id === editingId
        ? {
            ...theme,
            lineColor: settings.customTheme!.lineColor,
            iconData: settings.customTheme!.iconData,
            backgroundSource: settings.customTheme!.backgroundSource,
            backgroundUrl: settings.customTheme!.backgroundUrl,
            backgroundData: settings.customTheme!.backgroundData,
            backgroundOpacity: settings.customTheme!.backgroundOpacity,
          }
        : theme
    );
    
    setSettings("themes", {
      ...settings,
      userThemes: updatedThemes,
      editingThemeId: undefined,
    });
  }
};

src/plugins/themes/
├── index.tsx                    # Main plugin entry
├── manifest.json               # Plugin manifest
├── public/icon.svg            # Plugin icon
├── custom/
│   ├── index.ts               # Re-exports
│   ├── types.ts               # TypeScript definitions
│   ├── utils.ts               # Theme management utilities
│   ├── custom-theme.tsx       # Custom theme renderer
│   ├── color-picker.tsx       # Color picker component
│   ├── export-dialog.tsx      # Export dialog component
│   └── custom.tsx             # Deprecated (re-exports)
└── pre-defiend/
    ├── nightshift/
    │   ├── nightshift.tsx     # Nightshift theme component
    │   ├── ui-elements.tsx    # UI elements
    │   └── public/            # Assets
    └── bloodmoon/
        ├── bloodmoon.tsx      # Bloodmoon theme component
        ├── ui-elements.tsx    # UI elements
        └── public/            # Assets

// Activate theme
setSettings(manifest.id, {
  ...current,
  activeTheme: themeId,
});

// Deactivate theme
setSettings(manifest.id, {
  ...current,
  activeTheme: undefined,
});

{
  "disabledPlugins": ["background"]
}

<img
  src={previewImage}
  onError={(e) => {
    e.currentTarget.style.display = "none";
    e.currentTarget.parentElement!.innerHTML =
      `<span class="text-muted-foreground text-xs flex items-center justify-center h-full w-full">
        ${t("plugins.themes.previewComingSoon")}
      </span>`;
  }}
/>