// Bővített színválasztó — terepi használatra optimalizálva
// Drop-in csere a ColorRow helyett — azonos konstruktor szignatúra
//
// Váltás a kódban (color_row.dart-ban):
//   ColorRow(ctrl: ctrl)         ← jelenlegi
//   ExtendedColorRow(ctrl: ctrl) ← bővített
//
// Jellemzők:
//   - 24 szín rácsban (6×4) — nagy érintési felület, kesztyűvel is kezelhető
//   - Utolsó 5 használt szín külön sorban (app session alatt)
//   - Animált kijelölés

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:terepi_seged/core/style_editable.dart';

import 'style_editable.dart';

// ─── Legutóbbi színek — session szintű állapot ───────────────────────────────

class _RecentColors {
  static final _list = <Color>[].obs;
  static const _max = 5;

  static RxList<Color> get rx => _list;

  static void add(Color color) {
    _list.remove(color); // duplikátum kiszűrése
    _list.insert(0, color);
    if (_list.length > _max) _list.removeLast();
  }
}

// ─── Paletta ─────────────────────────────────────────────────────────────────

class ColorRowExtended extends StatelessWidget {
  final StyleEditable ctrl;
  final double circleSize;

  // 24 szín — 6×4 rács
  // Terepi alkalmazásra: jól elkülönülő, élénk, vakításra sem érzékeny
  static const _palette = [
    // Piros / narancs árnyalatok
    Color(0xFFE53935), Color(0xFFFF5722),
    Color(0xFFE91E8C), Color(0xFFAD1457),
    // Sárga / barna
    Color(0xFFFFB300), Color(0xFFF57F17),
    Color(0xFF8D6E63), Color(0xFF4E342E),
    // Zöld
    Color(0xFF43A047), Color(0xFF1B5E20),
    Color(0xFF8BC34A), Color(0xFF33691E),
    // Kék / türkiz
    Color(0xFF1E88E5), Color(0xFF1565C0),
    Color(0xFF00897B), Color(0xFF004D40),
    // Lila / indigó
    Color(0xFF6C63FF), Color(0xFF4527A0),
    Color(0xFF8E24AA), Color(0xFF4A148C),
    // Semleges
    Color(0xFF546E7A), Color(0xFF37474F),
    Color(0xFFBDBDBD), Color(0xFF212121),
  ];

  const ColorRowExtended({
    required this.ctrl,
    this.circleSize = 40,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('Kitöltési szín',
            style: TextStyle(fontSize: 13, color: Colors.grey.shade600)),

        // ── Legutóbbi színek ───────────────────────────────────────
        Obx(() {
          final recent = _RecentColors.rx;
          if (recent.isEmpty) return const SizedBox(height: 10);
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(height: 10),
              Text('Legutóbbi',
                  style: TextStyle(fontSize: 11, color: Colors.grey.shade500)),
              const SizedBox(height: 6),
              Obx(() => GridView.count(
                    crossAxisCount: 6,
                    crossAxisSpacing: 8,
                    mainAxisSpacing: 8,
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    children: recent
                        .map((color) => _ColorDot(
                              color: color,
                              size: circleSize,
                              selected: ctrl.activeEditColor.value == color,
                              onTap: () => _select(color),
                            ))
                        .toList(),
                  )),
              const SizedBox(height: 10),
              Text('Paletta',
                  style: TextStyle(fontSize: 11, color: Colors.grey.shade500)),
            ],
          );
        }),

        const SizedBox(height: 6),

        // ── Teljes paletta ─────────────────────────────────────────
        Obx(() => GridView.count(
              crossAxisCount: 6,
              crossAxisSpacing: 8,
              mainAxisSpacing: 8,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              children: _palette
                  .map((color) => _ColorDot(
                        color: color,
                        size: circleSize,
                        selected: ctrl.activeEditColor.value == color,
                        onTap: () => _select(color),
                      ))
                  .toList(),
            )),
      ],
    );
  }

  void _select(Color color) {
    ctrl.activeEditColor.value = color;
    _RecentColors.add(color);
  }
}

// ─── Egy szín kör ────────────────────────────────────────────────────────────

class _ColorDot extends StatelessWidget {
  final Color color;
  final double size;
  final bool selected;
  final VoidCallback onTap;

  const _ColorDot({
    required this.color,
    required this.size,
    required this.selected,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 150),
        width: size,
        height: size,
        decoration: BoxDecoration(
          color: color,
          shape: BoxShape.circle,
          border: Border.all(
            color: selected
                ? Theme.of(context).colorScheme.onSurface
                : Colors.transparent,
            width: 3,
          ),
          boxShadow: selected
              ? [
                  BoxShadow(
                    color: color.withOpacity(0.5),
                    blurRadius: 8,
                    spreadRadius: 2,
                  )
                ]
              : null,
        ),
        child: selected
            ? Icon(Icons.check, size: size * 0.45, color: _contrastColor(color))
            : null,
      ),
    );
  }

  /// Fehér vagy fekete pipa a szín kontrasztja alapján
  Color _contrastColor(Color bg) {
    final luminance = bg.computeLuminance();
    return luminance > 0.4 ? Colors.black : Colors.white;
  }
}
