// T2 Falcon Admin — Add Contract wizard (4 steps).
// Uses the same ac-page shell as Create New Client.

const { useState: useStateCW, useMemo: useMemoCW } = React;

// ---- Steps ----
const CW_STEPS = [
  { id: 'info',    label: 'Contract Information' },
  { id: 'rate',    label: 'Rate Card' },
  { id: 'details', label: 'Contract Details' },
  { id: 'addons',  label: 'Addons' },
];

// Stepper (matches the Add Client / Templates stepper visuals exactly)
const CwStepBar = ({ current, onJump }) => {
  const pct = (current / (CW_STEPS.length - 1)) * 100;
  return (
    <div className="ac-stepper">
      <div className="ac-stepper-track">
        <div className="ac-stepper-fill" style={{ width: pct + '%' }} />
        {CW_STEPS.map((s, i) => {
          const state = i < current ? 'done' : i === current ? 'active' : 'idle';
          return (
            <button
              key={s.id}
              type="button"
              className={`ac-stepper-dot ${state}`}
              style={{ left: `${(i / (CW_STEPS.length - 1)) * 100}%` }}
              onClick={() => onJump && i <= current && onJump(i)}
              aria-label={s.label}
            >
              {state === 'done' ? (
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
              ) : state === 'active' ? (
                <span className="ac-stepper-dot-pulse" />
              ) : null}
            </button>
          );
        })}
      </div>
      <div className="ac-stepper-labels">
        {CW_STEPS.map((s, i) => (
          <span
            key={s.id}
            className={`ac-step-label ${i === current ? 'active' : ''} ${i < current ? 'done' : ''}`}
            style={{ left: `${(i / (CW_STEPS.length - 1)) * 100}%` }}
          >
            {s.label}
          </span>
        ))}
      </div>
    </div>
  );
};

// ---- Date helpers (single source of truth: DD-MMM-YYYY everywhere) ----
const CW_MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
const todayLabel = () => {
  const d = new Date();
  return `${String(d.getDate()).padStart(2, '0')}-${CW_MONTHS[d.getMonth()]}-${d.getFullYear()}`;
};
// Native <input type="date"> holds an ISO "yyyy-mm-dd" string; convert it to the
// app-wide DD-MMM-YYYY display format used by the contract list / details.
const cwIsoToLabel = (iso) => {
  if (!iso) return '';
  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
  if (!m) return iso;
  return `${m[3]}-${CW_MONTHS[parseInt(m[2], 10) - 1]}-${m[1]}`;
};

// ---- Step 1 validation (mandatory fields + numeric / date rules) ----
const cwValidateStep1 = (d) => {
  const e = {};
  if (!d.name || !d.name.trim()) e.name = 'Contract name is required.';
  const ref = (d.farabiReferenceId || '').trim();
  if (!ref) e.farabiReferenceId = 'Reference ID is required.';
  else if (!/^\d{6,}$/.test(ref)) e.farabiReferenceId = 'Enter numbers only (at least 6 digits).';
  if (!d.startDate) e.startDate = 'Start date is required.';
  if (!d.expirationDate) e.expirationDate = 'Expiration date is required.';
  else if (d.startDate && window.cmLabelToIso(d.expirationDate) < window.cmLabelToIso(d.startDate)) e.expirationDate = 'Must be after the start date.';
  const num = parseInt(String(d.value || '').replace(/[^\d]/g, ''), 10);
  if (!String(d.value || '').trim()) e.value = 'Contract value is required.';
  else if (!num || num <= 0) e.value = 'Enter a valid amount.';
  return e;
};

// ============= Step 1: Contract Information =============
const CwStep1 = ({ data, set, t, showErrors }) => {
  const err = showErrors ? cwValidateStep1(data) : {};
  const fieldCls = (k) => `cw-field${err[k] ? ' has-error' : ''}`;
  return (
    <div className="cw-step">
      <div className="cw-grid-3">
        <div className={fieldCls('name')}>
          <label>{t.cmContractName || 'Contract Name'} <span className="cw-req">*</span></label>
          <input type="text" value={data.name || ''} placeholder="e.g. Banking OTP & Transaction Alerts" onChange={(e) => set({ name: e.target.value })} />
          {err.name && <span className="cw-field-error">{err.name}</span>}
        </div>
        <div className={fieldCls('farabiReferenceId')}>
          <label>{t.cmReferenceId || 'Reference ID'} <span className="cw-req">*</span></label>
          <input
            type="text"
            inputMode="numeric"
            value={data.farabiReferenceId || ''}
            placeholder="e.g. 1074829301"
            onChange={(e) => set({ farabiReferenceId: e.target.value.replace(/\D/g, '') })}
          />
          {err.farabiReferenceId && <span className="cw-field-error">{err.farabiReferenceId}</span>}
        </div>
        <div className={fieldCls('startDate')}>
          <label>{t.cmStartDate || 'Start Date'} <span className="cw-req">*</span></label>
          {window.CmDateField && <window.CmDateField value={data.startDate} onChange={(v) => set({ startDate: v })} placeholder="e.g. 01-Feb-2026" />}
          {err.startDate && <span className="cw-field-error">{err.startDate}</span>}
        </div>
      </div>
      <div className="cw-grid-3" style={{ marginTop: 14 }}>
        <div className={fieldCls('expirationDate')}>
          <label>{t.cmExpirationDate || 'Expiration Date'} <span className="cw-req">*</span></label>
          {window.CmDateField && <window.CmDateField value={data.expirationDate} onChange={(v) => set({ expirationDate: v })} min={data.startDate} placeholder="e.g. 31-Jan-2028" />}
          {err.expirationDate && <span className="cw-field-error">{err.expirationDate}</span>}
        </div>
        <div className={fieldCls('value')}>
          <label>{t.cmValue || 'Value'} <span className="cw-req">*</span></label>
          <div className="cw-value-input">
            <span className="cw-value-icon"><IcRiyal size={13} /></span>
            <input
              type="text"
              inputMode="numeric"
              value={data.value || ''}
              placeholder="e.g. 8,750,000"
              onChange={(e) => set({ value: window.cmFmtThousands(e.target.value) })}
            />
            <span className="cw-value-suffix">SAR</span>
          </div>
          {err.value && <span className="cw-field-error">{err.value}</span>}
        </div>
        <div className="cw-field" />
      </div>
    </div>
  );
};

// ============= Step 2: Rate Card =============
const CwStep2 = ({ data, set, t }) => {
  const rows = data.rateCard || [
    { name: 'WhatsApp',   unit: 'One KSA Transaction', value: '0.2100 SAR' },
    { name: 'Voice',      unit: 'One KSA Second',       value: '0.0450 SAR' },
    { name: 'AI-ChatGPT', unit: 'One API Call',         value: '0.0850 SAR' },
    { name: 'SMS',        unit: 'Per Message',          value: '0.0450 SAR' },
    { name: 'Email',      unit: 'Per Message',          value: '0.0120 SAR' },
  ];
  const update = (idx, patch) => set({ rateCard: rows.map((r, i) => i === idx ? { ...r, ...patch } : r) });
  const unitOpts = ['One KSA Transaction', 'One KSA Second', 'One API Call', 'One International Transaction', 'Per Minute', 'Per Message'];
  const [cwRcPage, setCwRcPage] = useStateCW(1);
  const [cwRcPageSize, setCwRcPageSize] = useStateCW(20);
  const visible = rows.slice((cwRcPage - 1) * cwRcPageSize, cwRcPage * cwRcPageSize);
  return (
    <div className="cw-step">
      <div className="ac-svc-table cw-rate-svc">
        <div className="ac-svc-head">
          <div className="ac-svc-cell">{t.cmRcName  || 'Name'}</div>
          <div className="ac-svc-cell">{t.cmRcUnit  || 'Price Unit'}</div>
          <div className="ac-svc-cell">{t.cmRcValue || 'Price Value'}</div>
        </div>
        {visible.map((r) => {
          const idx = rows.indexOf(r);
          return (
            <div key={r.name} className="ac-svc-row">
              <div className="ac-svc-cell">{r.name}</div>
              <div className="ac-svc-cell">
                {window.TplDropdown && (
                  <window.TplDropdown
                    value={r.unit}
                    onChange={(v) => update(idx, { unit: v })}
                    options={unitOpts.map(u => ({ value: u, label: u }))}
                  />
                )}
              </div>
              <div className="ac-svc-cell">
                <div className="ac-price-input">
                  <span className="ac-price-icon"><IcRiyal size={11} /></span>
                  <input
                    className="ac-input small"
                    type="text"
                    inputMode="decimal"
                    placeholder="0.0000"
                    value={(r.value || '').replace(/\s*SAR\s*$/i, '').trim()}
                    onChange={(e) => update(idx, { value: window.cmNumDecimal(e.target.value) })}
                  />
                </div>
              </div>
            </div>
          );
        })}
        {window.TablePagination && (
          <window.TablePagination
            total={rows.length}
            page={cwRcPage}
            pageSize={cwRcPageSize}
            onPageChange={setCwRcPage}
            onPageSizeChange={(n) => { setCwRcPageSize(n); setCwRcPage(1); }}
            t={t}
          />
        )}
      </div>
    </div>
  );
};

// ============= Step 3: Contract Details =============
const CwStep3 = ({ data, set, t }) => {
  const countries = ['KSA', 'UAE', 'Oman', 'Qatar', 'Kwt', 'Ymn', 'Jordan', 'Egypt', 'USA', 'UK', 'India'];
  const channels = ['WhatsApp', 'Voice', 'AI Service'];
  const apps = ['Basic Send Transaction Application', 'OTP Application', 'Marketing Application'];
  const channel = data.detailsChannel || 'WhatsApp';
  const application = data.detailsApplication || apps[0];
  const rowLabels = channel === 'WhatsApp'
    ? ['Authentication', 'Utility', 'Advertisement', 'Service']
    : channel === 'Voice'
      ? ['High', 'Normal', 'Very Low']
      : ['Token'];
  const matrix = (data.detailsMatrix && data.detailsMatrix[channel]) || rowLabels.map(() => countries.map(() => 0.074));
  const setCell = (r, c, v) => {
    const next = matrix.map(row => row.slice());
    next[r][c] = v;
    set({ detailsMatrix: { ...(data.detailsMatrix || {}), [channel]: next } });
  };
  return (
    <div className="cw-step">
      <div className="cw-details-head">
        <div className="cw-field">
          <label>{t.cmCurrency || 'Currency'}</label>
          <div className="cw-radio-row"><span className="cw-radio checked" /> SAR</div>
        </div>
        <div className="cw-field">
          <label>{t.cmApplication || 'Application'}</label>
          {window.TplDropdown && (
            <window.TplDropdown
              value={application}
              onChange={(v) => set({ detailsApplication: v })}
              options={apps.map(a => ({ value: a, label: a }))}
            />
          )}
        </div>
        <div className="cw-field">
          <label>{t.cmCommChannel || 'CommChannel'}</label>
          {window.TplDropdown && (
            <window.TplDropdown
              value={channel}
              onChange={(v) => set({ detailsChannel: v })}
              options={channels.map(c => ({ value: c, label: c }))}
            />
          )}
        </div>
      </div>
      <div className="cw-matrix-panel">
        <div className="cw-matrix-scroll">
          <table className="cw-matrix cw-matrix-styled">
            <thead>
              <tr>
                <th>{t.cmPriorityType || 'Priority/Type'}</th>
                {countries.map(c => <th key={c}>{c}</th>)}
              </tr>
            </thead>
            <tbody>
              {rowLabels.map((label, r) => (
                <tr key={label}>
                  <td className="strong">{label}</td>
                  {countries.map((_, c) => (
                    <td key={c}>
                      <input type="text" inputMode="decimal" value={String(matrix[r][c])} onChange={(e) => setCell(r, c, window.cmNumDecimal(e.target.value))} />
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {window.TablePagination && (
          <window.TablePagination
            total={rowLabels.length}
            page={1}
            pageSize={20}
            onPageChange={() => {}}
            onPageSizeChange={() => {}}
            t={t}
          />
        )}
      </div>
    </div>
  );
};

// ============= Step 4: Addons =============
const CwStep4 = ({ data, set, t }) => {
  // Addons: the value you type is the OFFERED "base". Consumed starts at 0, so
  // the contract view shows "0/base" (and later "<consumed>/base"). All fields
  // default to 0.
  const addons = data.addons || [
    { name: 'Voice Sender Name', amount: '0', original: '0' },
    { name: 'Email Domain Branding', amount: '0', original: '0' },
  ];
  const addonsRC = data.addonsRateCard || [
    { name: 'Voice Sender Name', value: '0' },
    { name: 'Email Domain Branding', value: '0' },
  ];
  const updAddon = (idx, patch) => set({ addons: addons.map((a, i) => i === idx ? { ...a, ...patch } : a) });
  const updRC    = (idx, patch) => set({ addonsRateCard: addonsRC.map((a, i) => i === idx ? { ...a, ...patch } : a) });

  // `field` selects which property the input edits: 'original' (the base/offered
  // amount) for entitlements, 'value' for the rate-card rows.
  const renderField = (a, idx, upd, field) => (
    <div className="cw-field" key={idx}>
      <label className="cw-addon-sub">{a.name}</label>
      <div className="cw-addon-input">
        <span className="cw-addon-currency"><IcRiyal size={13} /></span>
        <input
          type="text"
          value={a[field] != null ? a[field] : ''}
          placeholder="0"
          onChange={(e) => upd(idx, { [field]: window.cmFmtThousands(e.target.value) })}
        />
      </div>
    </div>
  );

  return (
    <div className="cw-step cw-addons">
      <div className="cw-addon-block">
        <div className="cw-addon-block-title">{t.cmAddons || 'Addons'}</div>
        <div className="cw-addon-divider" />
        {addons.map((a, idx) => renderField(a, idx, updAddon, 'original'))}
      </div>
      <div className="cw-addon-block">
        <div className="cw-addon-block-title">{t.cmAddonsRateCard || 'Addons Rate Card'}</div>
        <div className="cw-addon-divider" />
        {addonsRC.map((a, idx) => renderField(a, idx, updRC, 'value'))}
      </div>
    </div>
  );
};

// ============= Wizard wrapper =============
const AddContractWizard = ({ scopeNode, t, lang, onCancel, onCreated }) => {
  const [step, setStep] = useStateCW(0);
  const [data, setData] = useStateCW({
    name: '',
    farabiReferenceId: '',
    startDate: '',
    expirationDate: '',
    value: '',
  });
  const set = (patch) => setData(d => ({ ...d, ...patch }));
  const [triedNext, setTriedNext] = useStateCW(false);
  const isLast = step === CW_STEPS.length - 1;
  // Advance only when the current step validates; otherwise reveal inline errors.
  const goNext = () => {
    if (isLast) { onSave(); return; }
    if (step === 0 && Object.keys(cwValidateStep1(data)).length) { setTriedNext(true); return; }
    setTriedNext(false);
    setStep(s => s + 1);
  };

  const onSave = () => {
    const id = 'C-' + Math.random().toString(36).slice(2, 9);
    const contractId = (data.farabiReferenceId || '00000000').replace(/\D/g, '').slice(0, 8).padStart(8, '0');
    const numericVal = parseInt(String(data.value).replace(/[^\d]/g, ''), 10) || 0;
    const created = {
      id,
      contractId,
      farabiReferenceId: data.farabiReferenceId,
      name: data.name || 'New Contract',
      creationDate: todayLabel(),
      startDate: data.startDate || todayLabel(),       /* already DD-MMM-YYYY from CmDateField */
      expirationDate: data.expirationDate || todayLabel(),
      value: numericVal,
      remaining: numericVal,
      status: 'pending',
      currency: 'SAR',
      application: data.detailsApplication || 'Basic Send Transaction Application',
      ownerNode: (scopeNode && scopeNode.id) || 'aramco',
      __session: true,
      rateCard: data.rateCard,
      detailsApplication: data.detailsApplication,
      detailsChannel: data.detailsChannel,
      detailsMatrix: data.detailsMatrix,
      addons: data.addons,
      addonsRateCard: data.addonsRateCard,
    };
    onCreated && onCreated(created);
  };

  return (
    <div className="ac-page cw-page">
      <div className="ac-topbar">
        <div className="ac-topbar-brand cw-topbar-brand">
          {scopeNode && scopeNode.brand
            ? <BrandLogo brand={scopeNode.brand} size={36} />
            : <span className="ac-brand-mark cw-brand-mark"><T2Mark size={36} color="#0d3f44" /></span>}
          <span className="ac-brand-name cw-brand-name">{scopeNode ? scopeNode.name : 'Falcon'}</span>
        </div>
        <div className="ac-topbar-actions">
          <button className="btn btn-secondary" type="button" onClick={onCancel}>{t.cancel || 'Cancel'}</button>
          <button className="btn btn-secondary" type="button" onClick={() => setStep(s => Math.max(0, s - 1))} disabled={step === 0}>{t.previous || 'Previous'}</button>
          <button className="btn btn-primary" type="button" onClick={goNext}>{isLast ? (t.save || 'Save') : (t.next || 'Next')}</button>
        </div>
      </div>
      <div className="ac-body">
        <div className="ac-card cw-card">
          <div className="ac-card-head">
            <div className="ac-card-title">{t.cmAddContract || 'Add New Contract'}</div>
            <div className="ac-step-counter">{(t.stepNum || 'step').toLowerCase()} <strong>{step + 1}/{CW_STEPS.length}</strong></div>
          </div>
          <CwStepBar current={step} onJump={(i) => setStep(i)} />
          <div className="ac-card-body cw-body">
            {step === 0 && <CwStep1 data={data} set={set} t={t} showErrors={triedNext} />}
            {step === 1 && <CwStep2 data={data} set={set} t={t} />}
            {step === 2 && <CwStep3 data={data} set={set} t={t} />}
            {step === 3 && <CwStep4 data={data} set={set} t={t} />}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { AddContractWizard });