/* ============================================================
   Ishga olish (rekruting) — Kanban + intervyu baholash + AI savollar
   FAQAT super admin (Boshliq / General) uchun.
   Logika: "Setoviy Intervyu Baholash" jadvali asosida.
   MUHIM: bu RUBRIC backenddagi src/services/interviewRubric.js bilan
   AYNAN bir xil bo'lishi kerak. O'zgartirilsa — ikkalasini ham yangilang.
   ============================================================ */

const RUBRIC = [
  {
    key: 'tajriba', title: 'Tajriba', weight: 25,
    criteria: [
      { id: '1.1', label: "Setoviy do'konlarda ishlash tajribasi (yillar)", scale: "1=yo'q, 3=2-3 yil, 5=5+ yil" },
      { id: '1.2', label: 'Yirik tarmoqlar bilan ishlagan (Korzinka, Makro, Havas, MaxWay...)', scale: '1=hech qaysi, 3=1-2 ta, 5=3+ tarmoq' },
      { id: '1.3', label: 'FMCG biznesida tajriba', scale: "1=yo'q, 3=2-5 yil, 5=10+ yil" },
      { id: '1.4', label: 'Saqich, konfet, snack kategoriya tajribasi', scale: "1=yo'q, 3=yaqin kategoriya, 5=aynan saqich" },
    ],
  },
  {
    key: 'aloqa', title: 'Aloqa tizimi', weight: 25,
    criteria: [
      { id: '2.1', label: "Setoviy do'kon menejer va buyerlari bilan shaxsiy aloqa", scale: '1=hech kim, 3=2-3 odam, 5=kalit aloqalar bor' },
      { id: '2.2', label: 'Oxirgi 6 oyda muntazam muloqot', scale: "1=yo'q, 3=oylik, 5=haftalik" },
      { id: '2.3', label: 'Hozirgi setoviy sotuv hajmi (oylik raqam ayta oladi)', scale: "1=tajribasi yo'q, 3=o'rta hajm, 5=katta hajm" },
    ],
  },
  {
    key: 'bilim', title: 'Kasbiy bilim', weight: 20,
    criteria: [
      { id: '3.1', label: 'Listing fee: hisoblash va boshqarish', scale: '1=bilmaydi, 5=batafsil tushuntiradi' },
      { id: '3.2', label: 'Bonus va retro farqi', scale: '1=adashtiradi, 5=aniq farqlaydi' },
      { id: '3.3', label: 'Sell-in vs sell-through tushuncha', scale: '1=bilmaydi, 5=ahamiyatini biladi' },
      { id: '3.4', label: "Promo plan tuzish ko'nikmasi", scale: '1=tasodifiy, 5=tartibli rejalashtiradi' },
    ],
  },
  {
    key: 'vaziyat', title: 'Vaziyatlar', weight: 20,
    criteria: [
      { id: '4.1', label: 'Listing fee oshirilsa - reaksiya va muzokara', scale: '1=panika yoki kelishadi, 5=strategik javob' },
      { id: '4.2', label: 'Sotuv tushyapti - tahlil va harakat', scale: '1=hissiy, 5=raqam asosida chuqur tahlil' },
      { id: '4.3', label: 'Raqib joyni egalladi - harakat', scale: '1=hissiy, 5=hisobli yondashuv' },
    ],
  },
  {
    key: 'shaxs', title: 'Shaxsiy fazilatlar', weight: 10,
    criteria: [
      { id: '5.1', label: 'Aniq va ishonchli muloqot', scale: '1=tushuntirolmaydi, 5=ishontiruvchi' },
      { id: '5.2', label: 'Pul motivatsiyasi (asossiz emas)', scale: '1=faqat pul, 5=balanslashgan' },
      { id: '5.3', label: 'Halollik va ish odobi', scale: '1=shubhali, 5=ishonchli' },
    ],
  },
];

// Lavozimlar — har biriga standart intervyu savollari oldindan tayyorlangan.
// Baholash mezonlari (RUBRIC) esa hamma lavozim uchun bir xil.
const POSITIONS = [
  'ROP',
  'Generalniy menejer',
  'Regionalniy menejer',
  'Merchendayzer',
  'Supervayzer',
  'Analitik',
  'Agent',
  'Setoviy menejer',
];

// Har bir lavozim uchun standart intervyu savollari — mezon ID si bo'yicha (1.1, 1.2...).
// "Baholash" tabida har mezon o'rnida shu lavozimga mos savol ko'rsatiladi,
// intervyu oluvchi savolga olingan javobni 1-5 ball bilan baholaydi.
const POSITION_QUESTIONS = {
  'ROP': {
    "1.1": "Necha yildan beri sotuv bo'limini boshqarasiz va hozirgacha qancha xodimlik jamoaga rahbarlik qilgansiz?",
    "1.2": "Qaysi kompaniyalarda va qanday mahsulot kategoriyalari bo'yicha sotuvni boshqargansiz?",
    "1.3": "Eng katta oylik yoki yillik sotuv hajmi qancha bo'lgan va siz unga qanday erishgansiz?",
    "1.4": "Qaysi yirik distribyutor yoki savdo tarmoqlari bilan bevosita ishlagansiz?",
    "2.1": "Past natija ko'rsatayotgan agent bilan qanday suhbat qurasiz? Bir misol keltiring.",
    "2.2": "Distribyutor bilan narx yoki shartlar bo'yicha muzokarani qanday olib borasiz?",
    "2.3": "Yuqori rahbariyatga oylik sotuv hisobotini qanday tayyorlab taqdim etasiz?",
    "3.1": "Oylik va yillik sotuv rejasini (plan) qanday tuzasiz?",
    "3.2": "Qaysi KPI ko'rsatkichlar orqali jamoa samaradorligini o'lchaysiz?",
    "3.3": "Sotuv voronkasini (funnel) va konversiyani qanday tahlil qilasiz?",
    "3.4": "Motivatsiya tizimini (bonus, KPI) qanday qurasiz?",
    "4.1": "Oyning oxirgi haftasi, reja 30% bajarilmagan. Aniq qanday qadamlar tashlaysiz?",
    "4.2": "Asosiy distribyuteringiz raqobatchiga o'tib ketdi. Birinchi navbatda nima qilasiz?",
    "4.3": "Raqobatchi narxni keskin tushirdi. Qanday javob strategiyasini tanlaysiz?",
    "5.1": "Jamoangizni qanday usullar bilan motivatsiya qilasiz?",
    "5.2": "Bosim ostida qabul qilgan eng qiyin qaroringizni ayting.",
    "5.3": "O'z rahbarlik uslubingizni qanday ta'riflaysiz?",
  },
  'Generalniy menejer': {
    "1.1": "Qanday hajmdagi kompaniya yoki bo'limni boshqargansiz - aylanma va xodimlar soni bilan ayting?",
    "1.2": "P&L (foyda-zarar) uchun to'liq mas'ul bo'lganmisiz? Qaysi natijaga erishgansiz?",
    "1.3": "Qaysi bozorlar yoki yo'nalishlarda o'sishni ta'minlagansiz?",
    "1.4": "Boshqargan eng yirik loyihangiz yoki o'zgarishingiz nima edi?",
    "2.1": "Egalar yoki investorlar bilan natijalar haqida qanday muloqot qilasiz?",
    "2.2": "Bo'limlar o'rtasida koordinatsiyani qanday tashkil qilasiz?",
    "2.3": "Yirik mijozlar bilan strategik munosabatni qanday qurasiz?",
    "3.1": "Yillik strategiya va byudjetni qanday bosqichlarda tuzasiz?",
    "3.2": "Qaysi asosiy moliyaviy ko'rsatkichlarni doimiy kuzatasiz?",
    "3.3": "O'sish rejasini qanday raqamlar va tahlil asosida qurasiz?",
    "3.4": "Xarajatlarni optimallashtirishga qanday yondashasiz?",
    "4.1": "Kompaniya foydasi keskin tushdi. Birinchi 3 qadamingiz qanday?",
    "4.2": "Ikki kuchli bo'lim boshlig'i o'rtasida jiddiy nizo bor. Qanday hal qilasiz?",
    "4.3": "Investor qisqa muddatda natija talab qilyapti. Qanday muvozanat saqlaysiz?",
    "5.1": "Strategik qarorda qanchalik tavakkalchisiz - misol bilan?",
    "5.2": "Jamoa va natija o'rtasida muvozanatni qanday saqlaysiz?",
    "5.3": "O'zingizni qanaqa lider deb hisoblaysiz?",
  },
  'Regionalniy menejer': {
    "1.1": "Qaysi hududlarda va qancha vaqt davomida sotuvni boshqargansiz?",
    "1.2": "Nechta distribyutor va do'kon qamrovida ishlagansiz?",
    "1.3": "Hudud bo'yicha qanday sotuv o'sishiga erishgansiz - raqam bilan?",
    "1.4": "Necha nafar supervayzer va agentni boshqargansiz?",
    "2.1": "Hududingizdagi supervayzer va agentlar bilan ishni qanday tashkil qilasiz?",
    "2.2": "Distribyutor bilan kelishmovchilikni qanday hal qilasiz?",
    "2.3": "Markaziy ofisga hudud holatini qanday hisobot qilasiz?",
    "3.1": "Marshrut (route) va qamrovni qanday rejalashtirasiz?",
    "3.2": "Hudud bo'yicha sotuv prognozini qanday qilasiz?",
    "3.3": "Debitorlik (qarzdorlik) nazoratini qanday yuritasiz?",
    "3.4": "Distribyutor zaxirasini (stock) qanday nazorat qilasiz?",
    "4.1": "Hududda reja bajarilmadi. Qanday tahlil qilib harakat boshlaysiz?",
    "4.2": "Distribyutor mahsulotni yetarlicha ko'tarmayapti. Nima qilasiz?",
    "4.3": "Raqobatchi hududingizda kuchaydi. Qanday javob berasiz?",
    "5.1": "Ko'p safar va dala ishiga qanday qaraysiz?",
    "5.2": "Jamoani masofadan qanday nazorat qilasiz?",
    "5.3": "O'zingizni intizomli deb hisoblaysizmi - misol bilan?",
  },
  'Merchendayzer': {
    "1.1": "Qaysi do'kon yoki tarmoqlarda merchendayzer bo'lib ishlagansiz?",
    "1.2": "Kuniga o'rtacha nechta savdo nuqtasiga xizmat ko'rsatgansiz?",
    "1.3": "Qaysi mahsulot kategoriyalari bilan ishlagansiz?",
    "1.4": "Necha yillik merchandayzing tajribangiz bor?",
    "2.1": "Do'kon mudiri javon (polka) joyini bermasa, qanday gaplashasiz?",
    "2.2": "Supervayzeringiz bilan ishni qanday muvofiqlashtirasiz?",
    "2.3": "Do'kon xodimlari bilan qanday til topasiz?",
    "3.1": "Planogramma nima va undan qanday foydalanasiz?",
    "3.2": "POSM materiallarni qayerga va qanday joylashtrasiz?",
    "3.3": "Mahsulot ko'rinishini (vykladka) qanday yaxshilaysiz?",
    "3.4": "Mahsulot muddatini (srok) qanday nazorat qilasiz?",
    "4.1": "Javonda raqobatchi mahsulot sizning joyingizni egalladi. Nima qilasiz?",
    "4.2": "Mahsulot muddati tugayapti. Qanday harakat qilasiz?",
    "4.3": "Do'konda mahsulot tugab qoldi (out of stock). Qanday hal qilasiz?",
    "5.1": "Bir xil ishni har kuni qilishga qanday qaraysiz?",
    "5.2": "Diqqat va tartiblilik sizda qanchalik kuchli?",
    "5.3": "Ishingizni o'z vaqtida bajarishni qanday ta'minlaysiz?",
  },
  'Supervayzer': {
    "1.1": "Nechta agent va merchendayzerni nazorat qilgansiz?",
    "1.2": "Qaysi hudud yoki marshrutlarda ishlagansiz?",
    "1.3": "Jamoangiz qanday natijalarga erishgan - raqam bilan?",
    "1.4": "Necha yillik supervayzer tajribangiz bor?",
    "2.1": "Yangi agentni qanday o'qitasiz va yo'naltirasiz?",
    "2.2": "Past natijali xodim bilan qanday suhbat qurasiz?",
    "2.3": "Distribyutor va do'konlar bilan aloqani qanday saqlaysiz?",
    "3.1": "Kunlik marshrut va vazifalarni qanday tuzasiz?",
    "3.2": "Dala ishi (field) sifatini qanday tekshirasiz?",
    "3.3": "Agentlar KPI sini qanday o'lchaysiz?",
    "3.4": "Sotuv nuqtalarini qanday taqsimlaysiz?",
    "4.1": "Agent ishga chiqmadi. Kunni qanday qoplaysiz?",
    "4.2": "Marshrutda sotuv pasaydi. Qanday tahlil qilasiz?",
    "4.3": "Xodim hisobotni soxtalashtirdi. Qanday yo'l tutasiz?",
    "5.1": "Jamoani qanday rag'batlantirasiz?",
    "5.2": "Intizom va qattiqqo'llik o'rtasida muvozanatni qanday saqlaysiz?",
    "5.3": "Mas'uliyatni o'z zimmangizga olishga misol keltiring.",
  },
  'Analitik': {
    "1.1": "Qanday ma'lumotlar bilan va qaysi sohada ishlagansiz?",
    "1.2": "Qaysi tahlil loyihangiz amaliy natija bergan?",
    "1.3": "Qanaqa hajmdagi ma'lumotlar bilan ishlagansiz?",
    "1.4": "Qaysi sohada (sotuv, moliya, marketing) tahlil qilgansiz?",
    "2.1": "Murakkab tahlilni rahbarga qanday sodda tushuntirasiz?",
    "2.2": "Boshqa bo'limlardan ma'lumotni qanday yig'asiz?",
    "2.3": "Xulosalaringizni qaror qabul qiluvchilarga qanday yetkazasiz?",
    "3.1": "Excel yoki BI vositalarida qaysi funksiyalarni ishlatasiz?",
    "3.2": "Sotuv prognozini qanday usul bilan qurasiz?",
    "3.3": "Ma'lumotdagi xato yoki anomaliyani qanday aniqlaysiz?",
    "3.4": "Qaysi tahlil metodikalarini bilasiz (trend, kogorta, ABC)?",
    "4.1": "Ma'lumot to'liq emas yoki ziddiyatli. Qanday ish tutasiz?",
    "4.2": "Raqamlar kutilgan natijaga zid chiqdi. Nima qilasiz?",
    "4.3": "Qisqa muddatda shoshilinch hisobot kerak. Qanday rejalashtirasiz?",
    "5.1": "Tafsilotlarga e'tibor sizda qanchalik kuchli?",
    "5.2": "Raqamlardan amaliy xulosa chiqarishga misol keltiring.",
    "5.3": "Aniqlik va tezlik o'rtasida qanday muvozanat saqlaysiz?",
  },
  'Agent': {
    "1.1": "Necha yil savdo agenti bo'lib ishlagansiz?",
    "1.2": "Kuniga o'rtacha nechta do'kon bilan ishlagansiz?",
    "1.3": "Qaysi mahsulot turlarini sotgansiz?",
    "1.4": "Qaysi hududda va qanday marshrutda ishlagansiz?",
    "2.1": "Yangi do'kon bilan ishni qanday boshlaysiz?",
    "2.2": "Do'kon egasi buyurtma bermasa, qanday gaplashasiz?",
    "2.3": "Mijoz e'tirozini qanday yengasiz?",
    "3.1": "Zakaz (buyurtma) yig'ishni qanday tashkil qilasiz?",
    "3.2": "Debitorlik (qarz) nazoratini qanday yuritasiz?",
    "3.3": "Marshrutingizni qanday rejalashtirasiz?",
    "3.4": "Mahsulot zaxirasini do'konda qanday baholaysiz?",
    "4.1": "Do'kon qarzni to'lamayapti. Nima qilasiz?",
    "4.2": "Mijoz raqobatchi mahsulotini afzal ko'ryapti. Qanday ishontirasiz?",
    "4.3": "Kunlik reja bajarilmadi. Qanday harakat qilasiz?",
    "5.1": "Rad javobni qanday qabul qilasiz?",
    "5.2": "Har kungi maqsadga erishishni qanday ta'minlaysiz?",
    "5.3": "O'zingizni qanchalik tirishqoq deb hisoblaysiz?",
  },
  'Setoviy menejer': {
    "1.1": "Setoviy do'konlarda (Korzinka, Makro, Havas, MaxWay) necha yil ishlagansiz?",
    "1.2": "Qaysi yirik tarmoqlar bilan bevosita shartnoma tuzgansiz?",
    "1.3": "Saqich, konfet yoki snack kategoriyalarida tajribangiz bormi?",
    "1.4": "Hozirgi setoviy sotuv hajmingiz qancha - oylik raqam bilan?",
    "2.1": "Setoviy do'kon menejer va buyerlari bilan shaxsiy aloqangiz qanday?",
    "2.2": "Tarmoq buyeri bilan muzokarani qanday olib borasiz?",
    "2.3": "Oxirgi 6 oyda ular bilan qanchalik muntazam muloqot qilgansiz?",
    "3.1": "Listing fee ni qanday hisoblaysiz va boshqarasiz?",
    "3.2": "Bonus va retro o'rtasidagi farqni tushuntiring.",
    "3.3": "Sell-in va sell-through o'rtasidagi farqni qanday izohlaysiz?",
    "3.4": "Promo plan (aksiya rejasi) ni qanday tuzasiz?",
    "4.1": "Tarmoq listing fee ni oshirdi. Qanday muzokara qilasiz?",
    "4.2": "Setoviy do'konda sotuv tushib ketdi. Qanday tahlil qilasiz?",
    "4.3": "Raqobatchi javondagi joyingizni egalladi. Nima qilasiz?",
    "5.1": "Aniq va ishonchli muloqotga misol keltiring.",
    "5.2": "Sizni pul yoki natija ko'proq motivatsiya qiladimi?",
    "5.3": "Halollik va ish odobi sizda qanday namoyon bo'ladi?",
  },
};

// Kanban bosqichlari (ustunlar)
const RECRUIT_STAGES = [
  { key: 'new', title: 'Yangi nomzod', color: '#8E74FF' },
  { key: 'interview', title: 'Intervyu', color: '#5A9FD4' },
  { key: 'evaluated', title: 'Baholandi', color: '#8E74FF' },
  { key: 'hired', title: 'Ishga olindi', color: '#3DBE9C' },
  { key: 'rejected', title: 'Rad etildi', color: '#C2453A' },
];

function recruitDecisionFor(total) {
  if (total >= 80) return 'KUCHLI';
  if (total >= 65) return 'YAXSHI';
  if (total >= 50) return "O'RTACHA";
  return 'ZAIF';
}

// scores: {id: 1..5}. Baholanmagan mezonlar o'rtachaga kirmaydi.
function computeRecruitScore(scores) {
  const s = scores && typeof scores === 'object' ? scores : {};
  let total = 0, anyScored = false;
  for (const sec of RUBRIC) {
    const vals = sec.criteria.map(c => Number(s[c.id])).filter(v => Number.isFinite(v) && v > 0);
    if (vals.length) anyScored = true;
    const avg = vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : 0;
    total += (avg / 5) * sec.weight;
  }
  total = Math.round(total * 10) / 10;
  return { total, decision: anyScored ? recruitDecisionFor(total) : null };
}

// Bo'lim bo'yicha tortilgan ball (solishtirish jadvali uchun)
function recruitSectionScore(scores, sec) {
  const s = scores && typeof scores === 'object' ? scores : {};
  const vals = sec.criteria.map(c => Number(s[c.id])).filter(v => Number.isFinite(v) && v > 0);
  const avg = vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : 0;
  return Math.round(((avg / 5) * sec.weight) * 10) / 10;
}

function recruitDecisionStyle(decision) {
  switch (decision) {
    case 'KUCHLI':   return { bg: '#D9F0E8', ink: '#1D8A6E' };
    case 'YAXSHI':   return { bg: '#DCE9F4', ink: '#1D5FBF' };
    case "O'RTACHA": return { bg: '#F6E7CF', ink: '#A6651E' };
    case 'ZAIF':     return { bg: '#F6DCD6', ink: '#C2453A' };
    default:         return { bg: 'var(--bg-2)', ink: 'var(--ink-4)' };
  }
}

function recruitInitials(name) {
  return (name || '').split(' ').filter(Boolean).map(s => s[0]).join('').slice(0, 2).toUpperCase();
}

/* ---------- ISO ↔ <input type=date> ---------- */
function toDateInput(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  if (isNaN(d.getTime())) return '';
  const mm = String(d.getMonth() + 1).padStart(2, '0');
  const dd = String(d.getDate()).padStart(2, '0');
  return d.getFullYear() + '-' + mm + '-' + dd;
}
function fromDateInput(val) {
  if (!val) return null;
  const d = new Date(val + 'T00:00:00');
  return isNaN(d.getTime()) ? null : d.toISOString();
}

/* ---------- Nomzod kartasi ---------- */
function CandidateCard({ c, onOpen, onDragStart, onDragEnd, dragging }) {
  const ds = recruitDecisionStyle(c.decision);
  const stage = RECRUIT_STAGES.find(s => s.key === c.stage) || RECRUIT_STAGES[0];
  return (
    <div
      draggable
      onDragStart={(e) => onDragStart(e, c)}
      onDragEnd={onDragEnd}
      onClick={() => onOpen(c)}
      style={{
        background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r)',
        padding: '12px 13px', boxShadow: 'var(--sh-1)', cursor: 'grab',
        opacity: dragging ? .4 : 1, borderLeft: '3px solid ' + stage.color,
        transition: 'box-shadow .15s, border-color .15s',
      }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 8 }}>
        <span style={{ width: 30, height: 30, borderRadius: '50%', background: 'var(--brand-tint)', color: 'var(--brand-700)',
                       display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 11, flex: 'none' }}>
          {recruitInitials(c.name)}
        </span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 700, fontSize: 13.5, lineHeight: 1.2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.name}</div>
          <div style={{ fontSize: 11, color: 'var(--ink-4)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.position}</div>
        </div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', fontSize: 11, color: 'var(--ink-3)' }}>
        {c.phone && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="user" size={12} stroke={1.8} /> {c.phone}</span>}
        {c.totalExp && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="clock" size={12} stroke={1.8} /> {c.totalExp}</span>}
      </div>

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginTop: 10, paddingTop: 9, borderTop: '1px dashed var(--border)' }}>
        <span className="tnum" style={{ fontWeight: 800, fontSize: 16, letterSpacing: '-.01em' }}>
          {c.total != null ? c.total : 0}<span style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-4)' }}>/100</span>
        </span>
        {c.decision && (
          <span style={{ padding: '3px 9px', borderRadius: 100, fontSize: 10.5, fontWeight: 800, letterSpacing: '.02em',
                         background: ds.bg, color: ds.ink }}>{c.decision}</span>
        )}
      </div>
    </div>
  );
}

/* ---------- Yorliqli maydon (barqaror identity — fokus yo'qolmasligi uchun tashqarida) ---------- */
function RecruitField({ label, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
      <span style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--ink-3)' }}>{label}</span>
      {children}
    </label>
  );
}

/* ---------- Nomzod detallari + baholash modali ---------- */
function CandidateModal({ candidate, onClose, onSaved, onDeleted, showToast }) {
  const isNew = !candidate.id;
  const [name, setName] = useState(candidate.name || '');
  const [position, setPosition] = useState(candidate.position || POSITIONS[0]);
  const [age, setAge] = useState(candidate.age != null ? String(candidate.age) : '');
  const [phone, setPhone] = useState(candidate.phone || '');
  const [currentJob, setCurrentJob] = useState(candidate.currentJob || '');
  const [totalExp, setTotalExp] = useState(candidate.totalExp || '');
  const [source, setSource] = useState(candidate.source || '');
  const [interviewDate, setInterviewDate] = useState(toDateInput(candidate.interviewDate));
  const [interviewer, setInterviewer] = useState(candidate.interviewer || '');
  const [finalNote, setFinalNote] = useState(candidate.finalNote || '');
  const [scores, setScores] = useState(() => ({ ...(candidate.scores || {}) }));
  const [notes, setNotes] = useState(() => ({ ...(candidate.notes || {}) }));
  const [busy, setBusy] = useState(false);
  const [tab, setTab] = useState('info'); // info | score

  const live = useMemo(() => computeRecruitScore(scores), [scores]);
  const ds = recruitDecisionStyle(live.decision);

  function setScore(id, val) {
    setScores(prev => {
      const next = { ...prev };
      if (prev[id] === val) delete next[id]; else next[id] = val;
      return next;
    });
  }
  function setNote(id, val) {
    setNotes(prev => {
      const next = { ...prev };
      if (!val) delete next[id]; else next[id] = val;
      return next;
    });
  }

  async function save() {
    if (!name.trim()) { showToast('Ism majburiy'); return; }
    setBusy(true);
    const payload = {
      name: name.trim(),
      position: position.trim() || "Setoviy do'kon menejeri",
      age: age === '' ? null : Number(age),
      phone: phone.trim() || null,
      currentJob: currentJob.trim() || null,
      totalExp: totalExp.trim() || null,
      source: source.trim() || null,
      interviewDate: fromDateInput(interviewDate),
      interviewer: interviewer.trim() || null,
      finalNote: finalNote.trim() || null,
      scores,
      notes,
    };
    try {
      if (isNew) {
        const { candidate: created } = await API.createCandidate(payload);
        onSaved(created, true);
        showToast('Yangi nomzod qoʼshildi');
      } else {
        const { candidate: updated } = await API.updateCandidate(candidate.id, payload);
        onSaved(updated, false);
        showToast('Saqlandi');
      }
      onClose();
    } catch (ex) { showToast((ex && ex.message) || 'Saqlashda xatolik'); }
    finally { setBusy(false); }
  }

  async function remove() {
    if (isNew) { onClose(); return; }
    if (!window.confirm("Nomzodni o'chirishni tasdiqlaysizmi?")) return;
    setBusy(true);
    try {
      await API.deleteCandidate(candidate.id);
      onDeleted(candidate.id);
      showToast("Nomzod o'chirildi");
      onClose();
    } catch (ex) { showToast((ex && ex.message) || 'Oʼchirishda xatolik'); setBusy(false); }
  }

  const inputStyle = { width: '100%' };
  const Field = RecruitField;

  const tabBtn = (key, label) => (
    <button onClick={() => setTab(key)}
      style={{ padding: '8px 14px', borderRadius: 'var(--r-sm)', border: 'none', cursor: 'pointer',
               fontWeight: 700, fontSize: 13, background: tab === key ? 'var(--brand)' : 'transparent',
               color: tab === key ? '#fff' : 'var(--ink-2)' }}>{label}</button>
  );

  return (
    <Modal onClose={onClose} width={720}>
      <ModalHeader
        title={isNew ? 'Yangi nomzod' : name}
        subtitle={isNew ? 'Intervyu uchun nomzod kiritish' : position}
        onClose={onClose} />

      {/* Tab + jonli ball */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '12px 20px', borderBottom: '1px solid var(--border)' }}>
        {tabBtn('info', "Ma'lumot")}
        {tabBtn('score', 'Baholash')}
        <div style={{ flex: 1 }} />
        <div style={{ textAlign: 'right' }}>
          <span className="tnum" style={{ fontWeight: 800, fontSize: 20, letterSpacing: '-.02em' }}>{live.total}</span>
          <span style={{ fontSize: 11.5, color: 'var(--ink-4)', fontWeight: 600 }}>/100</span>
        </div>
        {live.decision && (
          <span style={{ padding: '4px 11px', borderRadius: 100, fontSize: 11, fontWeight: 800, letterSpacing: '.02em',
                         background: ds.bg, color: ds.ink }}>{live.decision}</span>
        )}
      </div>

      <div style={{ padding: '18px 20px', overflowY: 'auto' }}>
        {/* === BAHOLASH === */}
        {tab === 'score' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {RUBRIC.map(sec => {
              const secScore = recruitSectionScore(scores, sec);
              const posQs = POSITION_QUESTIONS[position] || {};
              return (
                <div key={sec.key}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                    <span style={{ fontWeight: 800, fontSize: 14 }}>{sec.title}</span>
                    <span className="chip" style={{ fontSize: 10.5, background: 'var(--bg-2)', color: 'var(--ink-3)', padding: '2px 8px', fontWeight: 700 }}>{sec.weight}%</span>
                    <div style={{ flex: 1 }} />
                    <span className="tnum" style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink-3)' }}>{secScore} / {sec.weight}</span>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                    {sec.criteria.map(cr => (
                      <div key={cr.id} style={{ padding: '11px 12px', background: 'var(--bg-2)', borderRadius: 'var(--r)' }}>
                        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, justifyContent: 'space-between' }}>
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div style={{ fontSize: 12.5, fontWeight: 600, lineHeight: 1.35 }}>
                              <span className="tnum" style={{ color: 'var(--ink-4)', marginRight: 6 }}>{cr.id}</span>{posQs[cr.id] || cr.label}
                            </div>
                            <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 3 }}>1 = zaif javob · 5 = kuchli, ishonarli javob</div>
                          </div>
                          <div style={{ display: 'flex', gap: 4, flex: 'none' }}>
                            {[1, 2, 3, 4, 5].map(n => {
                              const on = scores[cr.id] === n;
                              return (
                                <button key={n} onClick={() => setScore(cr.id, n)} title={"Ball: " + n}
                                  style={{ width: 30, height: 30, borderRadius: 8, cursor: 'pointer', fontWeight: 800, fontSize: 13,
                                           border: '1px solid ' + (on ? 'var(--brand)' : 'var(--border-2)'),
                                           background: on ? 'var(--brand)' : 'var(--surface)',
                                           color: on ? '#fff' : 'var(--ink-3)', transition: 'all .12s' }}>{n}</button>
                              );
                            })}
                          </div>
                        </div>
                        <input className="input" placeholder="Izoh (ixtiyoriy)…" value={notes[cr.id] || ''}
                          onChange={e => setNote(cr.id, e.target.value)}
                          style={{ marginTop: 9, height: 32, fontSize: 12.5 }} />
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}

            <Field label="Yakuniy xulosa">
              <textarea className="input" rows={3} value={finalNote} onChange={e => setFinalNote(e.target.value)}
                placeholder="Umumiy taassurot va qaror izohi…" style={{ resize: 'vertical' }} />
            </Field>
          </div>
        )}

        {/* === MA'LUMOT === */}
        {tab === 'info' && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Field label="F.I.Sh *"><input className="input" style={inputStyle} value={name} onChange={e => setName(e.target.value)} /></Field>
            <Field label="Lavozim">
              <select className="select" style={inputStyle} value={position} onChange={e => setPosition(e.target.value)}>
                {position && !POSITIONS.includes(position) && <option value={position}>{position}</option>}
                {POSITIONS.map(p => <option key={p} value={p}>{p}</option>)}
              </select>
            </Field>
            <Field label="Yoshi"><input className="input" type="number" min="14" max="80" style={inputStyle} value={age} onChange={e => setAge(e.target.value)} /></Field>
            <Field label="Telefon"><input className="input" style={inputStyle} value={phone} onChange={e => setPhone(e.target.value)} /></Field>
            <Field label="Joriy ish joyi"><input className="input" style={inputStyle} value={currentJob} onChange={e => setCurrentJob(e.target.value)} /></Field>
            <Field label="Umumiy tajriba (yil)"><input className="input" style={inputStyle} value={totalExp} onChange={e => setTotalExp(e.target.value)} /></Field>
            <Field label="Manba (qayerdan)"><input className="input" style={inputStyle} value={source} onChange={e => setSource(e.target.value)} /></Field>
            <Field label="Intervyu sanasi"><input className="input" type="date" style={inputStyle} value={interviewDate} onChange={e => setInterviewDate(e.target.value)} /></Field>
            <Field label="Intervyuchi"><input className="input" style={inputStyle} value={interviewer} onChange={e => setInterviewer(e.target.value)} /></Field>
          </div>
        )}
      </div>

      {/* Footer */}
      <div style={{ padding: '14px 20px', borderTop: '1px solid var(--border)', display: 'flex', gap: 10, alignItems: 'center' }}>
        {!isNew && (
          <button className="btn btn--ghost" style={{ color: '#C2453A' }} onClick={remove} disabled={busy}>
            <Icon name="trash" size={15} /> O'chirish
          </button>
        )}
        <div style={{ flex: 1 }} />
        <button className="btn btn--ghost" onClick={onClose}>Bekor qilish</button>
        {tab === 'info' ? (
          <button className="btn btn--primary" onClick={() => setTab('score')}>
            Keyingisi <Icon name="arrowR" size={16} stroke={2.4} />
          </button>
        ) : (
          <button className="btn btn--primary" onClick={save} disabled={busy}>
            <Icon name="check" size={16} stroke={2.4} /> Saqlash
          </button>
        )}
      </div>
    </Modal>
  );
}

/* ---------- Solishtirish modali ---------- */
function CompareModal({ candidates, onClose }) {
  const list = useMemo(
    () => [...candidates].sort((a, b) => (b.total || 0) - (a.total || 0)),
    [candidates]
  );
  const bestTotal = list.length ? Math.max(...list.map(c => c.total || 0)) : 0;

  if (!list.length) {
    return (
      <Modal onClose={onClose} width={520}>
        <ModalHeader title="Nomzodlarni solishtirish" onClose={onClose} />
        <div style={{ padding: 24 }}><Empty icon="users" text="Solishtirish uchun nomzod yo'q" /></div>
      </Modal>
    );
  }

  const cellPad = { padding: '8px 10px', borderBottom: '1px solid var(--border)', fontSize: 12.5, textAlign: 'center', whiteSpace: 'nowrap' };
  return (
    <Modal onClose={onClose} width={Math.min(900, 320 + list.length * 130)}>
      <ModalHeader title="Nomzodlarni solishtirish" subtitle={list.length + ' ta nomzod · bo\'limlar bo\'yicha tortilgan ball'} onClose={onClose} />
      <div style={{ padding: '8px 12px 16px', overflow: 'auto' }}>
        <table style={{ borderCollapse: 'collapse', width: '100%', minWidth: 320 + list.length * 120 }}>
          <thead>
            <tr>
              <th style={{ ...cellPad, textAlign: 'left', position: 'sticky', left: 0, background: 'var(--surface)', fontWeight: 700 }}>Mezon</th>
              {list.map(c => (
                <th key={c.id} style={{ ...cellPad, fontWeight: 700 }}>
                  <div style={{ fontSize: 12.5 }}>{c.name}</div>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-4)', fontWeight: 600 }}>{c.position}</div>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {RUBRIC.map(sec => (
              <tr key={sec.key}>
                <td style={{ ...cellPad, textAlign: 'left', position: 'sticky', left: 0, background: 'var(--surface)', color: 'var(--ink-2)', fontWeight: 600 }}>
                  {sec.title} <span style={{ color: 'var(--ink-4)', fontWeight: 600 }}>({sec.weight}%)</span>
                </td>
                {list.map(c => (
                  <td key={c.id} className="tnum" style={cellPad}>{recruitSectionScore(c.scores, sec)}</td>
                ))}
              </tr>
            ))}
            <tr>
              <td style={{ ...cellPad, textAlign: 'left', position: 'sticky', left: 0, background: 'var(--surface)', fontWeight: 800 }}>JAMI</td>
              {list.map(c => {
                const best = (c.total || 0) === bestTotal && bestTotal > 0;
                return (
                  <td key={c.id} className="tnum" style={{ ...cellPad, fontWeight: 800, fontSize: 15,
                       background: best ? '#D9F0E8' : 'transparent', color: best ? '#1D8A6E' : 'var(--ink)' }}>
                    {c.total || 0}
                  </td>
                );
              })}
            </tr>
            <tr>
              <td style={{ ...cellPad, textAlign: 'left', position: 'sticky', left: 0, background: 'var(--surface)', fontWeight: 700 }}>Qaror</td>
              {list.map(c => {
                const st = recruitDecisionStyle(c.decision);
                return (
                  <td key={c.id} style={cellPad}>
                    {c.decision
                      ? <span style={{ padding: '3px 9px', borderRadius: 100, fontSize: 10.5, fontWeight: 800, background: st.bg, color: st.ink }}>{c.decision}</span>
                      : <span style={{ color: 'var(--ink-4)' }}>—</span>}
                  </td>
                );
              })}
            </tr>
          </tbody>
        </table>
      </div>
    </Modal>
  );
}

/* ---------- Asosiy ko'rinish ---------- */
function Recruiting({ user, showToast }) {
  const [candidates, setCandidates] = useState([]);
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState(null);   // candidate obyekti yoki {stage} (yangi)
  const [compareOpen, setCompareOpen] = useState(false);
  const [search, setSearch] = useState('');
  const [draggingId, setDraggingId] = useState(null);
  const [overStage, setOverStage] = useState(null);
  const dragRef = useRef(null);

  const load = useCallback(async () => {
    setLoading(true);
    try { const { candidates: list } = await API.listCandidates(); setCandidates(list || []); }
    catch (ex) { showToast((ex && ex.message) || 'Yuklashda xatolik'); }
    finally { setLoading(false); }
  }, [showToast]);

  useEffect(() => { load(); }, [load]);

  const filtered = useMemo(() => {
    if (!search) return candidates;
    const s = search.toLowerCase();
    return candidates.filter(c =>
      (c.name || '').toLowerCase().includes(s) ||
      (c.phone || '').toLowerCase().includes(s) ||
      (c.position || '').toLowerCase().includes(s));
  }, [candidates, search]);

  const byStage = useMemo(() => {
    const m = {}; RECRUIT_STAGES.forEach(s => m[s.key] = []);
    filtered.forEach(c => { (m[c.stage] || m.new).push(c); });
    Object.values(m).forEach(arr => arr.sort((a, b) => (a.queue || 0) - (b.queue || 0)));
    return m;
  }, [filtered]);

  function onSaved(saved, created) {
    setCandidates(prev => created ? [...prev, saved] : prev.map(c => c.id === saved.id ? saved : c));
  }
  function onDeleted(id) { setCandidates(prev => prev.filter(c => c.id !== id)); }

  function onDragStart(e, c) {
    dragRef.current = c; setDraggingId(c.id);
    e.dataTransfer.effectAllowed = 'move';
    try { e.dataTransfer.setData('text/plain', c.id); } catch (_) {}
  }
  function onDragEnd() { setDraggingId(null); setOverStage(null); dragRef.current = null; }

  async function dropOn(stageKey) {
    const c = dragRef.current;
    setOverStage(null); setDraggingId(null); dragRef.current = null;
    if (!c || c.stage === stageKey) return;
    const prevStage = c.stage;
    setCandidates(prev => prev.map(x => x.id === c.id ? { ...x, stage: stageKey } : x));
    try {
      const { candidate: updated } = await API.moveCandidate(c.id, stageKey);
      setCandidates(prev => prev.map(x => x.id === updated.id ? updated : x));
    } catch (ex) {
      showToast((ex && ex.message) || 'Koʼchirishda xatolik');
      setCandidates(prev => prev.map(x => x.id === c.id ? { ...x, stage: prevStage } : x));
    }
  }

  return (
    <>
      {/* Toolbar */}
      <div className="board-toolbar" style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 22px 12px' }}>
        <div>
          <h2 style={{ fontSize: 18, fontWeight: 800, letterSpacing: '-.02em', margin: 0 }}>Ishga olish</h2>
          <div style={{ fontSize: 12, color: 'var(--ink-4)', marginTop: 2 }}>{candidates.length} ta nomzod · intervyu va baholash</div>
        </div>
        <div style={{ flex: 1 }} />
        <div style={{ position: 'relative' }}>
          <span style={{ position: 'absolute', left: 11, top: '50%', transform: 'translateY(-50%)', color: 'var(--ink-4)' }}><Icon name="search" size={15} /></span>
          <input className="input" style={{ paddingLeft: 33, width: 220, height: 38 }} placeholder="Ism yoki telefon…" value={search} onChange={e => setSearch(e.target.value)} />
        </div>
        <button className="btn btn--ghost" style={{ height: 38 }} onClick={() => setCompareOpen(true)} disabled={!candidates.length}>
          <Icon name="layers" size={16} /> Solishtirish
        </button>
        <button className="btn btn--primary" style={{ height: 38 }} onClick={() => setEditing({ stage: 'new' })}>
          <Icon name="plus" size={16} stroke={2.4} /> Yangi nomzod
        </button>
      </div>

      {/* Doska */}
      {loading ? (
        <div style={{ flex: 1, display: 'grid', placeItems: 'center', color: 'var(--ink-4)' }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Yuklanmoqda…</div>
        </div>
      ) : (
        <div style={{ flex: 1, minHeight: 0, overflow: 'auto', padding: '4px 22px 20px' }}>
          <div style={{ display: 'flex', gap: 14, height: '100%', minHeight: 360 }}>
            {RECRUIT_STAGES.map(stage => {
              const arr = byStage[stage.key] || [];
              const isOver = overStage === stage.key;
              return (
                <div key={stage.key} style={{ flex: '1 1 0', minWidth: 250, display: 'flex', flexDirection: 'column', height: '100%' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '0 4px 10px' }}>
                    <span className="dot" style={{ width: 9, height: 9, background: stage.color }} />
                    <span style={{ fontWeight: 700, fontSize: 13.5, letterSpacing: '-.01em' }}>{stage.title}</span>
                    <span className="chip tnum" style={{ background: 'var(--bg-2)', color: 'var(--ink-3)', padding: '2px 8px', fontSize: 11.5 }}>{arr.length}</span>
                  </div>
                  <div
                    onDragOver={(e) => { if (draggingId) { e.preventDefault(); setOverStage(stage.key); } }}
                    onDragLeave={(e) => { if (e.currentTarget === e.target) setOverStage(null); }}
                    onDrop={(e) => { e.preventDefault(); dropOn(stage.key); }}
                    style={{
                      flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: '4px 6px 14px', display: 'flex', flexDirection: 'column', gap: 9,
                      borderRadius: 'var(--r)', background: isOver && draggingId ? 'var(--brand-tint)' : 'transparent',
                      outline: isOver && draggingId ? '2px dashed var(--brand)' : '2px dashed transparent', outlineOffset: -2,
                      transition: 'background .15s, outline-color .15s',
                    }}>
                    {arr.map(c => (
                      <CandidateCard key={c.id} c={c} onOpen={setEditing}
                        onDragStart={onDragStart} onDragEnd={onDragEnd} dragging={draggingId === c.id} />
                    ))}
                    {arr.length === 0 && (
                      <div style={{ padding: '18px 8px', textAlign: 'center', color: 'var(--ink-4)', fontSize: 12, fontWeight: 500,
                                    border: '1px dashed var(--border)', borderRadius: 'var(--r)' }}>Bo'sh</div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {editing && (
        <CandidateModal candidate={editing} onClose={() => setEditing(null)}
          onSaved={onSaved} onDeleted={onDeleted} showToast={showToast} />
      )}
      {compareOpen && (
        <CompareModal candidates={candidates} onClose={() => setCompareOpen(false)} />
      )}
    </>
  );
}
