viewport.setViewedComponent(&moduleContainer, false); // false = viewport does NOT take ownership deletion
viewport.setScrollBarsShown(true, false);              // Vertical scrollbar ON, Horizontal OFF
viewport.setSingleStepSizes(0, 15);                    // Mouse-wheel scroll step speed

std::vector<std::unique_ptr<ModulePanel>> modules;

class ModulePanel : public juce::Component
{
public:
    ModulePanel(const juce::String& panelName, 
                juce::AudioProcessorValueTreeState& apvts,
                const juce::String& paramID,
                juce::Slider::SliderStyle style)
    {
        slider.setSliderStyle(style);
        slider.setTextBoxStyle(juce::Slider::TextBoxBelow, false, 60, 20);
        addAndMakeVisible(slider);

        // Bind attachment dynamically
        attachment = std::make_unique<juce::AudioProcessorValueTreeState::SliderAttachment>(
            apvts, paramID, slider);
    }

private:
    juce::Slider slider;
    std::unique_ptr<juce::AudioProcessorValueTreeState::SliderAttachment> attachment;
};

#pragma once
#include <JuceHeader.h>

class ModulePanel : public juce::Component
{
public:
    using LayoutChangedCallback = std::function<void()>;
    using OrderChangedCallback = std::function<void(ModulePanel*, bool)>; // true = move up, false = move down

    ModulePanel(const juce::String& titleText, juce::Colour headerColour)
        : title(titleText), accentColour(headerColour)
    {
        // Header Setup
        headerBar.onClick = [this] { toggleCollapse(); };
        addAndMakeVisible(headerBar);

        titleLabel.setText(titleText, juce::dontSendNotification);
        titleLabel.setFont(juce::FontOptions(16.0f, juce::Font::bold));
        titleLabel.setColour(juce::Label::textColourId, juce::Colours::white);
        addAndMakeVisible(titleLabel);

        toggleButton.setButtonText("-");
        toggleButton.onClick = [this] { toggleCollapse(); };
        addAndMakeVisible(toggleButton);

        moveUpButton.setButtonText("▲");
        moveUpButton.onClick = [this] { if (onOrderChanged) onOrderChanged(this, true); };
        addAndMakeVisible(moveUpButton);

        moveDownButton.setButtonText("▼");
        moveDownButton.onClick = [this] { if (onOrderChanged) onOrderChanged(this, false); };
        addAndMakeVisible(moveDownButton);

        // Body Container Setup
        addAndMakeVisible(bodyContainer);
    }

    ~ModulePanel() override = default;

    void setOnLayoutChanged(LayoutChangedCallback callback) { onLayoutChanged = callback; }
    void setOnOrderChanged(OrderChangedCallback callback)   { onOrderChanged = callback; }

    juce::Component& getBody() { return bodyContainer; }

    bool getIsCollapsed() const { return isCollapsed; }

    int getPreferredHeight() const
    {
        return isCollapsed ? headerHeight : (headerHeight + bodyHeight);
    }

    void setBodyHeight(int newBodyHeight)
    {
        bodyHeight = newBodyHeight;
        resized();
    }

    void toggleCollapse()
    {
        isCollapsed = !isCollapsed;
        toggleButton.setButtonText(isCollapsed ? "+" : "-");
        bodyContainer.setVisible(!isCollapsed);

        if (onLayoutChanged)
            onLayoutChanged();
    }

    void paint(juce::Graphics& g) override
    {
        // Draw Header Background
        g.setColour(accentColour);
        g.fillRoundedRectangle(getLocalBounds().removeFromTop(headerHeight).toFloat(), 4.0f);

        // Outer Border
        g.setColour(juce::Colours::darkgrey);
        g.drawRoundedRectangle(getLocalBounds().toFloat(), 4.0f, 1.0f);
    }

    void resized() override
    {
        auto bounds = getLocalBounds();
        auto header = bounds.removeFromTop(headerHeight);

        // Header controls layout
        moveDownButton.setBounds(header.removeFromRight(25).reduced(2));
        moveUpButton.setBounds(header.removeFromRight(25).reduced(2));
        toggleButton.setBounds(header.removeFromRight(30).reduced(2));
        titleLabel.setBounds(header.reduced(6, 2));

        // Body layout
        if (!isCollapsed)
        {
            bodyContainer.setBounds(bounds.reduced(4));
        }
    }

private:
    juce::String title;
    juce::Colour accentColour;
    bool isCollapsed { false };

    int headerHeight { 35 };
    int bodyHeight   { 145 };

    juce::Button headerBar;
    juce::Label titleLabel;
    juce::TextButton toggleButton;
    juce::TextButton moveUpButton;
    juce::TextButton moveDownButton;

    juce::Component bodyContainer;

    LayoutChangedCallback onLayoutChanged;
    OrderChangedCallback  onOrderChanged;

    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR(ModulePanel)
};

#pragma once
#include <JuceHeader.h>
#include "ModulePanel.h"

class ModuleContainerComponent : public juce::Component
{
public:
    using LayoutUpdatedCallback = std::function<void()>;

    ModuleContainerComponent() = default;
    ~ModuleContainerComponent() override = default;

    void setOnLayoutUpdated(LayoutUpdatedCallback callback)
    {
        onLayoutUpdated = callback;
    }

    void addModule(std::unique_ptr<ModulePanel> module)
    {
        auto* ptr = module.get();
        
        ptr->setOnLayoutChanged([this] { updateLayout(); });
        ptr->setOnOrderChanged([this](ModulePanel* m, bool up) { moveModule(m, up); });

        addAndMakeVisible(*ptr);
        modules.push_back(std::move(module));

        updateLayout();
    }

    void moveModule(ModulePanel* module, bool moveUp)
    {
        auto it = std::find_if(modules.begin(), modules.end(),
                               [module](const std::unique_ptr<ModulePanel>& p) { return p.get() == module; });

        if (it == modules.end()) return;

        size_t index = std::distance(modules.begin(), it);

        if (moveUp && index > 0)
        {
            std::swap(modules[index], modules[index - 1]);
        }
        else if (!moveUp && index + 1 < modules.size())
        {
            std::swap(modules[index], modules[index + 1]);
        }

        updateLayout();
    }

    void updateLayout()
    {
        int y = padding;
        int width = getWidth() > 0 ? getWidth() - (padding * 2) : 740;

        for (auto& module : modules)
        {
            int moduleHeight = module->getPreferredHeight();
            module->setBounds(padding, y, width, moduleHeight);
            y += moduleHeight + padding;
        }

        setSize(getWidth(), y);

        if (onLayoutUpdated)
            onLayoutUpdated();
    }

    void resized() override
    {
        updateLayout();
    }

private:
    std::vector<std::unique_ptr<ModulePanel>> modules;
    int padding { 8 };
    LayoutUpdatedCallback onLayoutUpdated;

    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR(ModuleContainerComponent)
};

#include "PluginProcessor.h"
#include "PluginEditor.h"

SpandanAudioProcessorEditor::SpandanAudioProcessorEditor(SpandanAudioProcessor& p)
    : AudioProcessorEditor(&p), audioProcessor(p)
{
    // Configure Viewport
    viewport.setViewedComponent(&moduleContainer, false);
    viewport.setScrollBarsShown(true, false);
    viewport.setSingleStepSizes(0, 15);
    addAndMakeVisible(viewport);

    // Whenever container resizes, trigger viewport refresh
    moduleContainer.setOnLayoutUpdated([this] {
        viewport.setViewedComponentRectangle(moduleContainer.getBounds());
    });

    // Populate Dynamic Modules
    auto osc1Panel = std::make_unique<ModulePanel>("OSCILLATOR 1", juce::Colour(0xFF1E5631));
    // Add OSC1 Sliders & Attachments into osc1Panel->getBody() here...
    moduleContainer.addModule(std::move(osc1Panel));

    auto osc2Panel = std::make_unique<ModulePanel>("OSCILLATOR 2", juce::Colour(0xFF1E5631));
    moduleContainer.addModule(std::move(osc2Panel));

    auto filterPanel = std::make_unique<ModulePanel>("STATE VARIABLE FILTER", juce::Colour(0xFF2E8B57));
    moduleContainer.addModule(std::move(filterPanel));

    auto adsrPanel = std::make_unique<ModulePanel>("ADSR ENVELOPE", juce::Colour(0xFFB8860B));
    moduleContainer.addModule(std::move(adsrPanel));

    setSize(800, 600);
}

void SpandanAudioProcessorEditor::resized()
{
    auto bounds = getLocalBounds();
    
    // Top Title Bar
    auto headerBounds = bounds.removeFromTop(50);
    
    // Bottom MIDI Keyboard
    auto keyboardBounds = bounds.removeFromBottom(100);

    // Scrollable Center Viewport
    viewport.setBounds(bounds);
    moduleContainer.setSize(viewport.getMaximumVisibleWidth(), moduleContainer.getHeight());
}

class CyberJungleLookAndFeel : public juce::LookAndFeel_V4
{
public:
    CyberJungleLookAndFeel()
    {
        setColour(juce::ResizableWindow::backgroundColourId, juce::Colour(0xFFF0FDF4));
        setColour(juce::Slider::thumbColourId,               juce::Colour(0xFFB8860B));
        setColour(juce::Slider::rotarySliderFillColourId,     juce::Colour(0xFF2E8B57));
        setColour(juce::Label::textColourId,                  juce::Colour(0xFF8B4513));
    }

    void drawRotarySlider(juce::Graphics& g, int x, int y, int width, int height,
                          float sliderPos, float rotaryStartAngle, float rotaryEndAngle,
                          juce::Slider& slider) override
    {
        auto bounds = juce::Rectangle<int>(x, y, width, height).toFloat().reduced(4.0f);
        auto radius = juce::jmin(bounds.getWidth(), bounds.getHeight()) / 2.0f;
        auto center = bounds.getCentre();
        auto angle  = rotaryStartAngle + sliderPos * (rotaryEndAngle - rotaryStartAngle);

        // Outer Cyber Ring
        g.setColour(juce::Colour(0xFF2E8B57).withAlpha(0.3f));
        g.drawEllipse(bounds, 3.0f);

        // Metallic Mesh Cap
        g.setColour(juce::Colour(0xFF1E5631));
        g.fillEllipse(center.x - radius * 0.7f, center.y - radius * 0.7f, radius * 1.4f, radius * 1.4f);

        // Glowing Gold Pointer Indicator
        juce::Point<float> thumbPoint(
            center.x + radius * 0.75f * std::sin(angle),
            center.y - radius * 0.75f * std::cos(angle));

        g.setColour(juce::Colour(0xFFB8860B));
        g.fillEllipse(thumbPoint.x - 4.0f, thumbPoint.y - 4.0f, 8.0f, 8.0f);
    }
};