// SPDX-FileCopyrightText: © 2025 Nøkken.io <nokken.io@proton.me>
// SPDX-License-Identifier: AGPL-3.0
//
//  injection_site_view_screen.dart
//  Screen to view the current injection site on body diagram
//
import 'package:flutter/material.dart';
import 'package:nokken/src/features/medication_tracker/models/medication.dart';
import 'package:nokken/src/core/ui/theme/app_theme.dart';
import 'package:nokken/src/core/ui/theme/app_colors.dart';
import 'package:nokken/src/core/ui/theme/app_text_styles.dart';
import 'package:nokken/src/core/ui/widgets/shared_widgets.dart';

class InjectionSiteViewer extends StatelessWidget {
  final InjectionSite currentSite;

  const InjectionSiteViewer({
    super.key,
    required this.currentSite,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Injection Site View'),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Title and site info
              Card(
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Row(
                    children: [
                      // Site number in circle
                      Container(
                        width: 48,
                        height: 48,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: AppColors.tertiary,
                        ),
                        child: Center(
                          child: Text(
                            '${currentSite.siteNumber}',
                            style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                              color: AppColors.onTertiary,
                            ),
                          ),
                        ),
                      ),
                      SharedWidgets.horizontalSpace(AppTheme.doubleSpacing),
                      // Body area text
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'Next Injection Site',
                              style: AppTextStyles.titleMedium,
                            ),
                            SharedWidgets.verticalSpace(),
                            Text(
                              _getSiteDescription(),
                              style: AppTextStyles.bodyMedium,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),

              SharedWidgets.verticalSpace(AppTheme.doubleSpacing),

              // Body diagram
              Expanded(
                child: Card(
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('Site Location', style: AppTextStyles.titleMedium),
                        SharedWidgets.verticalSpace(AppTheme.doubleSpacing),
                        Expanded(
                          child: Center(
                            child: currentSite.bodyArea ==
                                    InjectionBodyArea.abdomen
                                ? _buildAbdomenDiagram()
                                : _buildThighDiagram(),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  String _getSiteDescription() {
    if (currentSite.bodyArea == InjectionBodyArea.abdomen) {
      final siteNum = currentSite.siteNumber;

      // Upper Left Quadrant (Sites 1-4)
      if (siteNum == 1) {
        return 'Upper Left Outer - Site ${currentSite.siteNumber}';
      }
      if (siteNum == 2) {
        return 'Upper Left Inner - Site ${currentSite.siteNumber}';
      }
      if (siteNum == 3) {
        return 'Upper-Mid Left Outer - Site ${currentSite.siteNumber}';
      }
      if (siteNum == 4) {
        return 'Upper-Mid Left Inner - Site ${currentSite.siteNumber}';
      }

      // Upper Right Quadrant (Sites 5-8)
      if (siteNum == 5) {
        return 'Upper Right Inner - Site ${currentSite.siteNumber}';
      }
      if (siteNum == 6) {
        return 'Upper Right Outer - Site ${currentSite.siteNumber}';
      }
      if (siteNum == 7) {
        return 'Upper-Mid Right Inner - Site ${currentSite.siteNumber}';
      }
      if (siteNum == 8) {
        return 'Upper-Mid Right Outer - Site ${currentSite.siteNumber}';
      }

      // Lower Left Quadrant (Sites 9-12)
      if (siteNum == 9) {
        return 'Lower-Mid Left Outer - Site ${currentSite.siteNumber}';
      }
      if (siteNum == 10) {
        return 'Lower-Mid Left Inner - Site ${currentSite.siteNumber}';
      }
      if (siteNum == 11) {
        return 'Lower Left Outer - Site ${currentSite.siteNumber}';
      }
      if (siteNum == 12) {
        return 'Lower Left Inner - Site ${currentSite.siteNumber}';
      }

      // Lower Right Quadrant (Sites 13-16)
      if (siteNum == 13) {
        return 'Lower-Mid Right Inner - Site ${currentSite.siteNumber}';
      }
      if (siteNum == 14) {
        return 'Lower-Mid Right Outer - Site ${currentSite.siteNumber}';
      }
      if (siteNum == 15) {
        return 'Lower Right Inner - Site ${currentSite.siteNumber}';
      }
      if (siteNum == 16) {
        return 'Lower Right Outer - Site ${currentSite.siteNumber}';
      }

      return 'Abdomen - Site ${currentSite.siteNumber}';
    } else {
      final siteNum = currentSite.siteNumber;
      if (siteNum <= 8) {
        final position = siteNum <= 2
            ? 'Upper'
            : siteNum <= 4
                ? 'Middle Upper'
                : siteNum <= 6
                    ? 'Middle Lower'
                    : 'Lower';
        final side = siteNum % 2 == 1 ? 'Outer' : 'Inner';
        return 'Left Thigh - $position $side - Site ${currentSite.siteNumber}';
      } else {
        final rightSiteNum = siteNum - 8;
        final position = rightSiteNum <= 2
            ? 'Upper'
            : rightSiteNum <= 4
                ? 'Middle Upper'
                : rightSiteNum <= 6
                    ? 'Middle Lower'
                    : 'Lower';
        final side = rightSiteNum % 2 == 1 ? 'Inner' : 'Outer';
        return 'Right Thigh - $position $side - Site ${currentSite.siteNumber}';
      }
    }
  }

  Widget _buildAbdomenDiagram() {
    return SizedBox(
      width: 300,
      height: 300,
      child: Stack(
        children: [
          // Background circle container
          Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
              border: Border.all(color: AppColors.outline),
              borderRadius: BorderRadius.circular(150),
              color: AppColors.surface.withAlpha(80),
            ),
          ),

          // Navel indicator
          Center(
            child: Container(
              width: 10,
              height: 10,
              decoration: BoxDecoration(
                color: AppColors.outline,
                borderRadius: BorderRadius.circular(5),
              ),
            ),
          ),

          // Abdomen separator lines
          CustomPaint(
            size: const Size(300, 300),
            painter: AbdomenLinePainter(),
          ),

          // Left abdomen label
          Positioned(
            top: 140,
            left: 20,
            child: RotatedBox(
              quarterTurns: 3,
              child: Text(
                'Left',
                style: TextStyle(
                  fontSize: 12,
                  color: AppColors.onSurfaceVariant,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),

          // Right abdomen label
          Positioned(
            top: 140,
            right: 20,
            child: RotatedBox(
              quarterTurns: 1,
              child: Text(
                'Right',
                style: TextStyle(
                  fontSize: 12,
                  color: AppColors.onSurfaceVariant,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),

          // Upper abdomen label
          Positioned(
            top: 15,
            left: 130,
            child: Text(
              'Upper',
              style: TextStyle(
                fontSize: 12,
                color: AppColors.onSurfaceVariant,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),

          // Lower abdomen label
          Positioned(
            bottom: 15,
            left: 130,
            child: Text(
              'Lower',
              style: TextStyle(
                fontSize: 12,
                color: AppColors.onSurfaceVariant,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),

          // 16 Abdomen Sites - 4 in each quadrant - Only show the current site
          // Upper Left Quadrant (Sites 1-4)
          if (currentSite.siteNumber == 1)
            _buildHighlightedSitePosition(top: 60, left: 60, siteNumber: 1),
          if (currentSite.siteNumber == 2)
            _buildHighlightedSitePosition(top: 60, left: 110, siteNumber: 2),
          if (currentSite.siteNumber == 3)
            _buildHighlightedSitePosition(top: 95, left: 60, siteNumber: 3),
          if (currentSite.siteNumber == 4)
            _buildHighlightedSitePosition(top: 95, left: 110, siteNumber: 4),

          // Upper Right Quadrant (Sites 5-8)
          if (currentSite.siteNumber == 5)
            _buildHighlightedSitePosition(top: 60, right: 110, siteNumber: 5),
          if (currentSite.siteNumber == 6)
            _buildHighlightedSitePosition(top: 60, right: 60, siteNumber: 6),
          if (currentSite.siteNumber == 7)
            _buildHighlightedSitePosition(top: 95, right: 110, siteNumber: 7),
          if (currentSite.siteNumber == 8)
            _buildHighlightedSitePosition(top: 95, right: 60, siteNumber: 8),

          // Lower Left Quadrant (Sites 9-12)
          if (currentSite.siteNumber == 9)
            _buildHighlightedSitePosition(bottom: 95, left: 60, siteNumber: 9),
          if (currentSite.siteNumber == 10)
            _buildHighlightedSitePosition(
                bottom: 95, left: 110, siteNumber: 10),
          if (currentSite.siteNumber == 11)
            _buildHighlightedSitePosition(bottom: 60, left: 60, siteNumber: 11),
          if (currentSite.siteNumber == 12)
            _buildHighlightedSitePosition(
                bottom: 60, left: 110, siteNumber: 12),

          // Lower Right Quadrant (Sites 13-16)
          if (currentSite.siteNumber == 13)
            _buildHighlightedSitePosition(
                bottom: 95, right: 110, siteNumber: 13),
          if (currentSite.siteNumber == 14)
            _buildHighlightedSitePosition(
                bottom: 95, right: 60, siteNumber: 14),
          if (currentSite.siteNumber == 15)
            _buildHighlightedSitePosition(
                bottom: 60, right: 110, siteNumber: 15),
          if (currentSite.siteNumber == 16)
            _buildHighlightedSitePosition(
                bottom: 60, right: 60, siteNumber: 16),
        ],
      ),
    );
  }

  Widget _buildThighDiagram() {
    if (currentSite.siteNumber <= 8) {
      // Left thigh sites
      return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Stack(
            children: [
              Container(
                width: 130,
                height: 320,
                decoration: BoxDecoration(
                  border: Border.all(color: AppColors.outline),
                  borderRadius: BorderRadius.circular(30),
                  color: AppColors.surface.withAlpha(80),
                ),
                child: Stack(
                  children: [
                    // Inner/Outer separator line
                    Positioned(
                      top: 0,
                      bottom: 0,
                      right: 65,
                      child: Container(
                        width: 1,
                        color: AppColors.outline.withAlpha(128),
                      ),
                    ),

                    // Left thigh label
                    Positioned(
                      top: 15,
                      left: 0,
                      right: 0,
                      child: Center(
                        child: Text(
                          'Left Thigh',
                          style: TextStyle(
                            fontSize: 14,
                            color: AppColors.onSurfaceVariant,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),

                    // Thigh details
                    CustomPaint(
                      size: const Size(130, 320),
                      painter: ThighDetailPainter(isLeft: true),
                    ),

                    // Outer label
                    Positioned(
                      top: 150,
                      left: 15,
                      child: RotatedBox(
                        quarterTurns: 3,
                        child: Text(
                          'Outer',
                          style: TextStyle(
                            fontSize: 12,
                            color: AppColors.onSurfaceVariant,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),

                    // Inner label
                    Positioned(
                      top: 150,
                      right: 15,
                      child: RotatedBox(
                        quarterTurns: 1,
                        child: Text(
                          'Inner',
                          style: TextStyle(
                            fontSize: 12,
                            color: AppColors.onSurfaceVariant,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),

              // Site 1 - Upper outer left thigh
              if (currentSite.siteNumber == 1)
                Positioned(
                  top: 50,
                  left: 15,
                  child: _buildHighlightedSite(1),
                ),

              // Site 2 - Upper inner left thigh
              if (currentSite.siteNumber == 2)
                Positioned(
                  top: 50,
                  right: 15,
                  child: _buildHighlightedSite(2),
                ),

              // Site 3 - Middle upper outer left thigh
              if (currentSite.siteNumber == 3)
                Positioned(
                  top: 110,
                  left: 15,
                  child: _buildHighlightedSite(3),
                ),

              // Site 4 - Middle upper inner left thigh
              if (currentSite.siteNumber == 4)
                Positioned(
                  top: 110,
                  right: 15,
                  child: _buildHighlightedSite(4),
                ),

              // Site 5 - Middle lower outer left thigh
              if (currentSite.siteNumber == 5)
                Positioned(
                  top: 170,
                  left: 15,
                  child: _buildHighlightedSite(5),
                ),

              // Site 6 - Middle lower inner left thigh
              if (currentSite.siteNumber == 6)
                Positioned(
                  top: 170,
                  right: 15,
                  child: _buildHighlightedSite(6),
                ),

              // Site 7 - Lower outer left thigh
              if (currentSite.siteNumber == 7)
                Positioned(
                  top: 230,
                  left: 15,
                  child: _buildHighlightedSite(7),
                ),

              // Site 8 - Lower inner left thigh
              if (currentSite.siteNumber == 8)
                Positioned(
                  top: 230,
                  right: 15,
                  child: _buildHighlightedSite(8),
                ),
            ],
          ),
        ],
      );
    } else {
      // Right thigh sites
      return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Stack(
            children: [
              Container(
                width: 130,
                height: 320,
                decoration: BoxDecoration(
                  border: Border.all(color: AppColors.outline),
                  borderRadius: BorderRadius.circular(30),
                  color: AppColors.surface.withAlpha(80),
                ),
                child: Stack(
                  children: [
                    // Inner/Outer separator line
                    Positioned(
                      top: 0,
                      bottom: 0,
                      left: 65,
                      child: Container(
                        width: 1,
                        color: AppColors.outline.withAlpha(128),
                      ),
                    ),

                    // Right thigh label
                    Positioned(
                      top: 15,
                      left: 0,
                      right: 0,
                      child: Center(
                        child: Text(
                          'Right Thigh',
                          style: TextStyle(
                            fontSize: 14,
                            color: AppColors.onSurfaceVariant,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),

                    // Thigh details
                    CustomPaint(
                      size: const Size(130, 320),
                      painter: ThighDetailPainter(isLeft: false),
                    ),

                    // Inner label
                    Positioned(
                      top: 150,
                      left: 15,
                      child: RotatedBox(
                        quarterTurns: 3,
                        child: Text(
                          'Inner',
                          style: TextStyle(
                            fontSize: 12,
                            color: AppColors.onSurfaceVariant,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),

                    // Outer label
                    Positioned(
                      top: 150,
                      right: 15,
                      child: RotatedBox(
                        quarterTurns: 1,
                        child: Text(
                          'Outer',
                          style: TextStyle(
                            fontSize: 12,
                            color: AppColors.onSurfaceVariant,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),

              // Site 9 - Upper inner right thigh
              if (currentSite.siteNumber == 9)
                Positioned(
                  top: 50,
                  left: 15,
                  child: _buildHighlightedSite(9),
                ),

              // Site 10 - Upper outer right thigh
              if (currentSite.siteNumber == 10)
                Positioned(
                  top: 50,
                  right: 15,
                  child: _buildHighlightedSite(10),
                ),

              // Site 11 - Middle upper inner right thigh
              if (currentSite.siteNumber == 11)
                Positioned(
                  top: 110,
                  left: 15,
                  child: _buildHighlightedSite(11),
                ),

              // Site 12 - Middle upper outer right thigh
              if (currentSite.siteNumber == 12)
                Positioned(
                  top: 110,
                  right: 15,
                  child: _buildHighlightedSite(12),
                ),

              // Site 13 - Middle lower inner right thigh
              if (currentSite.siteNumber == 13)
                Positioned(
                  top: 170,
                  left: 15,
                  child: _buildHighlightedSite(13),
                ),

              // Site 14 - Middle lower outer right thigh
              if (currentSite.siteNumber == 14)
                Positioned(
                  top: 170,
                  right: 15,
                  child: _buildHighlightedSite(14),
                ),

              // Site 15 - Lower inner right thigh
              if (currentSite.siteNumber == 15)
                Positioned(
                  top: 230,
                  left: 15,
                  child: _buildHighlightedSite(15),
                ),

              // Site 16 - Lower outer right thigh
              if (currentSite.siteNumber == 16)
                Positioned(
                  top: 230,
                  right: 15,
                  child: _buildHighlightedSite(16),
                ),
            ],
          ),
        ],
      );
    }
  }

  Widget _buildHighlightedSitePosition({
    double? top,
    double? bottom,
    double? left,
    double? right,
    required int siteNumber,
  }) {
    return Positioned(
      top: top,
      bottom: bottom,
      left: left,
      right: right,
      child: _buildHighlightedSite(siteNumber),
    );
  }

  Widget _buildHighlightedSite(int siteNumber) {
    return Container(
      width: 40,
      height: 40,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: AppColors.tertiary,
        border: Border.all(
          color: AppColors.tertiary,
          width: 3,
        ),
        boxShadow: [
          BoxShadow(
            color: AppColors.tertiary.withAlpha(160),
            blurRadius: 12,
            spreadRadius: 5,
          ),
        ],
      ),
      child: Center(
        child: Text(
          '$siteNumber',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: AppColors.onTertiary,
          ),
        ),
      ),
    );
  }
}

// Custom painter for abdomen guidelines
class AbdomenLinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = AppTheme.grey.withAlpha(76)
      ..strokeWidth = 1
      ..style = PaintingStyle.stroke;

    // Horizontal dividing line
    canvas.drawLine(
      Offset(0, size.height / 2),
      Offset(size.width, size.height / 2),
      paint,
    );

    // Vertical dividing line
    canvas.drawLine(
      Offset(size.width / 2, 0),
      Offset(size.width / 2, size.height),
      paint,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

// Custom painter for thigh details
class ThighDetailPainter extends CustomPainter {
  final bool isLeft;

  ThighDetailPainter({required this.isLeft});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = AppTheme.grey.withAlpha(50)
      ..strokeWidth = 1.5
      ..style = PaintingStyle.stroke;

    // Draw muscle outline
    final path = Path();

    if (isLeft) {
      // Left thigh - quadriceps outline
      path.moveTo(size.width * 0.35, size.height * 0.12);
      path.quadraticBezierTo(size.width * 0.2, size.height * 0.2,
          size.width * 0.15, size.height * 0.4);
      path.quadraticBezierTo(size.width * 0.1, size.height * 0.6,
          size.width * 0.25, size.height * 0.85);

      // Muscle separation line
      final muscleLine = Path();
      muscleLine.moveTo(size.width * 0.25, size.height * 0.2);
      muscleLine.quadraticBezierTo(size.width * 0.15, size.height * 0.5,
          size.width * 0.3, size.height * 0.75);

      canvas.drawPath(muscleLine, paint..strokeWidth = 0.5);
    } else {
      // Right thigh - quadriceps outline
      path.moveTo(size.width * 0.65, size.height * 0.12);
      path.quadraticBezierTo(size.width * 0.8, size.height * 0.2,
          size.width * 0.85, size.height * 0.4);
      path.quadraticBezierTo(size.width * 0.9, size.height * 0.6,
          size.width * 0.75, size.height * 0.85);

      // Muscle separation line
      final muscleLine = Path();
      muscleLine.moveTo(size.width * 0.75, size.height * 0.2);
      muscleLine.quadraticBezierTo(size.width * 0.85, size.height * 0.5,
          size.width * 0.7, size.height * 0.75);

      canvas.drawPath(muscleLine, paint..strokeWidth = 0.5);
    }

    canvas.drawPath(path, paint);

    // Draw knee area
    final kneePaint = Paint()
      ..color = AppTheme.grey.withAlpha(38)
      ..strokeWidth = 1
      ..style = PaintingStyle.stroke;

    canvas.drawCircle(
        Offset(size.width * (isLeft ? 0.3 : 0.7), size.height * 0.9),
        size.width * 0.15,
        kneePaint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
