import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../app/tema.dart';
import 'direktor_state.dart';
import 'efekt_katalogu.dart';
import 'timeline.dart';

final _sekmeProvider = StateProvider<int>((ref) => 0); // 0 efekt, 1 geçiş
final _efektKatProvider = StateProvider<String>((ref) => 'Renk');

/// CapCut tarzı ölçeklenebilir Efekt + Geçiş kütüphanesi.
/// Seçili klibe efekt/geçiş uygular.
class EfektGecisKutuphanesi extends ConsumerWidget {
  const EfektGecisKutuphanesi({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final secili = ref.watch(seciliSahneProvider);
    final sekme = ref.watch(_sekmeProvider);
    final d = ref.watch(direktorProvider);
    final m = ref.read(direktorProvider.notifier);

    final aktifEfektler = (secili != null && secili < d.sahneler.length)
        ? d.sahneler[secili].efektler
        : const <String>[];
    final aktifGecis = (secili != null && secili < d.sahneler.length)
        ? (d.sahneler[secili].gecis.isEmpty
            ? d.varsayilanGecis
            : d.sahneler[secili].gecis)
        : d.varsayilanGecis;

    return Card(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(8, 6, 8, 8),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(children: [
              const Icon(Icons.auto_fix_high, size: 15, color: FikoRenkler.neonPembe),
              const SizedBox(width: 6),
              _Sekme('Efektler', sekme == 0, () => ref.read(_sekmeProvider.notifier).state = 0),
              const SizedBox(width: 6),
              _Sekme('Geçişler', sekme == 1, () => ref.read(_sekmeProvider.notifier).state = 1),
              const Spacer(),
              if (secili == null)
                Text('Bir klip seç → efekt/geçiş uygula',
                    style: TextStyle(fontSize: 10,
                        color: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.45)))
              else
                Text('Klip ${secili + 1}',
                    style: const TextStyle(fontSize: 10.5, color: FikoRenkler.neonCyan)),
              if (secili != null && aktifEfektler.isNotEmpty) ...[
                const SizedBox(width: 8),
                InkWell(
                  onTap: () => m.sahneEfektTemizle(secili),
                  child: const Text('temizle',
                      style: TextStyle(fontSize: 10, color: FikoRenkler.neonPembe)),
                ),
              ],
            ]),
            const SizedBox(height: 6),
            if (sekme == 0)
              _EfektGorunum(secili: secili, aktif: aktifEfektler)
            else
              _GecisGorunum(secili: secili, aktif: aktifGecis),
          ],
        ),
      ),
    );
  }
}

class _EfektGorunum extends ConsumerWidget {
  const _EfektGorunum({required this.secili, required this.aktif});
  final int? secili;
  final List<String> aktif;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final kat = ref.watch(_efektKatProvider);
    final m = ref.read(direktorProvider.notifier);
    final efektler = VideoEfekt.hepsi.where((e) => e.kategori == kat).toList();
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      // kategori sekmeleri
      SizedBox(
        height: 26,
        child: ListView(scrollDirection: Axis.horizontal, children: [
          for (final k in VideoEfekt.kategoriler) ...[
            _MiniSekme(k, kat == k, () => ref.read(_efektKatProvider.notifier).state = k),
            const SizedBox(width: 5),
          ],
        ]),
      ),
      const SizedBox(height: 6),
      // efekt çipleri (ölçeklenebilir grid)
      SizedBox(
        height: 64,
        child: GridView.builder(
          scrollDirection: Axis.horizontal,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, mainAxisExtent: 132, crossAxisSpacing: 6, mainAxisSpacing: 6),
          itemCount: efektler.length,
          itemBuilder: (_, i) {
            final e = efektler[i];
            final on = aktif.contains(e.id);
            final cip = Container(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              decoration: BoxDecoration(
                color: on ? FikoRenkler.neonPembe.withValues(alpha: 0.22)
                    : Theme.of(context).colorScheme.surface,
                borderRadius: BorderRadius.circular(7),
                border: Border.all(color: on ? FikoRenkler.neonPembe
                    : Theme.of(context).dividerColor),
              ),
              alignment: Alignment.centerLeft,
              child: Text(e.etiket, maxLines: 1, overflow: TextOverflow.ellipsis,
                  style: TextStyle(fontSize: 11,
                      fontWeight: on ? FontWeight.w700 : FontWeight.w500,
                      color: on ? FikoRenkler.neonPembe
                          : Theme.of(context).colorScheme.onSurface)),
            );
            // Sürükle (timeline klibine bırak) + tıkla (seçili klibe uygula)
            return Draggable<Object>(
              data: EfektTasima(e.id),
              feedback: Material(
                color: Colors.transparent,
                child: Container(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 10, vertical: 5),
                  decoration: BoxDecoration(
                    color: FikoRenkler.neonPembe.withValues(alpha: 0.9),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Text(e.etiket,
                      style: const TextStyle(
                          fontSize: 12, color: Colors.white,
                          fontWeight: FontWeight.w700)),
                ),
              ),
              childWhenDragging: Opacity(opacity: 0.35, child: cip),
              child: GestureDetector(
                onTap: secili == null
                    ? null
                    : () => m.sahneEfektDegistir(secili!, e.id),
                child: cip,
              ),
            );
          },
        ),
      ),
    ]);
  }
}

class _GecisGorunum extends ConsumerWidget {
  const _GecisGorunum({required this.secili, required this.aktif});
  final int? secili;
  final String aktif;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final m = ref.read(direktorProvider.notifier);
    return SizedBox(
      height: 96,
      child: GridView.builder(
        scrollDirection: Axis.horizontal,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, mainAxisExtent: 110, crossAxisSpacing: 6, mainAxisSpacing: 6),
        itemCount: direktorGecisleri.length,
        itemBuilder: (_, i) {
          final (id, et) = direktorGecisleri[i];
          final on = aktif == id;
          final cip = Container(
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: on ? FikoRenkler.neonMor.withValues(alpha: 0.22)
                  : Theme.of(context).colorScheme.surface,
              borderRadius: BorderRadius.circular(7),
              border: Border.all(color: on ? FikoRenkler.neonMor
                  : Theme.of(context).dividerColor),
            ),
            child: Text(et, maxLines: 1, overflow: TextOverflow.ellipsis,
                style: TextStyle(fontSize: 11,
                    fontWeight: on ? FontWeight.w700 : FontWeight.w500,
                    color: on ? FikoRenkler.neonMor
                        : Theme.of(context).colorScheme.onSurface)),
          );
          return Draggable<Object>(
            data: GecisTasima(id),
            feedback: Material(
              color: Colors.transparent,
              child: Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                decoration: BoxDecoration(
                  color: FikoRenkler.neonMor.withValues(alpha: 0.9),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Text(et,
                    style: const TextStyle(
                        fontSize: 12, color: Colors.white,
                        fontWeight: FontWeight.w700)),
              ),
            ),
            childWhenDragging: Opacity(opacity: 0.35, child: cip),
            child: GestureDetector(
              onTap: secili == null
                  ? () => m.gecisAyarla(id)
                  : () => m.sahneGecisAyarla(secili!, id),
              child: cip,
            ),
          );
        },
      ),
    );
  }
}

class _Sekme extends StatelessWidget {
  const _Sekme(this.etiket, this.secili, this.onTap);
  final String etiket;
  final bool secili;
  final VoidCallback onTap;
  @override
  Widget build(BuildContext context) => GestureDetector(
        onTap: onTap,
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
          decoration: BoxDecoration(
            color: secili ? FikoRenkler.neonPembe.withValues(alpha: 0.2) : Colors.transparent,
            borderRadius: BorderRadius.circular(7),
            border: Border.all(color: secili ? FikoRenkler.neonPembe
                : Theme.of(context).dividerColor),
          ),
          child: Text(etiket, style: TextStyle(fontSize: 11.5,
              fontWeight: secili ? FontWeight.w700 : FontWeight.w500,
              color: secili ? FikoRenkler.neonPembe : Theme.of(context).colorScheme.onSurface)),
        ),
      );
}

class _MiniSekme extends StatelessWidget {
  const _MiniSekme(this.etiket, this.secili, this.onTap);
  final String etiket;
  final bool secili;
  final VoidCallback onTap;
  @override
  Widget build(BuildContext context) => GestureDetector(
        onTap: onTap,
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 3),
          decoration: BoxDecoration(
            color: secili ? FikoRenkler.neonAmber.withValues(alpha: 0.2) : Colors.transparent,
            borderRadius: BorderRadius.circular(6),
            border: Border.all(color: secili ? FikoRenkler.neonAmber
                : Theme.of(context).dividerColor),
          ),
          child: Text(etiket, style: TextStyle(fontSize: 10.5,
              color: secili ? FikoRenkler.neonAmber : Theme.of(context).colorScheme.onSurface)),
        ),
      );
}