Kifi/kifi-app/lib/features/barcode_designer/presentation/widgets/designer_toolbox.dart

import 'package:flutter/material.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../domain/label_document.dart';

class ToolboxItemData {
  final ElementType type;
  final String label;
  final IconData icon;
  final Color color;
  final String description;

  const ToolboxItemData({
    required this.type,
    required this.label,
    required this.icon,
    required this.color,
    required this.description,
  });
}

class DesignerToolbox extends StatelessWidget {
  final Function(ElementType type) onAddElement;

  const DesignerToolbox({
    super.key,
    required this.onAddElement,
  });

  static const List<ToolboxItemData> items = [
    ToolboxItemData(
      type: ElementType.text,
      label: 'Text',
      icon: LucideIcons.type,
      color: Colors.blue,
      description: 'Static label text (default: kifi)',
    ),
    ToolboxItemData(
      type: ElementType.dynamicText,
      label: 'Dynamic Field',
      icon: LucideIcons.variable,
      color: Colors.purple,
      description: 'Bound product placeholder',
    ),
    ToolboxItemData(
      type: ElementType.barcode,
      label: 'Barcode',
      icon: LucideIcons.barcode,
      color: Colors.indigo,
      description: 'Code 128, EAN-13, SKU barcode',
    ),
    ToolboxItemData(
      type: ElementType.qrCode,
      label: 'QR Code',
      icon: LucideIcons.qrCode,
      color: Colors.teal,
      description: '2D matrix barcode or URL',
    ),
    ToolboxItemData(
      type: ElementType.rectangle,
      label: 'Rectangle',
      icon: LucideIcons.square,
      color: Colors.amber,
      description: 'Bordered or filled box',
    ),
    ToolboxItemData(
      type: ElementType.line,
      label: 'Line Divider',
      icon: LucideIcons.minus,
      color: Colors.blueGrey,
      description: 'Horizontal or vertical line',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;

    return ListView(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 6),
          child: Text(
            'TOOLBOX',
            style: TextStyle(
              fontSize: 11,
              fontWeight: FontWeight.bold,
              letterSpacing: 1.1,
              color: Colors.grey.shade500,
            ),
          ),
        ),
        ...items.map((item) {
          return Padding(
            padding: const EdgeInsets.only(bottom: 8.0),
            child: Draggable<ElementType>(
              data: item.type,
              feedback: Material(
                elevation: 6,
                borderRadius: BorderRadius.circular(12),
                child: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
                  decoration: BoxDecoration(
                    color: item.color,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(item.icon, color: Colors.white, size: 18),
                      const SizedBox(width: 8),
                      Text(
                        item.label,
                        style: const TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 13,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              childWhenDragging: Opacity(
                opacity: 0.4,
                child: _buildItemCard(context, item, isDark),
              ),
              child: InkWell(
                onTap: () => onAddElement(item.type),
                borderRadius: BorderRadius.circular(12),
                child: _buildItemCard(context, item, isDark),
              ),
            ),
          );
        }),
      ],
    );
  }

  Widget _buildItemCard(BuildContext context, ToolboxItemData item, bool isDark) {
    return Container(
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: isDark ? const Color(0xFF1E293B) : Colors.white,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(
          color: isDark ? Colors.white10 : Colors.grey.shade200,
        ),
      ),
      child: Row(
        children: [
          Container(
            padding: const EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: item.color.withValues(alpha: 0.12),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Icon(item.icon, color: item.color, size: 18),
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  item.label,
                  style: const TextStyle(
                    fontWeight: FontWeight.w600,
                    fontSize: 13,
                  ),
                ),
                Text(
                  item.description,
                  style: TextStyle(
                    color: Colors.grey.shade500,
                    fontSize: 10.5,
                  ),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              ],
            ),
          ),
          Icon(LucideIcons.gripVertical, size: 14, color: Colors.grey.shade400),
        ],
      ),
    );
  }
}