import 'package:flutter/material.dart';
import '../../config/app_config.dart';

class DocumentsTabSwitcher extends StatelessWidget {
  final String selectedTab;
  final ValueChanged<String> onTabChanged;

  const DocumentsTabSwitcher({
    super.key,
    required this.selectedTab,
    required this.onTabChanged,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(
        horizontal: AppConfig.spaceLarge,
        vertical: AppConfig.spaceSmall,
      ),
      padding: const EdgeInsets.all(4),
      decoration: BoxDecoration(
        color: Colors.grey.shade100,
        borderRadius: BorderRadius.circular(AppConfig.borderRadiusMedium),
      ),
      child: Row(
        children: [
          _buildTabItem('DO', 'DO Scan', Icons.description, Icons.description_outlined),
          _buildTabItem('Product', 'Product Scan', Icons.inventory_2, Icons.inventory_2_outlined),
        ],
      ),
    );
  }

  Widget _buildTabItem(String value, String label, IconData activeIcon, IconData inactiveIcon) {
    final isActive = selectedTab == value;
    // Color cue: DO mode -> doModeColor (orange), Product mode -> primaryColor (green).
    // Applies to both the icon and the label text (user feedback: "icon dan
    // juga button turn color sesuai warna statenya") - mirrors the same
    // icon+color pairing already used in camera_drawer_mode_toggle.dart and
    // document_card.dart's top-label (task 8.1, docs/api-contract-map.md G11).
    // Generic/default chrome elsewhere (search icon, print icon, tooltips)
    // deliberately stays untouched.
    final activeColor = value == 'DO' ? AppConfig.doModeColor : AppConfig.primaryColor;
    final color = isActive ? activeColor : AppConfig.textSecondary;
    return Expanded(
      child: GestureDetector(
        onTap: () => onTabChanged(value),
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 8),
          decoration: BoxDecoration(
            color: isActive ? Colors.white : Colors.transparent,
            borderRadius: BorderRadius.circular(AppConfig.borderRadiusSmall),
            boxShadow: isActive
                ? [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.05),
                      blurRadius: 4,
                      offset: const Offset(0, 2),
                    )
                  ]
                : null,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(isActive ? activeIcon : inactiveIcon, size: 16, color: color),
              const SizedBox(width: 6),
              Text(
                label,
                style: TextStyle(
                  fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
                  color: color,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}