import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:get/get.dart';
import 'package:taxglide/consts/app_asstes.dart';
import 'package:taxglide/controller/api_contoller.dart';

class EmployeeProfileList extends ConsumerStatefulWidget {
  const EmployeeProfileList({super.key});

  @override
  ConsumerState<EmployeeProfileList> createState() =>
      _EmployeeProfileListState();
}

class _EmployeeProfileListState extends ConsumerState<EmployeeProfileList> {
  String yesNo(dynamic value) {
    return value == 1 ? "Yes" : "No";
  }

  String statusText(dynamic value) {
    return value == 1 ? "Active" : "Inactive";
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final profileAsync = ref.watch(employeeProfileProvider);

    return Scaffold(
      body: Container(
        height: size.height,
        width: size.width,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(AppAssets.backgroundimages),
            fit: BoxFit.cover,
          ),
        ),
        child: SafeArea(
          child: profileAsync.when(
            data: (profile) {
              final data = profile.data;

              if (data == null) {
                return const Center(
                  child: Text(
                    "No profile data found",
                    style: TextStyle(color: Colors.white),
                  ),
                );
              }

              return SingleChildScrollView(
                padding: const EdgeInsets.symmetric(
                  horizontal: 20,
                  vertical: 20,
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    /// ---------------- HEADER ----------------
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 21),
                      child: SizedBox(
                        height: 50,
                        width: double.infinity,
                        child: Stack(
                          alignment: Alignment.center,
                          children: [
                            const Text(
                              "KYC Details",
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontFamily: "Gilroy",
                                fontWeight: FontWeight
                                    .w600, // equivalent to 400 (Normal)
                                fontStyle: FontStyle.normal,
                                fontSize: 24,
                                height: 1.3, // line-height: 130%
                                letterSpacing:
                                    0.04 * 24, // 4% of font size = 0.96px
                                color: Color(0xFF111827), // background: #111827
                              ),
                            ),

                            Positioned(
                              left: 0,
                              child: GestureDetector(
                                onTap: () => Get.back(),
                                child: const Icon(Icons.arrow_back_ios_rounded),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    const SizedBox(height: 20),

                    /// ---------------- CARD ----------------
                    Container(
                      width: double.infinity,
                      padding: const EdgeInsets.all(18),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(14),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black.withOpacity(0.1),
                            blurRadius: 6,
                            offset: const Offset(0, 3),
                          ),
                        ],
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const Text(
                            "Personal Details",
                            style: TextStyle(
                              fontFamily: "Gilroy",
                              fontSize: 20,
                              color: Color(0xFF111827),
                            ),
                          ),
                          const SizedBox(height: 25),

                          _buildDetailRow("Name : ", data.name),
                          const SizedBox(height: 24),

                          _buildDetailRow("Mobile : ", data.mobile),
                          const SizedBox(height: 24),

                          _buildDetailRow("Email : ", data.email),
                          const SizedBox(height: 24),

                          _buildDetailRow(
                            "Company Name : ",
                            data.company?.companyName ?? "N/A",
                          ),
                          const SizedBox(height: 24),

                          _buildDetailRow(
                            "Service : ",
                            yesNo(data.createService),
                          ),
                          const SizedBox(height: 24),

                          _buildDetailRow("Status : ", statusText(data.status)),
                          const SizedBox(height: 24),

                          _buildDetailRow(
                            "General Chat : ",
                            yesNo(data.generalChat),
                          ),
                        ],
                      ),
                    ),

                    const SizedBox(height: 30),

                    /// ---------------- COMPANY LOGO ----------------
                    if (data.company?.companyLogo != null)
                      GridView.count(
                        crossAxisCount: 2,
                        crossAxisSpacing: 15,
                        mainAxisSpacing: 15,
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        children: [
                          _buildImageBox(
                            "Company Logo",
                            data.company!.companyLogo!,
                          ),
                        ],
                      ),

                    const SizedBox(height: 40),
                  ],
                ),
              );
            },
            loading: () => const Center(
              child: CircularProgressIndicator(color: Colors.white),
            ),
            error: (e, _) => Center(
              child: Text(
                "Error loading profile: $e",
                style: const TextStyle(color: Colors.redAccent),
              ),
            ),
          ),
        ),
      ),
    );
  }

  /// ---------------- TEXT ROW ----------------
  Widget _buildDetailRow(String title, String value) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: const TextStyle(
            fontFamily: "Gilroy",
            fontWeight: FontWeight.w600,
            fontSize: 14,
            height: 1.3,
            letterSpacing: 0.64,
            color: Colors.black87,
          ),
        ),
        Flexible(
          child: Text(
            value,
            softWrap: true,
            overflow: TextOverflow.visible,
            style: const TextStyle(
              fontFamily: "Gilroy",
              fontWeight: FontWeight.w400,
              fontSize: 14,
              height: 1.3,
              letterSpacing: 0.64,
              color: Color(0xFF111827),
            ),
          ),
        ),
      ],
    );
  }

  /// ---------------- IMAGE BOX ----------------
  Widget _buildImageBox(String label, String imageUrl) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: Colors.grey.shade300),
      ),
      child: Column(
        children: [
          const SizedBox(height: 10),
          Text(
            label,
            style: const TextStyle(fontWeight: FontWeight.w600, fontSize: 13),
          ),
          const SizedBox(height: 10),
          Expanded(
            child: Image.network(
              imageUrl,
              fit: BoxFit.contain,
              errorBuilder: (_, __, ___) => const Icon(Icons.broken_image),
            ),
          ),
          const SizedBox(height: 10),
        ],
      ),
    );
  }
}
