tboss_oa_module/lib/features/outing_log/outing_log_detail_page.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../core/theme/app_colors.dart';
import '../shell/nav_bar_config.dart';
import '../../core/utils/date_utils.dart' as du;
import '../../core/i18n/app_localizations.dart';
import 'outing_log_list_controller.dart';
import 'outing_log_comment.dart';
import 'outing_log_model.dart';
import '../../core/theme/app_colors_extension.dart';

class OutingLogDetailPage extends ConsumerStatefulWidget {
  final String id;
  const OutingLogDetailPage({super.key, required this.id});

  @override
  ConsumerState<OutingLogDetailPage> createState() =>
      _OutingLogDetailPageState();
}

class _OutingLogDetailPageState extends ConsumerState<OutingLogDetailPage> {
  late OutingLogModel _log;
  final bool _isManager = true; // 模拟经理角色
  int _rating = 0;
  final _commentCtrl = TextEditingController();
  final List<OutingLogComment> _comments = [];

  @override
  void initState() {
    super.initState();
    _log = mockOutingLogs.firstWhere(
      (e) => e.id == widget.id,
      orElse: () => mockOutingLogs.first,
    );
    _comments.addAll(_log.comments);

    // 模拟：进入详情时更新 LastViewedTime
    Future.delayed(const Duration(milliseconds: 500), () {
      if (mounted) setState(() {});
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _log = mockOutingLogs.firstWhere(
      (e) => e.id == widget.id,
      orElse: () => mockOutingLogs.first,
    );
  }

  @override
  void dispose() {
    _commentCtrl.dispose();
    super.dispose();
  }

  void _sendComment() {
    if (_rating == 0) {
      ScaffoldMessenger.of(
        context,
      ).showSnackBar(const SnackBar(content: Text('请选择评分')));
      return;
    }
    final content = _commentCtrl.text.trim();
    if (content.isEmpty) {
      ScaffoldMessenger.of(
        context,
      ).showSnackBar(const SnackBar(content: Text('请输入点评内容')));
      return;
    }
    setState(() {
      _comments.add(
        OutingLogComment(
          id: 'cmt-new-${DateTime.now().millisecondsSinceEpoch}',
          logId: widget.id,
          commenterId: 'u-mgr',
          commenterName: '王经理',
          commenterPosition: '销售总监',
          ratingStars: _rating,
          commentText: content,
          createTime: DateTime.now(),
        ),
      );
      _rating = 0;
      _commentCtrl.clear();
    });
    ScaffoldMessenger.of(
      context,
    ).showSnackBar(const SnackBar(content: Text('点评已发送')));
  }

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

    ref
        .read(navBarConfigProvider.notifier)
        .update(
          NavBarConfig(
            title: l10n.get('outingLogDetail'),
            showBack: true,
            onBack: () => context.pop(),
          ),
        );

    return Column(
      children: [
        Expanded(
          child: SingleChildScrollView(
            child: Column(
              children: [
                _buildMapPlaceholder(),
                _buildInfoSection(),
                const SizedBox(height: 8),
                _buildSectionCard(
                  l10n.get('workSummary'),
                  _log.visitSummary.isNotEmpty
                      ? _log.visitSummary
                      : l10n.get('noWorkSummary'),
                ),
                const SizedBox(height: 8),
                _buildSectionCard(
                  l10n.get('followUp'),
                  _log.nextPlan.isNotEmpty ? _log.nextPlan : l10n.get('noPlan'),
                ),
                const SizedBox(height: 8),
                _buildPhotoSection(),
                const SizedBox(height: 8),
                _buildCommentSection(),
                if (_isManager) _buildManagerCommentInput(),
                const SizedBox(height: 24),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildMapPlaceholder() {
    final colors = Theme.of(context).extension<AppColorsExtension>()!;
    return Container(
      width: double.infinity,
      height: 160,
      padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
      child: GestureDetector(
        onTap: () {
          ScaffoldMessenger.of(
            context,
          ).showSnackBar(const SnackBar(content: Text('模拟：打开原生导航')));
        },
        child: Container(
          decoration: BoxDecoration(
            color: const Color(0xFFE8F4FD),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Stack(
            children: [
              Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.map_outlined, size: 40, color: colors.primary),
                    SizedBox(height: 4),
                    Text(
                      '点击查看导航',
                      style: TextStyle(fontSize: 12, color: colors.primary),
                    ),
                  ],
                ),
              ),
              Positioned(
                bottom: 8,
                left: 8,
                child: Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 6,
                    vertical: 3,
                  ),
                  decoration: BoxDecoration(
                    color: Colors.black54,
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: Text(
                    '${_log.checkInLatitude?.toStringAsFixed(4) ?? "0.0000"}, ${_log.checkInLongitude?.toStringAsFixed(4) ?? "0.0000"}',
                    style: const TextStyle(fontSize: 10, color: Colors.white),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildInfoSection() {
    final colors = Theme.of(context).extension<AppColorsExtension>()!;
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: colors.bgCard,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              _log.customerName,
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.w700,
                color: colors.textPrimary,
              ),
            ),
            const SizedBox(height: 12),
            _buildInfoRow('业务员', _log.salespersonName),
            Divider(height: 12, color: colors.border),
            _buildInfoRow('部门', _log.deptName),
            Divider(height: 12, color: colors.border),
            _buildInfoRow('客户名', _log.customerName),
            Divider(height: 12, color: colors.border),
            _buildInfoRow('签到地址', _log.checkInAddress),
            Divider(height: 12, color: colors.border),
            _buildInfoRow('签到时间', du.DateUtils.formatDateTime(_log.createTime)),
          ],
        ),
      ),
    );
  }

  Widget _buildInfoRow(String label, String value) {
    final colors = Theme.of(context).extension<AppColorsExtension>()!;
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 4),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: 70,
            child: Text(
              label,
              style: TextStyle(fontSize: 13, color: colors.textSecondary),
            ),
          ),
          Expanded(
            child: Text(
              value,
              style: TextStyle(fontSize: 13, color: colors.textPrimary),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSectionCard(String title, String content) {
    final colors = Theme.of(context).extension<AppColorsExtension>()!;
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: colors.bgCard,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w600,
                color: colors.textPrimary,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              content,
              style: TextStyle(
                fontSize: 14,
                color: colors.textSecondary,
                height: 1.5,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPhotoSection() {
    final colors = Theme.of(context).extension<AppColorsExtension>()!;
    final l10n = AppLocalizations.of(context);
    final photos = _log.visitPhotos;
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: colors.bgCard,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              l10n.get('sitePhotos'),
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w600,
                color: colors.textPrimary,
              ),
            ),
            const SizedBox(height: 12),
            if (photos.isEmpty)
              Text(
                l10n.get('noPhotos'),
                style: TextStyle(fontSize: 13, color: colors.textPlaceholder),
              )
            else
              Wrap(
                spacing: 8,
                runSpacing: 8,
                children: photos.map((photo) {
                  return GestureDetector(
                    onTap: () {
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text('模拟：全屏预览照片')),
                      );
                    },
                    child: Stack(
                      children: [
                        Container(
                          width: 100,
                          height: 100,
                          decoration: BoxDecoration(
                            color: const Color(0xFFD0E8F8),
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: Center(
                            child: Icon(
                              Icons.image_outlined,
                              size: 36,
                              color: colors.primary,
                            ),
                          ),
                        ),
                        Positioned(
                          bottom: 0,
                          left: 0,
                          right: 0,
                          child: Container(
                            padding: const EdgeInsets.symmetric(
                              horizontal: 3,
                              vertical: 2,
                            ),
                            color: Colors.black54,
                            child: Text(
                              '${du.DateUtils.formatDate(_log.createTime)} ${_log.checkInLatitude?.toStringAsFixed(2) ?? "0.00"},${_log.checkInLongitude?.toStringAsFixed(2) ?? "0.00"}',
                              style: const TextStyle(
                                fontSize: 8,
                                color: Colors.white,
                              ),
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ),
                      ],
                    ),
                  );
                }).toList(),
              ),
          ],
        ),
      ),
    );
  }

  Widget _buildCommentSection() {
    final colors = Theme.of(context).extension<AppColorsExtension>()!;
    final l10n = AppLocalizations.of(context);
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: colors.bgCard,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              l10n.get('comments'),
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w600,
                color: colors.textPrimary,
              ),
            ),
            const SizedBox(height: 12),
            if (_comments.isEmpty)
              Center(
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 16),
                  child: Text(
                    l10n.get('noComments'),
                    style: TextStyle(
                      fontSize: 13,
                      color: colors.textPlaceholder,
                    ),
                  ),
                ),
              )
            else
              ..._comments.map((comment) => _buildCommentBubble(comment)),
          ],
        ),
      ),
    );
  }

  Widget _buildCommentBubble(OutingLogComment comment) {
    final colors = Theme.of(context).extension<AppColorsExtension>()!;
    return Container(
      width: double.infinity,
      margin: const EdgeInsets.only(bottom: 12),
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: colors.primaryLight,
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(8),
          topRight: Radius.circular(8),
          bottomRight: Radius.circular(8),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  CircleAvatar(
                    radius: 12,
                    backgroundColor: colors.primaryLight,
                    child: Text(
                      comment.commenterName.substring(0, 1),
                      style: TextStyle(
                        fontSize: 12,
                        fontWeight: FontWeight.w600,
                        color: colors.primary,
                      ),
                    ),
                  ),
                  const SizedBox(width: 6),
                  Text(
                    comment.commenterName,
                    style: TextStyle(
                      fontSize: 13,
                      fontWeight: FontWeight.w600,
                      color: colors.textPrimary,
                    ),
                  ),
                  const SizedBox(width: 4),
                  if (comment.commenterPosition.isNotEmpty)
                    Text(
                      '· ${comment.commenterPosition}',
                      style: TextStyle(
                        fontSize: 11,
                        color: colors.textSecondary,
                      ),
                    ),
                ],
              ),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: List.generate(5, (i) {
                  return Icon(
                    i < comment.ratingStars ? Icons.star : Icons.star_border,
                    size: 14,
                    color: colors.warning,
                  );
                }),
              ),
            ],
          ),
          const SizedBox(height: 8),
          Text(
            comment.commentText,
            style: TextStyle(
              fontSize: 14,
              color: colors.textSecondary,
              height: 1.5,
            ),
          ),
          const SizedBox(height: 6),
          Text(
            du.DateUtils.formatDateTime(comment.createTime),
            style: TextStyle(fontSize: 11, color: colors.textPlaceholder),
          ),
        ],
      ),
    );
  }

  Widget _buildManagerCommentInput() {
    final colors = Theme.of(context).extension<AppColorsExtension>()!;
    final l10n = AppLocalizations.of(context);
    return Padding(
      padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: colors.bgCard,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              l10n.get('managerComment'),
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w600,
                color: colors.textPrimary,
              ),
            ),
            const SizedBox(height: 8),
            Row(
              children: [
                Text(
                  '${l10n.get('statAvgRating')}：',
                  style: TextStyle(fontSize: 13, color: colors.textSecondary),
                ),
                ...List.generate(5, (i) {
                  final starIndex = i + 1;
                  return GestureDetector(
                    onTap: () => setState(() {
                      _rating = _rating == starIndex ? 0 : starIndex;
                    }),
                    child: Padding(
                      padding: const EdgeInsets.only(right: 4),
                      child: Icon(
                        starIndex <= _rating ? Icons.star : Icons.star_border,
                        size: 28,
                        color: colors.warning,
                      ),
                    ),
                  );
                }),
              ],
            ),
            const SizedBox(height: 8),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
              decoration: BoxDecoration(
                color: colors.bgPage,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: _commentCtrl,
                      decoration: InputDecoration(
                        hintText: l10n.get('inputComment'),
                        hintStyle: TextStyle(
                          fontSize: 14,
                          color: colors.textPlaceholder,
                        ),
                        border: InputBorder.none,
                        contentPadding: EdgeInsets.zero,
                        isDense: true,
                      ),
                      style: TextStyle(fontSize: 14, color: colors.textPrimary),
                    ),
                  ),
                  const SizedBox(width: 8),
                  GestureDetector(
                    onTap: _sendComment,
                    child: Container(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 16,
                        vertical: 8,
                      ),
                      decoration: BoxDecoration(
                        color: colors.primary,
                        borderRadius: BorderRadius.circular(18),
                      ),
                      child: Text(
                        l10n.get('send'),
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w600,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}