from nicegui import ui
from utils import SystemMonitor, GPUMonitor
from typing import Optional, Literal


class MetricCircleAdv:
    def __init__(self, label: str, monitor: SystemMonitor | GPUMonitor,
                 target_value: str,
                 target_max_value: str,
                 color: str,
                 formatting: Literal['percent', 'units', 'degree'],
                 icon: Optional[str] = None):
        with ui.card().classes('metric-card p-4 text-center'):
            with ui.column().classes('items-center gap-2'):
                # Icon at top
                with ui.row().classes('items-center gap-1'):
                    if icon:
                        ui.icon(icon, size='sm', color=color)

                    # Title
                    ui.label(label).classes('text-sm text-grey-5 font-medium')

                # Circular progress - simplified
                with ui.circular_progress(size='60px', color=color, show_value=False).bind_value_from(monitor, target_value):
                    if formatting == 'percent':
                        ui.label().classes('text-lg font-bold text-white').bind_text_from(monitor, target_value, backward=lambda x: f"{int(x * 100)} %")


class MetricCircle:
    def __init__(self, title: str, value: str, percentage: float, color: str, icon: str):
        with ui.card().classes('metric-card p-4 text-center'):
            with ui.column().classes('items-center gap-2'):
                # Icon at top
                ui.icon(icon, size='md', color=color)

                # Title
                ui.label(title).classes('text-sm text-grey-5 font-medium')

                # Circular progress - simplified
                ui.circular_progress(
                    value=percentage,
                    size='60px',
                    color=color
                )

                # Value
                ui.label(value).classes('text-lg font-bold text-white')


class LargeMetricCircle:
    def __init__(self, title: str, value: str, percentage: float, color: str):
        with ui.card().classes('metric-card p-6 text-center'):
            with ui.column().classes('items-center gap-3'):
                # Title
                ui.label(title).classes('text-sm text-grey-5 font-medium uppercase tracking-wide')

                # Large circular progress - simplified
                ui.circular_progress(
                    value=percentage,
                    size='120px',
                    color=color
                )

                # Value below
                ui.label(f'{int(percentage * 100)}%').classes('text-2xl font-bold text-white')
                ui.label(value).classes('text-xs text-grey-5')


class ColorfulMetricCard:
    def __init__(self, title: str, icon: str, color: str):
        with ui.card().classes(f'p-4 text-center animate-fade-in').style(f'background: linear-gradient(135deg, {color}20 0%, {color}10 100%); border: 1px solid {color}40'):
            with ui.column().classes('items-center gap-2'):
                ui.icon(icon, size='xl').style(f'color: {color}')
                ui.label(title).classes('text-sm font-medium text-white')