<%- include('../../layouts/admin-header') %>

<div style="margin-bottom: 1.5rem;">
  <a href="/admin/orders" style="color: var(--admin-text-muted); font-size: 0.85rem;">← Back to Orders List</a>
  <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-top: 0.5rem; flex-wrap: wrap; gap: 1rem;">
    <div>
      <h1 style="font-size: 1.5rem; font-weight: 700;">Order: <%= order.order_reference %></h1>
      <p style="color: var(--admin-text-muted); font-size: 0.88rem;">
        Received on <%= order.created_at %> • Current Status: 
        <% if (order.status === 'confirmed') { %>
          <span class="admin-badge badge-confirmed">Confirmed (Inventory Deducted)</span>
        <% } else if (order.status === 'fulfilled') { %>
          <span class="admin-badge badge-fulfilled">Fulfilled / Dispatched</span>
        <% } else if (order.status === 'cancelled') { %>
          <span class="admin-badge badge-cancelled">Cancelled</span>
        <% } else { %>
          <span class="admin-badge badge-inquiry">Inquiry (Pending Confirmation)</span>
        <% } %>
      </p>
    </div>

    <!-- Action Workflow Buttons -->
    <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
      <% if (order.status === 'inquiry') { %>
        <form action="/admin/orders/<%= order.id %>/confirm" method="POST" onsubmit="return confirm('Confirm order and deduct inventory stock for all pieces in this order?');">
          <button type="submit" class="admin-btn admin-btn-success admin-btn-lg">
            ✓ Confirm Order &amp; Deduct Stock
          </button>
        </form>
      <% } %>

      <% if (order.status === 'confirmed') { %>
        <form action="/admin/orders/<%= order.id %>/fulfill" method="POST">
          <button type="submit" class="admin-btn admin-btn-primary admin-btn-lg">
            📦 Mark as Fulfilled / Dispatched
          </button>
        </form>
      <% } %>

      <% if (order.status !== 'cancelled') { %>
        <form action="/admin/orders/<%= order.id %>/cancel" method="POST" onsubmit="return confirm('Cancel this order? If previously confirmed, deducted stock will automatically be restored to inventory.');" style="display: flex; gap: 0.5rem;">
          <input type="hidden" name="cancel_reason" value="Cancelled by admin">
          <button type="submit" class="admin-btn admin-btn-danger">
            ✕ Cancel Order
          </button>
        </form>
      <% } %>

      <!-- Direct WhatsApp Reply Button -->
      <% const cleanPhone = order.customer_phone.replace(/[^0-9]/g, ''); %>
      <a href="https://wa.me/<%= cleanPhone %>?text=Hello%20<%= encodeURIComponent(order.customer_name) %>,%20thank%20you%20for%20your%20inquiry%20<%= order.order_reference %>%20with%20Atelier%20Nina%20Weaves." target="_blank" class="admin-btn admin-btn-secondary">
        💬 Chat Customer on WhatsApp
      </a>
    </div>
  </div>
</div>

<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start;">
  <!-- Left: Ordered Items Table -->
  <div class="panel">
    <div class="panel-header">
      <div class="panel-title">Requested Pieces &amp; Textiles</div>
    </div>
    <div class="panel-body" style="padding: 0;">
      <div class="table-responsive">
        <table class="data-table">
          <thead>
            <tr>
              <th>Item / Product</th>
              <th>SKU</th>
              <th>Size</th>
              <th>Fabric Quality</th>
              <th>Unit Price</th>
              <th>Quantity</th>
              <th style="text-align: right;">Line Total</th>
            </tr>
          </thead>
          <tbody>
            <% order.items.forEach(item => { %>
              <tr>
                <td>
                  <strong><%= item.product_name %></strong>
                </td>
                <td><code><%= item.sku %></code></td>
                <td><strong><%= item.size || '—' %></strong></td>
                <td><%= item.quality || 'Standard' %></td>
                <td>₹<%= item.unit_price.toLocaleString('en-IN') %></td>
                <td><strong><%= item.quantity %></strong> <%= item.unit || 'piece' %></td>
                <td style="text-align: right;">
                  <strong>₹<%= item.total_price.toLocaleString('en-IN') %></strong>
                </td>
              </tr>
            <% }) %>
          </tbody>
          <tfoot>
            <tr style="background: #F8FAFC; border-top: 2px solid var(--admin-border);">
              <td colspan="6" style="text-align: right; font-weight: 700; font-size: 1.05rem;">Estimated Subtotal:</td>
              <td style="text-align: right; font-weight: 700; font-size: 1.25rem; color: var(--admin-text-main);">
                ₹<%= order.subtotal.toLocaleString('en-IN') %>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>

  <!-- Right: Customer & Fulfillment Details -->
  <div style="display: flex; flex-direction: column; gap: 1.5rem;">
    <!-- Customer Info Card -->
    <div class="panel">
      <div class="panel-header">
        <div class="panel-title">Customer Details</div>
      </div>
      <div class="panel-body">
        <div style="margin-bottom: 1rem;">
          <label class="admin-label">Full Name</label>
          <div style="font-weight: 700; font-size: 1.05rem;"><%= order.customer_name %></div>
        </div>

        <div style="margin-bottom: 1rem;">
          <label class="admin-label">WhatsApp Mobile Number</label>
          <div style="font-size: 0.95rem;">
            <a href="tel:<%= order.customer_phone %>" style="color: #4F46E5; font-weight: 600;"><%= order.customer_phone %></a>
          </div>
        </div>

        <% if (order.customer_email) { %>
          <div style="margin-bottom: 1rem;">
            <label class="admin-label">Email Address</label>
            <div style="font-size: 0.95rem;"><%= order.customer_email %></div>
          </div>
        <% } %>

        <div style="margin-bottom: 1rem;">
          <label class="admin-label">Physical Delivery Address</label>
          <div style="font-size: 0.92rem; line-height: 1.6; background: #F8FAFC; padding: 0.75rem; border-radius: 4px; border: 1px solid #E2E8F0;">
            <%= order.delivery_address || 'Not provided by customer' %>
          </div>
        </div>

        <% if (order.notes) { %>
          <div>
            <label class="admin-label">Customer Special Instructions</label>
            <div style="font-size: 0.88rem; line-height: 1.5; color: #475569; background: #FFFBEB; padding: 0.75rem; border-radius: 4px; border: 1px solid #FDE68A;">
              <%= order.notes %>
            </div>
          </div>
        <% } %>
      </div>
    </div>

    <!-- Timeline & Stock Status Card -->
    <div class="panel">
      <div class="panel-header">
        <div class="panel-title">Fulfillment Log</div>
      </div>
      <div class="panel-body" style="font-size: 0.85rem; line-height: 1.8;">
        <div>• <strong>Inquiry Created:</strong> <%= order.created_at %></div>
        <div>• <strong>Confirmed At:</strong> <%= order.confirmed_at || 'Pending Confirmation' %></div>
        <div>• <strong>Fulfilled At:</strong> <%= order.fulfilled_at || 'Not yet fulfilled' %></div>
        <% if (order.cancelled_at) { %>
          <div style="color: #EF4444;">• <strong>Cancelled At:</strong> <%= order.cancelled_at %></div>
        <% } %>
      </div>
    </div>
  </div>
</div>

<%- include('../../layouts/admin-footer') %>
