/* AAU CRM — Ghi danh (enrollment) · tạo ghi danh + ghi nhận thanh toán theo đợt (chạy thật, lưu trong phiên) */

const ENR_ISO = (d) => d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
const ENR_ADD_DAYS = (iso, n) => { const [y, m, d] = iso.split('-').map(Number); return ENR_ISO(new Date(y, m - 1, d + n)); };

function EnrollmentPage() {
  const [enr, setEnr] = useState(() => AAU.enrollments.map(e => ({ ...e })));
  const [plans, setPlans] = useState(() => JSON.parse(JSON.stringify(AAU.paymentPlans)));
  const [planId, setPlanId] = useState(null);   // enrollment đang mở drawer
  const [add, setAdd] = useState(false);

  const recompute = (e, plan) => {
    const paid = plan ? plan.filter(p => p.status === 'paid').reduce((s, p) => s + p.amount, 0) : e.paid;
    const hasOverdue = plan && plan.some(p => p.status === 'overdue');
    const payStatus = paid >= e.fee ? 'paid' : hasOverdue ? 'overdue' : 'partial';
    return { ...e, paid, payStatus };
  };

  function recordPay(enrId, idx) {
    setPlans(prev => {
      const np = { ...prev };
      const plan = np[enrId].map((p, i) => i === idx ? { ...p, status: 'paid' } : p);
      np[enrId] = plan;
      setEnr(es => es.map(e => e.id === enrId ? recompute(e, plan) : e));
      return np;
    });
  }

  function addEnrollment(data) {
    const id = 'en' + Date.now();
    const deposit = Math.min(data.deposit, data.fee);
    const today = ENR_ISO(AAU.TODAY);
    const plan = [
      { name: 'Cọc giữ chỗ', amount: deposit, due: today, status: deposit > 0 ? 'paid' : 'due' },
      { name: 'Học phí còn lại', amount: data.fee - deposit, due: ENR_ADD_DAYS(today, 14), status: 'due' },
    ].filter(p => p.amount > 0);
    const e = recompute({ id, name: data.name, company: data.company, course: data.course, classId: data.classId, date: today, fee: data.fee, paid: 0, payStatus: 'partial' }, plan);
    setPlans(p => ({ ...p, [id]: plan }));
    setEnr(es => [e, ...es]);
    if (window.API && window.API.enabled) window.API.post('/enrollments', e).catch(() => {});
    setAdd(false);
  }

  const rows = enr.map(e => {
    const k = AAU.classById(e.classId);
    return { ...e, who: e.leadId ? AAU.leadById(e.leadId)?.name : e.name, courseName: AAU.courseById(e.course)?.name, cls: k, debt: e.fee - e.paid };
  });
  const totalPaid = rows.reduce((s, e) => s + e.paid, 0);
  const totalDebt = rows.reduce((s, e) => s + e.debt, 0);
  const overdue = rows.filter(e => e.payStatus === 'overdue').length;
  const payTone = { paid: 'success', partial: 'warning', overdue: 'critical' };
  const payLabel = { paid: 'Đã đủ', partial: 'Trả 1 phần', overdue: 'Quá hạn' };

  const cols = [
    { key: 'who', label: 'Học viên', render: e => <div className="fw6">{e.who}<div className="t11 subtle">{e.leadId ? <span className="linkish" onClick={ev => { ev.stopPropagation(); navigate('/leads/' + e.leadId); }}>Hồ sơ CRM ↗</span> : e.company || '—'}</div></div>, csv: e => e.who },
    { key: 'courseName', label: 'Khóa học', render: e => <span className="t12">{e.courseName}</span> },
    { key: 'cls', label: 'Lớp · Khai giảng', render: e => e.cls ? <div className="t12"><div className="fw6">{e.cls.batch}</div><div className="subtle">{AAU.fmtDate(e.cls.start)} · {e.cls.patLabel}</div></div> : '—', csv: e => e.cls?.batch },
    { key: 'date', label: 'Ngày ghi danh', render: e => AAU.fmtDate(e.date) },
    { key: 'fee', label: 'Học phí', num: true, render: e => AAU.fmtVND(e.fee) },
    { key: 'paid', label: 'Đã thu', num: true, render: e => (
      <div style={{ minWidth: 96 }}>
        <div className="row jcsb t11 mb2"><span className="fw6">{AAU.fmtVNDm(e.paid)}</span>{e.debt > 0 && <span className="sla-bad">nợ {AAU.fmtVNDm(e.debt)}</span>}</div>
        <div className="fillbar" style={{ height: 5 }}><span style={{ width: Math.round(e.paid / e.fee * 100) + '%', background: e.payStatus === 'paid' ? '#0e7c4a' : e.payStatus === 'overdue' ? '#c4320a' : '#d97706' }} /></div>
      </div>
    ), csv: e => e.paid },
    { key: 'payStatus', label: 'Thanh toán', render: e => <Badge tone={payTone[e.payStatus]}>{payLabel[e.payStatus]}</Badge> },
    { key: 'act', label: '', sortable: false, render: e => plans[e.id] ? <Button size="sm" icon="dollar" onClick={ev => { ev.stopPropagation(); setPlanId(e.id); }}>Đợt TT</Button> : <Badge tone="success">Xong</Badge> },
  ];

  const cur = planId && rows.find(e => e.id === planId);

  return (
    <div className="page wide">
      <PageHead title="Ghi danh" subtitle="Học viên ghi danh theo lớp · kế hoạch thanh toán theo đợt · hóa đơn VAT"
        actions={<><Button icon="download">Xuất Excel</Button><Button variant="primary" icon="plus" onClick={() => setAdd(true)}>Ghi danh mới</Button></>} />
      <div className="grid gc4 mb16">
        <KPI label="Ghi danh trong kỳ" value={rows.length} sub="học viên" icon="users" />
        <KPI label="Đã thu" value={AAU.fmtVNDm(totalPaid)} delta={9} icon="dollar" />
        <KPI label="Công nợ phải thu" value={AAU.fmtVNDm(totalDebt)} sub={overdue + ' đợt quá hạn'} icon="alert" />
        <KPI label="Sĩ số toàn hệ thống" value={AAU.classes.reduce((s, c) => s + c.enrolled, 0)} sub={AAU.classes.length + ' lớp đang mở'} icon="graduation" />
      </div>
      {overdue > 0 && <div className="mkt-alert mb16" style={{ background: 'var(--p-critical-bg)', color: '#8e1f0b' }}><Icon name="alert" size={16} /><div className="t13">{overdue} đợt thanh toán quá hạn — tự động nhắc kế toán qua Email/ZNS. Mở “Đợt TT” để ghi nhận thu.</div></div>}
      <DataTable columns={cols} rows={rows} getId={e => e.id} searchKeys={['who', 'courseName']} onRowClick={e => plans[e.id] && setPlanId(e.id)} exportName="enrollments" pageSize={10} />

      {cur && (
        <Drawer title="Kế hoạch thanh toán" onClose={() => setPlanId(null)}
          footer={<><Button icon="fileText">Xuất hóa đơn VAT</Button>{cur.debt > 0 ? <Button variant="primary" icon="dollar" onClick={() => { const idx = plans[cur.id].findIndex(p => p.status !== 'paid'); if (idx >= 0) recordPay(cur.id, idx); }}>Ghi nhận đợt kế tiếp</Button> : <Badge tone="success">Đã thu đủ</Badge>}</>}>
          <div className="row aic g10 mb16"><Avatar name={cur.who} size={40} /><div><div className="t15 fw7">{cur.who}</div><div className="t12 muted">{cur.courseName} · {cur.cls?.batch} · {AAU.fmtVND(cur.fee)}</div></div></div>
          <div className="grid gc3 mb16">
            <KPI label="Học phí" value={AAU.fmtVNDm(cur.fee)} />
            <KPI label="Đã thu" value={AAU.fmtVNDm(cur.paid)} />
            <KPI label="Còn nợ" value={AAU.fmtVNDm(cur.fee - cur.paid)} />
          </div>
          <div className="t12 fw7 subtle mb8">CÁC ĐỢT</div>
          <div className="col g10">
            {plans[cur.id].map((p, i) => (
              <div key={i} className="row aic g12" style={{ padding: 12, borderRadius: 10, border: '1px solid var(--p-border)' }}>
                <span className="center" style={{ width: 30, height: 30, borderRadius: '50%', background: p.status === 'paid' ? 'var(--p-success-bg)' : p.status === 'overdue' ? 'var(--p-critical-bg)' : 'var(--p-warning-bg)', color: p.status === 'paid' ? '#0e7c4a' : p.status === 'overdue' ? '#c4320a' : '#b06f00' }}><Icon name={p.status === 'paid' ? 'check' : 'clock'} size={15} /></span>
                <div className="f1"><div className="t13 fw6">{p.name}</div><div className="t12 subtle">Hạn {AAU.fmtDate(p.due)}</div></div>
                <div style={{ textAlign: 'right' }}><div className="t13 fw7">{AAU.fmtVND(p.amount)}</div><Badge tone={p.status === 'paid' ? 'success' : p.status === 'overdue' ? 'critical' : 'warning'}>{p.status === 'paid' ? 'Đã thu' : p.status === 'overdue' ? 'Quá hạn' : 'Đến hạn'}</Badge></div>
                {p.status !== 'paid' && <Button size="sm" variant="primary" onClick={() => recordPay(cur.id, i)}>Thu</Button>}
              </div>
            ))}
          </div>
        </Drawer>
      )}

      {add && <EnrollNewModal onClose={() => setAdd(false)} onSave={addEnrollment} />}
    </div>
  );
}

function EnrollNewModal({ onClose, onSave }) {
  const courses = AAU.courses.filter(c => c.price);
  const [name, setName] = useState('');
  const [company, setCompany] = useState('');
  const [course, setCourse] = useState(courses[0].id);
  const classesOf = AAU.classes.filter(c => c.course === course);
  const [classId, setClassId] = useState(classesOf[0]?.id || '');
  const [fee, setFee] = useState(AAU.courseById(course).price);
  const [deposit, setDeposit] = useState('');
  const num = (v) => Number(String(v).replace(/\D/g, '')) || 0;

  function pickCourse(cid) {
    setCourse(cid);
    const cls = AAU.classes.filter(c => c.course === cid);
    setClassId(cls[0]?.id || '');
    setFee(AAU.courseById(cid).price);
  }

  return (
    <Modal title="Ghi danh học viên mới" onClose={onClose}
      footer={<><Button onClick={onClose}>Hủy</Button><Button variant="primary" icon="save" disabled={!name || !classId} onClick={() => onSave({ name, company, course, classId, fee: num(fee), deposit: num(deposit) })}>Ghi danh</Button></>}>
      <div className="col g14">
        <div className="grid gc2 g12">
          <Field label="Tên học viên"><Input value={name} onChange={setName} placeholder="Nguyễn Văn A" /></Field>
          <Field label="Công ty / mô hình"><Input value={company} onChange={setCompany} placeholder="vd Chuỗi cà phê 3 CN" /></Field>
        </div>
        <Field label="Khóa học"><Select value={course} onChange={pickCourse} options={courses.map(c => ({ value: c.id, label: c.name }))} /></Field>
        <Field label="Lớp khai giảng">
          {classesOf.length
            ? <Select value={classId} onChange={setClassId} options={classesOf.map(c => ({ value: c.id, label: c.batch + ' · KG ' + AAU.fmtDate(c.start) }))} />
            : <div className="callout-soft"><Icon name="alert" size={14} /><span className="t12">Khóa này chưa có lớp mở — tạo lớp ở "Lịch khai giảng".</span></div>}
        </Field>
        <div className="grid gc2 g12">
          <Field label="Học phí (₫)"><Input value={fee} onChange={setFee} /></Field>
          <Field label="Đặt cọc / thu ngay (₫)"><Input value={deposit} onChange={setDeposit} placeholder="vd 3000000" /></Field>
        </div>
        <div className="callout-soft"><Icon name="bolt" size={14} /><span className="t12">Hệ thống tạo sẵn 2 đợt: <b>cọc giữ chỗ</b> (thu ngay) + <b>học phí còn lại</b> (hạn sau 14 ngày). Doanh thu này tự chảy vào báo cáo Tài chính.</span></div>
      </div>
    </Modal>
  );
}

Object.assign(window, { EnrollmentPage });