import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:provider/provider.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/view_models/final_completion_of_documents_view_model.dart';
import 'package:tm_app/views/final_completion_of_documents/strings/final_completion_of_documents_strings.dart';
import 'package:tm_app/views/final_completion_of_documents/widgets/comment_box.dart';
import 'package:tm_app/views/login/widgets/widgets.dart';
import 'package:tm_app/views/shared/desktop_navigation_widget.dart';
import 'package:tm_app/views/shared/tablet_desktop_appbar.dart';

import '../../shared/main_drop_down.dart';

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

  @override
  Widget build(BuildContext context) {
    SizeConfig.init(context);
    return Scaffold(
      body: Consumer<FinalCompletionOfDocumentsViewModel>(
        builder:
            (context, viewModel, child) => SafeArea(
              child: Column(
                children: [
                  const DesktopNavigationWidget(currentIndex: 1),
                  const SizedBox(height: 64.0),
                  Expanded(
                    child: SizedBox(
                      width: 740,
                      child: SingleChildScrollView(
                        child: Column(
                          children: [
                            const TabletDesktopAppbar(
                              title:
                                  FinalCompletionOfDocumentsStrings
                                      .completionOfDocuments,
                            ),
                            SizedBox(height: 32.0.h()),
              
                            const SizedBox(height: 32.0),
                            const CommentBox(),
                            const SizedBox(height: 32.0),
                            FormCard(viewModel: viewModel),
                            const SizedBox(height: 40.0),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                BaseButton(
                                  isEnabled: true,
                                  onPressed: () {},
                                  width: 176,
                                  backgroundColor: AppColors.primary10,
                                  textColor: AppColors.mainBlue,
                                  text: FinalCompletionOfDocumentsStrings.back,
                                ),
                                const SizedBox(width: 16.0),
                                BaseButton(
                                  isEnabled: true,
                                  onPressed: () {},
                                  width: 176,
                                  text: FinalCompletionOfDocumentsStrings.next,
                                ),
                              ],
                            ),
                            const SizedBox(height: 35.0),
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
      ),
    );
  }
}

class FormCard extends StatelessWidget {
  const FormCard({required this.viewModel, super.key});
  final FinalCompletionOfDocumentsViewModel viewModel;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4),
        border: Border.all(color: AppColors.borderColor),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: double.infinity,
            height: 64.0,
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(4),
              border: Border.all(color: AppColors.borderColor),
            ),
            alignment: AlignmentDirectional.centerStart,
            child: Container(
              width: 118,
              height: 32,
              decoration: BoxDecoration(
                color: AppColors.yellow3,
                borderRadius: BorderRadius.circular(8),
              ),
              alignment: Alignment.center,
              child: const Text(
                '50% Completed',
                style: TextStyle(color: AppColors.yellow4),
              ),
            ),
          ),
          const SizedBox(height: 48.0),
          Text(
            FinalCompletionOfDocumentsStrings.numberOfServersListedTitle,
            style: TextStyle(
              fontSize: 16.0,
              fontWeight: FontWeight.w400,
              color: AppColors.grey60,
            ),
          ),
          const SizedBox(height: 12.0),
          Text(
            '12 servers across 2 data centers',
            style: TextStyle(
              fontSize: 16.0,
              fontWeight: FontWeight.w400,
              color: AppColors.grey80,
            ),
          ),
          const SizedBox(height: 24),
          Divider(color: AppColors.borderColor),
          const SizedBox(height: 24),
          Text(
            FinalCompletionOfDocumentsStrings
                .technicalTeamOrganizationChartUploadedTitle,
            style: TextStyle(
              fontSize: 16.0,
              fontWeight: FontWeight.w400,
              color: AppColors.grey60,
            ),
          ),
          const SizedBox(height: 12.0),
          Text(
            'PDF submitted with full team roles and structure',
            style: TextStyle(
              fontSize: 16.0,
              fontWeight: FontWeight.w400,
              color: AppColors.grey80,
            ),
          ),
          const SizedBox(height: 24),
          Divider(color: AppColors.borderColor),
          const SizedBox(height: 48),
          _titleDropDownRow(
            text:
                FinalCompletionOfDocumentsStrings
                    .describeInfrastructureCapabilitiestitle,
          ),
          const SizedBox(height: 16),
          _uploadFileCard(viewModel: viewModel),
          const SizedBox(height: 40),
          _titleDropDownRow(
            text:
                FinalCompletionOfDocumentsStrings
                    .uploadTechnicalTeamOrgChartTitle,
          ),
          const SizedBox(height: 16),
          _describeYourTeamTextField(),
          const SizedBox(height: 48),
          _titleDropDownRow(
            text:
                FinalCompletionOfDocumentsStrings
                    .noCertificationInISO27001Title,
          ),
          const SizedBox(height: 16),
          _uploadFileCard(viewModel: viewModel),
          const SizedBox(height: 48),
          _titleDropDownRow(
            text:
                FinalCompletionOfDocumentsStrings
                    .uploadCompletionCertificateTitle,
          ),
          const SizedBox(height: 16),
          _uploadFileCard(viewModel: viewModel),
        ],
      ),
    );
  }

  Widget _describeYourTeamTextField() {
    return TextFormField(
      maxLines: 5,
      decoration: InputDecoration(
        filled: true,
        fillColor: AppColors.grey0,
        hintText: FinalCompletionOfDocumentsStrings.describeYourTeamHint,
        hintStyle: TextStyle(
          fontSize: 12.0,
          fontWeight: FontWeight.w400,
          color: AppColors.grey60,
        ),
        border: OutlineInputBorder(
          borderSide: const BorderSide(color: AppColors.secondaryborder2),
          borderRadius: BorderRadius.circular(12),
        ),
        enabledBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: AppColors.secondaryborder2),
          borderRadius: BorderRadius.circular(12),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: AppColors.secondaryborder2),
          borderRadius: BorderRadius.circular(12),
        ),
      ),
    );
  }

  Widget _uploadFileCard({
    required FinalCompletionOfDocumentsViewModel viewModel,
  }) {
    return InkWell(
      onTap: () => viewModel.pickFile(),
      child: Container(
        width: double.infinity,
        height: 140,
        decoration: BoxDecoration(color: AppColors.grey0),
        child: DottedBorder(
          options: const RoundedRectDottedBorderOptions(
            radius: Radius.circular(12),
            dashPattern: [4, 4],
            strokeWidth: 1,
            color: AppColors.secondaryborder,
            padding: EdgeInsets.all(16),
          ),

          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SvgPicture.asset(AssetsManager.uploadFile),
              const SizedBox(height: 12),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text(
                    FinalCompletionOfDocumentsStrings.chooseFile,
                    style: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                      color: AppColors.mainBlue,
                    ),
                  ),
                  const SizedBox(width: 4),
                  Text(
                    FinalCompletionOfDocumentsStrings.toUpload,
                    style: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                      color: AppColors.grey60,
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 8),
              Text(
                FinalCompletionOfDocumentsStrings.selectZipOrEtcTitle,
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w400,
                  color: AppColors.grey60,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _titleDropDownRow({required String text}) {
    return Row(
      children: [
        SvgPicture.asset(AssetsManager.dangerFill),
        const SizedBox(width: 8),
        Text(
          text,
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w400,
            color: AppColors.grey60,
          ),
        ),
        const Spacer(),
        MainDropDown(
          text: FinalCompletionOfDocumentsStrings.statusTitle,
          items: const [
            FinalCompletionOfDocumentsStrings.statusWaitingForOthers,
            FinalCompletionOfDocumentsStrings.statusToDo,
            FinalCompletionOfDocumentsStrings.statusDone,
          ],
          onSelect: (String item) {},
        ),
      ],
    );
  }
}
