// lib/features/absensi/widgets/absensi_timeline_item.dart

import 'package:flutter/material.dart';
import '../models/absensi_kegiatan_model.dart';

class AbsensiTimelineItem extends StatelessWidget {
  final AbsensiKegiatan absensi;
  final bool isLast;

  const AbsensiTimelineItem({
    super.key,
    required this.absensi,
    this.isLast = false,
  });

  @override
  Widget build(BuildContext context) {
    return IntrinsicHeight(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Timeline Indicator
          Column(
            children: [
              Container(
                width: 9,
                height: 9,
                decoration: BoxDecoration(
                  color: _getStatusColor(absensi.status),
                  shape: BoxShape.circle,
                  border: Border.all(
                    color: Colors.white,
                    width: 2,
                  ),
                  boxShadow: [
                    BoxShadow(
                      color: _getStatusColor(absensi.status).withOpacity(0.3),
                      blurRadius: 4,
                      spreadRadius: 1,
                    ),
                  ],
                ),
              ),
              if (!isLast)
                Expanded(
                  child: Container(
                    width: 2,
                    color: Colors.grey[300],
                  ),
                ),
            ],
          ),
          const SizedBox(width: 9),

          // Card Content
          Expanded(
            child: Padding(
              padding: EdgeInsets.only(bottom: isLast ? 0 : 12),
              child: Card(
                elevation: 1,
                margin: EdgeInsets.zero,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(9),
                  side: BorderSide(
                    color: Color(
                      int.parse(
                        absensi.kategori.warna.replaceFirst('#', '0xFF'),
                      ),
                    ).withOpacity(0.3),
                    width: 2,
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(11),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // Header: Nama Kegiatan + Status Badge
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          // Icon Kategori
                          Container(
                            width: 31,
                            height: 31,
                            decoration: BoxDecoration(
                              color: Color(
                                int.parse(
                                  absensi.kategori.warna.replaceFirst(
                                    '#',
                                    '0xFF',
                                  ),
                                ),
                              ).withOpacity(0.15),
                              borderRadius: BorderRadius.circular(7),
                            ),
                            child: Icon(
                              _getIconFromString(absensi.kategori.icon),
                              color: Color(
                                int.parse(
                                  absensi.kategori.warna.replaceFirst(
                                    '#',
                                    '0xFF',
                                  ),
                                ),
                              ),
                              size: 15,
                            ),
                          ),
                          const SizedBox(width: 9),

                          // Nama Kegiatan
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  absensi.namaKegiatan,
                                  style: const TextStyle(
                                    fontSize: 11,
                                    fontWeight: FontWeight.bold,
                                  ),
                                  maxLines: 2,
                                  overflow: TextOverflow.ellipsis,
                                ),
                                const SizedBox(height: 2),
                                Text(
                                  absensi.kategori.nama,
                                  style: TextStyle(
                                    fontSize: 9,
                                    color: Colors.grey[600],
                                  ),
                                ),
                              ],
                            ),
                          ),

                          // Status Badge
                          Container(
                            padding: const EdgeInsets.symmetric(
                              horizontal: 8,
                              vertical: 2,
                            ),
                            decoration: BoxDecoration(
                              color: _getStatusColor(absensi.status)
                                  .withOpacity(0.15),
                              borderRadius: BorderRadius.circular(9),
                            ),
                            child: Text(
                              _getStatusEmoji(absensi.status) +
                                  ' ' +
                                  absensi.status,
                              style: TextStyle(
                                fontSize: 8,
                                fontWeight: FontWeight.w600,
                                color: _getStatusColor(absensi.status),
                              ),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 9),

                      // Info Row
                      Row(
                        children: [
                          // Waktu Kegiatan
                          Icon(
                            Icons.access_time,
                            size: 11,
                            color: Colors.grey[600],
                          ),
                          const SizedBox(width: 2),
                          Text(
                            '${absensi.waktuMulai} - ${absensi.waktuSelesai}',
                            style: TextStyle(
                              fontSize: 9,
                              color: Colors.grey[700],
                            ),
                          ),
                          if (absensi.waktuAbsen != null) ...[
                            const SizedBox(width: 9),
                            Icon(
                              Icons.check_circle_outline,
                              size: 11,
                              color: Colors.grey[600],
                            ),
                            const SizedBox(width: 2),
                            Text(
                              absensi.waktuAbsen!,
                              style: TextStyle(
                                fontSize: 9,
                                color: Colors.grey[700],
                              ),
                            ),
                          ],
                        ],
                      ),

                      // Metode Absen
                      if (absensi.metodeAbsen.isNotEmpty) ...[
                        const SizedBox(height: 7),
                        Container(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 7,
                            vertical: 2,
                          ),
                          decoration: BoxDecoration(
                            color: absensi.metodeAbsen == 'RFID'
                                ? const Color(0xFF6FBA9D).withOpacity(0.1)
                                : Colors.grey[200],
                            borderRadius: BorderRadius.circular(5),
                          ),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Icon(
                                absensi.metodeAbsen == 'RFID'
                                    ? Icons.credit_card
                                    : Icons.touch_app,
                                size: 9,
                                color: absensi.metodeAbsen == 'RFID'
                                    ? const Color(0xFF6FBA9D)
                                    : Colors.grey[700],
                              ),
                              const SizedBox(width: 2),
                              Text(
                                absensi.metodeAbsen,
                                style: TextStyle(
                                  fontSize: 8,
                                  fontWeight: FontWeight.w500,
                                  color: absensi.metodeAbsen == 'RFID'
                                      ? const Color(0xFF6FBA9D)
                                      : Colors.grey[700],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],

                      // Punctuality (jika ada)
                      if (absensi.punctuality != null) ...[
                        const SizedBox(height: 7),
                        Container(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 7,
                            vertical: 2,
                          ),
                          decoration: BoxDecoration(
                            color: absensi.punctuality!.contains('Tepat')
                                ? Colors.green[50]
                                : Colors.orange[50],
                            borderRadius: BorderRadius.circular(5),
                          ),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Icon(
                                absensi.punctuality!.contains('Tepat')
                                    ? Icons.access_time
                                    : Icons.schedule,
                                size: 9,
                                color: absensi.punctuality!.contains('Tepat')
                                    ? Colors.green[700]
                                    : Colors.orange[700],
                              ),
                              const SizedBox(width: 2),
                              Text(
                                absensi.punctuality!,
                                style: TextStyle(
                                  fontSize: 8,
                                  fontWeight: FontWeight.w500,
                                  color: absensi.punctuality!.contains('Tepat')
                                      ? Colors.green[700]
                                      : Colors.orange[700],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],

                      // Keterangan (jika ada)
                      if (absensi.keterangan != null &&
                          absensi.keterangan!.isNotEmpty) ...[
                        const SizedBox(height: 7),
                        Container(
                          padding: const EdgeInsets.all(7),
                          decoration: BoxDecoration(
                            color: Colors.blue[50],
                            borderRadius: BorderRadius.circular(5),
                          ),
                          child: Row(
                            children: [
                              Icon(
                                Icons.info_outline,
                                size: 11,
                                color: Colors.blue[700],
                              ),
                              const SizedBox(width: 5),
                              Expanded(
                                child: Text(
                                  absensi.keterangan!,
                                  style: TextStyle(
                                    fontSize: 8,
                                    color: Colors.blue[900],
                                  ),
                                  maxLines: 2,
                                  overflow: TextOverflow.ellipsis,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Color _getStatusColor(String status) {
    switch (status) {
      case 'Hadir':
        return Colors.green;
      case 'Izin':
        return Colors.orange;
      case 'Sakit':
        return Colors.blue;
      case 'Alpa':
        return Colors.red;
      default:
        return Colors.grey;
    }
  }

  String _getStatusEmoji(String status) {
    switch (status) {
      case 'Hadir':
        return 'âœ…';
      case 'Izin':
        return 'âš ï¸';
      case 'Sakit':
        return 'ðŸ’Š';
      case 'Alpa':
        return 'âŒ';
      default:
        return 'âšª';
    }
  }

  IconData _getIconFromString(String iconString) {
    // Simple mapping - extend as needed
    final iconMap = {
      'fa-calendar': Icons.calendar_today,
      'fa-book': Icons.menu_book,
      'fa-flag': Icons.flag,
      'fa-mosque': Icons.home,
      'fa-pray': Icons.wc,
      'fa-graduation-cap': Icons.school,
    };

    return iconMap[iconString] ?? Icons.event;
  }
}