import 'package:flutter/material.dart';

import 'package:asciineverdie/src/shared/retro_colors.dart';

/// 데스크톱 3패널 레이아웃에서 사용하는 공통 위젯들
///
/// - 패널 헤더 (금색 테두리)
/// - 섹션 헤더 (비활성 텍스트)
/// - 세그먼트 프로그레스 바

/// 패널 헤더 (Panel Header)
class DesktopPanelHeader extends StatelessWidget {
  const DesktopPanelHeader({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
      decoration: const BoxDecoration(
        color: RetroColors.darkBrown,
        border: Border(bottom: BorderSide(color: RetroColors.gold, width: 2)),
      ),
      child: Text(
        title.toUpperCase(),
        style: const TextStyle(
          fontFamily: 'PressStart2P',
          fontSize: 13,
          fontWeight: FontWeight.bold,
          color: RetroColors.gold,
        ),
      ),
    );
  }
}

/// 섹션 헤더 (Section Header)
class DesktopSectionHeader extends StatelessWidget {
  const DesktopSectionHeader({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      child: Text(
        title.toUpperCase(),
        style: const TextStyle(
          fontFamily: 'PressStart2P',
          fontSize: 13,
          color: RetroColors.textDisabled,
        ),
      ),
    );
  }
}

/// 레트로 스타일 세그먼트 프로그레스 바 (Segment Progress Bar)
class DesktopSegmentProgressBar extends StatelessWidget {
  const DesktopSegmentProgressBar({
    super.key,
    required this.position,
    required this.max,
    required this.color,
    this.tooltip,
  });

  final int position;
  final int max;
  final Color color;
  final String? tooltip;

  @override
  Widget build(BuildContext context) {
    final progress = max > 0 ? (position / max).clamp(0.0, 1.0) : 0.0;
    const segmentCount = 20;
    final filledSegments = (progress * segmentCount).round();

    final bar = Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      child: Container(
        height: 12,
        decoration: BoxDecoration(
          color: color.withValues(alpha: 0.15),
          border: Border.all(color: RetroColors.panelBorderOuter, width: 1),
        ),
        child: Row(
          children: List.generate(segmentCount, (index) {
            final isFilled = index < filledSegments;
            return Expanded(
              child: Container(
                decoration: BoxDecoration(
                  color: isFilled ? color : color.withValues(alpha: 0.1),
                  border: Border(
                    right: index < segmentCount - 1
                        ? BorderSide(
                            color: RetroColors.panelBorderOuter.withValues(
                              alpha: 0.3,
                            ),
                            width: 1,
                          )
                        : BorderSide.none,
                  ),
                ),
              ),
            );
          }),
        ),
      ),
    );

    if (tooltip != null && tooltip!.isNotEmpty) {
      return Tooltip(message: tooltip!, child: bar);
    }
    return bar;
  }
}
