import 'package:didvan/models/overview_data.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:didvan/views/widgets/skeleton_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:persian_number_utility/persian_number_utility.dart';

class VideocastGridCard extends StatelessWidget {
  final OverviewData videocast;
  final VoidCallback onTap;

  const VideocastGridCard({
    super.key,
    required this.videocast,
    required this.onTap,
  });

  String _formatDuration(int? duration) {
    if (duration == null) return '';
    final minutes = duration ~/ 60;
    final seconds = duration % 60;
    return '”${seconds.toString().padLeft(2, '0')}:’${minutes.toString().padLeft(2, '0')}';
  }

  String _formatDate(String dateStr) {
    try {
      final date = DateTime.parse(dateStr);
      return date.toPersianDateStr();
    } catch (e) {
      return dateStr;
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        decoration: BoxDecoration(
          color: const Color.fromRGBO(235, 235, 235, 1),
          borderRadius: BorderRadius.circular(20),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.05),
              blurRadius: 4,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Video cover
            Padding(
              padding: const EdgeInsets.all(6.0),
              child: AspectRatio(
                aspectRatio: 17 / 14,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: SkeletonImage(
                    imageUrl: videocast.image,
                    width: double.infinity,
                    height: double.infinity,
                    borderRadius: BorderRadius.circular(20),
                  ),
                ),
              ),
            ),

            Expanded(
              child: Padding(
                padding: const EdgeInsets.fromLTRB(12, 4, 12, 8),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    DidvanText(
                      videocast.title,
                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                            fontWeight: FontWeight.w600,
                            color: Colors.black87,
                          ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                    const SizedBox(height: 4),
                    Row(
                      children: [
                        SvgPicture.asset('lib/assets/icons/calendar.svg'),
                        const SizedBox(width: 4),
                        DidvanText(
                          _formatDate(videocast.createdAt),
                          style: Theme.of(context)
                              .textTheme
                              .bodySmall
                              ?.copyWith(
                                color: const Color.fromARGB(255, 102, 102, 102),
                              ),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ],
                    ),
                    const SizedBox(height: 4),
                    Row(
                      children: [
                        SvgPicture.asset(
                          'lib/assets/icons/clock.svg',
                          color: const Color.fromARGB(255, 102, 102, 102),
                        ),
                        const SizedBox(width: 4),
                        DidvanText(
                          _formatDuration(videocast.duration).toPersianDigit(),
                          style: Theme.of(context)
                              .textTheme
                              .bodySmall
                              ?.copyWith(
                                color: const Color.fromARGB(255, 102, 102, 102),
                              ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
