<style>
.proposal-wrap { max-width:760px; margin:40px auto; padding:0 20px 60px; }
.proposal-header { background:linear-gradient(135deg,#1a56db,#1e40af); color:#fff; border-radius:12px; padding:32px; margin-bottom:24px; }
.proposal-header h1 { margin:0 0 8px; font-size:1.5rem; }
.proposal-section { background:#fff; border:1.5px solid #e5e7eb; border-radius:12px; padding:24px; margin-bottom:16px; }
.proposal-section h3 { font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:#9ca3af; margin:0 0 12px; }
.proposal-actions { position:sticky; bottom:24px; background:#fff; border:1.5px solid #e5e7eb; border-radius:12px; padding:20px; box-shadow:0 8px 24px rgba(0,0,0,.12); display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
</style>

<div class="proposal-wrap">
  <div class="proposal-header">
    <% if (proposal.org_logo) { %><img src="<%= proposal.org_logo %>" alt="" style="height:36px;border-radius:6px;margin-bottom:12px;object-fit:contain;background:rgba(255,255,255,.2);padding:4px"><% } %>
    <p style="margin:0 0 8px;opacity:.8;font-size:.875rem"><%= proposal.org_name %> sent you a proposal</p>
    <h1><%= proposal.title %></h1>
    <p style="margin:6px 0 0;opacity:.75;font-size:.85rem">
      For: <strong><%= proposal.client_name %></strong><% if(proposal.client_company){%> · <%= proposal.client_company %><%}%>
      &nbsp;·&nbsp; Prepared: <%= moment(proposal.created_at).format('MMMM D, YYYY') %>
    </p>
  </div>

  <% if(proposal.total_amount){ %>
  <div class="proposal-section" style="border-color:#bbf7d0;background:#f0fdf4;display:flex;align-items:center;justify-content:space-between">
    <div>
      <p style="margin:0 0 4px;font-size:.8rem;color:#166534;font-weight:600;text-transform:uppercase;letter-spacing:.05em">Proposed Investment</p>
      <p style="margin:0;font-size:2rem;font-weight:700;color:#16a34a">$<%= parseFloat(proposal.total_amount).toFixed(2) %></p>
      <% if(proposal.payment_terms){%><p style="margin:0;font-size:.8rem;color:#166534"><%= proposal.payment_terms %></p><%}%>
    </div>
    <% if(proposal.timeline){%><div style="text-align:right"><p style="margin:0;font-size:.75rem;color:#166534;text-transform:uppercase;font-weight:600">Timeline</p><p style="margin:0;font-size:1.1rem;font-weight:700;color:#166534"><%= proposal.timeline %></p></div><%}%>
  </div>
  <% } else if(proposal.timeline){ %>
  <div class="proposal-section" style="display:flex;gap:10px;align-items:center;color:#374151">
    <i class="bi bi-clock-fill" style="color:#1a56db;font-size:1.2rem"></i>
    <div><p style="margin:0;font-size:.75rem;color:#6b7280;text-transform:uppercase;font-weight:600">Timeline</p><p style="margin:0;font-weight:600"><%= proposal.timeline %></p></div>
  </div>
  <% } %>

  <div class="proposal-section">
    <h3>Scope of Work</h3>
    <p style="white-space:pre-wrap;color:#374151;line-height:1.7;margin:0"><%= proposal.scope %></p>
  </div>

  <% if(proposal.deliverables){ %>
  <div class="proposal-section">
    <h3>Deliverables</h3>
    <p style="white-space:pre-wrap;color:#374151;line-height:1.7;margin:0"><%= proposal.deliverables %></p>
  </div>
  <% } %>

  <% if(proposal.notes){ %>
  <div class="proposal-section">
    <h3>Additional Terms & Notes</h3>
    <p style="white-space:pre-wrap;color:#374151;line-height:1.7;margin:0"><%= proposal.notes %></p>
  </div>
  <% } %>

  <div class="proposal-section" style="background:#f9fafb">
    <h3>About <%= proposal.org_name %></h3>
    <div style="display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;color:#374151">
      <% if(proposal.org_website){%><a href="<%= proposal.org_website %>" target="_blank" style="color:#1a56db"><i class="bi bi-globe2"></i> <%= proposal.org_website.replace(/^https?:\/\//,'') %></a><%}%>
      <% if(proposal.org_phone){%><span><i class="bi bi-telephone-fill"></i> <%= proposal.org_phone %></span><%}%>
      <% if(proposal.org_email){%><a href="mailto:<%= proposal.org_email %>" style="color:#1a56db"><i class="bi bi-envelope-fill"></i> <%= proposal.org_email %></a><%}%>
    </div>
  </div>

  <div id="responseSection">
    <div class="proposal-actions">
      <div style="flex:1;min-width:200px">
        <p style="margin:0;font-size:.8rem;color:#6b7280">Ready to move forward? Accept this proposal to automatically receive a service agreement for signing.</p>
        <p style="margin:4px 0 0;font-size:.72rem;color:#9ca3af">Valid until <%= moment(proposal.token_expires).format('MMMM D, YYYY') %></p>
      </div>
      <button class="btn btn-primary" onclick="showAccept()"><i class="bi bi-check-circle-fill"></i> Accept Proposal</button>
      <button class="btn btn-ghost" onclick="showDecline()" style="color:#dc2626"><i class="bi bi-x-circle"></i> Decline</button>
    </div>

    <div id="acceptForm" style="display:none" class="proposal-section" style="border-color:#bbf7d0">
      <h3 style="color:#166534">Accept Proposal</h3>
      <p style="font-size:.875rem;color:#374151;margin-bottom:12px">By accepting, you agree to the scope and terms outlined above. A service agreement will be sent to <strong><%= proposal.client_email %></strong> for your signature.</p>
      <textarea id="acceptNotes" placeholder="Optional: add any notes or comments..." rows="3" style="width:100%;padding:10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:.875rem;resize:vertical;box-sizing:border-box"></textarea>
      <div style="display:flex;gap:10px;margin-top:12px">
        <button class="btn btn-primary" onclick="acceptProposal()"><i class="bi bi-check-circle-fill"></i> Confirm Acceptance</button>
        <button class="btn btn-ghost" onclick="document.getElementById('acceptForm').style.display='none'">Cancel</button>
      </div>
    </div>

    <div id="declineForm" style="display:none" class="proposal-section" style="border-color:#fecaca">
      <h3 style="color:#991b1b">Decline Proposal</h3>
      <textarea id="declineNotes" placeholder="Optional: let them know why you're declining..." rows="3" style="width:100%;padding:10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:.875rem;resize:vertical;box-sizing:border-box"></textarea>
      <div style="display:flex;gap:10px;margin-top:12px">
        <button class="btn btn-danger" onclick="declineProposal()"><i class="bi bi-x-circle-fill"></i> Confirm Decline</button>
        <button class="btn btn-ghost" onclick="document.getElementById('declineForm').style.display='none'">Cancel</button>
      </div>
    </div>
  </div>
</div>

<script>
const TOKEN = '<%= proposal.token %>';
function showAccept() { document.getElementById('acceptForm').style.display='block'; document.getElementById('declineForm').style.display='none'; document.getElementById('acceptForm').scrollIntoView({behavior:'smooth'}); }
function showDecline() { document.getElementById('declineForm').style.display='block'; document.getElementById('acceptForm').style.display='none'; document.getElementById('declineForm').scrollIntoView({behavior:'smooth'}); }

async function acceptProposal() {
  const notes = document.getElementById('acceptNotes').value;
  const res   = await fetch(`/proposals/view/${TOKEN}/accept`, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ response_notes: notes }) });
  const data  = await res.json();
  if (data.success) {
    document.getElementById('responseSection').innerHTML = `<div style="background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:12px;padding:32px;text-align:center"><i class="bi bi-check-circle-fill" style="font-size:3rem;color:#16a34a;display:block;margin-bottom:12px"></i><h3 style="color:#166534;margin:0 0 8px">Proposal Accepted!</h3><p style="color:#374151">${data.message}</p></div>`;
  } else {
    alert(data.error || 'Failed to accept.');
  }
}

async function declineProposal() {
  const notes = document.getElementById('declineNotes').value;
  const res   = await fetch(`/proposals/view/${TOKEN}/decline`, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ response_notes: notes }) });
  const data  = await res.json();
  if (data.success) {
    document.getElementById('responseSection').innerHTML = `<div style="background:#fef2f2;border:1.5px solid #fecaca;border-radius:12px;padding:32px;text-align:center"><i class="bi bi-x-circle-fill" style="font-size:3rem;color:#dc2626;display:block;margin-bottom:12px"></i><h3 style="color:#991b1b;margin:0 0 8px">Proposal Declined</h3><p style="color:#374151">${data.message}</p></div>`;
  } else {
    alert(data.error || 'Failed to decline.');
  }
}
</script>
