"""List item blocks aligned with Smartbank Figma design system.

Provides list item components for menus, settings, and navigation lists.
"""

from __future__ import annotations

import pydivkit as dk

from smarty_ui.tokens.theme import Theme, default_theme


def list_item(
    title: str,
    *,
    subtitle: str | None = None,
    icon_url: str | None = None,
    icon_size: int = 24,
    icon_bg_color: str | None = None,
    icon_bg_size: int = 40,
    icon_bg_radius: int | None = None,
    trailing_icon_url: str | None = None,
    trailing_text: str | None = None,
    trailing_text_color: str | None = None,
    show_chevron: bool = True,
    show_divider: bool = False,
    action_url: str | None = None,
    theme: Theme = default_theme,
) -> dk.DivContainer:
    """List item with icon, title, optional subtitle, and trailing content.

    Common pattern for menu items, settings rows, and navigation lists.

    Args:
        title: Primary text (Controls 01 style)
        subtitle: Optional secondary text (Text 02 style)
        icon_url: URL to leading icon
        icon_size: Icon size in dp (default 24)
        icon_bg_color: Background color for icon container
        icon_bg_size: Size of icon background container (default 40)
        icon_bg_radius: Border radius for icon bg, defaults to icon_bg_size/2
        trailing_icon_url: URL to trailing icon (e.g., chevron)
        trailing_text: Optional trailing text (e.g., value, badge)
        trailing_text_color: Color for trailing text
        show_chevron: Whether to show chevron arrow (default True)
        show_divider: Whether to show bottom divider
        action_url: URL to navigate on tap
        theme: Theme tokens to use

    Returns:
        A DivContainer representing the list item
    """
    items: list[dk.Div] = []

    # Leading icon with optional background
    if icon_url:
        if icon_bg_color:
            radius = icon_bg_radius if icon_bg_radius is not None else icon_bg_size // 2
            icon_container = dk.DivContainer(
                orientation=dk.DivContainerOrientation.HORIZONTAL,
                content_alignment_horizontal=dk.DivContentAlignmentHorizontal.CENTER,
                content_alignment_vertical=dk.DivAlignmentVertical.CENTER,
                width=dk.DivFixedSize(value=icon_bg_size),
                height=dk.DivFixedSize(value=icon_bg_size),
                border=dk.DivBorder(corner_radius=radius),
                background=[dk.DivSolidBackground(color=icon_bg_color)],
                items=[
                    dk.DivImage(
                        image_url=icon_url,
                        width=dk.DivFixedSize(value=icon_size),
                        height=dk.DivFixedSize(value=icon_size),
                    )
                ],
            )
            items.append(icon_container)
        else:
            items.append(
                dk.DivImage(
                    image_url=icon_url,
                    width=dk.DivFixedSize(value=icon_size),
                    height=dk.DivFixedSize(value=icon_size),
                )
            )

        # Spacer after icon
        items.append(
            dk.DivSeparator(
                delimiter_style=dk.DivSeparatorDelimiterStyle(color="#00000000"),
                margins=dk.DivEdgeInsets(left=12),
            )
        )

    # Text content (title + optional subtitle)
    text_items: list[dk.Div] = []

    # Title
    controls_style = theme.typography.get_controls_1(bold=False)
    text_items.append(
        dk.DivText(
            text=title,
            font_size=controls_style.size,
            font_weight=dk.DivFontWeight(controls_style.weight),
            text_color=theme.colors.text_primary,
            line_height=controls_style.line_height,
            max_lines=1,
            width=dk.DivMatchParentSize(),
        )
    )

    # Subtitle
    if subtitle:
        text_style = theme.typography.get_text_2()
        text_items.append(
            dk.DivText(
                text=subtitle,
                font_size=text_style.size,
                font_weight=dk.DivFontWeight(text_style.weight),
                text_color=theme.colors.text_secondary,
                line_height=text_style.line_height,
                max_lines=1,
                width=dk.DivMatchParentSize(),
                margins=dk.DivEdgeInsets(top=2),
            )
        )

    # Text container (grows to fill space)
    items.append(
        dk.DivContainer(
            orientation=dk.DivContainerOrientation.VERTICAL,
            width=dk.DivMatchParentSize(weight=1),
            items=text_items,
        )
    )

    # Trailing content
    if trailing_text:
        text_style = theme.typography.get_text_1()
        items.append(
            dk.DivText(
                text=trailing_text,
                font_size=text_style.size,
                font_weight=dk.DivFontWeight(text_style.weight),
                text_color=trailing_text_color or theme.colors.text_secondary,
                line_height=text_style.line_height,
                width=dk.DivWrapContentSize(),
                margins=dk.DivEdgeInsets(left=8),
            )
        )

    if trailing_icon_url:
        items.append(
            dk.DivImage(
                image_url=trailing_icon_url,
                width=dk.DivFixedSize(value=24),
                height=dk.DivFixedSize(value=24),
                margins=dk.DivEdgeInsets(left=8),
            )
        )
    elif show_chevron:
        # Default chevron (using a simple arrow character as placeholder)
        # In production, you'd use an actual icon URL
        items.append(
            dk.DivText(
                text="›",
                font_size=20,
                text_color=theme.colors.text_secondary,
                width=dk.DivWrapContentSize(),
                margins=dk.DivEdgeInsets(left=8),
            )
        )

    # Build list item container
    list_item_kwargs: dict = {
        "orientation": dk.DivContainerOrientation.HORIZONTAL,
        "content_alignment_vertical": dk.DivAlignmentVertical.CENTER,
        "width": dk.DivMatchParentSize(),
        "paddings": dk.DivEdgeInsets(
            left=theme.spacing.list_item_padding_h,
            right=theme.spacing.list_item_padding_h,
            top=theme.spacing.list_item_padding_v,
            bottom=theme.spacing.list_item_padding_v,
        ),
        "items": items,
    }

    if action_url:
        list_item_kwargs["actions"] = [
            dk.DivAction(log_id=f"list_item_{title}", url=action_url)
        ]

    row = dk.DivContainer(**list_item_kwargs)

    # Wrap with divider if needed
    if show_divider:
        return dk.DivContainer(
            orientation=dk.DivContainerOrientation.VERTICAL,
            width=dk.DivMatchParentSize(),
            items=[
                row,
                dk.DivSeparator(
                    delimiter_style=dk.DivSeparatorDelimiterStyle(
                        color=theme.colors.border_light,
                    ),
                    margins=dk.DivEdgeInsets(
                        left=theme.spacing.list_item_padding_h,
                        right=theme.spacing.list_item_padding_h,
                    ),
                ),
            ],
        )

    return row


def list_item_group(
    items: list[dk.DivContainer],
    *,
    title: str | None = None,
    bg_color: str | None = None,
    corner_radius: int | None = None,
    theme: Theme = default_theme,
) -> dk.DivContainer:
    """Group multiple list items into a card-like container.

    Args:
        items: List of list_item components
        title: Optional section title
        bg_color: Background color, defaults to surface
        corner_radius: Border radius, defaults to radius_lg
        theme: Theme tokens to use

    Returns:
        A DivContainer grouping the list items
    """
    radius = corner_radius if corner_radius is not None else theme.spacing.radius_lg
    content: list[dk.Div] = []

    # Section title
    if title:
        caption_style = theme.typography.get_caption_1()
        content.append(
            dk.DivText(
                text=title.upper(),
                font_size=caption_style.size,
                font_weight=dk.DivFontWeight(caption_style.weight),
                text_color=theme.colors.text_secondary,
                line_height=caption_style.line_height,
                width=dk.DivMatchParentSize(),
                margins=dk.DivEdgeInsets(
                    left=theme.spacing.list_item_padding_h,
                    right=theme.spacing.list_item_padding_h,
                    top=theme.spacing.list_item_padding_v,
                    bottom=8,
                ),
            )
        )

    # Add items
    content.extend(items)

    return dk.DivContainer(
        orientation=dk.DivContainerOrientation.VERTICAL,
        width=dk.DivMatchParentSize(),
        border=dk.DivBorder(corner_radius=radius),
        background=[dk.DivSolidBackground(color=bg_color or theme.colors.surface)],
        items=content,
    )


def action_item(
    title: str,
    icon_url: str,
    *,
    icon_bg_color: str | None = None,
    action_url: str | None = None,
    theme: Theme = default_theme,
) -> dk.DivContainer:
    """Quick action item with icon and label (vertical layout).

    Used for action grids like "Transfer", "Pay", "Top up", etc.

    Args:
        title: Action label
        icon_url: URL to action icon
        icon_bg_color: Background color for icon, defaults to blue_light
        action_url: URL to navigate on tap
        theme: Theme tokens to use

    Returns:
        A DivContainer representing the action item
    """
    text_style = theme.typography.get_text_2()

    action_kwargs: dict = {
        "orientation": dk.DivContainerOrientation.VERTICAL,
        "content_alignment_horizontal": dk.DivContentAlignmentHorizontal.CENTER,
        "width": dk.DivWrapContentSize(),
        "items": [
            dk.DivContainer(
                orientation=dk.DivContainerOrientation.HORIZONTAL,
                content_alignment_horizontal=dk.DivContentAlignmentHorizontal.CENTER,
                content_alignment_vertical=dk.DivAlignmentVertical.CENTER,
                width=dk.DivFixedSize(value=48),
                height=dk.DivFixedSize(value=48),
                border=dk.DivBorder(corner_radius=24),
                background=[
                    dk.DivSolidBackground(
                        color=icon_bg_color or theme.colors.blue_light
                    )
                ],
                items=[
                    dk.DivImage(
                        image_url=icon_url,
                        width=dk.DivFixedSize(value=24),
                        height=dk.DivFixedSize(value=24),
                    )
                ],
            ),
            dk.DivText(
                text=title,
                font_size=text_style.size,
                font_weight=dk.DivFontWeight(text_style.weight),
                text_color=theme.colors.text_primary,
                line_height=text_style.line_height,
                text_alignment_horizontal=dk.DivAlignmentHorizontal.CENTER,
                width=dk.DivWrapContentSize(),
                margins=dk.DivEdgeInsets(top=8),
            ),
        ],
    }

    if action_url:
        action_kwargs["actions"] = [
            dk.DivAction(log_id=f"action_{title}", url=action_url)
        ]

    return dk.DivContainer(**action_kwargs)
