from pathlib import Path
p=Path('resources/js/vue/src/pages/caller/CallerConsolePage.vue')
s=p.read_text()
s=s.replace('<div class="cc-workspace">','<div class="cc-workspace" :class="workspaceClass">',1)
s=s.replace('<aside class="cc-panel cc-queue">','<aside v-if="showSheet" class="cc-panel cc-queue">',1)
a=s.index('          <div class="cc-queue-list">')
b=s.index('          <button\n            v-if="worklist.has_more"',a)
s=s[:a]+'''          <div class="cc-queue-list cc-sheet-table">
            <table>
              <thead><tr><th>Name</th><th>Company</th><th>Zip</th><th>Last called</th><th>Last donation</th><th>Avg pledge</th><th>Method</th></tr></thead>
              <tbody>
                <tr v-for="item in worklist.items" :key="item.donor_id" :class="{ selected: activeId === item.donor_id }" @click="openRecord(item.donor_id)">
                  <td><button type="button" class="cc-sheet-name" :disabled="leadAssignmentPending || (callIsLocked && activeId !== item.donor_id)" @click.stop="openRecord(item.donor_id)">{{ item.name || item.company || ('#' + item.donor_id) }}</button><small class="cc-type" :class="item.kind">{{ item.kind }}</small><small v-if="item.callback_time">Callback {{ formatDateTime(item.callback_time) }}</small></td>
                  <td>{{ item.company || '-' }}</td><td>{{ item.zipcode || '-' }}</td>
                  <td>{{ item.last_called ? formatDateTime(item.last_called) : 'Never' }}</td>
                  <td><template v-if="item.metrics_snip && item.metrics_snip.last_donation_amount != null">{{ money(item.metrics_snip.last_donation_amount) }}<small>{{ formatDateTime(item.metrics_snip.last_donation_at) }}</small></template><template v-else>-</template></td>
                  <td>{{ item.metrics_snip && item.metrics_snip.average_pledge != null ? money(item.metrics_snip.average_pledge) : '-' }}</td>
                  <td>{{ item.metrics_snip && item.metrics_snip.last_payment_method != null ? methodLabel(item.metrics_snip.last_payment_method) : '-' }}</td>
                </tr>
              </tbody>
            </table>
            <div v-if="!worklist.items.length" class="cc-empty">No upcoming calls in this mode.</div>
          </div>
''' + s[b:]
s=s.replace('      </aside>\n\n      <section class="cc-panel cc-record">','''        <section class="cc-missed-calls"><h3>Missed calls</h3><p>Missed call history is not available yet.</p></section>
      </aside>

      <section v-if="record" class="cc-panel cc-record" :class="{ 'cc-focus-card': !showCallWorkspace }">''',1)
s=s.replace('<h2>{{ recordDisplayName }}</h2>','<h2>{{ recordDisplayName }}</h2>\n              <button v-if="!showCallWorkspace" type="button" class="cc-btn" @click="backToSheet">Back to call sheet</button>',1)
# focus summary before facts
idx=s.index('          <div class="cc-facts">')
s=s[:idx]+'''          <div v-if="!showCallWorkspace" class="cc-focus-summary">
            <div v-if="record.latest_donation"><small>Last donation</small><strong>{{ money(record.latest_donation.amount) }}</strong><span>{{ formatDateTime(record.latest_donation.created_at) }} · {{ methodLabel(record.latest_donation.payment_method) }}</span></div>
            <div><small>Last call</small><strong>{{ record.donor.last_called ? formatDateTime(record.donor.last_called) : 'Never called' }}</strong><span v-if="record.latest_call_result">{{ record.latest_call_result }}</span></div>
            <div v-if="record.donation_summary && record.donation_summary.count"><small>Donation history</small><strong>{{ record.donation_summary.count }} gifts</strong><span>Average {{ money(record.donation_summary.average) }} · Highest {{ money(record.donation_summary.highest) }}</span></div>
          </div>
          <div v-if="!showCallWorkspace && record.call_notes && record.call_notes.length" class="cc-focus-note"><small>Latest note</small><p>{{ record.call_notes[0].note }}</p></div>
''' +s[idx:]
s=s.replace('<div class="cc-facts">','<div v-if="!showCallWorkspace" class="cc-facts">',1)
# tabs only on calling, contact always
s=s.replace('<div class="cc-tabs">','<div v-if="showCallWorkspace" class="cc-tabs">',1)
s=s.replace('v-if="tab === \'contact\'"','v-if="!showCallWorkspace || tab === \'contact\'"',1)
s=s.replace('            <div class="cc-field-grid">','''            <div v-if="showCallWorkspace" class="cc-record-edit-actions"><button type="button" class="cc-btn" @click="recordEditing = !recordEditing">{{ recordEditing ? 'Done editing' : 'Edit' }}</button></div>
            <fieldset class="cc-field-grid" :disabled="showCallWorkspace && !recordEditing">''',1)
s=s.replace('            </div>\n\n            <div\n              v-if="record.outputs', '            </fieldset>\n\n            <div\n              v-if="record.outputs',1)
# hide contact on focus except fields? focus requires numbers only; hide rest via CSS class
s=s.replace('class="cc-tab-pane"\n          >\n            <div v-if="showCallWorkspace"', 'class="cc-tab-pane cc-contact-pane"\n          >\n            <div v-if="showCallWorkspace"',1)
s=s.replace('      <aside class="cc-panel">\n        <div class="cc-phone">','      <aside v-if="showCallWorkspace" class="cc-panel cc-phone-column">\n        <div class="cc-phone">',1)
# tabs, keypad
s=s.replace('            <div\n              v-if="showDtmfKeypad"','            <div class="cc-pad-tabs" role="tablist"><button v-if="record" type="button" :class="{ active: padTab === \'disposition\' }" @click="padTab = \'disposition\'">Disposition</button><button v-if="session.state.live" type="button" :class="{ active: padTab === \'keypad\' }" @click="padTab = \'keypad\'">Dialpad</button><button v-if="record" type="button" :class="{ active: padTab === \'output\' }" @click="padTab = \'output\'">Email / Fax</button></div>\n            <div\n              v-if="showDtmfKeypad && (padTab === \'keypad\' || !record)"',1)
s=s.replace('            v-if="record"\n            ref="wizard"','            v-if="record && padTab === \'disposition\'"\n            ref="wizard"',1)
# output in phone
needle='          <div\n            v-if="record && padTab === \'disposition\'"'
idx=s.index(needle)
s=s[:idx]+'''          <div v-if="record && padTab === 'output'" class="cc-wrap"><h4>Email / Fax</h4><div v-if="record.outputs && record.outputs.length" class="cc-output-row"><select v-model="selectedOutputId"><option value="">Select fax/email output</option><option v-for="output in record.outputs" :key="output.id" :value="String(output.id)">{{ output.name }} ({{ output.type }})</option></select><button type="button" class="cc-btn" :disabled="outputSending || !selectedOutputId" @click="onSendOutput">{{ outputSending ? 'Sending...' : 'Send' }}</button></div><p v-else>No outputs available.</p></div>
''' +s[idx:]
# Inline form
start=s.index('            <ol\n              v-if="wizardSteps.length > 1"'); end=s.index('            <div\n              v-if="error"',start); s=s[:start]+s[end:]
s=s.replace('v-if="wizardStep === \'outcome\'"','v-if="true"',1).replace('v-if="wizardStep === \'pledge\'"','v-if="disposition === \'pledgeReceived\' && !dispositionSaved"',1).replace('v-show="wizardStep === \'card\'"','v-show="disposition === \'pledgeReceived\' && !dispositionSaved"',1).replace('v-if="wizardStep === \'review\'"','v-if="false"',1)
a=s.index('            <div\n              v-else\n              class="cc-wizard-foot"'); b=s.index('\n          </div>\n        </div>\n      </aside>',a)
s=s[:a]+'''            <div v-else class="cc-wizard-foot"><button v-if="disposition === 'pledgeReceived'" type="button" class="cc-btn primary" :disabled="saving" @click="confirmPledge">{{ saving ? 'Saving...' : 'Save pledge' }}</button><button v-else type="button" class="cc-btn primary" :disabled="!disposition || saving" @click="submitDisposition">{{ saving ? 'Saving...' : 'Save disposition' }}</button></div>''' +s[b:]
# header
needle='      <div\n        class="cc-callback-alert"'
idx=s.index(needle)
s=s[:idx]+'''      <button v-if="!showCallWorkspace && session.state.phoneMode !== 'external'" type="button" class="cc-btn" :disabled="softphoneBlocked" @click="openAudioSetup">Audio Setup</button>
      <span v-if="!showCallWorkspace" class="cc-header-phone-status">{{ softphoneBlocked ? softphoneUnavailableReason : 'Softphone on' }}<template v-if="twilioAssignment.assigned"> · {{ twilioAssignment.display_number || twilioAssignment.e164 }}</template></span>
''' +s[idx:]
# state/methods
s=s.replace("      tab: 'contact',","      tab: 'contact',\n      padTab: 'disposition',\n      recordEditing: false,",1)
s=s.replace('  computed: {','''  computed: {
    showCallWorkspace () { return this.session.state.live || this.session.state.callState === 'wrapup' || this.softphonePlacing },
    showSheet () { return !this.record || this.canAttachDuringLive },
    workspaceClass () { return this.showCallWorkspace ? (this.record ? 'cc-calling' : 'cc-unlinked') : (this.record ? 'cc-focus' : 'cc-choosing') },''',1)
s=s.replace('  methods: {','''  methods: {
    backToSheet () {
      if (!this.canChangeWork('return to the call sheet')) return
      this.recordOpenRequestToken++
      this.record = null
      this.activeId = null
      this.session.state.dirty = false
      this.destroyCardElement()
    },''',1)
s=s.replace('        this.record = loadedRecord','        this.recordEditing = false\n        this.tab = \'contact\'\n        this.padTab = \'disposition\'\n        this.record = loadedRecord',1)
s=s.replace("          if (this.softphone.getCallId()) this.session.enterWrapUp()\n          else this.session.endSession()","          this.session.enterWrapUp()",1)
# Remove auto open
start=s.index('      if (nextLead && nextLead.donor_id) {',s.index('    async applySavedCallFollowUp'))
end=s.index('\n    },',start)
s=s[:start]+s[end:]
# initialize card step when pledge method changes handled by watcher below
s=s.replace("      if (item.value === 'pledgeReceived') this.goToStep('pledge')","      if (item.value === 'pledgeReceived') { this.goToStep('pledge'); this.prepareCardStep() }")
s=s.replace('—','-')
p.write_text(s)