{ pkgs, config, ... }:

let
  colors = config.lib.stylix.colors;

  rgb = base:
    "${colors."${base}-rgb-r"}, ${colors."${base}-rgb-g"}, ${colors."${base}-rgb-b"}";

  radius = toString config.theme.bar-rounding;
in
{
  home.packages = with pkgs; [
    waybar
  ];

  xdg.configFile."waybar/config".text = builtins.toJSON {
    layer = "top";
    position = "top";
    height = 38;

    spacing = 10;

    "margin-top" = 8;
    "margin-left" = 8;
    "margin-right" = 8;

    "gtk-layer-shell" = true;
    "reload_style_on_change" = true;

    "modules-left" = [
      "hyprland/workspaces"
    ];

    "modules-center" = [
      "hyprland/window"
    ];

    "modules-right" = [
      "tray"
      "network"
      "pulseaudio"
      "clock"
    ];

    "hyprland/workspaces" = {
      format = "{name}";
      "disable-scroll" = true;
      "all-outputs" = true;
      "on-click" = "activate";

      "persistent-workspaces" = {
        "*" = 5;
      };
    };

    "hyprland/window" = {
      format = "{}";
      "max-length" = 70;
      "separate-outputs" = true;
    };

    tray = {
      spacing = 8;
      "icon-size" = 20;
    };

    network = {
      interval = 2;

      "format-wifi" = "󰖩 {signalStrength}%";
      "format-ethernet" = "󰈀 {ifname}";
      "format-linked" = "󰈀 {ifname}";
      "format-disconnected" = "󰖪";

      "tooltip-format" = "{essid}\n{ipaddr}";
    };

    pulseaudio = {
      "scroll-step" = 5;

      format = "󰕾 {volume}%";
      "format-muted" = "󰖁";

      tooltip = true;
    };

    clock = {
      interval = 1;

      format = "󰥔 {:%H:%M}";
      "tooltip-format" = "<big>{:%A, %d %B %Y}</big>";
    };
  };

  xdg.configFile."waybar/style.css".text = ''
    * {
      border: none;
      min-height: 0;

      font-family:
        "${config.stylix.fonts.sansSerif.name}",
        "${config.stylix.fonts.monospace.name}",
        sans-serif;

      font-size: 13px;
    }

    window#waybar {
      background: transparent;
      color: #${colors.base05};
    }

    .modules-left,
    .modules-center,
    .modules-right {
      margin: 6px 0;
    }

    #workspaces,
    #window,
    #tray,
    #network,
    #pulseaudio,
    #clock {
      background: rgba(${rgb "base01"}, 0.82);

      border: 1px solid rgba(${rgb "base03"}, 0.45);

      border-radius: ${radius}px;

      padding: 0 14px;
      margin: 6px 4px;

      transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
    }

    #workspaces {
      padding: 4px;
    }

    #workspaces button {
      background: transparent;
      color: #${colors.base04};

      padding: 0 12px;
      margin: 0 2px;

      border-radius: ${radius}px;

      transition: all 180ms ease;
    }

    #workspaces button:hover {
      background: rgba(${rgb "base02"}, 0.70);
      color: #${colors.base05};
    }

    #workspaces button.active {
      background: #${colors.base0D};
      color: #${colors.base00};
    }

    #workspaces button.urgent {
      background: #${colors.base08};
      color: #${colors.base00};
    }

    #window {
      min-width: 260px;

      padding-left: 18px;
      padding-right: 18px;

      color: #${colors.base05};
    }

    #window.empty {
      background: transparent;
      border: none;
    }

    #tray {
      padding-left: 10px;
      padding-right: 10px;
    }

    #network {
      color: #${colors.base0C};
    }

    #network.disconnected {
      color: #${colors.base08};
    }

    #pulseaudio {
      color: #${colors.base0B};
    }

    #pulseaudio.muted {
      color: #${colors.base08};
    }

    #clock {
      color: #${colors.base0D};
      font-weight: 600;
    }

    tooltip {
      background: rgba(${rgb "base00"}, 0.95);

      border: 1px solid rgba(${rgb "base03"}, 0.70);

      border-radius: ${radius}px;
    }

    tooltip label {
      color: #${colors.base05};
    }
  '';

  wayland.windowManager.hyprland.settings = {
    exec-once = [
      "waybar"
    ];
  };
}