/// Submission Create Page
///
/// Form for creating new project submissions.
library;

import 'dart:io';
import 'package:worker/core/widgets/loading_indicator.dart';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:image_picker/image_picker.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';
import 'package:worker/features/projects/data/models/project_submission_request.dart';
import 'package:worker/features/projects/domain/entities/project_progress.dart';
import 'package:worker/features/projects/domain/entities/project_submission.dart';
import 'package:worker/features/projects/presentation/providers/submissions_provider.dart';

/// Project Submission Create/Edit Page
class SubmissionCreatePage extends ConsumerStatefulWidget {
  const SubmissionCreatePage({super.key, this.submission});

  /// Optional submission for editing mode
  /// If null, creates new submission
  /// If provided, prefills form and updates existing submission
  final ProjectSubmission? submission;

  @override
  ConsumerState<SubmissionCreatePage> createState() =>
      _SubmissionCreatePageState();
}

class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
  final _formKey = GlobalKey<FormState>();

  // Form controllers
  final _projectNameController = TextEditingController();
  final _addressController = TextEditingController();
  final _ownerController = TextEditingController();
  final _designUnitController = TextEditingController();
  final _constructionUnitController = TextEditingController();
  final _areaController = TextEditingController();
  final _productsController = TextEditingController();
  final _descriptionController = TextEditingController();

  // Form state
  ProjectProgress? _selectedProgress;
  DateTime? _expectedStartDate;
  final List<File> _uploadedFiles = []; // New files to upload
  List<ProjectFile> _existingFiles = []; // Existing files from API
  bool _isSubmitting = false;
  bool _isLoadingDetail = false;
  String? _deletingFileId; // Track which file is being deleted

  /// Whether we're editing an existing submission
  bool get isEditing => widget.submission != null;

  @override
  void initState() {
    super.initState();
    // Fetch full detail when editing
    if (isEditing) {
      _loadDetail();
    }
  }

  /// Load full project detail from API for editing
  Future<void> _loadDetail() async {
    if (!isEditing) return;

    setState(() => _isLoadingDetail = true);

    try {
      final detail = await ref.read(
        submissionDetailProvider(widget.submission!.submissionId).future,
      );

      if (!mounted) return;

      // Prefill form fields from entity
      _projectNameController.text = detail.designedArea;
      _addressController.text = detail.addressOfProject ?? '';
      _ownerController.text = detail.projectOwner ?? '';
      _designUnitController.text = detail.designFirm ?? '';
      _constructionUnitController.text = detail.constructionContractor ?? '';
      _areaController.text = detail.designArea.toString();
      _productsController.text = detail.productsIncludedInTheDesign ?? '';
      _descriptionController.text = detail.description ?? '';

      // Set expected commencement date
      _expectedStartDate = detail.expectedCommencementDate;

      // Find matching progress from the list
      final progressId = detail.projectProgress;
      if (progressId != null) {
        final progressList = await ref.read(projectProgressListProvider.future);
        _selectedProgress = progressList.where((p) => p.id == progressId).firstOrNull;
      }

      // Set existing files from API
      _existingFiles = detail.filesList;
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Lỗi tải thông tin: $e'),
            backgroundColor: AppColors.danger,
          ),
        );
      }
    } finally {
      if (mounted) {
        setState(() => _isLoadingDetail = false);
      }
    }
  }

  @override
  void dispose() {
    _projectNameController.dispose();
    _addressController.dispose();
    _ownerController.dispose();
    _designUnitController.dispose();
    _constructionUnitController.dispose();
    _areaController.dispose();
    _productsController.dispose();
    _descriptionController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;

    return Scaffold(
      backgroundColor: colorScheme.surfaceContainerLowest,
      appBar: AppBar(
        leading: IconButton(
          icon: FaIcon(
            FontAwesomeIcons.arrowLeft,
            color: colorScheme.onSurface,
            size: 20,
          ),
          onPressed: () => Navigator.of(context).pop(),
        ),
        title: Text(
          isEditing ? 'Chỉnh sửa Dự án' : 'Đăng ký Công trình',
          style: TextStyle(color: colorScheme.onSurface),
        ),
        actions: [
          IconButton(
            icon: FaIcon(
              FontAwesomeIcons.circleInfo,
              color: colorScheme.onSurface,
              size: 20,
            ),
            onPressed: _showInfoDialog,
          ),
          const SizedBox(width: AppSpacing.sm),
        ],
        elevation: AppBarSpecs.elevation,
        backgroundColor: colorScheme.surface,
        centerTitle: false,
      ),
      body: _isLoadingDetail
          ? Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const CustomLoadingIndicator(),
                  const SizedBox(height: 16),
                  Text(
                    'Đang tải thông tin dự án...',
                    style: TextStyle(color: colorScheme.onSurfaceVariant),
                  ),
                ],
              ),
            )
          : Form(
        key: _formKey,
        child: ListView(
          padding: const EdgeInsets.all(4),
          children: [
            // Basic Information
            _buildBasicInfoCard(colorScheme),
            const SizedBox(height: 16),

            // Project Details
            _buildProjectDetailsCard(colorScheme),
            const SizedBox(height: 16),

            // Additional Information
            _buildAdditionalInfoCard(colorScheme),
            const SizedBox(height: 16),

            // File Upload
            _buildFileUploadCard(colorScheme),
            const SizedBox(height: 24),

            // Submit Button
            _buildSubmitButton(colorScheme),
            const SizedBox(height: 40),
          ],
        ),
      ),
    );
  }

  Widget _buildBasicInfoCard(ColorScheme colorScheme) {
    return Card(
      elevation: 1,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Thông tin cơ bản',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w700,
                color: colorScheme.onSurface,
              ),
            ),
            const SizedBox(height: 16),

            _buildTextField(
              colorScheme: colorScheme,
              controller: _projectNameController,
              label: 'Tên công trình',
              required: true,
              hint: 'Nhập tên công trình',
            ),
            const SizedBox(height: 16),

            _buildTextField(
              colorScheme: colorScheme,
              controller: _addressController,
              label: 'Địa chỉ',
              required: true,
              hint: 'Nhập địa chỉ đầy đủ',
              maxLines: 2,
            ),
            const SizedBox(height: 16),

            _buildTextField(
              colorScheme: colorScheme,
              controller: _ownerController,
              label: 'Chủ đầu tư',
              required: true,
              hint: 'Tên chủ đầu tư',
            ),
            const SizedBox(height: 16),

            _buildTextField(
              colorScheme: colorScheme,
              controller: _designUnitController,
              label: 'Đơn vị thiết kế',
              hint: 'Tên đơn vị thiết kế',
            ),
            const SizedBox(height: 16),

            _buildTextField(
              colorScheme: colorScheme,
              controller: _constructionUnitController,
              label: 'Đơn vị thi công',
              hint: 'Tên đơn vị thi công',
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildProjectDetailsCard(ColorScheme colorScheme) {
    return Card(
      elevation: 1,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Chi tiết dự án',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w700,
                color: colorScheme.onSurface,
              ),
            ),
            const SizedBox(height: 16),

            _buildTextField(
              colorScheme: colorScheme,
              controller: _areaController,
              label: 'Tổng diện tích',
              required: true,
              hint: 'Nhập diện tích m²',
              keyboardType: TextInputType.number,
            ),
            const SizedBox(height: 16),

            _buildTextField(
              colorScheme: colorScheme,
              controller: _productsController,
              label: 'Sản phẩm đưa vào thiết kế',
              required: true,
              hint: 'Liệt kê các sản phẩm gạch đã sử dụng trong công trình (tên sản phẩm, mã SP, số lượng...)',
              maxLines: 4,
              helperText: 'Ví dụ: Gạch granite 60x60 - GP-001 - 100m², Gạch mosaic - MS-002 - 50m²',
            ),
            const SizedBox(height: 16),

            _buildProgressDropdown(colorScheme),

            const SizedBox(height: 16),
            _buildExpectedDateField(colorScheme),
          ],
        ),
      ),
    );
  }

  Widget _buildAdditionalInfoCard(ColorScheme colorScheme) {
    return Card(
      elevation: 1,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Thông tin bổ sung',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w700,
                color: colorScheme.onSurface,
              ),
            ),
            const SizedBox(height: 16),

            _buildTextField(
              colorScheme: colorScheme,
              controller: _descriptionController,
              label: 'Mô tả công trình',
              hint: 'Mô tả ngắn gọn về công trình, diện tích, đặc điểm nổi bật...',
              maxLines: 3,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildFileUploadCard(ColorScheme colorScheme) {
    return Card(
      elevation: 1,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Ảnh minh chứng',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w700,
                color: colorScheme.onSurface,
              ),
            ),
            const SizedBox(height: 16),

            // Upload Area
            InkWell(
              onTap: _pickFiles,
              borderRadius: BorderRadius.circular(8),
              child: Container(
                padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 20),
                width: double.infinity,
                decoration: BoxDecoration(
                  border: Border.all(
                    color: colorScheme.surfaceContainerHighest,
                    width: 2,
                    style: BorderStyle.solid,
                  ),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Column(
                  children: [
                    FaIcon(
                      FontAwesomeIcons.cloudArrowUp,
                      size: 48,
                      color: colorScheme.onSurfaceVariant,
                    ),
                    const SizedBox(height: 12),
                    Text(
                      'Kéo thả ảnh vào đây',
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w500,
                        color: colorScheme.onSurface,
                      ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      'hoặc nhấn để chọn file',
                      style: TextStyle(
                        fontSize: 14,
                        color: colorScheme.onSurfaceVariant,
                      ),
                    ),
                  ],
                ),
              ),
            ),

            // Existing files from API
            if (_existingFiles.isNotEmpty) ...[
              const SizedBox(height: 16),
              Text(
                'Ảnh đã tải lên',
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w500,
                  color: colorScheme.onSurfaceVariant,
                ),
              ),
              const SizedBox(height: 8),
              ..._existingFiles.asMap().entries.map((entry) {
                final index = entry.key;
                final file = entry.value;
                return Padding(
                  padding: const EdgeInsets.only(bottom: 8),
                  child: _buildExistingFileItem(file, index, colorScheme),
                );
              }),
            ],

            // New files to upload
            if (_uploadedFiles.isNotEmpty) ...[
              const SizedBox(height: 16),
              if (_existingFiles.isNotEmpty)
                Text(
                  'Ảnh mới',
                  style: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w500,
                    color: colorScheme.onSurfaceVariant,
                  ),
                ),
              if (_existingFiles.isNotEmpty) const SizedBox(height: 8),
              ..._uploadedFiles.asMap().entries.map((entry) {
                final index = entry.key;
                final file = entry.value;
                return Padding(
                  padding: const EdgeInsets.only(bottom: 8),
                  child: _buildFileItem(file, index, colorScheme),
                );
              }),
            ],

            const SizedBox(height: 8),
            Text(
              'Hỗ trợ: JPG, PNG, PDF. Tối đa 10MB mỗi file.',
              style: TextStyle(
                fontSize: 12,
                color: colorScheme.onSurfaceVariant,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTextField({
    required ColorScheme colorScheme,
    required TextEditingController controller,
    required String label,
    String? hint,
    bool required = false,
    int maxLines = 1,
    TextInputType? keyboardType,
    String? helperText,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Text(
              label,
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w600,
                color: colorScheme.onSurface,
              ),
            ),
            if (required)
              const Text(
                ' *',
                style: TextStyle(
                  fontSize: 14,
                  color: AppColors.danger,
                ),
              ),
          ],
        ),
        const SizedBox(height: 8),
        TextFormField(
          controller: controller,
          maxLines: maxLines,
          keyboardType: keyboardType,
          decoration: InputDecoration(
            hintText: hint,
            hintStyle: TextStyle(color: colorScheme.onSurfaceVariant),
            filled: true,
            fillColor: colorScheme.surface,
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
              borderSide: BorderSide(color: colorScheme.surfaceContainerHighest),
            ),
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
              borderSide: BorderSide(color: colorScheme.surfaceContainerHighest),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
              borderSide: BorderSide(color: colorScheme.primary, width: 2),
            ),
            errorBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
              borderSide: const BorderSide(color: AppColors.danger),
            ),
            contentPadding: const EdgeInsets.symmetric(
              horizontal: 16,
              vertical: 12,
            ),
          ),
          validator: required
              ? (value) {
                  if (value == null || value.trim().isEmpty) {
                    return 'Vui lòng nhập $label';
                  }
                  return null;
                }
              : null,
        ),
        if (helperText != null) ...[
          const SizedBox(height: 4),
          Text(
            helperText,
            style: TextStyle(
              fontSize: 12,
              color: colorScheme.onSurfaceVariant,
            ),
          ),
        ],
      ],
    );
  }

  Widget _buildProgressDropdown(ColorScheme colorScheme) {
    final progressListAsync = ref.watch(projectProgressListProvider);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Text(
              'Tiến độ công trình',
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w600,
                color: colorScheme.onSurface,
              ),
            ),
            const Text(
              ' *',
              style: TextStyle(
                fontSize: 14,
                color: AppColors.danger,
              ),
            ),
          ],
        ),
        const SizedBox(height: 8),
        progressListAsync.when(
          data: (progressList) => DropdownButtonFormField<ProjectProgress>(
            initialValue: _selectedProgress,
            decoration: InputDecoration(
              filled: true,
              fillColor: colorScheme.surface,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(8),
                borderSide: BorderSide(color: colorScheme.surfaceContainerHighest),
              ),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(8),
                borderSide: BorderSide(color: colorScheme.surfaceContainerHighest),
              ),
              contentPadding: const EdgeInsets.symmetric(
                horizontal: 16,
                vertical: 12,
              ),
            ),
            hint: const Text('Chọn tiến độ'),
            items: progressList
                .map((progress) => DropdownMenuItem<ProjectProgress>(
                      value: progress,
                      child: Text(progress.status),
                    ))
                .toList(),
            onChanged: (value) {
              setState(() {
                _selectedProgress = value;
              });
            },
            validator: (value) {
              if (value == null) {
                return 'Vui lòng chọn tiến độ công trình';
              }
              return null;
            },
          ),
          loading: () => Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            decoration: BoxDecoration(
              color: colorScheme.surface,
              border: Border.all(color: colorScheme.surfaceContainerHighest),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Row(
              children: [
                SizedBox(
                  width: 16,
                  height: 16,
                  child: CustomLoadingIndicator(color: colorScheme.primary, size: 20),
                ),
                const SizedBox(width: 12),
                Text('Đang tải...', style: TextStyle(color: colorScheme.onSurfaceVariant)),
              ],
            ),
          ),
          error: (error, _) => Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            decoration: BoxDecoration(
              color: colorScheme.surface,
              border: Border.all(color: AppColors.danger),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Row(
              children: [
                const FaIcon(FontAwesomeIcons.circleExclamation,
                    size: 16, color: AppColors.danger),
                const SizedBox(width: 12),
                const Expanded(
                  child: Text('Không thể tải danh sách tiến độ',
                      style: TextStyle(color: AppColors.danger)),
                ),
                TextButton(
                  onPressed: () =>
                      ref.invalidate(projectProgressListProvider),
                  child: const Text('Thử lại'),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildExpectedDateField(ColorScheme colorScheme) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Ngày dự kiến khởi công',
          style: TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w600,
            color: colorScheme.onSurface,
          ),
        ),
        const SizedBox(height: 8),
        InkWell(
          onTap: _pickExpectedDate,
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            decoration: BoxDecoration(
              color: colorScheme.surface,
              border: Border.all(color: colorScheme.surfaceContainerHighest),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  _expectedStartDate != null
                      ? '${_expectedStartDate!.day.toString().padLeft(2, '0')}/${_expectedStartDate!.month.toString().padLeft(2, '0')}/${_expectedStartDate!.year}'
                      : 'Chọn ngày',
                  style: TextStyle(
                    color: _expectedStartDate != null
                        ? colorScheme.onSurface
                        : colorScheme.onSurfaceVariant,
                  ),
                ),
                FaIcon(
                  FontAwesomeIcons.calendar,
                  size: 16,
                  color: colorScheme.onSurfaceVariant,
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildFileItem(File file, int index, ColorScheme colorScheme) {
    final fileName = file.path.split('/').last;
    final fileSizeInBytes = file.lengthSync();
    final fileSizeInMB = (fileSizeInBytes / (1024 * 1024)).toStringAsFixed(2);

    // Get upload state for this file
    final uploadStates = ref.watch(uploadProjectFilesProvider);
    final isUploading = index < uploadStates.length && uploadStates[index].isUploading;
    final isUploaded = index < uploadStates.length && uploadStates[index].isUploaded;
    final hasError = index < uploadStates.length && uploadStates[index].error != null;

    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: colorScheme.surfaceContainerLowest,
        border: Border.all(
          color: hasError
              ? AppColors.danger
              : isUploaded
                  ? AppColors.success
                  : colorScheme.surfaceContainerHighest,
        ),
        borderRadius: BorderRadius.circular(6),
      ),
      child: Row(
        children: [
          // Image with upload overlay
          Stack(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(4),
                child: Image.file(
                  file,
                  width: 48,
                  height: 48,
                  fit: BoxFit.cover,
                  errorBuilder: (context, error, stackTrace) {
                    return Container(
                      width: 48,
                      height: 48,
                      color: colorScheme.surfaceContainerHighest,
                      child: FaIcon(
                        FontAwesomeIcons.image,
                        size: 24,
                        color: colorScheme.onSurfaceVariant,
                      ),
                    );
                  },
                ),
              ),
              // Uploading overlay
              if (isUploading)
                Positioned.fill(
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.black.withValues(alpha: 0.5),
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: const Center(
                      child: SizedBox(
                        width: 24,
                        height: 24,
                        child: CustomLoadingIndicator(color: Colors.white, size: 20),
                      ),
                    ),
                  ),
                ),
              // Uploaded checkmark overlay
              if (isUploaded)
                Positioned.fill(
                  child: Container(
                    decoration: BoxDecoration(
                      color: AppColors.success.withValues(alpha: 0.7),
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: const Center(
                      child: FaIcon(
                        FontAwesomeIcons.check,
                        size: 20,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
            ],
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  fileName,
                  style: TextStyle(
                    fontWeight: FontWeight.w500,
                    color: colorScheme.onSurface,
                  ),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
                const SizedBox(height: 2),
                Text(
                  isUploading
                      ? 'Đang tải lên...'
                      : isUploaded
                          ? 'Đã tải lên'
                          : hasError
                              ? 'Lỗi tải lên'
                              : '${fileSizeInMB}MB',
                  style: TextStyle(
                    fontSize: 12,
                    color: hasError
                        ? AppColors.danger
                        : isUploaded
                            ? AppColors.success
                            : colorScheme.onSurfaceVariant,
                  ),
                ),
              ],
            ),
          ),
          // Only show remove button when not uploading
          if (!_isSubmitting)
            IconButton(
              icon: const FaIcon(
                FontAwesomeIcons.xmark,
                size: 16,
                color: AppColors.danger,
              ),
              onPressed: () {
                setState(() {
                  _uploadedFiles.removeAt(index);
                });
              },
            ),
        ],
      ),
    );
  }

  Widget _buildExistingFileItem(ProjectFile file, int index, ColorScheme colorScheme) {
    final fileName = file.fileUrl.split('/').last;
    final isDeleting = _deletingFileId == file.id;

    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: colorScheme.surfaceContainerLowest,
        border: Border.all(
          color: isDeleting ? colorScheme.onSurfaceVariant : AppColors.success,
        ),
        borderRadius: BorderRadius.circular(6),
      ),
      child: Row(
        children: [
          // Network image with delete overlay
          Stack(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(4),
                child: CachedNetworkImage(
                  imageUrl: file.fileUrl,
                  width: 48,
                  height: 48,
                  fit: BoxFit.cover,
                  placeholder: (context, url) => Container(
                    width: 48,
                    height: 48,
                    color: colorScheme.surfaceContainerHighest,
                    child: Center(
                      child: SizedBox(
                        width: 16,
                        height: 16,
                        child: CustomLoadingIndicator(color: colorScheme.primary, size: 20),
                      ),
                    ),
                  ),
                  errorWidget: (context, url, error) => Container(
                    width: 48,
                    height: 48,
                    color: colorScheme.surfaceContainerHighest,
                    child: Center(
                      child: FaIcon(
                        FontAwesomeIcons.image,
                        size: 24,
                        color: colorScheme.onSurfaceVariant,
                      ),
                    ),
                  ),
                ),
              ),
              // Deleting overlay
              if (isDeleting)
                Positioned.fill(
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.black.withValues(alpha: 0.5),
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: const Center(
                      child: SizedBox(
                        width: 24,
                        height: 24,
                        child: CustomLoadingIndicator(color: Colors.white, size: 20),
                      ),
                    ),
                  ),
                ),
            ],
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  fileName,
                  style: TextStyle(
                    fontWeight: FontWeight.w500,
                    color: isDeleting ? colorScheme.onSurfaceVariant : colorScheme.onSurface,
                  ),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
                const SizedBox(height: 2),
                Text(
                  isDeleting ? 'Đang xóa...' : 'Đã tải lên',
                  style: TextStyle(
                    fontSize: 12,
                    color: isDeleting ? colorScheme.onSurfaceVariant : AppColors.success,
                  ),
                ),
              ],
            ),
          ),
          // Delete button or checkmark
          if (!_isSubmitting && !isDeleting)
            IconButton(
              icon: const FaIcon(
                FontAwesomeIcons.trash,
                size: 16,
                color: AppColors.danger,
              ),
              onPressed: () => _showDeleteConfirmDialog(file),
              tooltip: 'Xóa ảnh',
            )
          else if (!isDeleting)
            const FaIcon(
              FontAwesomeIcons.circleCheck,
              size: 16,
              color: AppColors.success,
            ),
        ],
      ),
    );
  }

  /// Show confirmation dialog before deleting an existing file
  Future<void> _showDeleteConfirmDialog(ProjectFile file) async {
    final fileName = file.fileUrl.split('/').last;
    final colorScheme = Theme.of(context).colorScheme;

    final confirmed = await showDialog<bool>(
      context: context,
      builder: (context) => AlertDialog(
        title: const Row(
          children: [
            FaIcon(
              FontAwesomeIcons.triangleExclamation,
              color: AppColors.danger,
              size: 20,
            ),
            SizedBox(width: 12),
            Text('Xác nhận xóa'),
          ],
        ),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Bạn có chắc chắn muốn xóa ảnh này?'),
            const SizedBox(height: 12),
            Container(
              padding: const EdgeInsets.all(8),
              decoration: BoxDecoration(
                color: colorScheme.surfaceContainerHighest,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Row(
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.circular(4),
                    child: CachedNetworkImage(
                      imageUrl: file.fileUrl,
                      width: 48,
                      height: 48,
                      fit: BoxFit.cover,
                      placeholder: (context, url) => Container(
                        width: 48,
                        height: 48,
                        color: colorScheme.surfaceContainerHighest,
                      ),
                      errorWidget: (context, url, error) => Container(
                        width: 48,
                        height: 48,
                        color: colorScheme.surfaceContainerHighest,
                        child: const Center(child: FaIcon(FontAwesomeIcons.image, size: 20)),
                      ),
                    ),
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: Text(
                      fileName,
                      style: TextStyle(
                        fontSize: 13,
                        color: colorScheme.onSurfaceVariant,
                      ),
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 12),
            const Text(
              'Hành động này không thể hoàn tác.',
              style: TextStyle(
                fontSize: 13,
                color: AppColors.danger,
                fontStyle: FontStyle.italic,
              ),
            ),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context, false),
            child: const Text('Hủy'),
          ),
          ElevatedButton(
            onPressed: () => Navigator.pop(context, true),
            style: ElevatedButton.styleFrom(
              backgroundColor: AppColors.danger,
              foregroundColor: Colors.white,
            ),
            child: const Text('Xóa'),
          ),
        ],
      ),
    );

    if (confirmed == true && mounted) {
      await _deleteExistingFile(file);
    }
  }

  /// Delete an existing file from the project
  Future<void> _deleteExistingFile(ProjectFile file) async {
    if (!isEditing || widget.submission == null) return;

    setState(() => _deletingFileId = file.id);

    try {
      final repository = await ref.read(submissionsRepositoryProvider.future);

      await repository.deleteProjectFile(
        fileId: file.id,
        projectName: widget.submission!.submissionId,
      );

      if (!mounted) return;

      // Remove from local list
      setState(() {
        _existingFiles = _existingFiles.where((f) => f.id != file.id).toList();
        _deletingFileId = null;
      });

      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('Đã xóa ảnh thành công'),
          backgroundColor: AppColors.success,
        ),
      );
    } catch (e) {
      if (mounted) {
        setState(() => _deletingFileId = null);
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Lỗi xóa ảnh: ${e.toString().replaceAll('Exception: ', '')}'),
            backgroundColor: AppColors.danger,
          ),
        );
      }
    }
  }

  Widget _buildSubmitButton(ColorScheme colorScheme) {
    return SizedBox(
      width: double.infinity,
      height: 48,
      child: ElevatedButton(
        onPressed: _isSubmitting ? null : _handleSubmit,
        style: ElevatedButton.styleFrom(
          backgroundColor: colorScheme.primary,
          foregroundColor: Colors.white,
          disabledBackgroundColor: colorScheme.primary.withValues(alpha: 0.6),
          disabledForegroundColor: Colors.white,
          elevation: 0,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
          ),
        ),
        child: _isSubmitting
            ? const SizedBox(
                width: 24,
                height: 24,
                child: CustomLoadingIndicator(color: Colors.white, size: 20),
              )
            : const Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  FaIcon(FontAwesomeIcons.paperPlane, size: 16),
                  SizedBox(width: 8),
                  Text(
                    'Gửi đăng ký',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ],
              ),
      ),
    );
  }

  Future<void> _pickExpectedDate() async {
    final date = await showDatePicker(
      context: context,
      initialDate: _expectedStartDate ?? DateTime.now(),
      firstDate: DateTime.now(),
      lastDate: DateTime.now().add(const Duration(days: 365 * 3)),
    );

    if (date != null) {
      setState(() {
        _expectedStartDate = date;
      });
    }
  }

  Future<void> _pickFiles() async {
    try {
      final ImagePicker picker = ImagePicker();
      final List<XFile> images = await picker.pickMultiImage(
        maxWidth: 1920,
        maxHeight: 1920,
        imageQuality: 85,
      );

      if (images.isNotEmpty) {
        setState(() {
          for (final image in images) {
            _uploadedFiles.add(File(image.path));
          }
        });

        if (mounted) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text('Đã thêm ${images.length} ảnh'),
              duration: const Duration(seconds: 2),
            ),
          );
        }
      }
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Lỗi khi chọn ảnh: $e')),
        );
      }
    }
  }

  Future<void> _handleSubmit() async {
    if (!_formKey.currentState!.validate()) return;

    // Validate progress selection
    if (_selectedProgress == null) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('Vui lòng chọn tiến độ công trình'),
          backgroundColor: AppColors.danger,
        ),
      );
      return;
    }

    final confirmed = await showDialog<bool>(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('Xác nhận'),
        content: Text(
          isEditing
              ? 'Xác nhận cập nhật thông tin dự án?'
              : 'Xác nhận gửi đăng ký công trình?',
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context, false),
            child: const Text('Hủy'),
          ),
          TextButton(
            onPressed: () => Navigator.pop(context, true),
            child: const Text('Xác nhận'),
          ),
        ],
      ),
    );

    if (confirmed != true || !mounted) return;

    setState(() => _isSubmitting = true);

    try {
      // Parse area as double
      final area = double.tryParse(_areaController.text.trim()) ?? 0.0;

      // Create submission request
      // Include name field when editing (for update)
      final request = ProjectSubmissionRequest(
        name: isEditing ? widget.submission!.submissionId : null,
        designedArea: _projectNameController.text.trim(),
        addressOfProject: _addressController.text.trim(),
        projectOwner: _ownerController.text.trim(),
        designFirm: _designUnitController.text.trim().isNotEmpty
            ? _designUnitController.text.trim()
            : null,
        contractionContractor: _constructionUnitController.text.trim().isNotEmpty
            ? _constructionUnitController.text.trim()
            : null,
        designArea: area,
        productsIncludedInTheDesign: _productsController.text.trim(),
        projectProgress: _selectedProgress!.id, // Use ProjectProgress.id (name from API)
        expectedCommencementDate: _expectedStartDate,
        description: _descriptionController.text.trim().isNotEmpty
            ? _descriptionController.text.trim()
            : null,
        requestDate: DateTime.now(),
      );

      // Step 1: Save project and get project name
      final projectName = await ref.read(saveSubmissionProvider.notifier).save(request);

      if (!mounted) return;

      // Step 2: Upload files if any
      if (_uploadedFiles.isNotEmpty) {
        // Initialize upload provider with file paths
        final filePaths = _uploadedFiles.map((f) => f.path).toList();
        ref.read(uploadProjectFilesProvider.notifier).initFiles(filePaths);

        // Upload all files
        await ref.read(uploadProjectFilesProvider.notifier).uploadAll(projectName);
      }

      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text(
              isEditing
                  ? 'Cập nhật dự án thành công!'
                  : 'Đăng ký công trình đã được gửi thành công!\nChúng tôi sẽ xem xét và liên hệ với bạn sớm nhất.',
            ),
            backgroundColor: AppColors.success,
          ),
        );
        Navigator.pop(context, true); // Return true to indicate success
      }
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Lỗi: ${e.toString().replaceAll('Exception: ', '')}'),
            backgroundColor: AppColors.danger,
          ),
        );
      }
    } finally {
      if (mounted) {
        setState(() => _isSubmitting = false);
        // Clear upload state
        ref.read(uploadProjectFilesProvider.notifier).clear();
      }
    }
  }

  void _showInfoDialog() {
    showDialog<void>(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('Hướng dẫn đăng ký'),
        content: const SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                'Đây là nội dung hướng dẫn sử dụng cho tính năng Đăng ký Công trình:',
              ),
              SizedBox(height: 12),
              Text('• Điền đầy đủ thông tin công trình theo yêu cầu'),
              Text('• Upload ảnh minh chứng chất lượng cao'),
              Text('• Mô tả chi tiết sản phẩm đã sử dụng'),
              Text('• Chọn đúng tiến độ hiện tại của công trình'),
              Text('• Kiểm tra kỹ thông tin trước khi gửi'),
            ],
          ),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('Đóng'),
          ),
        ],
      ),
    );
  }
}