import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:tm_app/core/constants/assets.dart';
import 'package:tm_app/core/theme/colors.dart';
import 'package:tm_app/core/utils/size_config.dart';
import 'package:tm_app/views/completion_of_documents/strings/completion_of_documents_string.dart';
import 'package:tm_app/views/shared/base_button.dart';
import 'package:tm_app/views/shared/tender_app_bar.dart';

class CompletionOfDocumentsMobilePage extends StatelessWidget {
  const CompletionOfDocumentsMobilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.backgroundColor,
      appBar: appBar(
        context: context,
        title: CompletionOfDocumentsStrings.completionOfDocuments,
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 16.0.w(), vertical: 12.0.h()),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: double.infinity,
                height: 24.0.h(),
                padding: EdgeInsets.symmetric(horizontal: 8.0.w()),
                decoration: BoxDecoration(
                  color: AppColors.primary20,
                  borderRadius: BorderRadius.circular(4),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      CompletionOfDocumentsStrings.submissionDeadline,
                      style: TextStyle(
                        color: AppColors.textBlue,
                        fontSize: 14.0.sp(),
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    Text(
                      '2025-06-15',
                      style: TextStyle(
                        color: AppColors.grey80,
                        fontSize: 14.0.sp(),
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 12.0.h()),
              Container(
                height: 58.0.h(),
                width: double.infinity,
                padding: EdgeInsets.symmetric(
                  horizontal: 12.0.w(),
                  vertical: 8.0.h(),
                ),
                decoration: BoxDecoration(
                  border: Border.all(color: AppColors.orange10),
                  borderRadius: BorderRadius.circular(8),
                  color: AppColors.orange0,
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Text(
                          'Match with your profile',
                          style: TextStyle(
                            fontSize: 12.0.sp(),
                            color: AppColors.grey80,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                        const Spacer(),
                        Text(
                          '75%',
                          style: TextStyle(
                            fontSize: 12.0.sp(),
                            color: AppColors.cyanTeal,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: 4.0.h()),
                    Row(
                      children: [
                        Expanded(
                          child: LinearProgressIndicator(
                            value: 0.75,
                            backgroundColor: const Color(0xFFE0E0E0),
                            color: AppColors.cyanTeal,
                            minHeight: 6,
                            borderRadius: BorderRadius.circular(10),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              SizedBox(height: 16.0.h()),
              _docCard(
                title: 'Company Registration Certificate',
                subtitle: 'Legal document proving business registration',
                status: 'Completed',
                statusColor: AppColors.green30,
                statusBackgroundColor: AppColors.green10,
                backgroundColor: AppColors.primary10,
                borderSideColor: AppColors.primary20,
              ),
              _docCard(
                title: 'Tax Compliance Certificate',
                subtitle: 'Proof of tax registration and compliance',
                status: 'Completed',
                statusColor: AppColors.green30,
                statusBackgroundColor: AppColors.green10,
                backgroundColor: AppColors.primary10,
                borderSideColor: AppColors.primary30,
              ),
              _docCard(
                title: 'Technical Proposal',
                subtitle: 'Detailed technical solution for the tender',
                status: 'Incomplete',
                statusColor: AppColors.red20,
                statusBackgroundColor: AppColors.red10,
                backgroundColor: AppColors.red0,
                tag: 'Self apply',
                tagColor: AppColors.green30,
                borderSideColor: AppColors.red10,
                tagBackgroundColor: AppColors.green20,
              ),
              _docCard(
                title: 'Financial Proposal',
                subtitle: 'Detailed cost breakdown and pricing',
                status: 'Incomplete',
                statusColor: AppColors.red20,
                statusBackgroundColor: AppColors.red10,
                backgroundColor: AppColors.red0,
                tag: 'Partnership',
                tagColor: AppColors.purple,
                borderSideColor: AppColors.red10,
                tagBackgroundColor: AppColors.purpleLight,
              ),
              _docCard(
                title: 'Financial Proposal',
                subtitle: 'Detailed cost breakdown and pricing',
                status: 'Incomplete',
                statusColor: AppColors.red20,
                statusBackgroundColor: AppColors.red10,
                backgroundColor: AppColors.red0,
                borderSideColor: AppColors.red10,
              ),
              SizedBox(height: 16.0.h()),
        
              Text(
                CompletionOfDocumentsStrings.setDeadline,
                style: TextStyle(
                  fontSize: 16.0.sp(),
                  color: AppColors.grey80,
                  fontWeight: FontWeight.w600,
                ),
              ),
              SizedBox(height: 8.0.h()),
              Container(
                height: 48.0.h(),
                padding: EdgeInsets.symmetric(horizontal: 12.0.w()),
                decoration: BoxDecoration(
                  border: Border.all(color: AppColors.grey40),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '2025/04/10',
                      style: TextStyle(
                        fontSize: 16.0.sp(),
                        fontWeight: FontWeight.w700,
                        color: AppColors.grey60,
                      ),
                    ),
                    SvgPicture.asset(
                      AssetsManager.calendar,
                      height: 24.0.h(),
                      width: 24.0.w(),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 16.0.h()),
        
              Container(
                padding: const EdgeInsets.all(12),
                height: 100.0.h(),
                decoration: BoxDecoration(
                  border: Border.all(color: AppColors.borderColor),
                  borderRadius: BorderRadius.circular(8),
                  color: AppColors.grey0,
                ),
                child: TextField(
                  maxLines: null,
                  decoration: const InputDecoration.collapsed(
                    hintText: CompletionOfDocumentsStrings.note,
                  ),
                  style: TextStyle(
                    fontSize: 16.0.sp(),
                    color: AppColors.grey60,
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ),
              SizedBox(height: 24.0.h()),
              BaseButton(
                isEnabled: true,
                onPressed: () {},
                text: CompletionOfDocumentsStrings.submitForCompletion,
                textColor: AppColors.textBlue,
                backgroundColor: AppColors.primary30,
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _docCard({
    required String title,
    required String subtitle,
    required String status,
    required Color statusColor,
    required Color backgroundColor,
    required Color borderSideColor,
    required Color statusBackgroundColor,
    String? tag,
    Color? tagColor,
    Color? tagBackgroundColor,
  }) {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.only(bottom: 12.0.h()),
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: backgroundColor,
        border: Border(
          left: BorderSide(color: borderSideColor, width: 2.0.w()),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              if (tag != null) ...[
                const Spacer(),
                Container(
                  margin: const EdgeInsets.only(right: 8),
                  height: 32.0.h(),
                  width: 91.0.w(),
                  decoration: BoxDecoration(
                    color: tagBackgroundColor,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Center(
                    child: Text(
                      tag,
                      style: TextStyle(
                        fontSize: 12.0.sp(),
                        fontWeight: FontWeight.w500,
                        color: tagColor,
                      ),
                    ),
                  ),
                ),
              ],
              if (tag == null) const Spacer(),
              Container(
                height: 32.0.h(),
                width: 91.0.w(),
                decoration: BoxDecoration(
                  color: statusBackgroundColor,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Center(
                  child: Text(
                    status,
                    style: TextStyle(
                      fontSize: 12.0.sp(),
                      fontWeight: FontWeight.w500,
                      color: statusColor,
                    ),
                  ),
                ),
              ),
            ],
          ),
          SizedBox(height: 8.0.h()),
          Text(
            title,
            style: TextStyle(
              fontSize: 20.0.sp(),
              fontWeight: FontWeight.w600,
              color: AppColors.grey70,
            ),
          ),
          SizedBox(height: 4.0.h()),
          Text(
            subtitle,
            style: TextStyle(
              fontSize: 16.0.sp(),
              color: AppColors.grey,
              fontWeight: FontWeight.w400,
            ),
          ),
        ],
      ),
    );
  }
}
