import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:krow_domain/krow_domain.dart';

import '../../styles/shifts_styles.dart';
import '../my_shift_card.dart';
import '../shared/empty_state_view.dart';

class FindShiftsTab extends StatefulWidget {
  final List<Shift> availableJobs;

  const FindShiftsTab({
    super.key,
    required this.availableJobs,
  });

  @override
  State<FindShiftsTab> createState() => _FindShiftsTabState();
}

class _FindShiftsTabState extends State<FindShiftsTab> {
  String _searchQuery = '';
  String _jobType = 'all';

  Widget _buildFilterTab(String id, String label) {
    final isSelected = _jobType == id;
    return GestureDetector(
      onTap: () => setState(() => _jobType = id),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        decoration: BoxDecoration(
          color: isSelected ? AppColors.krowBlue : Colors.white,
          borderRadius: BorderRadius.circular(999),
          border: Border.all(
            color: isSelected ? AppColors.krowBlue : const Color(0xFFE2E8F0),
          ),
        ),
        child: Text(
          label,
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w600,
            color: isSelected ? Colors.white : const Color(0xFF64748B),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // Filter logic
    final filteredJobs = widget.availableJobs.where((s) {
      final matchesSearch =
          s.title.toLowerCase().contains(_searchQuery.toLowerCase()) ||
          s.location.toLowerCase().contains(_searchQuery.toLowerCase()) ||
          s.clientName.toLowerCase().contains(_searchQuery.toLowerCase());

      if (!matchesSearch) return false;

      if (_jobType == 'all') return true;
      if (_jobType == 'one-day') {
        return s.durationDays == null || s.durationDays! <= 1;
      }
      if (_jobType == 'multi-day')
        return s.durationDays != null && s.durationDays! > 1;
      return true;
    }).toList();

    return Column(
      children: [
        // Search and Filters
        Container(
          color: Colors.white,
          padding: const EdgeInsets.fromLTRB(20, 16, 20, 16),
          child: Column(
            children: [
              // Search Bar
              Row(
                children: [
                  Expanded(
                    child: Container(
                      height: 48,
                      padding: const EdgeInsets.symmetric(horizontal: 12),
                      decoration: BoxDecoration(
                        color: const Color(0xFFF8FAFC),
                        borderRadius: BorderRadius.circular(12),
                        border: Border.all(
                          color: const Color(0xFFE2E8F0),
                        ),
                      ),
                      child: Row(
                        children: [
                          const Icon(
                            UiIcons.search,
                            size: 20,
                            color: Color(0xFF94A3B8),
                          ),
                          const SizedBox(width: 10),
                          Expanded(
                            child: TextField(
                              onChanged: (v) =>
                                  setState(() => _searchQuery = v),
                              decoration: const InputDecoration(
                                border: InputBorder.none,
                                hintText: "Search jobs, location...",
                                hintStyle: TextStyle(
                                  color: Color(0xFF94A3B8),
                                  fontSize: 14,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  const SizedBox(width: 8),
                  Container(
                    height: 48,
                    width: 48,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(12),
                      border: Border.all(
                        color: const Color(0xFFE2E8F0),
                      ),
                    ),
                    child: const Icon(
                      UiIcons.filter,
                      size: 18,
                      color: Color(0xFF64748B),
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 16),
              // Filter Tabs
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: [
                    _buildFilterTab('all', 'All Jobs'),
                    const SizedBox(width: 8),
                    _buildFilterTab('one-day', 'One Day'),
                    const SizedBox(width: 8),
                    _buildFilterTab('multi-day', 'Multi-Day'),
                    const SizedBox(width: 8),
                    _buildFilterTab('long-term', 'Long Term'),
                  ],
                ),
              ),
            ],
          ),
        ),

        Expanded(
          child: filteredJobs.isEmpty
              ? EmptyStateView(
                  icon: UiIcons.search,
                  title: "No jobs available",
                  subtitle: "Check back later",
                )
              : SingleChildScrollView(
                  padding: const EdgeInsets.symmetric(horizontal: 20),
                  child: Column(
                    children: [
                      const SizedBox(height: 20),
                      ...filteredJobs.map(
                        (shift) => Padding(
                          padding: const EdgeInsets.only(bottom: 12),
                          child: MyShiftCard(
                            shift: shift,
                          ),
                        ),
                      ),
                      const SizedBox(height: 40),
                    ],
                  ),
                ),
        ),
      ],
    );
  }
}
