/* AAU CRM — Giảng viên · hồ sơ + chỉnh sửa phí/buổi + LỊCH THANH TOÁN giảng viên
   Thù lao tính từ số buổi giảng viên thực dạy × phí/buổi (lấy từ lịch lớp). */

const INS_GROUP_C = id => (AAU.courseGroupById ? (AAU.courseGroupById(id) || {}).color : '#616161') || '#616161';

// các đợt thanh toán cho 1 lớp: tạm ứng 30% (khai giảng) · giữa khóa 40% · kết thúc 30%
function insClassPayments(insId) {
  const fee = (AAU.instructorById(insId) || {}).feePerSession || 0;
  return AAU.classes
    .filter(c => c.sessions.some(s => s.instructor === insId))
    .map(c => {
      const taught = c.sessions.filter(s => s.instructor === insId).length;
      const total = fee * taught;
      const mid = c.sessions[Math.floor((c.sessions.length - 1) / 2)] || c.sessions[0];
      const last = c.sessions[c.sessions.length - 1];
      const a1 = Math.round(total * 0.3), a2 = Math.round(total * 0.4), a3 = total - a1 - a2;
      const milestones = [
        { key: c.id + '-0', name: 'Tạm ứng 30%', due: c.start, amount: a1 },
        { key: c.id + '-1', name: 'Giữa khóa 40%', due: (mid || {}).date || c.start, amount: a2 },
        { key: c.id + '-2', name: 'Kết thúc 30%', due: (last || {}).date || c.start, amount: a3 },
      ];
      return { cls: c, fee, taught, total, milestones };
    });
}
function insDueState(due) {
  const [y, m, d] = due.split('-').map(Number);
  const days = Math.round((new Date(y, m - 1, d) - AAU.TODAY) / 86400000);
  if (days < 0) return 'paid';      // quá khứ → coi như đã chi (seed)
  if (days <= 10) return 'due';
  return 'upcoming';
}

function InstructorsPage() {
  const [tick, setTick] = useState(0);
  const [sel, setSel] = useState(null);
  // trạng thái thanh toán đã ghi nhận thủ công (ngoài seed theo ngày)
  const [paidSet, setPaidSet] = useState(() => new Set());
  const vndM = AAU.fmtVNDm, vnd = AAU.fmtVND;

  const isPaid = (key, due) => paidSet.has(key) || (!paidSet.has('!' + key) && insDueState(due) === 'paid');
  const markPaid = (key) => setPaidSet(s => { const n = new Set(s); n.add(key); n.delete('!' + key); return n; });
  const markUnpaid = (key) => setPaidSet(s => { const n = new Set(s); n.delete(key); n.add('!' + key); return n; });

  const data = AAU.instructors.map(ins => {
    const pays = insClassPayments(ins.id);
    const total = pays.reduce((s, p) => s + p.total, 0);
    const paid = pays.reduce((s, p) => s + p.milestones.filter(m => isPaid(m.key, m.due)).reduce((a, m) => a + m.amount, 0), 0);
    return { ins, pays, total, paid, due: total - paid, classes: pays.length };
  });
  const sumTotal = data.reduce((s, d) => s + d.total, 0);
  const sumPaid = data.reduce((s, d) => s + d.paid, 0);
  const sumDue = sumTotal - sumPaid;
  const selData = sel && data.find(d => d.ins.id === sel);

  function saveFee(insId, fee) {
    const ins = AAU.instructors.find(i => i.id === insId);
    if (ins) ins.feePerSession = Number(String(fee).replace(/\D/g, '')) || 0;
    setTick(t => t + 1);
  }

  return (
    <div className="page wide">
      <PageHead title="Giảng viên" subtitle="Hồ sơ, phí/buổi (ảnh hưởng trực tiếp P&L khóa) và lịch thanh toán thù lao theo lớp"
        actions={<Button variant="primary" icon="plus">Thêm giảng viên</Button>} />
      <div className="grid gc4 mb16">
        <KPI label="Giảng viên" value={AAU.instructors.length} icon="user" sub={AAU.classes.length + ' lớp đang vận hành'} />
        <KPI label="Tổng thù lao kỳ" value={vndM(sumTotal)} icon="dollar" />
        <KPI label="Đã thanh toán" value={vndM(sumPaid)} icon="checkCircle" sub={fmtRatio(sumPaid, sumTotal)} />
        <KPI label="Còn phải trả" value={vndM(sumDue)} icon="alert" sub="theo các đợt sắp đến hạn" />
      </div>

      <div className="grid gc3">
        {data.map(({ ins, total, due, classes }) => (
          <Card key={ins.id} pad className="crow" style={{ cursor: 'pointer' }}>
            <div onClick={() => setSel(ins.id)}>
              <div className="row aic g12 mb12">
                <Avatar name={ins.name} size={44} color={ins.color} />
                <div className="f1"><div className="t15 fw7">{ins.name}</div><div className="t12 muted">{ins.title}</div></div>
                <span className="row aic g4 t12 fw6"><Icon name="star" size={13} color="#f59e0b" />{ins.rating}</span>
              </div>
              <div className="row g6 wrap mb12">{ins.groups.map(g => <span key={g} className="tag" style={{ borderColor: INS_GROUP_C(g) + '55' }}>{(AAU.courseGroupById(g) || {}).label}</span>)}</div>
              <div className="divider mb12" />
              <div className="row jcsb t12 mb6"><span className="muted">Phí / buổi</span><span className="fw7 tnum">{vnd(ins.feePerSession)}</span></div>
              <div className="row jcsb t12 mb6"><span className="muted">Lớp phụ trách</span><span className="fw6">{classes} lớp</span></div>
              <div className="row jcsb t12"><span className="muted">Còn phải trả</span><span className={'fw7 tnum ' + (due > 0 ? 'sla-warn' : 'sla-ok')}>{due > 0 ? vndM(due) : 'Đã đủ'}</span></div>
            </div>
          </Card>
        ))}
      </div>

      {selData && (
        <InstructorDrawer d={selData} onClose={() => setSel(null)} onSaveFee={saveFee} isPaid={isPaid} markPaid={markPaid} markUnpaid={markUnpaid} key={tick} />
      )}
    </div>
  );

  function fmtRatio(a, b) { return b ? Math.round(a / b * 100) + '% tổng' : '—'; }
}

function InstructorDrawer({ d, onClose, onSaveFee, isPaid, markPaid, markUnpaid }) {
  const ins = d.ins;
  const [edit, setEdit] = useState(false);
  const [fee, setFee] = useState(ins.feePerSession);
  const vnd = AAU.fmtVND, vndM = AAU.fmtVNDm;
  const stMeta = { paid: { t: 'success', l: 'Đã chi' }, due: { t: 'warning', l: 'Đến hạn' }, upcoming: { t: 'neutral', l: 'Sắp tới' } };

  return (
    <Drawer width={560} title={ins.name} onClose={onClose}
      footer={edit
        ? <><Button onClick={() => { setEdit(false); setFee(ins.feePerSession); }}>Hủy</Button><Button variant="primary" icon="save" onClick={() => { onSaveFee(ins.id, fee); setEdit(false); }}>Lưu phí/buổi</Button></>
        : <><Button icon="fileText">Xuất bảng kê</Button><Button variant="primary" icon="edit" onClick={() => setEdit(true)}>Chỉnh sửa</Button></>}>
      <div className="row aic g12 mb16">
        <Avatar name={ins.name} size={48} color={ins.color} />
        <div className="f1"><div className="t17 fw7">{ins.name}</div><div className="t12 muted">{ins.title} · {ins.expertise}</div></div>
        <span className="row aic g4 t13 fw6"><Icon name="star" size={14} color="#f59e0b" />{ins.rating}</span>
      </div>

      {edit ? (
        <Card title="Chỉnh sửa hồ sơ">
          <div className="col g12">
            <Field label="Phí / buổi (₫)"><Input value={fee} onChange={setFee} placeholder="vd 6000000" /></Field>
            <div className="callout-soft"><Icon name="alert" size={14} /><span className="t12">Phí/buổi là <b>nguồn</b> của dòng "Chi phí giảng viên" trong P&L từng khóa — đổi ở đây sẽ phản ánh vào báo cáo.</span></div>
          </div>
        </Card>
      ) : (
        <>
          <div className="grid gc3 mb16">
            <div className="kpi" style={{ padding: '12px 14px' }}><div className="kl">Phí/buổi</div><div className="kv tnum" style={{ fontSize: 19 }}>{vndM(ins.feePerSession)}</div></div>
            <div className="kpi" style={{ padding: '12px 14px' }}><div className="kl">Tổng thù lao</div><div className="kv tnum" style={{ fontSize: 19 }}>{vndM(d.total)}</div></div>
            <div className="kpi" style={{ padding: '12px 14px' }}><div className="kl">Còn phải trả</div><div className="kv tnum" style={{ fontSize: 19, color: d.due > 0 ? '#b06f00' : '#0e7c4a' }}>{vndM(d.due)}</div></div>
          </div>

          <div className="t12 fw7 subtle mb8" style={{ letterSpacing: '.03em' }}>LỊCH THANH TOÁN THEO LỚP</div>
          <div className="col g12">
            {d.pays.map(p => (
              <div key={p.cls.id} style={{ border: '1px solid var(--p-border)', borderRadius: 12, overflow: 'hidden' }}>
                <div className="row aic g10" style={{ padding: '11px 13px', background: 'var(--p-bg-surface-secondary)' }}>
                  <span style={{ width: 4, height: 28, borderRadius: 3, background: INS_GROUP_C(p.cls.group) }} />
                  <div className="f1"><div className="t13 fw7">{p.cls.courseName}</div><div className="t11 subtle">{p.cls.batch} · {p.taught} buổi × {vndM(p.fee)} · KG {AAU.fmtDate(p.cls.start)}</div></div>
                  <span className="t13 fw7 tnum">{vndM(p.total)}</span>
                </div>
                <div style={{ padding: '6px 13px 11px' }}>
                  {p.milestones.map(m => {
                    const paid = isPaid(m.key, m.due);
                    const st = paid ? 'paid' : insDueState(m.due);
                    const meta = stMeta[st];
                    return (
                      <div key={m.key} className="row aic g10" style={{ padding: '8px 0', borderTop: '1px solid var(--p-border-secondary)' }}>
                        <span className="center" style={{ width: 24, height: 24, borderRadius: '50%', flexShrink: 0, background: paid ? 'var(--p-success-bg)' : st === 'due' ? 'var(--p-warning-bg)' : 'var(--p-bg-surface-tertiary)', color: paid ? '#0e7c4a' : st === 'due' ? '#b06f00' : '#8a8a8a' }}><Icon name={paid ? 'check' : 'clock'} size={13} /></span>
                        <div className="f1"><div className="t12 fw6">{m.name}</div><div className="t11 subtle">Hạn {AAU.fmtDate(m.due)}</div></div>
                        <span className="t12 fw6 tnum">{vnd(m.amount)}</span>
                        <Badge tone={meta.t}>{meta.l}</Badge>
                        {paid
                          ? <Button size="sm" onClick={() => markUnpaid(m.key)}>Hủy</Button>
                          : <Button size="sm" variant="primary" icon="dollar" onClick={() => markPaid(m.key)}>Ghi chi</Button>}
                      </div>
                    );
                  })}
                </div>
              </div>
            ))}
            {d.pays.length === 0 && <EmptyState icon="calendar" title="Chưa phân lớp" desc="Giảng viên chưa được gán buổi dạy nào trong kỳ." />}
          </div>
        </>
      )}
    </Drawer>
  );
}

window.InstructorsPage = InstructorsPage;