import 'package:flutter/material.dart';
import '../theme/app_theme.dart';

/// "My Subscriptions" list displayed on the home tab below the loyalty card.
/// Renders each subscription as a beautiful standalone card visually distinct
/// from the points-based loyalty card.
class SubscriptionListWidget extends StatelessWidget {
  final List<dynamic> subscriptions;

  const SubscriptionListWidget({super.key, required this.subscriptions});

  @override
  Widget build(BuildContext context) {
    if (subscriptions.isEmpty) return const SizedBox.shrink();

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
          child: Text(
            'MY SUBSCRIPTIONS',
            style: Theme.of(context).textTheme.labelLarge?.copyWith(
                  color: AppTheme.onSurfaceVariant,
                  letterSpacing: 1.2,
                  fontSize: 11,
                  fontWeight: FontWeight.bold,
                ),
          ),
        ),
        ...subscriptions.map((sub) => _SubscriptionCard(sub: sub)),
      ],
    );
  }
}

class _SubscriptionCard extends StatelessWidget {
  final dynamic sub;

  const _SubscriptionCard({required this.sub});

  /// Determine active/expired status from subscription_end_date.
  bool _isActive() {
    final endRaw = sub['subscription_end_date'];
    if (endRaw == null || endRaw == false) return true; // no end date = active
    try {
      final endDate = DateTime.parse(endRaw.toString());
      return endDate.isAfter(DateTime.now());
    } catch (_) {
      return true;
    }
  }

  /// Format a date string (YYYY-MM-DD) to a readable label.
  String _formatDate(dynamic raw) {
    if (raw == null || raw == false) return '—';
    try {
      final dt = DateTime.parse(raw.toString());
      return '${dt.day.toString().padLeft(2, '0')} '
          '${_monthName(dt.month)} '
          '${dt.year}';
    } catch (_) {
      return raw.toString();
    }
  }

  String _monthName(int m) {
    const months = [
      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ];
    return months[m - 1];
  }

  @override
  Widget build(BuildContext context) {
    final programName = sub['program_id'] is List
        ? (sub['program_id'][1] as String? ?? 'Subscription')
        : 'Subscription';
    final code = sub['code'] as String? ?? '';
    final startDate = _formatDate(sub['subscription_start_date']);
    final endDate = _formatDate(sub['subscription_end_date']);
    final active = _isActive();

    return Container(
      margin: const EdgeInsets.fromLTRB(16, 8, 16, 8),
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: AppTheme.surfaceContainerLowest,
        border: Border.all(
          color: active ? AppTheme.secondary.withValues(alpha: 0.4) : AppTheme.outlineVariant.withValues(alpha: 0.4),
          width: 1.5,
        ),
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: 0.04),
            blurRadius: 10,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Icon(
                    Icons.card_membership_rounded,
                    size: 18,
                    color: active ? AppTheme.secondary : AppTheme.outlineVariant,
                  ),
                  const SizedBox(width: 8),
                  Text(
                    'SUBSCRIPTION CARD',
                    style: Theme.of(context).textTheme.labelLarge?.copyWith(
                          color: active ? AppTheme.secondary : AppTheme.outlineVariant,
                          fontWeight: FontWeight.bold,
                          fontSize: 10,
                          letterSpacing: 1.0,
                        ),
                  ),
                ],
              ),
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                decoration: BoxDecoration(
                  color: active
                      ? const Color(0xFF1B5E20).withValues(alpha: 0.10)
                      : const Color(0xFFB02500).withValues(alpha: 0.08),
                  borderRadius: BorderRadius.circular(20), // Pill status badge
                ),
                child: Text(
                  active ? 'ACTIVE' : 'EXPIRED',
                  style: TextStyle(
                    fontSize: 9,
                    fontWeight: FontWeight.bold,
                    letterSpacing: 0.8,
                    color: active
                        ? const Color(0xFF2E7D32)
                        : const Color(0xFFB02500),
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 14),
          Text(
            programName,
            style: Theme.of(context).textTheme.titleMedium?.copyWith(
                  fontWeight: FontWeight.bold,
                  color: AppTheme.onSurface,
                  fontFamily: 'serif',
                ),
          ),
          const SizedBox(height: 12),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Card Number',
                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: AppTheme.onSurfaceVariant,
                          fontSize: 10,
                        ),
                  ),
                  const SizedBox(height: 2),
                  Text(
                    code.isNotEmpty ? code : 'N/A',
                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                          fontFamily: 'monospace',
                          fontWeight: FontWeight.bold,
                          color: AppTheme.onSurface,
                        ),
                  ),
                ],
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Text(
                    'Validity Period',
                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
                          color: AppTheme.onSurfaceVariant,
                          fontSize: 10,
                        ),
                  ),
                  const SizedBox(height: 2),
                  Text(
                    '$startDate - $endDate',
                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                          color: AppTheme.onSurface,
                          fontWeight: FontWeight.w600,
                        ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}