--[[
	Vex UI Library
	Gaya: dark panel, sidebar tab kiri, list toggle kanan, buka/tutup pakai animasi Tween.
	Cara pakai ada di bagian paling bawah file (EXAMPLE).
]]

local TweenService = game:GetService("TweenService")
local UserInputService = game:GetService("UserInputService")
local Players = game:GetService("Players")

local LocalPlayer = Players.LocalPlayer
local PlayerGui = LocalPlayer:WaitForChild("PlayerGui")

local Vex = {}
Vex.__index = Vex

-- ===== THEME =====
local Theme = {
	Background   = Color3.fromRGB(18, 18, 22),
	Panel        = Color3.fromRGB(24, 24, 29),
	Sidebar      = Color3.fromRGB(20, 20, 24),
	Stroke       = Color3.fromRGB(45, 45, 52),
	TextPrimary  = Color3.fromRGB(235, 235, 240),
	TextMuted    = Color3.fromRGB(150, 150, 160),
	Accent       = Color3.fromRGB(90, 140, 255),
	ToggleOn     = Color3.fromRGB(60, 190, 100),
	ToggleOff    = Color3.fromRGB(60, 60, 68),
	RowBg        = Color3.fromRGB(28, 28, 34),
}

local FONT = Enum.Font.GothamBold
local FONT_BODY = Enum.Font.Gotham

-- ===== HELPERS =====
local function corner(inst, radius)
	local c = Instance.new("UICorner")
	c.CornerRadius = UDim.new(0, radius or 8)
	c.Parent = inst
	return c
end

local function stroke(inst, color, thickness)
	local s = Instance.new("UIStroke")
	s.Color = color or Theme.Stroke
	s.Thickness = thickness or 1
	s.Parent = inst
	return s
end

local function tween(inst, props, time, style, dir)
	local tw = TweenService:Create(
		inst,
		TweenInfo.new(time or 0.25, style or Enum.EasingStyle.Quad, dir or Enum.EasingDirection.Out),
		props
	)
	tw:Play()
	return tw
end

local function makeDraggable(topbar, root)
	local dragging, dragInput, dragStart, startPos

	topbar.InputBegan:Connect(function(input)
		if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
			dragging = true
			dragStart = input.Position
			startPos = root.Position
			input.Changed:Connect(function()
				if input.UserInputState == Enum.UserInputState.End then
					dragging = false
				end
			end)
		end
	end)

	topbar.InputChanged:Connect(function(input)
		if input.UserInputType == Enum.UserInputType.MouseMovement or input.UserInputType == Enum.UserInputType.Touch then
			dragInput = input
		end
	end)

	UserInputService.InputChanged:Connect(function(input)
		if input == dragInput and dragging then
			local delta = input.Position - dragStart
			root.Position = UDim2.new(
				startPos.X.Scale, startPos.X.Offset + delta.X,
				startPos.Y.Scale, startPos.Y.Offset + delta.Y
			)
		end
	end)
end

-- ===== WINDOW =====
function Vex:CreateWindow(config)
	config = config or {}
	local title = config.Title or "Vex"
	local subtitle = config.Subtitle or "v1.0"

	-- ScreenGui
	local screenGui = Instance.new("ScreenGui")
	screenGui.Name = "VexUI"
	screenGui.ResetOnSpawn = false
	screenGui.ZIndexBehavior = Enum.ZIndexBehavior.Sibling
	screenGui.Parent = PlayerGui

	-- Root panel
	local root = Instance.new("Frame")
	root.Name = "Root"
	root.Size = UDim2.fromOffset(620, 420)
	root.Position = UDim2.new(0.5, -310, 0.5, -210)
	root.BackgroundColor3 = Theme.Background
	root.ClipsDescendants = true
	root.Parent = screenGui
	corner(root, 12)
	stroke(root, Theme.Stroke, 1)

	-- Topbar
	local topbar = Instance.new("Frame")
	topbar.Name = "TopBar"
	topbar.Size = UDim2.new(1, 0, 0, 46)
	topbar.BackgroundColor3 = Theme.Panel
	topbar.Parent = root
	corner(topbar, 12)

	local topbarFix = Instance.new("Frame") -- covers bottom corner rounding
	topbarFix.Size = UDim2.new(1, 0, 0, 12)
	topbarFix.Position = UDim2.new(0, 0, 1, -12)
	topbarFix.BackgroundColor3 = Theme.Panel
	topbarFix.BorderSizePixel = 0
	topbarFix.Parent = topbar

	local titleLabel = Instance.new("TextLabel")
	titleLabel.BackgroundTransparency = 1
	titleLabel.Position = UDim2.fromOffset(16, 0)
	titleLabel.Size = UDim2.new(0.6, 0, 1, 0)
	titleLabel.Font = FONT
	titleLabel.Text = title
	titleLabel.TextSize = 18
	titleLabel.TextColor3 = Theme.TextPrimary
	titleLabel.TextXAlignment = Enum.TextXAlignment.Left
	titleLabel.Parent = topbar

	local subLabel = Instance.new("TextLabel")
	subLabel.BackgroundTransparency = 1
	subLabel.Position = UDim2.new(1, -80, 0, 0)
	subLabel.Size = UDim2.fromOffset(64, 46)
	subLabel.Font = FONT_BODY
	subLabel.Text = subtitle
	subLabel.TextSize = 13
	subLabel.TextColor3 = Theme.TextMuted
	subLabel.Parent = topbar

	-- Close button
	local closeBtn = Instance.new("TextButton")
	closeBtn.Size = UDim2.fromOffset(32, 32)
	closeBtn.Position = UDim2.new(1, -40, 0.5, -16)
	closeBtn.BackgroundColor3 = Theme.RowBg
	closeBtn.Text = "X"
	closeBtn.Font = FONT
	closeBtn.TextSize = 16
	closeBtn.TextColor3 = Theme.TextPrimary
	closeBtn.AutoButtonColor = false
	closeBtn.Parent = topbar
	corner(closeBtn, 8)

	makeDraggable(topbar, root)

	-- Body (sidebar + content)
	local body = Instance.new("Frame")
	body.Name = "Body"
	body.Size = UDim2.new(1, 0, 1, -46)
	body.Position = UDim2.fromOffset(0, 46)
	body.BackgroundTransparency = 1
	body.Parent = root

	local sidebar = Instance.new("Frame")
	sidebar.Name = "Sidebar"
	sidebar.Size = UDim2.new(0, 170, 1, 0)
	sidebar.BackgroundColor3 = Theme.Sidebar
	sidebar.Parent = body

	local sidebarList = Instance.new("UIListLayout")
	sidebarList.Padding = UDim.new(0, 4)
	sidebarList.SortOrder = Enum.SortOrder.LayoutOrder
	sidebarList.Parent = sidebar

	local sidebarPad = Instance.new("UIPadding")
	sidebarPad.PaddingTop = UDim.new(0, 12)
	sidebarPad.PaddingLeft = UDim.new(0, 10)
	sidebarPad.PaddingRight = UDim.new(0, 10)
	sidebarPad.Parent = sidebar

	local content = Instance.new("Frame")
	content.Name = "Content"
	content.Size = UDim2.new(1, -170, 1, 0)
	content.Position = UDim2.fromOffset(170, 0)
	content.BackgroundTransparency = 1
	content.Parent = body

	-- Footer
	local footer = Instance.new("TextLabel")
	footer.BackgroundTransparency = 1
	footer.Size = UDim2.new(1, -20, 0, 20)
	footer.Position = UDim2.new(0, 10, 1, -22)
	footer.Font = FONT_BODY
	footer.Text = ""
	footer.TextSize = 12
	footer.TextColor3 = Theme.TextMuted
	footer.TextXAlignment = Enum.TextXAlignment.Left
	footer.Parent = root

	-- ===== Open/close animation state =====
	local window = setmetatable({
		_screenGui = screenGui,
		_root = root,
		_content = content,
		_sidebar = sidebar,
		_footer = footer,
		_tabs = {},
		_activeTab = nil,
		_open = true,
	}, Vex)

	closeBtn.MouseButton1Click:Connect(function()
		window:Toggle()
	end)

	-- Entrance animation
	root.Size = UDim2.fromOffset(620, 0)
	root.Position = UDim2.new(0.5, -310, 0.5, 0)
	tween(root, {
		Size = UDim2.fromOffset(620, 420),
		Position = UDim2.new(0.5, -310, 0.5, -210),
	}, 0.35, Enum.EasingStyle.Back)

	return window
end

-- Toggle whole window open/close with animation (slide + fade collapse)
function Vex:Toggle()
	local root = self._root
	if self._open then
		self._open = false
		tween(root, {
			Size = UDim2.fromOffset(620, 0),
			Position = UDim2.new(root.Position.X.Scale, root.Position.X.Offset, root.Position.Y.Scale, root.Position.Y.Offset + 210),
		}, 0.25, Enum.EasingStyle.Quad)
	else
		self._open = true
		tween(root, {
			Size = UDim2.fromOffset(620, 420),
			Position = UDim2.new(root.Position.X.Scale, root.Position.X.Offset, root.Position.Y.Scale, root.Position.Y.Offset - 210),
		}, 0.25, Enum.EasingStyle.Back)
	end
end

function Vex:SetFooter(text)
	self._footer.Text = text
end

function Vex:Destroy()
	self._screenGui:Destroy()
end

-- ===== TAB =====
function Vex:CreateTab(name)
	local self_ = self

	local tabBtn = Instance.new("TextButton")
	tabBtn.Size = UDim2.new(1, 0, 0, 34)
	tabBtn.BackgroundColor3 = Theme.RowBg
	tabBtn.BackgroundTransparency = 1
	tabBtn.Text = "  " .. name
	tabBtn.Font = FONT
	tabBtn.TextSize = 14
	tabBtn.TextColor3 = Theme.TextMuted
	tabBtn.TextXAlignment = Enum.TextXAlignment.Left
	tabBtn.AutoButtonColor = false
	tabBtn.LayoutOrder = #self_._tabs + 1
	tabBtn.Parent = self_._sidebar
	corner(tabBtn, 8)

	local page = Instance.new("ScrollingFrame")
	page.Size = UDim2.new(1, -24, 1, -24)
	page.Position = UDim2.fromOffset(12, 12)
	page.BackgroundTransparency = 1
	page.BorderSizePixel = 0
	page.ScrollBarThickness = 3
	page.ScrollBarImageColor3 = Theme.Accent
	page.CanvasSize = UDim2.new(0, 0, 0, 0)
	page.AutomaticCanvasSize = Enum.AutomaticSize.Y
	page.Visible = false
	page.Parent = self_._content

	local listLayout = Instance.new("UIListLayout")
	listLayout.Padding = UDim.new(0, 8)
	listLayout.SortOrder = Enum.SortOrder.LayoutOrder
	listLayout.Parent = page

	local tabObj = {
		_btn = tabBtn,
		_page = page,
	}

	tabBtn.MouseButton1Click:Connect(function()
		self_:_selectTab(tabObj)
	end)

	table.insert(self_._tabs, tabObj)

	if #self_._tabs == 1 then
		self_:_selectTab(tabObj)
	end

	return setmetatable(tabObj, {__index = Vex})
end

function Vex:_selectTab(tabObj)
	for _, t in ipairs(self._tabs) do
		t._page.Visible = false
		tween(t._btn, {BackgroundTransparency = 1, TextColor3 = Theme.TextMuted}, 0.15)
	end
	tabObj._page.Visible = true
	tween(tabObj._btn, {BackgroundTransparency = 0, TextColor3 = Theme.TextPrimary}, 0.15)
	self._activeTab = tabObj
end

-- ===== ROW BUILDER =====
local function makeRow(page, labelText)
	local row = Instance.new("Frame")
	row.Size = UDim2.new(1, 0, 0, 38)
	row.BackgroundColor3 = Theme.RowBg
	row.LayoutOrder = #page:GetChildren()
	row.Parent = page
	corner(row, 8)

	local label = Instance.new("TextLabel")
	label.BackgroundTransparency = 1
	label.Position = UDim2.fromOffset(12, 0)
	label.Size = UDim2.new(0.55, 0, 1, 0)
	label.Font = FONT_BODY
	label.Text = labelText
	label.TextSize = 14
	label.TextColor3 = Theme.TextPrimary
	label.TextXAlignment = Enum.TextXAlignment.Left
	label.Parent = row

	return row
end

-- Toggle row: label + On/Off pill button, click toggles + tweens color
function Vex:AddToggle(text, default, callback)
	local page = self._page
	local row = makeRow(page, text)

	local btn = Instance.new("TextButton")
	btn.Size = UDim2.fromOffset(70, 26)
	btn.Position = UDim2.new(1, -82, 0.5, -13)
	btn.BackgroundColor3 = default and Theme.ToggleOn or Theme.ToggleOff
	btn.Text = default and "On" or "Off"
	btn.Font = FONT
	btn.TextSize = 13
	btn.TextColor3 = Theme.TextPrimary
	btn.AutoButtonColor = false
	btn.Parent = row
	corner(btn, 6)

	local state = default and true or false

	btn.MouseButton1Click:Connect(function()
		state = not state
		btn.Text = state and "On" or "Off"
		tween(btn, {BackgroundColor3 = state and Theme.ToggleOn or Theme.ToggleOff}, 0.15)
		if callback then
			callback(state)
		end
	end)

	return {
		Set = function(_, val)
			state = val
			btn.Text = state and "On" or "Off"
			tween(btn, {BackgroundColor3 = state and Theme.ToggleOn or Theme.ToggleOff}, 0.15)
		end,
	}
end

-- Dropdown row: label + button that cycles/opens option list
function Vex:AddDropdown(text, options, default, callback)
	local page = self._page
	local row = makeRow(page, text)
	options = options or {"All"}

	local current = default or options[1]
	local open = false

	local btn = Instance.new("TextButton")
	btn.Size = UDim2.fromOffset(90, 26)
	btn.Position = UDim2.new(1, -102, 0.5, -13)
	btn.BackgroundColor3 = Theme.RowBg
	btn.Text = current
	btn.Font = FONT
	btn.TextSize = 13
	btn.TextColor3 = Theme.TextPrimary
	btn.AutoButtonColor = false
	btn.ZIndex = 5
	btn.Parent = row
	corner(btn, 6)
	stroke(btn, Theme.Stroke, 1)

	local list = Instance.new("Frame")
	list.Size = UDim2.fromOffset(90, #options * 26)
	list.Position = UDim2.new(1, -102, 1, 4)
	list.BackgroundColor3 = Theme.Panel
	list.Visible = false
	list.ZIndex = 6
	list.ClipsDescendants = true
	list.Parent = row
	corner(list, 6)
	stroke(list, Theme.Stroke, 1)

	local listLayout = Instance.new("UIListLayout")
	listLayout.SortOrder = Enum.SortOrder.LayoutOrder
	listLayout.Parent = list

	for i, opt in ipairs(options) do
		local optBtn = Instance.new("TextButton")
		optBtn.Size = UDim2.new(1, 0, 0, 26)
		optBtn.BackgroundTransparency = 1
		optBtn.Text = opt
		optBtn.Font = FONT_BODY
		optBtn.TextSize = 13
		optBtn.TextColor3 = Theme.TextMuted
		optBtn.ZIndex = 6
		optBtn.LayoutOrder = i
		optBtn.Parent = list

		optBtn.MouseButton1Click:Connect(function()
			current = opt
			btn.Text = opt
			list.Visible = false
			open = false
			if callback then
				callback(opt)
			end
		end)
	end

	btn.MouseButton1Click:Connect(function()
		open = not open
		list.Visible = open
	end)

	return {
		Set = function(_, val)
			current = val
			btn.Text = val
		end,
	}
end

-- Slider row: label + numeric value, drag to change
function Vex:AddSlider(text, min, max, default, callback)
	local page = self._page
	local row = makeRow(page, text)
	min, max = min or 0, max or 1

	local track = Instance.new("Frame")
	track.Size = UDim2.fromOffset(90, 6)
	track.Position = UDim2.new(1, -140, 0.5, -3)
	track.BackgroundColor3 = Theme.ToggleOff
	track.Parent = row
	corner(track, 3)

	local fill = Instance.new("Frame")
	fill.BackgroundColor3 = Theme.Accent
	fill.Parent = track
	corner(fill, 3)

	local valueLabel = Instance.new("TextLabel")
	valueLabel.BackgroundTransparency = 1
	valueLabel.Position = UDim2.new(1, -40, 0.5, -13)
	valueLabel.Size = UDim2.fromOffset(40, 26)
	valueLabel.Font = FONT_BODY
	valueLabel.TextSize = 13
	valueLabel.TextColor3 = Theme.TextMuted
	valueLabel.Parent = row

	local function setRatio(ratio)
		ratio = math.clamp(ratio, 0, 1)
		fill.Size = UDim2.new(ratio, 0, 1, 0)
		local val = min + (max - min) * ratio
		valueLabel.Text = string.format("%.2f", val)
		if callback then
			callback(val)
		end
		return val
	end

	setRatio(((default or min) - min) / (max - min))

	local dragging = false
	track.InputBegan:Connect(function(input)
		if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
			dragging = true
		end
	end)
	UserInputService.InputEnded:Connect(function(input)
		if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
			dragging = false
		end
	end)
	UserInputService.InputChanged:Connect(function(input)
		if dragging and (input.UserInputType == Enum.UserInputType.MouseMovement or input.UserInputType == Enum.UserInputType.Touch) then
			local relX = (input.Position.X - track.AbsolutePosition.X) / track.AbsoluteSize.X
			setRatio(relX)
		end
	end)

	return {
		Set = function(_, val)
			setRatio((val - min) / (max - min))
		end,
	}
end

-- Section label (like "GENERAL" grouping, plain header text inside a page)
function Vex:AddLabel(text)
	local page = self._page
	local lbl = Instance.new("TextLabel")
	lbl.Size = UDim2.new(1, 0, 0, 24)
	lbl.BackgroundTransparency = 1
	lbl.Font = FONT
	lbl.Text = text
	lbl.TextSize = 13
	lbl.TextColor3 = Theme.TextMuted
	lbl.TextXAlignment = Enum.TextXAlignment.Left
	lbl.Parent = page
	return lbl
end

return Vex

--[[
	EXAMPLE PAKAI:

	local Vex = loadstring(game:HttpGet("URL_KE_FILE_INI"))()
	-- atau: local Vex = require(path.ke.ModuleScript)

	local Window = Vex:CreateWindow({ Title = "Vex", Subtitle = "v2.1" })
	Window:SetFooter("Server Uptime: 00h 00m 00s")

	local General = Window:CreateTab("General")
	General:AddToggle("Rune Luck", true, function(state)
		print("Rune Luck:", state)
	end)
	General:AddDropdown("Apply Rune Luck To", {"All", "Self", "Team"}, "All", function(choice)
		print("Applied to:", choice)
	end)
	General:AddToggle("Popups", true)
	General:AddToggle("Rune Popups", false)
	General:AddToggle("Scientific Notation", false)
	General:AddSlider("Player Transparency", 0, 1, 0, function(v)
		print("Transparency:", v)
	end)

	local Automation = Window:CreateTab("Automation")
	local Audio = Window:CreateTab("Audio")
	local Customization = Window:CreateTab("Customization")

	-- Buka/tutup panel (dengan animasi):
	-- Window:Toggle()
]]