/* calc2-purchase-plan.jsx — вид «План закупок» на вкладке «Материалы»: те же материалы сметы (черновые +
   чистовые, включая перенесённые из спецификации ДП), сгруппированные по фазам закупки вместо работ.
   Расчёт — чистая функция lk/calc2-purchase-plan-data.js (Calc2PurchasePlanData.byPhase, задача E5);
   здесь только вёрстка, переиспользует стили calc2.css (.cc-mattbl, .cc-pill, LKSection).
   Exports on window.Calc2PurchasePlan */
(function () {
  const C = window.Calc2;
  const PD = window.Calc2PurchasePlanData;
  const rub = C.rub;

  function Calc2PurchasePlan({ est, catalog }) {
    const { Ic, LKSection } = window;
    if (!PD) return null;
    const hasDates = !!(est.schedule && est.schedule.start);
    const today = C.toISO(new Date());
    const phases = PD.byPhase(est, catalog, today);
    const fmtDate = (iso) => iso ? new Date(iso).toLocaleDateString('ru-RU', new Date(iso).getFullYear() === new Date().getFullYear() ? { day: '2-digit', month: 'short' } : { day: '2-digit', month: 'short', year: 'numeric' }) : '—';

    if (!phases.length) {
      return <div className="cc-empty">Включите работы в составе сметы — план закупок появится здесь.</div>;
    }

    return (
      <div>
        {!hasDates && (
          <div className="lk-banner" style={{ marginBottom: 14 }}>
            <span className="lk-banner-s"><Ic n="calendar-range" s={13} /> Дата старта работ не задана — «заказать до» появится после того, как она будет указана на этапе «График».</span>
          </div>
        )}
        {phases.map((ph) => (
          <LKSection key={ph.phaseIdx} icon="truck" title={ph.phaseName} sub={ph.items.length + ' поз. · ' + rub(ph.total) + ' ₽'} style={{ marginBottom: 14 }}>
            <table className="cc-mattbl">
              <thead>
                <tr>
                  <th>Материал</th><th className="num">Кол-во</th><th className="num">Сумма</th>
                  {hasDates && <th className="num">Заказать до</th>}
                  {hasDates && <th className="num">Привезти к</th>}
                </tr>
              </thead>
              <tbody>
                {ph.items.map((it, i) => (
                  <tr key={i}>
                    <td>
                      <div className="cc-mat-name">{it.name}{it.fromDp && <span className="cc-pill cat" style={{ marginLeft: 6 }}>ДП</span>}</div>
                      <div className="cc-mat-sku">{it.kind === 'finish' ? 'чистовой' : 'черновой'}{it.lead ? ' · lead ' + it.lead + 'д' : ''}</div>
                    </td>
                    <td className="num">{it.qty} {it.unit}</td>
                    <td className="num" style={{ fontWeight: 800 }}>{rub(it.client)} ₽</td>
                    {hasDates && (
                      <td className="num" style={it.overdue ? { color: 'var(--destructive)', fontWeight: 700 } : undefined}>
                        {fmtDate(it.orderBy)}
                      </td>
                    )}
                    {hasDates && <td className="num">{fmtDate(it.deliverBy)}</td>}
                  </tr>
                ))}
              </tbody>
            </table>
          </LKSection>
        ))}
      </div>
    );
  }

  window.Calc2PurchasePlan = Calc2PurchasePlan;
})();