<script lang="ts">
  const details = [
    { label: 'Order #', value: '33A77277RK' },
    { label: 'Serial #', value: '019284756301' },
    { label: 'SKU', value: 'SURF-LT-1TB' },
    { label: 'Purchase Price', value: '$423.00' },
    { label: 'List Price', value: '$899.99' },
    { label: 'Status', value: 'Used - Like New' },
    { label: 'Condition', value: '—' },
    { label: 'Tracking #', value: '—' },
    { label: 'Notes', value: '—' }
  ];
</script>

<div class="page">
  <div class="app-surface">
    <a href="/inventory" class="back-link">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
      Back to Inventory
    </a>

    <div class="detail-header">
      <h1 class="detail-title">Microsoft Surface Laptop Studio - 1TB TBolt</h1>
      <span class="badge-error">Needs Attention</span>
    </div>

    <!-- Photos -->
    <div class="photos">
      {#each [1, 2, 3] as _}
        <div class="photo-placeholder">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
            <circle cx="8.5" cy="8.5" r="1.5"/>
            <polyline points="21 15 16 10 5 21"/>
          </svg>
        </div>
      {/each}
    </div>

    <!-- Actions -->
    <div class="actions">
      <button class="btn-secondary">Upload Photos</button>
      <button class="btn-secondary">Pin</button>
      <button class="btn-secondary">Send to Phone</button>
      <button class="btn-secondary">Duplicate</button>
      <button class="btn-secondary">Open in NocoDB</button>
    </div>

    <!-- Details -->
    <div class="module">
      <div class="module-header">
        <div class="module-title">Details</div>
      </div>
      {#each details as row}
        <div class="detail-row">
          <span class="detail-label">{row.label}</span>
          <span class="detail-value">{row.value}</span>
        </div>
      {/each}
    </div>
  </div>
</div>

<style>
  .back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--text-sm);
    color: var(--text-3);
    margin-bottom: var(--sp-5);
    transition: color var(--transition);
  }
  .back-link:hover { color: var(--text-1); }
  .back-link svg { width: 16px; height: 16px; }

  .detail-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--section-gap);
  }
  .detail-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-1);
    margin: 0;
  }
  .badge-error {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--error);
    background: var(--error-bg);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
  }

  /* Photos */
  .photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--row-gap);
    margin-bottom: var(--section-gap);
  }
  .photo-placeholder {
    aspect-ratio: 4/3;
    background: var(--card-secondary);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .photo-placeholder svg {
    width: 32px;
    height: 32px;
    color: var(--text-4);
  }

  /* Actions */
  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--section-gap);
  }

  /* Module */
  .module {
    background: var(--card);
    border-radius: var(--radius);
    padding: var(--card-pad-primary);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border);
  }
  .module-header {
    margin-bottom: var(--sp-4);
  }
  .module-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .detail-row:last-child { border-bottom: none; }
  .detail-label {
    font-size: var(--text-base);
    color: var(--text-3);
  }
  .detail-value {
    font-size: var(--text-base);
    font-family: var(--mono);
    color: var(--text-1);
  }

  @media (max-width: 768px) {
    .photos { grid-template-columns: repeat(2, 1fr); }
    .detail-title { font-size: var(--text-xl); }
  }
</style>
