import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'add_time_slot_sheet.dart';



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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  InkWell(
                    onTap: (){
                      Navigator.pop(context);
                    },
                    child: CircleAvatar(
                      radius: 20,
                      backgroundColor: const Color(0xffF95F62),
                      child: const Icon(Icons.arrow_back, color: Colors.white),
                    ),
                  ),

                  Text(
                    "Selected Time Slot",
                    style: GoogleFonts.poppins(
                      fontWeight: FontWeight.w600,
                      fontSize: 32,
                    ),
                  ),
                  SizedBox(width: 3,)
                ],
              ),
              const SizedBox(height: 30),

              // Attraction Name Section
              _sectionHeader("Attraction Name", true),
              const SizedBox(height: 8),
              Container(
                width: double.infinity,
                padding:
                const EdgeInsets.symmetric(horizontal: 14, vertical: 14),
                decoration: BoxDecoration(
                  color: const Color(0xffF6F6F6),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Text(
                  "The Enchanted Garden",
                  style: GoogleFonts.poppins(
                      fontSize: 14, color: Colors.black87),
                ),
              ),
              const SizedBox(height: 20),

              // Time Slots
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  _sectionHeader("Time Slots Available", false),
                  InkWell(
                    onTap: (){
                      showDialog(
                        context: context,
                        barrierColor: Colors.black.withOpacity(0.4),
                        builder: (_) => const AddTimeSlotDialog(),
                      );
                    },
                    child: Container(
                      padding:
                      const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        border: Border.all(color: const Color(0xffF95F62)),
                      ),
                      child: Text(
                        "+ Add timing",
                        style: GoogleFonts.poppins(
                          color: const Color(0xffF95F62),
                          fontWeight: FontWeight.w500,
                          fontSize: 13,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 10),

              _slotTile("1:30pm - 5:30pm"),
              _slotTile("5:30pm - 7:30pm"),
              _slotTile("7:30pm - 10:30pm"),
              const SizedBox(height: 20),

              // Capacity Used

              // Date
              _sectionHeader("Date", true),
              const SizedBox(height: 8),
              Container(
                width: double.infinity,
                padding:
                const EdgeInsets.symmetric(horizontal: 14, vertical: 14),
                decoration: BoxDecoration(
                  color: const Color(0xffF6F6F6),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Row(
                  children: [
                    const Icon(Icons.calendar_today,
                        size: 18, color: Colors.black87),
                    const SizedBox(width: 10),
                    Text(
                      "Sept 15, 2025",
                      style: GoogleFonts.poppins(
                          fontSize: 14, color: Colors.black87),
                    ),
                  ],
                ),
              ),
             Spacer(),
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    backgroundColor: const Color(0xffF95F62),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(16),
                    ),
                    padding: const EdgeInsets.symmetric(vertical: 16),
                  ),
                  child: Text(
                    "Save",
                    style: GoogleFonts.poppins(
                      fontWeight: FontWeight.w600,
                      fontSize: 15,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 12),

              // Remove button
              SizedBox(
                width: double.infinity,
                child: OutlinedButton(
                  onPressed: () {},
                  style: OutlinedButton.styleFrom(
                    padding: const EdgeInsets.symmetric(vertical: 16),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(16),
                    ),
                    side: const BorderSide(color: Color(0xffF95F62), width: 1.5),
                  ),
                  child: Text(
                    "Remove",
                    style: GoogleFonts.poppins(
                      fontWeight: FontWeight.w600,
                      fontSize: 15,
                      color: const Color(0xffF95F62),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _sectionHeader(String title, bool editable) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          title,
          style: GoogleFonts.poppins(
              fontWeight: FontWeight.w700,
              fontSize: 24,
              color: Colors.black),
        ),

        if (editable)
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Image.asset("assets/time/image.png",scale: 4,),
          ),
      ],
    );
  }

  Widget _slotTile(String time) {
    return Container(
      margin: const EdgeInsets.only(bottom: 8),
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
      decoration: BoxDecoration(
        color: const Color(0xffF6F6F6),
        borderRadius: BorderRadius.circular(10),
      ),
      child: Row(
        children: [
          Image.asset("assets/time/mingcute_time-fill.png",scale: 4,),
          const SizedBox(width: 10),
          Text(
            time,
            style: GoogleFonts.poppins(fontSize: 14, color: Colors.black87),
          ),
          const Spacer(),
          Container(
            height: 34,
            width: 54,
            decoration: BoxDecoration(
                color: Color(0xffEBEBEB),
              borderRadius: BorderRadius.circular(6)
            ),

            child: Center(
              child: Row(
                children: [
                  const Spacer(),
                  Text("15",style: TextStyle(color: Color(0xff00B1EE),fontSize: 12,fontWeight: FontWeight.w600),),
                  Text("/50",style: TextStyle(color: Color(0xff000000),fontSize: 12,fontWeight: FontWeight.w600)), const Spacer(),
                ],
              ),
            ),
          ),
          SizedBox(width: 4,),
          Image.asset("assets/time/image.png",scale: 4,color: Color(0xff626262),)
        ],
      ),
    );
  }
}
