doormilxpress_astryx/src/pages/TalentPool.jsx

import React, { useState } from 'react';
import { useWorkerProfiles } from '@/lib/krowHooks';
import TalentPoolCard from '@/components/krow/TalentPoolCard';
import TalentDetailModal from '@/components/krow/TalentDetailModal';
import MessageCandidateModal from '@/components/krow/MessageCandidateModal';
import { Users } from 'lucide-react';

export default function TalentPool() {
  const { data: profiles = [], isLoading } = useWorkerProfiles();
  const [search, setSearch] = useState('');
  const [scoreFilter, setScoreFilter] = useState('all');
  const [contactProfile, setContactProfile] = useState(null);
  const [viewProfile, setViewProfile] = useState(null);

  const filtered = profiles.filter((p) => {
    const q = search.toLowerCase();
    const matchesSearch = !search ||
      p.full_name?.toLowerCase().includes(q) ||
      p.email?.toLowerCase().includes(q) ||
      (p.skills || []).some((s) => s.toLowerCase().includes(q)) ||
      p.desired_position?.toLowerCase().includes(q) ||
      p.current_position?.toLowerCase().includes(q);
    const score = p.krow_score || 0;
    const matchesScore =
      scoreFilter === 'all' ||
      (scoreFilter === 'elite' && score >= 90) ||
      (scoreFilter === 'excellent' && score >= 75 && score < 90) ||
      (scoreFilter === 'solid' && score >= 60 && score < 75) ||
      (scoreFilter === 'building' && score > 0 && score < 60);
    return matchesSearch && matchesScore;
  });

  const bandCounts = {
    elite: profiles.filter((p) => (p.krow_score || 0) >= 90).length,
    excellent: profiles.filter((p) => (p.krow_score || 0) >= 75 && (p.krow_score || 0) < 90).length,
    solid: profiles.filter((p) => (p.krow_score || 0) >= 60 && (p.krow_score || 0) < 75).length,
    building: profiles.filter((p) => (p.krow_score || 0) > 0 && (p.krow_score || 0) < 60).length,
  };

  const contactApp = contactProfile
    ? { applicant_name: contactProfile.full_name, email: contactProfile.email, phone: contactProfile.phone }
    : null;

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="w-9 h-9 rounded-xl bg-[#EEF3FE] flex items-center justify-center">
            <Users className="w-5 h-5 text-[#0838E0]" />
          </div>
          <div>
            <h1 className="text-[22px] font-bold text-[#111827]">Talent Pool</h1>
            <p className="text-[12px] text-[#6B7280]">Browse all KROW talent and contact them directly</p>
          </div>
        </div>
        <span className="text-[13px] text-[#6B7280]">{profiles.length} talents</span>
      </div>

      {/* Band summary */}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
        {[
          { key: 'elite', label: 'Elite', color: '#0838E0' },
          { key: 'excellent', label: 'Excellent', color: '#16A34A' },
          { key: 'solid', label: 'Solid', color: '#2563EB' },
          { key: 'building', label: 'Building', color: '#D97706' },
        ].map((b) => (
          <div key={b.key} className="bg-white border border-[#E5E7EB] rounded-xl p-3">
            <div className="flex items-center gap-2">
              <span className="w-2 h-2 rounded-full" style={{ backgroundColor: b.color }} />
              <span className="text-[11px] text-[#6B7280] font-medium">{b.label}</span>
            </div>
            <p className="text-[22px] font-bold text-[#111827] mt-1">{bandCounts[b.key]}</p>
          </div>
        ))}
      </div>

      {/* Filters */}
      <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
        <input
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder="Search by name, skill, or desired role..."
          className="flex-1 h-10 px-4 rounded-lg border border-[#E5E7EB] bg-white text-[13px] focus:border-[#0838E0] focus:outline-none"
        />
        <select
          value={scoreFilter}
          onChange={(e) => setScoreFilter(e.target.value)}
          className="h-10 px-4 rounded-lg border border-[#E5E7EB] bg-white text-[13px] focus:border-[#0838E0] focus:outline-none"
        >
          <option value="all">All Scores</option>
          <option value="elite">Elite (90+)</option>
          <option value="excellent">Excellent (75-89)</option>
          <option value="solid">Solid (60-74)</option>
          <option value="building">Building (1-59)</option>
        </select>
      </div>

      {/* List */}
      {isLoading ? (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          {[...Array(6)].map((_, i) => <div key={i} className="h-36 bg-white border border-[#E5E7EB] rounded-xl animate-pulse" />)}
        </div>
      ) : filtered.length === 0 ? (
        <div className="text-center py-16">
          <p className="text-[14px] text-[#6B7280]">No talent matches your filters</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          {filtered.map((p) => (
            <TalentPoolCard key={p.id} profile={p} onContact={setContactProfile} onView={setViewProfile} />
          ))}
        </div>
      )}

      {viewProfile && (
        <TalentDetailModal
          open={true}
          onClose={() => setViewProfile(null)}
          profile={viewProfile}
          onContact={(profile) => { setViewProfile(null); setContactProfile(profile); }}
        />
      )}

      {contactApp && (
        <MessageCandidateModal open={true} onClose={() => setContactProfile(null)} application={contactApp} />
      )}
    </div>
  );
}