package gui

import clay "clay:."
import "core:fmt"
import "../core"
import "../shared"
import "../ui"

// ─── Sidebar Declaration ─────────────────────────────────────────
declare_sidebar :: proc(app: ^GUI_App_State) {
	screens := []ui.App_Screen{.Story, .Script, .Characters, .Panels, .Layout, .Bubbles, .Export, .Community}
	icons := []string{"1", "2", "3", "4", "5", "6", "7", "8"}
	names := []string{"Story", "Script", "Chars", "Panels", "Layout", "Bubbles", "Export", "Commty"}

	if clay.UI(clay.ID("Sidebar"))({
		layout = {sizing = {width = clay.SizingFixed(220), height = clay.SizingGrow({})}, layoutDirection = .TopToBottom, padding = {top = 12, right = 12, bottom = 12, left = 12}, childGap = 2},
		backgroundColor = CLAY_BG_SIDEBAR,
	}) {
		// Brand
		clay_body_text("comic-odin", color = CLAY_ACCENT, size = 16)
		clay_muted_text("Pipeline GUI")

		// Pipeline progress bar
		ready, total := ready_stage_count(app.controller)
		progress := f32(0)
		if total > 0 { progress = f32(ready) / f32(total) }
		if clay.UI(clay.ID("SidebarProgress"))({
			layout = {sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(4)}, layoutDirection = .LeftToRight},
			backgroundColor = CLAY_PROGRESS_TRACK,
			cornerRadius = clay.CornerRadiusAll(2),
		}) {
			if progress > 0 {
				pct := f32(progress * 100); if pct > 100 { pct = 100 }
				if clay.UI(clay.ID("SidebarPgFill"))({
					layout = {sizing = {width = clay.SizingPercent(pct), height = clay.SizingGrow({})}},
					backgroundColor = CLAY_PROGRESS_FILL,
					cornerRadius = clay.CornerRadiusAll(2),
				}) {}
			}
		}
		clay_muted_text(fmt.tprintf("%d/4 done", ready))

		// Navigation
		for i in 0 ..< len(screens) {
			is_active := app.controller.active_screen == screens[i]
			bg := CLAY_NAV_HOVER_BG
			if is_active { bg = CLAY_NAV_ACTIVE_BG }
			accent_w: u16 = 0
			accent_c: clay.Color = {0, 0, 0, 0}
			if is_active { accent_w = 3; accent_c = CLAY_NAV_ACTIVE }

			if clay.UI(clay.ID("Nav", u32(i)))({
				layout = {sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(34)}, padding = {top = 4, right = 8, bottom = 4, left = 8}, childAlignment = {y = .Center}, layoutDirection = .LeftToRight, childGap = 6},
				backgroundColor = bg,
				cornerRadius = clay.CornerRadiusAll(CLAY_RADIUS_SM),
				border = {color = accent_c, width = {accent_w, 0, 0, 0, 0}},
			}) {
				text_color: clay.Color = CLAY_TEXT_SECONDARY
				if is_active { text_color = CLAY_TEXT_BRIGHT }
				clay_body_text(fmt.tprintf("%s %s", icons[i], names[i]), color = text_color)
			}
		}

		// Spacer
		gap_spacer := clay.UI(clay.ID("SidebarGap"))
		if gap_spacer({
			layout = {sizing = {width = clay.SizingGrow({}), height = clay.SizingGrow({})}},
		}) {}

		// Project name + help
		if clay.UI(clay.ID("SidebarFooter"))({
			layout = {layoutDirection = .LeftToRight, childAlignment = {y = .Center}, childGap = 4},
		}) {
			proj_name := app.project_path
			if len(proj_name) > 18 { proj_name = fmt.tprintf("...%s", proj_name[len(proj_name)-15:]) }
			clay_muted_text(proj_name)
			declare_button_small("btn_help", "?")
		}
	}
}

// ─── Pipeline Bar ─────────────────────────────────────────────────

// ─── Pipeline Bar ─────────────────────────────────────────────────
declare_pipeline_bar :: proc(app: ^GUI_App_State) {
	if clay.UI(clay.ID("PipelineBar"))({
		layout = {sizing = {width = clay.SizingGrow({}), height = clay.SizingFit({min = 54, max = 48})}, padding = {top = 8, right = 16, bottom = 8, left = 16}, childGap = 12, childAlignment = {y = .Center}, layoutDirection = .LeftToRight},
		backgroundColor = CLAY_BG_TOPBAR,
		border = {color = CLAY_BORDER_DIVIDER, width = {0, 0, 0, 1, 0}},
	}) {
		// Screen name
		if clay.UI(clay.ID("PipelineTitle"))({
			layout = {sizing = {width = clay.SizingFixed(110)}},
		}) {
			clay_title_text(ui.screen_name(app.controller.active_screen), size = CLAY_FONT_SIZE_LG)
		}

		// Pipeline stepper
		script_ok := len(app.controller.state.script.pages) > 0
		panels_ok := len(app.controller.state.panel_images) > 0
		layout_ok := len(app.controller.state.page_layouts) > 0
		export_ok := panels_ok && layout_ok

		steps := [4]struct{name: string, done: bool}{
			{"Script", script_ok},
			{"Panels", panels_ok},
			{"Layout", layout_ok},
			{"Export", export_ok},
		}
		for i in 0 ..< len(steps) {
			var_name := steps[i].name
			is_current := (i == 0 && !script_ok) || (i == 1 && script_ok && !panels_ok) || (i == 2 && panels_ok && !layout_ok) || (i == 3 && layout_ok && !export_ok) || (i == 3 && export_ok)
			circle_color: clay.Color = CLAY_BTN_DISABLED
			if steps[i].done { circle_color = CLAY_SUCCESS }
			if is_current && !steps[i].done { circle_color = CLAY_ACCENT }

			if clay.UI(clay.ID("PStep", u32(i)))({
				layout = {sizing = {width = clay.SizingFixed(84), height = clay.SizingFixed(36)}, layoutDirection = .TopToBottom, childAlignment = {x = .Center}, childGap = 1},
				backgroundColor = CLAY_NAV_HOVER_BG if clay.Hovered() else clay.Color{0, 0, 0, 0},
				cornerRadius = clay.CornerRadiusAll(CLAY_RADIUS_SM),
			}) {
				mark := "○"
				mark_color: clay.Color = CLAY_TEXT_TERTIARY
				if steps[i].done { mark = "●"; mark_color = CLAY_SUCCESS }
				if is_current && !steps[i].done { mark_color = CLAY_ACCENT }
				clay.Text(mark, {fontId = CLAY_FONT_BODY, fontSize = 14, textColor = mark_color})
				clay.Text(var_name, {fontId = CLAY_FONT_BODY, fontSize = CLAY_FONT_SIZE_SM, textColor = mark_color})
			}
			if i < len(steps) - 1 {
				line_color: clay.Color = clay.Color{255, 255, 255, 20}
				if steps[i].done { line_color = CLAY_SUCCESS }
				if clay.UI(clay.ID("PLine", u32(i)))({
					layout = {sizing = {width = clay.SizingFixed(12), height = clay.SizingFixed(1)}},
					backgroundColor = line_color,
				}) {}
			}
		}

		// Spacer
		pspacer := clay.UI(clay.ID("PBarSpacer"))
		if pspacer({layout = {sizing = {width = clay.SizingGrow({}), height = clay.SizingGrow({})}}}) {}

		// Pipeline progress count
		ready, total := ready_stage_count(app.controller)
		if clay.UI(clay.ID("PBarProgress"))({
			layout = {layoutDirection = .LeftToRight, childAlignment = {y = .Center}, childGap = 4},
		}) {
			clay_body_text(fmt.tprintf("%d/%d", ready, total), color = CLAY_ACCENT, size = CLAY_FONT_SIZE_SM)
			progress := f32(0)
			if total > 0 { progress = f32(ready) / f32(total) }
			if progress > 0 && progress <= 100 {
				pct := f32(progress * 100); if pct > 100 { pct = 100 }
				if clay.UI(clay.ID("PBarMinibar"))({
					layout = {sizing = {width = clay.SizingFixed(60), height = clay.SizingFixed(4)}, layoutDirection = .LeftToRight},
					backgroundColor = CLAY_PROGRESS_TRACK,
					cornerRadius = clay.CornerRadiusAll(2),
				}) {
					if clay.UI(clay.ID("PBarMinibarFill"))({
						layout = {sizing = {width = clay.SizingPercent(pct), height = clay.SizingGrow({})}},
						backgroundColor = CLAY_PROGRESS_FILL,
						cornerRadius = clay.CornerRadiusAll(2),
					}) {}
				}
			}
		}

		// Status message (truncated)
		msg := app.status_msg
		if len(msg) > 40 { msg = fmt.tprintf("%s...", msg[:37]) }
		clay_body_text(msg, color = CLAY_TEXT_SECONDARY, size = CLAY_FONT_SIZE_SM)
	}
}

// ─── Workspace Declaration ────────────────────────────────────────

// ─── Workspace Declaration ────────────────────────────────────────
declare_workspace :: proc(app: ^GUI_App_State, can_gen_panels, can_layout, can_export, proj_ok, export_ok, has_deepseek: bool, pages_count: int) {
	screen := app.controller.active_screen

	if clay.UI(clay.ID("Workspace"))({
		layout = {sizing = {width = clay.SizingGrow({}), height = clay.SizingGrow({})}, layoutDirection = .TopToBottom, padding = {top = 12, right = 16, bottom = 12, left = 16}, childGap = 8},
	}) {
		switch screen {
		case .Story:
			declare_story_workspace(app)
			declare_action_log(app)
		case .Script:
			declare_script_workspace(app)
		case .Characters:
			declare_characters_workspace(app)
			declare_action_log(app)
		case .Panels:
			declare_panels_workspace(app)
		case .Layout:
			declare_layout_workspace(app)
		case .Bubbles:
			declare_bubbles_workspace(app)
		case .Export:
			declare_export_workspace(app)
			declare_action_log(app)
		case .Community:
			declare_community_workspace(app)
			declare_action_log(app)
		}
	}
}

// ─── Script Workspace ────────────────────────────────────────────

// ─── Bottom Bar ───────────────────────────────────────────────────
declare_bottom_bar :: proc(app: ^GUI_App_State, can_gen_panels, can_layout, can_export: bool, next_hint: string) {
	if clay.UI(clay.ID("BottomBar"))({
		layout = {sizing = {width = clay.SizingGrow({}), height = clay.SizingFit({min = 50, max = 44})}, padding = {top = 6, right = 12, bottom = 6, left = 12}, childGap = 8, childAlignment = {y = .Center}, layoutDirection = .LeftToRight},
		backgroundColor = CLAY_BG_TOPBAR,
		border = {color = CLAY_BORDER_DIVIDER, width = {0, 0, 1, 0, 0}},
	}) {
		// Left: File ops
		declare_button_danger("btn_new", "New")
		declare_button_soft("btn_open", "Open")
		declare_button_soft("btn_save", "Save")

		// Spacer
		bbspacer1 := clay.UI(clay.ID("BBSpacer1"))
		if bbspacer1({layout = {sizing = {width = clay.SizingGrow({}), height = clay.SizingGrow({})}}}) {}

		// Center: Primary CTA
		cta_label := fmt.tprintf("Next: %s", next_hint)
		declare_button_recommended("btn_next", cta_label)

		// Spacer
		bbspacer2 := clay.UI(clay.ID("BBSpacer2"))
		if bbspacer2({layout = {sizing = {width = clay.SizingGrow({}), height = clay.SizingGrow({})}}}) {}

		// Right: quick actions
		clay_muted_text("Src:")
		declare_nav_chip("btn_local", "Local", !app.use_deepseek_script)
		declare_nav_chip("btn_deepseek", "DS", app.use_deepseek_script)
		declare_button_small("btn_script", "Script")
		declare_button_small("btn_panels", "Panels")
		declare_button_small("btn_layout", "Layout")
		declare_button_small("btn_export", "Export")
		declare_button_primary("btn_auto", "Auto-All")
		declare_button_soft("btn_autosave_toggle",
			fmt.tprintf("⏱ %s", "ON" if app.autosave_enabled else "OFF"))
	}
}

// ─── Click Processing ──────────────────────────────────────────────
