trigger dropdown, not working at all, needs proper implementation, ready for debug

client/src/components/auth/register.rs

@@ -3,13 +3,14 @@
 use crate::{
     config::colors::themes::Theme,
     state::pages::auth::RegisterState, // Use RegisterState
-    components::common::dialog,
+    components::common::{dialog, autocomplete},    
     state::state::AppState,
+    state::canvas_state::CanvasState,
 };
 use ratatui::{
     layout::{Alignment, Constraint, Direction, Layout, Rect, Margin},
     style::{Style, Modifier, Color},
-    widgets::{Block, BorderType, Borders, Paragraph},
+    widgets::{Block, BorderType, Borders, Paragraph, Wrap},
     Frame,
 };
 
@@ -45,29 +46,69 @@ pub fn render_register(
         ])
         .split(inner_area);
 
-    // --- FORM RENDERING ---
-    crate::components::handlers::canvas::render_canvas(
-        f,
-        chunks[0],
-        state, // Pass RegisterState
-        &[ // Update field labels
-            "Username",
-            "Email (Optional)",
-            "Password (Optional)",
-            "Confirm Password",
-            "Role (Optional)",
-        ],
-        &state.current_field,
-        &[ // Update values from RegisterState
-            &state.username,
-            &state.email,
-            &state.password,
-            &state.password_confirmation,
-            &state.role,
-        ],
-        theme,
-        is_edit_mode,
-    );
+    // --- FORM RENDERING (Manual) ---
+    let form_area = chunks[0];
+    let field_labels = [
+        "Username",
+        "Email (Optional)",
+        "Password (Optional)",
+        "Confirm Password",
+        "Role (Optional)",
+    ];
+    let num_fields = field_labels.len();
+
+    // Layout for labels and inputs within the form area
+    let form_layout = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([Constraint::Percentage(30), Constraint::Percentage(70)])
+        .split(form_area);
+
+    let label_area = form_layout[0];
+    let input_area = form_layout[1];
+
+    // Calculate vertical layout for input rows
+    let input_rows = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints(vec![Constraint::Length(1); num_fields])
+        .split(input_area);
+
+    let mut role_input_rect = Rect::default(); // Store role input rect for dropdown positioning
+
+    // Render labels and inputs row by row
+    for i in 0..num_fields {
+        let is_active_field = state.current_field() == i;
+
+        // Render Label
+        let label = Paragraph::new(format!("{}:", field_labels[i]))
+            .style(Style::default().fg(theme.fg))
+            .alignment(Alignment::Right);
+        let label_rect = Rect {
+            x: label_area.x,
+            y: input_rows[i].y,
+            width: label_area.width.saturating_sub(1),
+            height: 1,
+        };
+        f.render_widget(label, label_rect);
+
+        // Render Input
+        let input_value = state.inputs()[i]; // Get value using CanvasState trait
+        let input_widget = Paragraph::new(input_value.as_str())
+            .style(if is_active_field {
+                Style::default().fg(theme.highlight)
+            } else {
+                Style::default().fg(theme.fg)
+            });
+        f.render_widget(input_widget, input_rows[i]);
+
+        if i == 4 { // Store the role input field's Rect
+            role_input_rect = input_rows[i];
+        }
+
+        // Set cursor for the active field
+        if is_active_field && is_edit_mode {
+            f.set_cursor(input_rows[i].x + state.current_cursor_pos() as u16, input_rows[i].y);
+        }
+    }
 
     // --- ERROR MESSAGE ---
     if let Some(err) = &state.error_message {
@@ -151,5 +192,32 @@ pub fn render_register(
             app_state.ui.dialog.dialog_active_button_index,
         );
     }
-}
 
+    // --- AUTOCOMPLETE DROPDOWN RENDERING ---
+    if state.show_role_suggestions && !state.role_suggestions.is_empty() {
+        // Calculate dropdown area below the role input field
+        let dropdown_height = (state.role_suggestions.len() as u16).min(5) + 2; // Max 5 suggestions + border
+        let dropdown_area = Rect {
+            x: role_input_rect.x,
+            y: role_input_rect.y + 1, // Position below the input line
+            width: role_input_rect.width.max(20), // Ensure minimum width
+            height: dropdown_height,
+        };
+
+        // Ensure dropdown doesn't go off screen (simple vertical check)
+        let screen_height = f.size().height;
+        let clamped_dropdown_area = if dropdown_area.bottom() > screen_height {
+            Rect::new(dropdown_area.x, dropdown_area.y.saturating_sub(dropdown_height + 1), dropdown_area.width, dropdown_area.height)
+        } else {
+            dropdown_area
+        };
+
+        autocomplete::render_autocomplete_dropdown(
+            f,
+            clamped_dropdown_area,
+            theme,
+            &state.role_suggestions,
+            state.selected_suggestion_index,
+        );
+    }
+}