import 'package:flutter/material.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../shared/widgets/nav_bar_config.dart';
import '../../core/utils/date_utils.dart' as du;
import '../../shared/widgets/form_section.dart';
import '../../shared/widgets/form_field_row.dart';
import 'expense_apply_model.dart';
import '../../core/i18n/app_localizations.dart';
import '../../shared/models/bill_attachment.dart';
import 'expense_apply_api.dart';
import '../../core/theme/app_colors.dart';
import '../../core/theme/app_colors_extension.dart';

class ExpenseApplyDetailPage extends ConsumerStatefulWidget {
  final String billNo;
  final int queryId;
  const ExpenseApplyDetailPage({super.key, required this.billNo, this.queryId = 0});

  @override
  ConsumerState<ExpenseApplyDetailPage> createState() => _ExpenseApplyDetailPageState();
}

class _ExpenseApplyDetailPageState extends ConsumerState<ExpenseApplyDetailPage>
    with WidgetsBindingObserver {
  bool _loading = true;
  String? _error;
  ExpenseApplyModel? _data;
  List<BillAttachment> _attachments = [];
  bool _attachAvailable = false;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _loadData();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      _attachments = [];
      _attachAvailable = false;
      _loadData();
    }
  }

  Future<void> _loadData() async {
    setState(() { _loading = true; _error = null; });
    try {
      final api = ref.read(expenseApplyApiProvider);
      final detail = await api.fetchDetail(widget.billNo);

      // Load attachments (non-critical, best-effort)
      List<BillAttachment> attachments = [];
      bool attachAvailable = false;
      try {
        if (mounted) setState(() => _attachAvailable = false);
        attachAvailable = await api.checkAttachHealth();
        if (attachAvailable) {
          attachments = await api.getAttachments('AE', widget.billNo);
        }
      } catch (_) {
        attachAvailable = false;
      }

      if (mounted) {
        setState(() {
          _data = detail;
          _attachments = attachments;
          _attachAvailable = attachAvailable;
          _loading = false;
        });
      }
    } catch (e) {
      if (mounted) {
        setState(() { _error = e.toString(); _loading = false; });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    final colors = Theme.of(context).extension<AppColorsExtension>()!;
    final l10n = AppLocalizations.of(context);

    setNavBarTitle(context, ref, NavBarConfig(
      title: l10n.get('expenseApplyDetail'),
      showBack: true,
      onBack: () => context.pop(),
    ));

    if (_loading) {
      return const Center(
        child: TDLoading(size: TDLoadingSize.large, icon: TDLoadingIcon.activity),
      );
    }

    if (_error != null) {
      return Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.error_outline, size: 48, color: colors.danger),
            const SizedBox(height: 16),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 32),
              child: Text(
                _error!,
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: AppFontSizes.body, color: colors.textSecondary),
              ),
            ),
            const SizedBox(height: 16),
            TDButton(
              text: l10n.get('retry'),
              size: TDButtonSize.medium,
              onTap: _loadData,
            ),
          ],
        ),
      );
    }

    final app = _data!;

    return Expanded(
      child: SingleChildScrollView(
        physics: const AlwaysScrollableScrollPhysics(),
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            _buildBasicInfoSection(app, l10n, colors),
            const SizedBox(height: 16),
            _buildExpenseDetailSection(app, l10n, colors),
            const SizedBox(height: 16),
            _buildAttachmentSection(l10n, colors),
            const SizedBox(height: 24),
            _buildPageFooter(colors),
          ],
        ),
      ),
    );
  }

  // ═══ 基本信息 ═══
  Widget _buildBasicInfoSection(
    ExpenseApplyModel app,
    AppLocalizations l10n,
    AppColorsExtension colors,
  ) {
    return FormSection(
      title: l10n.get('basicInfo'),
      leadingIcon: Icons.info_outline,
      children: [
        FormFieldRow(label: l10n.get('expenseApplyNo'), value: app.expenseApplyNo, readOnly: true, showArrow: false),
        const SizedBox(height: 16),
        FormFieldRow(label: l10n.get('applicant'), value: app.applicantName, readOnly: true, showArrow: false),
        const SizedBox(height: 16),
        FormFieldRow(label: l10n.get('department'), value: app.deptName, readOnly: true, showArrow: false),
        const SizedBox(height: 16),
        FormFieldRow(label: l10n.get('date'), value: du.DateUtils.formatDate(app.createTime), readOnly: true, showArrow: false),
        const SizedBox(height: 16),
        SizedBox(
          height: 24,
          child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            Text(l10n.get('emergencyLevel'), style: TextStyle(fontSize: AppFontSizes.subtitle, color: colors.textSecondary)),
            _buildUrgencyChip(app.urgency, l10n, colors),
          ]),
        ),
        const SizedBox(height: 16),
        FormFieldRow(label: l10n.get('feeReason'), value: app.purpose, readOnly: true, showArrow: false),
        const SizedBox(height: 16),
        FormFieldRow(label: l10n.get('remark'), value: app.remark.isNotEmpty ? app.remark : '-', readOnly: true, showArrow: false),
      ],
    );
  }

  // ═══ 费用明细 ═══
  Widget _buildExpenseDetailSection(
    ExpenseApplyModel app,
    AppLocalizations l10n,
    AppColorsExtension colors,
  ) {
    return FormSection(
      title: l10n.get('expenseDetails'),
      leadingIcon: Icons.receipt_long_outlined,
      children: [
        if (app.details.isEmpty)
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8),
            child: Text(l10n.get('noDetailData'), style: TextStyle(fontSize: AppFontSizes.body, color: colors.textPlaceholder)),
          )
        else
          ...app.details.asMap().entries.map((e) {
            final d = e.value;
            final catLabel = d.categoryName.isNotEmpty
                ? '${d.expenseCategory}/${d.categoryName}'
                : d.expenseCategory;
            return Container(
              margin: const EdgeInsets.symmetric(vertical: 8),
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(color: colors.bgPage, borderRadius: BorderRadius.circular(8)),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Expanded(
                              child: Text(
                                catLabel,
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(fontSize: AppFontSizes.subtitle, color: colors.textPrimary),
                              ),
                            ),
                            const SizedBox(width: 12),
                            Text(
                              '¥${d.estimatedAmount.toStringAsFixed(2)}',
                              style: TextStyle(fontSize: AppFontSizes.caption, fontWeight: FontWeight.w600, color: colors.amountPrimary),
                            ),
                          ],
                        ),
                        if (d.acctSubjectId.isNotEmpty && d.acctSubjectName.isNotEmpty) ...[
                          const SizedBox(height: 4),
                          Text(
                            '${d.acctSubjectId}/${d.acctSubjectName}',
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(fontSize: AppFontSizes.caption, color: colors.textSecondary),
                          ),
                        ],
                        if (d.projectId.isNotEmpty && d.projectName.isNotEmpty) ...[
                          const SizedBox(height: 4),
                          Text(
                            '${d.projectId}/${d.projectName}',
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(fontSize: AppFontSizes.caption, color: colors.textSecondary),
                          ),
                        ],
                        if (d.costDeptId.isNotEmpty && d.costDeptName.isNotEmpty) ...[
                          const SizedBox(height: 4),
                          Text(
                            '${d.costDeptId}/${d.costDeptName}',
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(fontSize: AppFontSizes.caption, color: colors.textSecondary),
                          ),
                        ],
                        if (d.estimatedStartDate != null) ...[
                          const SizedBox(height: 4),
                          Text(
                            '${du.DateUtils.formatDate(d.estimatedStartDate!)} ~ ${d.estimatedEndDate != null ? du.DateUtils.formatDate(d.estimatedEndDate!) : ''}',
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(fontSize: AppFontSizes.caption, color: colors.textSecondary),
                          ),
                        ],
                        if (d.remark.isNotEmpty) ...[
                          const SizedBox(height: 4),
                          Text(
                            d.remark,
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(fontSize: AppFontSizes.caption, color: colors.textSecondary),
                          ),
                        ],
                      ],
                    ),
                  ),
                ],
              ),
            );
          }),
        if (app.details.isNotEmpty) ...[
          const SizedBox(height: 8),
          Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            Text(l10n.get('total'), style: TextStyle(fontSize: AppFontSizes.body, fontWeight: FontWeight.w600, color: colors.textPrimary)),
            Text('¥${app.estimatedAmount.toStringAsFixed(2)}',
                style: TextStyle(fontSize: AppFontSizes.subtitle, fontWeight: FontWeight.w700, color: colors.amountPrimary)),
          ]),
        ],
      ],
    );
  }

  // ═══ 附件 ═══
  Widget _buildAttachmentSection(AppLocalizations l10n, AppColorsExtension colors) {
    final children = <Widget>[];
    if (!_attachAvailable) {
      children.add(Text(l10n.get('attachServiceUnavailable'),
          style: TextStyle(fontSize: AppFontSizes.body, color: colors.textPlaceholder)));
    } else if (_attachments.isEmpty) {
      children.add(Text(l10n.get('noAttachment'),
          style: TextStyle(fontSize: AppFontSizes.body, color: colors.textPlaceholder)));
    } else {
      children.addAll(_attachments.map((a) => _buildAttachmentRow(a, colors)));
    }
    return FormSection(
      title: l10n.get('attachments'),
      leadingIcon: Icons.attach_file_outlined,
      children: children,
    );
  }

  Widget _buildAttachmentRow(BillAttachment a, AppColorsExtension colors) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 4),
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      decoration: BoxDecoration(
        color: colors.bgPage,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Row(children: [
        Icon(_fileTypeIcon(a.ext), size: 24, color: colors.primary),
        const SizedBox(width: 10),
        Expanded(
          child: Text(a.fileName,
              maxLines: 1, overflow: TextOverflow.ellipsis,
              style: TextStyle(fontSize: AppFontSizes.body, color: colors.textPrimary)),
        ),
      ]),
    );
  }

  IconData _fileTypeIcon(String ext) {
    switch (ext.toLowerCase()) {
      case 'pdf': return Icons.picture_as_pdf;
      case 'doc': case 'docx': return Icons.description;
      case 'xls': case 'xlsx': return Icons.table_chart;
      case 'jpg': case 'jpeg': case 'png': case 'gif': case 'bmp': return Icons.image_outlined;
      default: return Icons.insert_drive_file;
    }
  }

  Widget _buildPageFooter(AppColorsExtension colors) {
    final l10n = AppLocalizations.of(context);
    return Center(
      child: Padding(
        padding: const EdgeInsets.only(bottom: 16),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.rocket_launch_outlined, size: 16, color: colors.textPlaceholder),
            const SizedBox(width: 6),
            Text(l10n.get('pageFooter'),
                style: TextStyle(fontSize: AppFontSizes.caption, color: colors.textPlaceholder)),
          ],
        ),
      ),
    );
  }

  Widget _buildUrgencyChip(String urgency, AppLocalizations l10n, AppColorsExtension colors) {
    final (label, color) = switch (urgency) {
      '3' || 'critical' => (l10n.get('critical'), colors.danger),
      '2' || 'urgent' => (l10n.get('urgent'), colors.warning),
      '1' || 'normal' => (l10n.get('normal'), colors.primary),
      _ => (l10n.get('normal'), colors.primary),
    };
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 1),
      decoration: BoxDecoration(
        color: color.withValues(alpha: 0.1),
        borderRadius: BorderRadius.circular(4),
        border: Border.all(color: color, width: 0.5),
      ),
      child: Text(label, style: TextStyle(fontSize: 11, fontWeight: FontWeight.w500, color: color)),
    );
  }
}
