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

import '../../../core/app_theme.dart';
import '../providers/monitoring_provider.dart';
import '../widgets/isometric_transform.dart';
import '../widgets/isometric_kumbung_painter.dart';

class KumbungMapPage extends ConsumerStatefulWidget {
  const KumbungMapPage({super.key});

  @override
  ConsumerState<KumbungMapPage> createState() => _KumbungMapPageState();
}

class _KumbungMapPageState extends ConsumerState<KumbungMapPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;

  // Koordinat Sensor (X, Y, Z) dalam meter, dan Radius Jangkauan (meter)
  double _sensorX = 4.0;
  double _sensorY = 3.0;
  final double _sensorZ = 1.2; // Tinggi melayang sensor di rak
  double _sensorRadius = 3.0;

  // Mode Heatmap: true = Suhu, false = Kelembapan
  bool _isSuhuMode = true;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    )..repeat();

    _loadSensorSettings();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  // Memuat setelan koordinat lokal dari SharedPreferences
  Future<void> _loadSensorSettings() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _sensorX = prefs.getDouble('sensor_x') ?? 4.0;
      _sensorY = prefs.getDouble('sensor_y') ?? 3.0;
      _sensorRadius = prefs.getDouble('sensor_radius') ?? 3.0;
    });
  }

  // Menyimpan setelan koordinat lokal ke SharedPreferences
  Future<void> _saveSensorSettings() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setDouble('sensor_x', _sensorX);
    await prefs.setDouble('sensor_y', _sensorY);
    await prefs.setDouble('sensor_radius', _sensorRadius);
  }

  // Mengubah posisi sensor saat canvas diketuk oleh pengguna
  void _handleCanvasTap(Offset localPosition, Size canvasSize, IsometricTransform transformer) {
    final worldPt = transformer.toWorldGround(localPosition);
    
    // Batasi agar koordinat berada di dalam rentang ruangan (8m x 6m)
    final double clampedX = worldPt.dx.clamp(0.0, 8.0);
    final double clampedY = worldPt.dy.clamp(0.0, 6.0);

    setState(() {
      _sensorX = clampedX;
      _sensorY = clampedY;
    });
    _saveSensorSettings();
  }

  @override
  Widget build(BuildContext context) {
    final monitoring = ref.watch(monitoringProvider);
    final hasDevice = monitoring.latest != null;

    // Nilai telemetri sensor real-time
    final double tempVal = monitoring.temperature;
    final double humidVal = monitoring.humidity;

    // Tentukan warna status untuk sensor berdasarkan nilainya
    final Color pinColor = _isSuhuMode
        ? (tempVal > 30 ? Colors.redAccent : Colors.teal)
        : (humidVal < 75 ? Colors.orangeAccent : Colors.cyan);

    return Scaffold(
      backgroundColor: AppTheme.bgPage,
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // ── Header Section ─────────────────────────────────
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Peta Kumbung',
                        style: TextStyle(
                          fontSize: 24,
                          fontWeight: FontWeight.bold,
                          color: AppTheme.textPrimary,
                        ),
                      ),
                      Text(
                        'Denah & Cakupan Jangkauan Sensor',
                        style: TextStyle(
                          fontSize: 13,
                          color: AppTheme.textSecondary,
                        ),
                      ),
                    ],
                  ),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
                    decoration: BoxDecoration(
                      color: hasDevice ? Colors.green.shade50 : Colors.grey.shade100,
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: Row(
                      children: [
                        CircleAvatar(
                          radius: 4,
                          backgroundColor: hasDevice ? Colors.green : Colors.grey,
                        ),
                        const SizedBox(width: 6),
                        Text(
                          hasDevice ? 'Sensor Aktif' : 'Sensor Offline',
                          style: TextStyle(
                            fontSize: 11,
                            fontWeight: FontWeight.bold,
                            color: hasDevice ? Colors.green.shade700 : Colors.grey.shade700,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 16),

              // ── Visualizer Canvas 3D ───────────────────────────
              Container(
                width: double.infinity,
                height: 280,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(24),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.03),
                      blurRadius: 16,
                      offset: const Offset(0, 4),
                    ),
                  ],
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(24),
                  child: Stack(
                    children: [
                      // Canvas Utama Rendering Isometrik
                      LayoutBuilder(
                        builder: (context, constraints) {
                          // Menghitung origin tengah bawah untuk visualisasi isometrik
                          final centerOrigin = Offset(
                            constraints.maxWidth / 2,
                            constraints.maxHeight / 2 + 30,
                          );
                          // Skala dinamis: 1 meter = 24 piksel
                          final transformer = IsometricTransform(
                            scale: 24.0,
                            origin: centerOrigin,
                          );

                          return GestureDetector(
                            onTapUp: (details) => _handleCanvasTap(
                              details.localPosition,
                              Size(constraints.maxWidth, constraints.maxHeight),
                              transformer,
                            ),
                            child: AnimatedBuilder(
                              animation: _animationController,
                              builder: (context, child) {
                                return CustomPaint(
                                  size: Size(constraints.maxWidth, constraints.maxHeight),
                                  painter: StaticKumbungPainter(
                                    transformer: transformer,
                                    roomWidth: 6.0,
                                    roomLength: 8.0,
                                    roomHeight: 2.5,
                                  ),
                                  foregroundPainter: PinKumbungPainter(
                                    transformer: transformer,
                                    sensorPos: Offset(_sensorX, _sensorY),
                                    sensorHeight: _sensorZ,
                                    value: _isSuhuMode ? tempVal : humidVal,
                                    unit: _isSuhuMode ? '°C' : '%',
                                    animationValue: _animationController.value,
                                    pinColor: pinColor,
                                  ),
                                  child: CustomPaint(
                                    size: Size(constraints.maxWidth, constraints.maxHeight),
                                    painter: HeatmapKumbungPainter(
                                      transformer: transformer,
                                      sensorPos: Offset(_sensorX, _sensorY),
                                      radius: _sensorRadius,
                                      value: _isSuhuMode ? tempVal : humidVal,
                                      isSuhuMode: _isSuhuMode,
                                    ),
                                  ),
                                );
                              },
                            ),
                          );
                        },
                      ),

                      // Toggle Switch Peta Suhu / Kelembapan
                      Positioned(
                        top: 12,
                        right: 12,
                        child: Container(
                          padding: const EdgeInsets.all(3),
                          decoration: BoxDecoration(
                            color: Colors.grey.shade100,
                            borderRadius: BorderRadius.circular(16),
                          ),
                          child: Row(
                            children: [
                              _buildToggleButton(
                                label: 'Suhu',
                                isActive: _isSuhuMode,
                                color: Colors.teal,
                                onTap: () => setState(() => _isSuhuMode = true),
                              ),
                              _buildToggleButton(
                                label: 'Kelembapan',
                                isActive: !_isSuhuMode,
                                color: Colors.cyan,
                                onTap: () => setState(() => _isSuhuMode = false),
                              ),
                            ],
                          ),
                        ),
                      ),

                      // Instruksi Interaksi
                      const Positioned(
                        bottom: 12,
                        left: 12,
                        child: Row(
                          children: [
                            Icon(Icons.touch_app, size: 14, color: AppTheme.textSecondary),
                            SizedBox(width: 4),
                            Text(
                              'Ketuk lantai grid untuk memindah sensor',
                              style: TextStyle(
                                fontSize: 10,
                                color: AppTheme.textSecondary,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              const SizedBox(height: 16),

              // ── Control Settings Panel ─────────────────────────
              Container(
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(20),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.02),
                      blurRadius: 10,
                      offset: const Offset(0, 2),
                    ),
                  ],
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        const Icon(Icons.settings_input_hdmi, color: AppTheme.primary, size: 18),
                        const SizedBox(width: 8),
                        Text(
                          'Konfigurasi Sensor Terpasang',
                          style: TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.bold,
                            color: Colors.grey.shade800,
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 12),
                    _buildSlider(
                      label: 'Posisi X (Panjang)',
                      value: _sensorX,
                      min: 0.5,
                      max: 7.5,
                      displayValue: '${_sensorX.toStringAsFixed(1)}m',
                      onChanged: (v) {
                        setState(() => _sensorX = v);
                        _saveSensorSettings();
                      },
                    ),
                    _buildSlider(
                      label: 'Posisi Y (Lebar)',
                      value: _sensorY,
                      min: 0.5,
                      max: 5.5,
                      displayValue: '${_sensorY.toStringAsFixed(1)}m',
                      onChanged: (v) {
                        setState(() => _sensorY = v);
                        _saveSensorSettings();
                      },
                    ),
                    _buildSlider(
                      label: 'Radius Jangkauan',
                      value: _sensorRadius,
                      min: 1.0,
                      max: 5.0,
                      displayValue: '${_sensorRadius.toStringAsFixed(1)}m',
                      onChanged: (v) {
                        setState(() => _sensorRadius = v);
                        _saveSensorSettings();
                      },
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 16),

              // ── Dashboard Referensi Budidaya ───────────────────
              _buildReferenceCard(),
            ],
          ),
        ),
      ),
    );
  }

  // Widget Button Toggle
  Widget _buildToggleButton({
    required String label,
    required bool isActive,
    required Color color,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
        decoration: BoxDecoration(
          color: isActive ? color : Colors.transparent,
          borderRadius: BorderRadius.circular(12),
        ),
        child: Text(
          label,
          style: TextStyle(
            fontSize: 11,
            fontWeight: FontWeight.bold,
            color: isActive ? Colors.white : AppTheme.textSecondary,
          ),
        ),
      ),
    );
  }

  // Widget Row Slider Pengaturan
  Widget _buildSlider({
    required String label,
    required double value,
    required double min,
    required double max,
    required String displayValue,
    required ValueChanged<double> onChanged,
  }) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8),
      child: Row(
        children: [
          Expanded(
            flex: 3,
            child: Text(
              label,
              style: const TextStyle(fontSize: 12, color: AppTheme.textSecondary),
            ),
          ),
          Expanded(
            flex: 6,
            child: SliderTheme(
              data: SliderTheme.of(context).copyWith(
                activeTrackColor: AppTheme.primary,
                inactiveTrackColor: Colors.grey.shade200,
                thumbColor: AppTheme.primary,
                trackHeight: 3,
                thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 6),
              ),
              child: Slider(
                value: value,
                min: min,
                max: max,
                onChanged: onChanged,
              ),
            ),
          ),
          Expanded(
            flex: 2,
            child: Text(
              displayValue,
              textAlign: TextAlign.right,
              style: const TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.bold,
                color: AppTheme.textPrimary,
              ),
            ),
          ),
        ],
      ),
    );
  }

  // Widget Kartu Referensi Budidaya Jamur
  Widget _buildReferenceCard() {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.02),
            blurRadius: 10,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(6),
                decoration: BoxDecoration(
                  color: AppTheme.primary.withOpacity(0.1),
                  shape: BoxShape.circle,
                ),
                child: const Icon(Icons.menu_book, color: AppTheme.primary, size: 16),
              ),
              const SizedBox(width: 10),
              const Text(
                'Panduan Referensi Budidaya',
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.bold,
                  color: AppTheme.textPrimary,
                ),
              ),
            ],
          ),
          const SizedBox(height: 12),
          const Text(
            'Untuk budidaya Jamur Tiram yang optimal, berikut adalah parameter referensi kondisi kumbung:',
            style: TextStyle(fontSize: 12, color: AppTheme.textSecondary, height: 1.4),
          ),
          const SizedBox(height: 12),
          Row(
            children: [
              Expanded(
                child: _buildRefIndicator(
                  icon: Icons.thermostat,
                  iconColor: Colors.teal,
                  label: 'Suhu Ideal',
                  value: '22°C - 28°C',
                ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: _buildRefIndicator(
                  icon: Icons.water_drop,
                  iconColor: Colors.cyan,
                  label: 'Kelembapan Ideal',
                  value: '80% - 90%',
                ),
              ),
            ],
          ),
          const SizedBox(height: 12),
          Divider(color: Colors.grey.shade100),
          const SizedBox(height: 8),
          const Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Icon(Icons.wb_sunny_outlined, size: 16, color: Colors.orange),
              SizedBox(width: 8),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Waktu Penyiraman Terbaik:',
                      style: TextStyle(
                        fontSize: 12,
                        fontWeight: FontWeight.bold,
                        color: AppTheme.textPrimary,
                      ),
                    ),
                    SizedBox(height: 4),
                    Text(
                      '• Pagi Hari (06.00 - 08.00 WIB): Mempersiapkan kelembapan sebelum suhu udara mulai meningkat.\n• Sore Hari (16.00 - 18.00 WIB): Mengembalikan kelembapan setelah penguapan tinggi di siang hari.',
                      style: TextStyle(fontSize: 11, color: AppTheme.textSecondary, height: 1.5),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildRefIndicator({
    required IconData icon,
    required Color iconColor,
    required String label,
    required String value,
  }) {
    return Container(
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: iconColor.withOpacity(0.05),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: iconColor.withOpacity(0.1)),
      ),
      child: Row(
        children: [
          Icon(icon, color: iconColor, size: 20),
          const SizedBox(width: 8),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                label,
                style: const TextStyle(fontSize: 9, color: AppTheme.textSecondary),
              ),
              const SizedBox(height: 2),
              Text(
                value,
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.bold,
                  color: iconColor.withOpacity(0.9),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}