<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Creative Oasis Admin</title>
  <link rel="stylesheet" href="/style.css">
  <style>
    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .job {
      border: 1px solid #ddd;
      border-radius: 12px;
      background: #fff;
      padding: 16px;
    }

    .meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 16px;
    }

    .muted {
      color: #666;
    }

    .thumb {
      max-width: 180px;
      max-height: 180px;
      border: 1px solid #ddd;
      padding: 4px;
      background: #fff;
    }

    .status {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #ccc;
      text-transform: capitalize;
      margin-right: 6px;
    }

    .status-new {
      background: #f3f4f6;
      color: #222;
    }

    .status-proofing {
      background: #fff7ed;
      color: #9a3412;
      border-color: #fdba74;
    }

    .status-approved {
      background: #ecfdf5;
      color: #166534;
      border-color: #86efac;
    }

    .status-in-production {
      background: #eff6ff;
      color: #1d4ed8;
      border-color: #93c5fd;
    }

    .status-completed {
      background: #f0fdf4;
      color: #15803d;
      border-color: #86efac;
    }

    .status-linked {
      background: #eef2ff;
      color: #4338ca;
      border-color: #a5b4fc;
    }

    textarea,
    input[type=text],
    select {
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      margin-top: 4px;
      margin-bottom: 12px;
    }

    label {
      font-weight: 600;
      display: block;
      margin-top: 10px;
    }

    button {
      padding: 10px 16px;
      border: 0;
      border-radius: 8px;
      cursor: pointer;
    }

    pre {
      white-space: pre-wrap;
      word-break: break-word;
      background: #fafafa;
      border: 1px solid #e3e3e3;
      padding: 12px;
      border-radius: 8px;
    }

    .card h2 {
      margin-top: 0;
    }

    hr {
      border: 0;
      border-top: 1px solid #eee;
      margin: 18px 0;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <h1>Creative Oasis Personalization Admin</h1>
    <p class="muted">Live production queue for saved customization projects.</p>

    <div class="card">
      <h2>Customization Queue</h2>

      <% if (!rows || !rows.length) { %>
        <p>No customizations yet.</p>
      <% } %>

      <div class="grid">
        <% (rows || []).forEach(function(row) { %>
          <div class="job">
            <h3><%= row.id %></h3>

            <p>
              <span class="status status-<%= (row.status || 'new').toLowerCase() %>">
                <%= row.status || "new" %>
              </span>

              <% if (row.linked_to_order) { %>
                <span class="status status-linked">linked</span>
              <% } %>
            </p>

            <div class="meta">
              <p><strong>Product:</strong> <%= row.product_title || "-" %></p>
              <p><strong>Handle:</strong> <%= row.product_handle || "-" %></p>

              <p><strong>Line item:</strong> <%= row.line_item_title || "-" %></p>
              <p><strong>Variant ID:</strong> <%= row.variant_id || "-" %></p>

              <p><strong>Text:</strong> <%= row.custom_text || "-" %></p>
              <p><strong>Font:</strong> <%= row.font_choice || "-" %></p>

              <p><strong>Order:</strong> <%= row.order_name || "-" %></p>
              <p><strong>Order number:</strong> <%= row.order_number || "-" %></p>

              <p><strong>Customer:</strong> <%= row.customer_name || "-" %></p>
              <p><strong>Email:</strong> <%= row.customer_email || "-" %></p>

              <p><strong>Status:</strong> <%= row.status || "new" %></p>
              <p><strong>Approved checkbox:</strong> <%= row.approval_checked ? "Yes" : "No" %></p>

              <p><strong>Created:</strong> <%= row.created_at || "-" %></p>
              <p><strong>Updated:</strong> <%= row.updated_at || "-" %></p>
            </div>

            <p><strong>Customer notes:</strong> <%= row.notes || "-" %></p>
            <p><strong>Internal notes:</strong> <%= row.internal_notes || "-" %></p>

            <% if (row.image_url) { %>
              <p>
                <img class="thumb" src="<%= row.image_url %>" alt="Uploaded design">
              </p>
              <p>
                <a href="<%= row.image_url %>" target="_blank">Open upload</a>
              </p>
            <% } %>

            <% if (row.proof_url) { %>
              <p>
                <strong>Proof:</strong>
                <a href="<%= row.proof_url %>" target="_blank">Open proof</a>
              </p>
            <% } %>

            <form method="post" action="/api/customization/<%= row.id %>/status">
              <label>Status</label>
              <select name="status">
                <option value="new" <%= row.status === "new" ? "selected" : "" %>>new</option>
                <option value="proofing" <%= row.status === "proofing" ? "selected" : "" %>>proofing</option>
                <option value="approved" <%= row.status === "approved" ? "selected" : "" %>>approved</option>
                <option value="in-production" <%= row.status === "in-production" ? "selected" : "" %>>in-production</option>
                <option value="completed" <%= row.status === "completed" ? "selected" : "" %>>completed</option>
              </select>

              <label>Proof URL</label>
              <input
                type="text"
                name="proof_url"
                value="<%= row.proof_url || '' %>"
                placeholder="https://..."
              >

              <label>Internal notes</label>
              <textarea
                name="internal_notes"
                rows="4"
                placeholder="Internal production notes"
              ><%= row.internal_notes || "" %></textarea>

              <button type="submit">Update project</button>
            </form>
          </div>
        <% }) %>
      </div>
    </div>

    <div class="card">
      <h2>Recent Webhooks</h2>

      <% if (!webhookRows || !webhookRows.length) { %>
        <p>No webhook records yet.</p>
      <% } %>

      <% (webhookRows || []).forEach(function(row, idx) { %>
        <div class="log">
          <h3>Webhook <%= idx + 1 %></h3>
          <pre><%= JSON.stringify(row, null, 2) %></pre>
        </div>
        <hr>
      <% }) %>
    </div>
  </div>
</body>
</html>