//! Rendering: sidebar / URL bar / editor tabs / response / status / popups.

use ratatui::Frame;

use ratatui::layout::{Constraint, Layout, Rect};

use ratatui::style::{Color, Modifier, Style};

use ratatui::text::{Line, Span};

use ratatui::widgets::{

    Block, Borders, Cell, Clear, List, ListItem, ListState, Paragraph, Row, Table, TableState,

    Tabs, Wrap,

};

use crate::app::{App, EditTarget, EditorTab, Focus, Mode, Popup, SidebarRow, TableId};

use crate::highlight;

use crate::http::DYNAMIC_VARS;

use crate::model::Method;

const SIDEBAR_WIDTH: u16 = 38;

pub fn draw(f: &mut Frame, app: &mut App) {

    let area = f.area();

    let [main_area, status_area] =

        Layout::vertical([Constraint::Min(3), Constraint::Length(1)]).areas(area);

    if app.zoom {

        // Only the focused pane is drawn, filling everything above the status

        // bar. The URL bar belongs to the editor pane (it renders the selected

        // request and takes the editor's focus colour), so it comes along.

        match app.focus {

            Focus::Sidebar => draw_sidebar(f, app, main_area),

            Focus::Editor => {

                let [url_area, editor_area] =

                    Layout::vertical([Constraint::Length(3), Constraint::Min(3)]).areas(main_area);

                draw_url_bar(f, app, url_area);

                draw_editor(f, app, editor_area);

            }

            Focus::Response => draw_response(f, app, main_area),

        }

    } else {

        let [side_area, right_area] =

            Layout::horizontal([Constraint::Length(SIDEBAR_WIDTH), Constraint::Min(40)])

                .areas(main_area);

        let [url_area, editor_area, response_area] = Layout::vertical([

            Constraint::Length(3),

            Constraint::Percentage(45),

            Constraint::Min(5),

        ])

        .areas(right_area);

        draw_sidebar(f, app, side_area);

        draw_url_bar(f, app, url_area);

        draw_editor(f, app, editor_area);

        draw_response(f, app, response_area);

    }

    draw_status(f, app, status_area);

    match app.popup {

        Popup::Help => draw_help(f, app, area),

        Popup::Env => draw_env(f, app, area),

        Popup::Auth => draw_auth(f, app, area),

        Popup::None => {}

    }

}

// ----- shared styles -----

fn focused(focus: bool) -> Style {

    if focus {

        Style::default().fg(Color::Cyan)

    } else {

        Style::default().fg(Color::DarkGray)

    }

}

fn method_color(m: Method) -> Color {

    match m {

        Method::Get => Color::Green,

        Method::Post => Color::Yellow,

        Method::Put => Color::Blue,

        Method::Patch => Color::Magenta,

        Method::Delete => Color::Red,

        Method::Head => Color::Cyan,

        Method::Options => Color::Gray,

    }

}

fn checkbox(enabled: bool) -> &'static str {

    if enabled { "[x]" } else { "[ ]" }

}

// ----- sidebar -----

fn draw_sidebar(f: &mut Frame, app: &mut App, area: Rect) {

    let title = if app.filter.is_empty() {

        format!(" {} ", app.collection.name)

    } else {

        format!(" {} — /{} ", app.collection.name, app.filter)

    };

    let block = Block::default()

        .title(title)

        .borders(Borders::ALL)

        .border_style(focused(app.focus == Focus::Sidebar));

    let mut items: Vec<ListItem> = Vec::new();

    for row in &app.sidebar_rows {

        match row {

            SidebarRow::Group(tag) => {

                let marker = if app.collapsed.contains(tag) {

                    "▸"

                } else {

                    "▾"

                };

                items.push(ListItem::new(Line::from(vec![Span::styled(

                    format!("{marker} {tag}"),

                    Style::default().add_modifier(Modifier::BOLD),

                )])));

            }

            SidebarRow::Request(i) => {

                let req = &app.collection.requests[*i];

                items.push(ListItem::new(Line::from(vec![

                    Span::styled(

                        format!("  {:<7}", req.method.to_string()),

                        Style::default().fg(method_color(req.method)),

                    ),

                    Span::raw(req.label(app.collection.label_mode).to_string()),

                ])));

            }

        }

    }

    let list = List::new(items)

        .block(block)

        .highlight_style(

            Style::default()

                .bg(Color::DarkGray)

                .add_modifier(Modifier::BOLD),

        )

        .highlight_symbol(">");

    // Keep the selection centered while scrolling; pin to the ends near top/bottom.

    let viewport = area.height.saturating_sub(2) as usize; // minus borders

    let offset = centered_offset(app.sidebar_sel, app.sidebar_rows.len(), viewport);

    let mut state = ListState::default()

        .with_selected(Some(app.sidebar_sel))

        .with_offset(offset);

    f.render_stateful_widget(list, area, &mut state);

}

/// Scroll offset that holds `sel` at the vertical middle of a `viewport`-tall

/// list, clamped so the first and last items never scroll past the edges.

fn centered_offset(sel: usize, len: usize, viewport: usize) -> usize {

    if viewport == 0 || len <= viewport {

        return 0;

    }

    let max_offset = len - viewport;

    sel.saturating_sub(viewport / 2).min(max_offset)

}

// ----- URL bar -----

fn draw_url_bar(f: &mut Frame, app: &App, area: Rect) {

    let (title, line) = match app.selected_request() {

        Some(req) => {

            let url = format!(

                "{}{}",

                app.collection.base_url().unwrap_or("<no server — press E>"),

                req.path

            );

            (

                format!(" {} — p: edit url ", req.name),

                Line::from(vec![

                    Span::styled(

                        format!(" {:<7}", req.method.to_string()),

                        Style::default()

                            .fg(method_color(req.method))

                            .add_modifier(Modifier::BOLD),

                    ),

                    Span::raw(url),

                ]),

            )

        }

        None => (

            " cielago ".to_string(),

            Line::from("No request selected — pick one from the sidebar"),

        ),

    };

    let block = Block::default()

        .title(title)

        .borders(Borders::ALL)

        .border_style(focused(app.focus == Focus::Editor));

    f.render_widget(Paragraph::new(line).block(block), area);

}

// ----- editor -----

fn draw_editor(f: &mut Frame, app: &mut App, area: Rect) {

    let outer = Block::default()

        .borders(Borders::ALL)

        .border_style(focused(app.focus == Focus::Editor));

    let inner = outer.inner(area);

    f.render_widget(outer, area);

    let [tabs_area, content_area] =

        Layout::vertical([Constraint::Length(1), Constraint::Min(1)]).areas(inner);

    let tabs = Tabs::new(EditorTab::ALL.iter().map(|t| t.title()).collect::<Vec<_>>())

        .select(app.tab.index())

        .highlight_style(

            Style::default()

                .fg(Color::Cyan)

                .add_modifier(Modifier::BOLD | Modifier::UNDERLINED),

        )

        .divider("│");

    f.render_widget(tabs, tabs_area);

    match app.tab {

        EditorTab::Body => draw_body(f, app, content_area),

        EditorTab::Docs => draw_docs(f, app, content_area),

        tab => {

            if let Some(table) = tab.table() {

                draw_table(f, app, content_area, table)

            }

        }

    }

}

/// The body is syntax-highlighted while read-only and handed to the raw

/// `TextArea` during editing: `tui-textarea` styles whole lines only, so one

/// widget cannot do both. The textarea stays the source of truth either way —

/// the read-only view renders its lines and follows its cursor.

fn draw_body(f: &mut Frame, app: &mut App, area: Rect) {

    // Insert mode with no `editing` target means the textarea has the keys.

    if app.mode == Mode::Insert && app.editing.is_none() {

        app.textarea.set_block(

            Block::default()

                .title(" Body — Esc: done ")

                .borders(Borders::NONE),

        );

        f.render_widget(&app.textarea, area);

        return;

    }

    let block = Block::default()

        .title(" Body — i: edit · e: $EDITOR · j/k: scroll ")

        .borders(Borders::NONE);

    let inner = block.inner(area);

    f.render_widget(block, area);

    let text = app.textarea.lines().join("\n");

    let mut lines = highlight::highlight(&text, true);

    // Mark where `i` would drop the cursor.

    let cursor_row = app.textarea.cursor().0;

    if let Some(line) = lines.get_mut(cursor_row) {

        *line = std::mem::take(line).style(Style::default().bg(Color::Rgb(40, 40, 40)));

    }

    let offset = centered_offset(cursor_row, lines.len(), inner.height as usize);

    f.render_widget(Paragraph::new(lines).scroll((offset as u16, 0)), inner);

}

/// Read-only view of what the spec says about this request: the operation

/// description, then every parameter and body field with its type, accepted

/// values and default.

fn draw_docs(f: &mut Frame, app: &mut App, area: Rect) {

    let block = Block::default()

        .title(" Docs — j/k: scroll · read-only ")

        .borders(Borders::NONE);

    let inner = block.inner(area);

    f.render_widget(block, area);

    let mut lines: Vec<Line> = Vec::new();

    match app.selected_request() {

        None => lines.push(Line::raw("No request selected.")),

        Some(req) => {

            lines.push(Line::from(vec![

                Span::styled(

                    format!("{} {}", req.method, req.path),

                    Style::default()

                        .fg(method_color(req.method))

                        .add_modifier(Modifier::BOLD),

                ),

                Span::raw("  "),

                Span::styled(

                    req.summary.clone().unwrap_or_else(|| req.name.clone()),

                    Style::default().fg(Color::Gray),

                ),

            ]));

            if let Some(desc) = &req.description {

                lines.push(Line::raw(""));

                lines.extend(

                    desc.lines()

                        .map(|l| Line::styled(l.to_string(), Style::default().fg(Color::Gray))),

                );

            }

            if req.docs.is_empty() {

                lines.push(Line::raw(""));

                lines.push(Line::styled(

                    "No spec docs for this request. Hand-made requests have none;",

                    Style::default().fg(Color::DarkGray),

                ));

                lines.push(Line::styled(

                    "for imported ones, re-import the spec to fill this in.",

                    Style::default().fg(Color::DarkGray),

                ));

            }

            for (location, heading) in [

                ("path", "Path params"),

                ("query", "Query params"),

                ("header", "Headers"),

                ("body", "Body"),

            ] {

                let fields = req.docs.iter().filter(|d| d.location == location);

                let mut first = true;

                for d in fields {

                    if first {

                        lines.push(Line::raw(""));

                        lines.push(Line::styled(

                            heading.to_string(),

                            Style::default().add_modifier(Modifier::BOLD),

                        ));

                        first = false;

                    }

                    let mut head = vec![

                        Span::styled(format!("  {}", d.name), Style::default().fg(Color::Cyan)),

                        // Required fields are starred, as in most API docs.

                        Span::styled(

                            if d.required { "*" } else { "" },

                            Style::default().fg(Color::Red),

                        ),

                        Span::raw("  "),

                        Span::styled(d.ty.clone(), Style::default().fg(Color::Yellow)),

                    ];

                    if let Some(default) = &d.default {

                        head.push(Span::styled(

                            format!("  = {default}"),

                            Style::default().fg(Color::DarkGray),

                        ));

                    }

                    lines.push(Line::from(head));

                    if !d.options.is_empty() {

                        lines.push(Line::from(vec![

                            Span::styled("    one of: ", Style::default().fg(Color::DarkGray)),

                            Span::styled(

                                d.options.join(" | "),

                                Style::default().fg(Color::Magenta),

                            ),

                        ]));

                    }

                    if let Some(desc) = &d.description {

                        lines.extend(desc.lines().map(|l| {

                            Line::styled(format!("    {l}"), Style::default().fg(Color::Gray))

                        }));

                    }

                }

            }

        }

    }

    // Wrapping means this is a lower bound on the rendered height, so the last

    // line always stays reachable.

    let max_scroll = lines.len().saturating_sub(inner.height as usize);

    app.docs_scroll = app.docs_scroll.min(max_scroll);

    f.render_widget(

        Paragraph::new(lines)

            .wrap(Wrap { trim: false })

            .scroll((app.docs_scroll as u16, 0)),

        inner,

    );

}

fn draw_table(f: &mut Frame, app: &App, area: Rect, table: TableId) {

    let rows_data: Vec<(bool, String, String, String)> = match table {

        TableId::Params => {

            let mut v: Vec<(bool, String, String, String)> = Vec::new();

            if let Some(req) = app.selected_request() {

                v.extend(

                    req.path_params

                        .iter()

                        .map(|r| (r.enabled, "path".into(), r.key.clone(), r.value.clone())),

                );

                v.extend(

                    req.query

                        .iter()

                        .map(|r| (r.enabled, "query".into(), r.key.clone(), r.value.clone())),

                );

            }

            v

        }

        TableId::Headers => app

            .selected_request()

            .map(|req| {

                req.headers

                    .iter()

                    .map(|r| (r.enabled, String::new(), r.key.clone(), r.value.clone()))

                    .collect()

            })

            .unwrap_or_default(),

        TableId::Vars => app

            .collection

            .variables

            .iter()

            .map(|r| (r.enabled, String::new(), r.key.clone(), r.value.clone()))

            .collect(),

    };

    let rows: Vec<Row> = rows_data

        .iter()

        .map(|(enabled, loc, key, value)| {

            let style = if *enabled {

                Style::default()

            } else {

                Style::default().fg(Color::DarkGray)

            };

            let mut cells = vec![Cell::from(checkbox(*enabled))];

            if table == TableId::Params {

                cells.push(Cell::from(loc.clone()));

            }

            cells.push(Cell::from(key.clone()));

            cells.push(Cell::from(value.clone()));

            Row::new(cells).style(style)

        })

        .collect();

    let widths: Vec<Constraint> = if table == TableId::Params {

        vec![

            Constraint::Length(4),

            Constraint::Length(6),

            Constraint::Percentage(30),

            Constraint::Min(10),

        ]

    } else {

        vec![

            Constraint::Length(4),

            Constraint::Percentage(30),

            Constraint::Min(10),

        ]

    };

    let hint = match table {

        TableId::Vars => {

            " Variables — {{name}} usable anywhere · space: toggle · a: add · i: edit · d: del "

        }

        _ => " space: toggle · a: add · i: edit · d: del · Enter: send ",

    };

    let t = Table::new(rows, widths)

        .block(Block::default().title(hint).borders(Borders::NONE))

        .row_highlight_style(

            Style::default()

                .bg(Color::DarkGray)

                .add_modifier(Modifier::BOLD),

        )

        .highlight_symbol(">");

    let mut state = TableState::default().with_selected(if rows_data.is_empty() {

        None

    } else {

        Some(app.table_row)

    });

    f.render_stateful_widget(t, area, &mut state);

}

// ----- response -----

fn draw_response(f: &mut Frame, app: &mut App, area: Rect) {

    let title = match (&app.response, app.sending) {

        (_, true) => " Response — sending… ".to_string(),

        (Some(resp), false) => format!(" Response — {} ", resp.status_line()),

        (None, false) => " Response ".to_string(),

    };

    let block = Block::default()

        .title(title)

        .borders(Borders::ALL)

        .border_style(focused(app.focus == Focus::Response));

    let body = app

        .response

        .as_ref()

        .map(|r| r.body.as_str())

        .unwrap_or("No response yet — press Enter on the editor to send.");

    // Clamp scroll to content length.

    let max_scroll = body.lines().count().saturating_sub(1);

    if app.response_scroll > max_scroll {

        app.response_scroll = max_scroll;

    }

    // `{{…}}` in a response is literal server output, not template syntax.

    let p = Paragraph::new(highlight::highlight(body, false))

        .block(block)

        .wrap(Wrap { trim: false })

        .scroll((app.response_scroll as u16, 0));

    f.render_widget(p, area);

}

// ----- status bar -----

fn draw_status(f: &mut Frame, app: &App, area: Rect) {

    match app.mode {

        Mode::Command => {

            f.render_widget(Paragraph::new(format!(":{}", app.command)), area);

            f.set_cursor_position((area.x + 1 + app.command.len() as u16, area.y));

        }

        Mode::Search => {

            f.render_widget(Paragraph::new(format!("/{}", app.search.buf)), area);

            let cursor_chars = app.search.buf[..app.search.cursor].chars().count() as u16;

            f.set_cursor_position((area.x + 1 + cursor_chars, area.y));

        }

        Mode::Insert if app.editing.is_some() => {

            let label = match app.editing.unwrap() {

                EditTarget::Cell { col, .. } => match col {

                    crate::app::CellCol::Key => "key",

                    crate::app::CellCol::Value => "value",

                },

                EditTarget::Rename => "rename",

                EditTarget::NewRequest => "new request",

                EditTarget::Url => "url (verb path)",

                EditTarget::EnvNew => "server url",

                EditTarget::AuthField(_) => "auth",

            };

            let prompt = format!("{label}> ");

            f.render_widget(Paragraph::new(format!("{prompt}{}", app.input.buf)), area);

            let cursor_chars = app.input.buf[..app.input.cursor].chars().count() as u16;

            f.set_cursor_position((area.x + prompt.len() as u16 + cursor_chars, area.y));

        }

        _ => {

            let mode_badge = match app.mode {

                Mode::Normal => Span::styled(

                    " NORMAL ",

                    Style::default().bg(Color::Green).fg(Color::Black),

                ),

                Mode::Insert => Span::styled(

                    " INSERT ",

                    Style::default().bg(Color::Yellow).fg(Color::Black),

                ),

                Mode::Command | Mode::Search => Span::raw(""),

            };

            let dirty = if app.dirty { "*" } else { "" };

            let server = app.collection.base_url().unwrap_or("no server");

            let line = Line::from(vec![

                mode_badge,

                Span::raw(format!(

                    " {}{} | {} | {} ",

                    app.collection.name, dirty, server, app.status

                )),

            ]);

            f.render_widget(Paragraph::new(line), area);

        }

    }

}

// ----- popups -----

fn centered(area: Rect, pct_x: u16, pct_y: u16) -> Rect {

    let [_, v, _] = Layout::vertical([

        Constraint::Percentage((100 - pct_y) / 2),

        Constraint::Percentage(pct_y),

        Constraint::Percentage((100 - pct_y) / 2),

    ])

    .areas(area);

    let [_, h, _] = Layout::horizontal([

        Constraint::Percentage((100 - pct_x) / 2),

        Constraint::Percentage(pct_x),

        Constraint::Percentage((100 - pct_x) / 2),

    ])

    .areas(v);

    h

}

fn draw_help(f: &mut Frame, app: &mut App, area: Rect) {

    let popup = centered(area, 64, 80);

    f.render_widget(Clear, popup);

    let mut lines = vec![

        Line::styled("Global", Style::default().add_modifier(Modifier::BOLD)),

        Line::raw("  1/2/3, Tab   focus sidebar / editor / response"),

        Line::raw("  z            maximize the focused pane (z again to restore)"),

        Line::raw("  ] or L       next tab (Params/Headers/Body/Docs/Variables)"),

        Line::raw("  [ or H       previous editor tab"),

        Line::raw("  /            search / filter requests"),

        Line::raw("  E            servers / base URLs"),

        Line::raw("  A            auth config (bearer / API key / OAuth2)"),

        Line::raw("  :            command line (:w save, :q quit, :q! force, :wq)"),

        Line::raw("  q            quit (warns when unsaved)"),

        Line::raw(""),

        Line::styled("Sidebar", Style::default().add_modifier(Modifier::BOLD)),

        Line::raw("  j/k, g/G     navigate"),

        Line::raw("  Enter/h/l    open request · collapse/expand group"),

        Line::raw("  n/r/d/y      new / rename / delete / duplicate request"),

        Line::raw("  /            filter (Enter keeps it, Esc clears)"),

        Line::raw("  t            cycle labels: name → summary → path"),

        Line::raw(""),

        Line::styled(

            "Editor (tables)",

            Style::default().add_modifier(Modifier::BOLD),

        ),

        Line::raw("  Enter        send request"),

        Line::raw("  i            edit value of selected row"),

        Line::raw("  a            add row (key then value)"),

        Line::raw("  space        enable/disable row"),

        Line::raw("  d            delete row · m cycle method · r rename"),

        Line::raw("  p            edit URL / path (paste a full URL to set"),

        Line::raw("               the server; ?query fills the Params tab;"),

        Line::raw("               a leading verb sets the method, e.g."),

        Line::raw("               `post /pets`)"),

        Line::raw(""),

        Line::styled("Body tab", Style::default().add_modifier(Modifier::BOLD)),

        Line::raw("  j/k, d/u     scroll · g/G top/bottom"),

        Line::raw("  i            edit inline (Esc to finish)"),

        Line::raw("  e            open in $EDITOR"),

        Line::raw(""),

        Line::styled("Docs tab", Style::default().add_modifier(Modifier::BOLD)),

        Line::raw("  types, enums and descriptions from the spec (* = required)"),

        Line::raw("  j/k, d/u     scroll · g/G top/bottom"),

        Line::raw(""),

        Line::styled("Response", Style::default().add_modifier(Modifier::BOLD)),

        Line::raw("  j/k, d/u     scroll · g/G top/bottom"),

        Line::raw("  e            open in $EDITOR (view only)"),

        Line::raw(""),

        Line::styled("Variables", Style::default().add_modifier(Modifier::BOLD)),

        Line::raw("  {{name}} in paths, params, headers and bodies —"),

        Line::raw("  substituted at send time. Dynamic ones, computed"),

        Line::raw("  per send ({{$name}} to bypass a same-named variable):"),

    ];

    lines.extend(DYNAMIC_VARS.iter().map(|(name, help)| {

        Line::from(vec![

            Span::styled(format!("  {name:<15}"), Style::default().fg(Color::Magenta)),

            Span::raw(*help),

        ])

    }));

    lines.extend([

        Line::raw(""),

        Line::styled("Commands", Style::default().add_modifier(Modifier::BOLD)),

        Line::raw("  :new <name>                      create a collection"),

        Line::raw("  :open <name>                     switch collection"),

        Line::raw("  :label name|summary|path         sidebar label source"),

        Line::raw("  :groups collapsed|expanded       group state on open"),

        Line::raw("  :rename-all summary|operation|path|method-path"),

    ]);

    // The list outgrows short terminals, so the popup scrolls with j/k.

    let viewport = popup.height.saturating_sub(2) as usize;

    let max_scroll = lines.len().saturating_sub(viewport);

    app.help_scroll = app.help_scroll.min(max_scroll);

    let more = if app.help_scroll < max_scroll {

        " Help — j/k scroll · Esc to close "

    } else {

        " Help — Esc to close "

    };

    let block = Block::default()

        .title(more)

        .borders(Borders::ALL)

        .border_style(Style::default().fg(Color::Cyan));

    f.render_widget(

        Paragraph::new(lines)

            .block(block)

            .scroll((app.help_scroll as u16, 0)),

        popup,

    );

}

fn draw_env(f: &mut Frame, app: &App, area: Rect) {

    let popup = centered(area, 60, 50);

    f.render_widget(Clear, popup);

    let items: Vec<ListItem> = app

        .collection

        .servers

        .iter()

        .enumerate()

        .map(|(i, s)| {

            let marker = if i == app.collection.active_server {

                "● "

            } else {

                "  "

            };

            ListItem::new(format!("{marker}{s}"))

        })

        .collect();

    let block = Block::default()

        .title(" Servers — Enter: use · a: add · d: delete · Esc: close ")

        .borders(Borders::ALL)

        .border_style(Style::default().fg(Color::Cyan));

    let list = List::new(items)

        .block(block)

        .highlight_style(Style::default().bg(Color::DarkGray))

        .highlight_symbol(">");

    let mut state = ListState::default().with_selected(Some(app.env_sel));

    f.render_stateful_widget(list, popup, &mut state);

}

fn draw_auth(f: &mut Frame, app: &App, area: Rect) {

    use crate::app::AuthField;

    use crate::model::{AuthKind, AuthStyle};

    let popup = centered(area, 70, 45);

    f.render_widget(Clear, popup);

    let block = Block::default()

        .title(" Auth — j/k: field · i/Enter: edit · space: toggle · Esc: save & close ")

        .borders(Borders::ALL)

        .border_style(Style::default().fg(Color::Cyan));

    let inner = block.inner(popup);

    f.render_widget(block, popup);

    let fields = app.auth_fields();

    let mut lines = Vec::new();

    for (i, field) in fields.iter().enumerate() {

        let value = match field {

            AuthField::Kind => toggle_row(app.auth_form.kind, AuthKind::ALL, AuthKind::title),

            AuthField::Style => toggle_row(

                app.auth_form.auth_style,

                [AuthStyle::Basic, AuthStyle::Post],

                |s| match s {

                    AuthStyle::Basic => "basic",

                    AuthStyle::Post => "post",

                },

            ),

            f if f.is_secret() && !app.auth_field_value(i).is_empty() => "••••••••".to_string(),

            _ => app.auth_field_value(i),

        };

        let style = if i == app.auth_field {

            Style::default()

                .bg(Color::DarkGray)

                .add_modifier(Modifier::BOLD)

        } else {

            Style::default()

        };

        let label = app.auth_field_label(*field);

        lines.push(

            Line::from(vec![

                Span::styled(format!(" {label:<28}"), Style::default().fg(Color::Gray)),

                Span::raw(value),

            ])

            .style(style),

        );

    }

    // A hint that secret fields understand `$(…)` command substitution.

    if fields.iter().any(|f| f.is_secret()) {

        lines.push(Line::raw(""));

        lines.push(Line::styled(

            " secret fields accept $(cmd), e.g. $(op read \"op://vault/item/field\")",

            Style::default().fg(Color::DarkGray),

        ));

    }

    f.render_widget(Paragraph::new(lines), inner);

}

/// Render a toggle field as its options with the active one bracketed, e.g.

/// `[bearer]  apikey  oauth2`.

fn toggle_row<T: PartialEq + Copy, const N: usize>(

    current: T,

    all: [T; N],

    label: impl Fn(T) -> &'static str,

) -> String {

    all.iter()

        .map(|opt| {

            let name = label(*opt);

            if *opt == current {

                format!("[{name}]")

            } else {

                format!(" {name} ")

            }

        })

        .collect::<Vec<_>>()

        .join(" ")

}