"""
Vertical timeline display components.
"""
from typing import Optional, Any
from .base import Component


class Timeline(Component):
    """A vertical timeline container that renders a list of objects as chronological points."""
    def __init__(
        self,
        title: Optional[str] = None,
        filter_component: Optional[Component] = None,
        **kwargs,
    ):
        super().__init__(**kwargs)
        self.title = title
        self.filter_component = filter_component

    def get_row_url(self, row: Any) -> Optional[str]:
        if hasattr(self.url, "__call__"):
            return self.url(row)
        return self.url

    def render_html(self, **kwargs) -> str:
        data = self.get_value(**kwargs)

        header_html = ""
        if self.title or self.filter_component:
            title_html = (
                f'<div class="text-xl font-semibold">{self.title}</div>'
                if self.title
                else ""
            )
            filter_html = ""
            if self.filter_component:
                filter_html = self.filter_component.render(**kwargs)
            header_html = f"""
            <div class="flex justify-between items-center mb-4">
                {title_html}
                {filter_html}
            </div>
            """

        cards_html = ""
        if not data:
            cards_html = '<div class="text-center text-base-content/60 py-8">No items found</div>'
        else:
            for item in data:
                item_kwargs = kwargs.copy()
                item_kwargs["object"] = item

                children_html = ""
                for child in self.children or []:
                    children_html += child.render(**item_kwargs)

                item_url = self.get_row_url(item)

                clickable_attrs = ""
                clickable_classes = ""
                if item_url:
                    clickable_attrs = f'hx-get="{item_url}" hx-target="#app-layout" hx-push-url="true"'
                    clickable_classes = "cursor-pointer hover:border-primary hover:shadow-md transition-all"

                cards_html += f"""
                <div class="timeline-item relative flex items-center gap-4 pb-6 last:pb-0">
                    <div class="timeline-indicator relative z-10 flex items-center">
                        <div class="w-3 h-3 rounded-full bg-primary"></div>
                        <div class="h-0.5 w-4 bg-primary"></div>
                    </div>
                    <div class="timeline-card flex-1 p-4 rounded-box border border-base-300 bg-base-100 shadow-sm {clickable_classes}" {clickable_attrs}>
                        {children_html}
                    </div>
                </div>"""

        vertical_line = (
            '<div class="absolute left-[5px] top-0 bottom-0 w-0.5 bg-primary/30"></div>'
            if data
            else ""
        )

        return f"""<div id="{self.uid}" class="timeline-container {self.classes}">
{header_html}
<div class="timeline-scroll relative">
{vertical_line}
{cards_html}
</div>
</div>"""
