import type { JobPosting } from '@/types/entities';
import React, { useState, useEffect } from 'react';
import { useWorkerProfiles, useMatchTalentForJob } from '@/lib/krowHooks';
import { Sparkles, Loader2, Briefcase, Star } from 'lucide-react';
import { Image } from '@/components/ui/image';
import { getScoreBand, toFICO } from '@/lib/talentHome';
import TalentDetailModal from '@/components/krow/TalentDetailModal';
import { useTranslation } from 'react-i18next';

const PORTRAIT_PHOTOS = [
  'photo-1500648767731-7d3514ad8b31',
  'photo-1531123897727-8f129e1688ce',
  'photo-1573496359142-b8d87734a5a2',
  'photo-1487412720507-e7ab37603c6f',
  'photo-1502685104226-ee3a97a2f2c8',
  'photo-1544005313-94ddf0286df2',
  'photo-1494790108377-be9c29b29330',
  'photo-1438761681033-6461ffad8d80',
  'photo-1517841905240-472988babdf9',
  'photo-1463453091185-61582044d556',
];

function getPortraitSeed(name) {
  let h = 0;
  for (let i = 0; i < (name || '').length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
  return PORTRAIT_PHOTOS[h % PORTRAIT_PHOTOS.length];
}

const RECO_STYLES = {
  Hire: 'bg-[#16A34A] text-white',
  Interview: 'bg-[#0838E0] text-white',
  Maybe: 'bg-[#D97706] text-white',
  Pass: 'bg-[#9CA3AF] text-white',
};

interface SuggestedTalentProps {
  job: JobPosting;
  onContact?: (...args: any[]) => void;
  onSchedule?: (...args: any[]) => void;
  onHire?: (...args: any[]) => void;
}

export default function SuggestedTalent({ job, onContact, onSchedule, onHire }: SuggestedTalentProps) {
  const { t } = useTranslation();
  const { data: profiles = [] } = useWorkerProfiles();
  const matchTalent = useMatchTalentForJob();
  const [matches, setMatches] = useState([]);
  const [selected, setSelected] = useState(null);

  // Auto-run matching when the job is published and there are profiles
  useEffect(() => {
    if (!job || profiles.length === 0) return;
    if (job.status !== 'active') return;
    let cancelled = false;
    (async () => {
      try {
        const res = await matchTalent.mutateAsync({ job, profiles });
        if (!cancelled && res?.matches) setMatches(res.matches);
      } catch {
        if (!cancelled) setMatches([]);
      }
    })();
    return () => { cancelled = true; };
     
  }, [job?.id, job?.status, profiles.length]);

  const profileById = Object.fromEntries(profiles.map((p) => [p.id, p]));
  const enriched = matches
    .map((m) => ({ ...m, profile: profileById[m.profile_id] }))
    .filter((m) => m.profile)
    .slice(0, 6);

  const runMatch = () => {
    if (profiles.length === 0) return;
    /* KNOWN DEFECT, preserved deliberately — see the commit message: React
       Query's `mutate` returns `void`, so `.then` throws at run time.
       `mutateAsync` is what this means, but swapping it turns a crash into a
       working feature, which is a product change rather than a migration. */
    (matchTalent.mutate({ job, profiles }) as any).then((res) => setMatches(res?.matches || [])).catch(() => setMatches([]));
  };

  return (
    <div className="bg-white border border-[#E5E7EB] rounded-2xl p-6">
      <div className="flex items-center justify-between mb-1">
        <div className="flex items-center gap-2">
          <div className="w-7 h-7 rounded-lg bg-[#EEF3FE] flex items-center justify-center">
            <Sparkles className="w-4 h-4 text-[#0838E0]" />
          </div>
          <h3 className="text-[15px] font-semibold text-[#111827]">{t('suggestedTalent.suggestedTalent')}</h3>
        </div>
        {matches.length > 0 && (
          <button onClick={runMatch} disabled={matchTalent.isPending} className="text-[12px] font-medium text-[#0838E0] hover:underline disabled:opacity-50">
            {matchTalent.isPending ? 'Re-matching…' : 'Re-run match'}
          </button>
        )}
      </div>
      <p className="text-[12px] text-[#6B7280] mb-4">{t('suggestedTalent.dontWaitForApplicationsKrowMatched')}</p>

      {matchTalent.isPending && matches.length === 0 ? (
        <div className="flex items-center justify-center py-10 gap-2 text-[#6B7280]">
          <Loader2 className="w-5 h-5 animate-spin" />
          <span className="text-[13px]">{t('suggestedTalent.matchingTalentFromThePool')}</span>
        </div>
      ) : enriched.length === 0 ? (
        <div className="text-center py-10">
          <p className="text-[13px] text-[#6B7280]">{t('suggestedTalent.noStrongMatchesYetTryWidening')}</p>
        </div>
      ) : (
        <div className="space-y-3">
          {enriched.map((m) => {
            const p = m.profile;
            const band = getScoreBand(p.krow_score || 0);
            return (
              <div key={m.profile_id} className="flex items-start gap-3 p-3 rounded-xl border border-[#E5E7EB] hover:border-[#0838E0] hover:bg-[#FAFBFF] transition-colors cursor-pointer" onClick={() => setSelected(p)}>
                <div className="w-11 h-11 rounded-full bg-[#E5E7EB] overflow-hidden shrink-0">
                  <Image
                    src={p.selfie_url || `https://images.unsplash.com/${getPortraitSeed(p.full_name)}?w=120&h=120&fit=crop&crop=faces`}
                    alt={p.full_name}
                    className="w-full h-full object-cover"
                    fittingType="fill"
                  />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 flex-wrap">
                    <span className="font-semibold text-[#111827] text-[14px] truncate">{p.full_name}</span>
                    <span className={`px-2 py-0.5 rounded-full text-[10px] font-bold ${RECO_STYLES[m.recommendation] || RECO_STYLES.Maybe}`}>{m.recommendation}</span>
                    <span className="px-2 py-0.5 rounded-full text-[10px] font-medium text-white" style={{ backgroundColor: band.color }}>{band.label}</span>
                  </div>
                  <div className="flex items-center gap-3 mt-1 text-[11px] text-[#6B7280] flex-wrap">
                    {(p.desired_position || p.current_position) && (
                      <span className="inline-flex items-center gap-1 font-medium text-[#0838E0]">
                        <Briefcase className="w-3 h-3" />{p.desired_position || p.current_position}
                      </span>
                    )}
                    {p.experience_years > 0 && <span>{p.experience_years}{t('suggestedTalent.yrExp')}</span>}
                    <span className="inline-flex items-center gap-1 text-[#F59E0B] font-medium">
                      <Star className="w-3 h-3 fill-[#F59E0B]" />{t('suggestedTalent.career')} {toFICO(p.krow_score || 0)}
                    </span>
                  </div>
                  {m.reasons?.length > 0 && (
                    <ul className="mt-1.5 text-[11px] text-[#6B7280] list-disc list-inside space-y-0.5">
                      {m.reasons.slice(0, 2).map((r, i) => <li key={i}>{r}</li>)}
                    </ul>
                  )}
                </div>
                <div className="flex flex-col items-center justify-center shrink-0 px-2">
                  <span className="text-[20px] font-bold text-[#0838E0] leading-none">{Math.round(m.match_score)}</span>
                  <span className="text-[9px] text-[#9CA3AF] tracking-wide">MATCH</span>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {selected && (
        <TalentDetailModal
          open={true}
          onClose={() => setSelected(null)}
          profile={selected}
          onContact={(profile) => { setSelected(null); onContact?.(profile); }}
          onSchedule={(profile) => { setSelected(null); onSchedule?.(profile); }}
          onHire={(profile) => { setSelected(null); onHire?.(profile); }}
        />
      )}
    </div>
  );
}