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



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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Header
              Row(
                children: [
                  CircleAvatar(
                    radius: 20,
                    backgroundColor: const Color(0xffF95F62),
                    child: const Icon(Icons.arrow_back, color: Colors.white),
                  ),
                  const SizedBox(width: 12),
                  Text(
                    "Selected Time Slot",
                    style: GoogleFonts.poppins(
                      fontWeight: FontWeight.w600,
                      fontSize: 22,
                    ),
                  ),
                ],
              ),
              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", true),
                  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
              _sectionHeader("Capacity Used", true),
              const SizedBox(height: 8),
              Container(
                padding:
                const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
                decoration: BoxDecoration(
                  color: const Color(0xffF6F6F6),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Column(
                  children: [
                    Row(
                      children: [
                        const Icon(Icons.group,
                            size: 18, color: Colors.green),
                        const SizedBox(width: 6),
                        Text(
                          "45/50",
                          style: GoogleFonts.poppins(
                              fontWeight: FontWeight.w600,
                              fontSize: 13,
                              color: Colors.black87),
                        ),
                        const Spacer(),
                        Text(
                          "Available",
                          style: GoogleFonts.poppins(
                              color: Colors.green,
                              fontSize: 13,
                              fontWeight: FontWeight.w500),
                        ),
                      ],
                    ),
                    const SizedBox(height: 8),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(8),
                      child: LinearProgressIndicator(
                        value: 45 / 50,
                        backgroundColor: const Color(0xffF9E7E1),
                        valueColor: const AlwaysStoppedAnimation(
                            Color(0xffF95F62)),
                        minHeight: 10,
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 20),

              // 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),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 40),

              // Save button
              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(
      children: [
        Text(
          title,
          style: GoogleFonts.poppins(
              fontWeight: FontWeight.w700,
              fontSize: 16,
              color: Colors.black),
        ),
        if (editable)
          const Padding(
            padding: EdgeInsets.only(left: 6),
            child: Icon(Icons.edit, color: Color(0xffF95F62), size: 16),
          ),
      ],
    );
  }

  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: [
          const Icon(Icons.access_time, color: Color(0xffF95F62), size: 18),
          const SizedBox(width: 10),
          Text(
            time,
            style: GoogleFonts.poppins(fontSize: 14, color: Colors.black87),
          ),
          const Spacer(),
          const Icon(Icons.edit_outlined, color: Colors.black54, size: 18),
        ],
      ),
    );
  }
}
