<%- include('partials/head', { title: 'Marketing Engine | Atrium Merchant' }) %>
<body class="bg-surface font-body text-on-surface">
<%- include('partials/sidebar') %>
<div class="ml-64 min-h-screen flex flex-col">
  <%- include('partials/topbar') %>
  <%- include('partials/flash') %>

  <!-- Main Content -->
  <main class="flex-1 p-8 lg:p-10 space-y-8 max-w-7xl mx-auto w-full">

    <!-- Page Header -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
      <div>
        <h1 class="font-headline font-extrabold text-on-surface text-4xl tracking-tight mb-2">Marketing Engine</h1>
        <p class="text-on-surface-variant text-lg max-w-2xl">Create high-impact campaigns across email, social, and direct channels to accelerate your brand's organic growth.</p>
      </div>
      <div class="flex gap-3">
        <button class="px-6 py-3 bg-secondary-container text-on-secondary-container rounded-xl font-bold text-sm hover:bg-surface-container-high transition-colors flex items-center gap-2">
          <span class="material-symbols-outlined text-lg">auto_awesome</span>
          AI Suggestions
        </button>
        <button onclick="document.getElementById('createCampaignModal').classList.remove('hidden')" class="px-8 py-3 bg-gradient-to-br from-primary to-primary-container text-white rounded-xl font-bold text-sm shadow-xl shadow-primary/10 hover:shadow-primary/20 transition-all active:scale-95">
          Create Campaign
        </button>
      </div>
    </div>

    <!-- Bento Grid Metrics -->
    <div class="grid grid-cols-12 gap-6">

      <!-- Campaign Performance Chart (8 cols) -->
      <div class="col-span-12 lg:col-span-8 bg-surface-container-lowest rounded-xl p-8 shadow-[0px_12px_32px_rgba(20,28,37,0.06)] relative overflow-hidden">
        <div class="flex justify-between items-start mb-8">
          <div>
            <h3 class="font-headline font-bold text-xl text-on-surface">Campaign Performance</h3>
            <p class="text-sm text-on-surface-variant">Combined ROI across all active channels</p>
          </div>
          <span class="px-3 py-1 bg-primary-fixed text-on-primary-fixed text-[10px] font-bold rounded-full uppercase tracking-widest">Live Now</span>
        </div>

        <!-- Bar Chart -->
        <div class="h-56 flex items-end gap-3 px-2">
          <% const days = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']; %>
          <% const chartHeights = chartData && chartData.length > 0
              ? chartData.map(d => Math.max(10, Math.round((d.revenue / (Math.max(...chartData.map(x=>x.revenue))||1)) * 90)))
              : [40, 60, 55, 85, 70, 95, 45]; %>
          <% days.forEach((day, i) => { %>
          <div class="flex-1 flex flex-col items-center gap-1">
            <div class="w-full relative group" style="height: <%= chartHeights[i] %>%;">
              <div class="absolute inset-x-0 bottom-0 bg-primary/20 hover:bg-primary/50 rounded-t-lg transition-all duration-200 h-full cursor-pointer"></div>
            </div>
            <span class="text-[10px] font-bold text-on-surface-variant/60 uppercase tracking-widest"><%= day %></span>
          </div>
          <% }); %>
        </div>
      </div>

      <!-- Metrics Stack (4 cols) -->
      <div class="col-span-12 lg:col-span-4 flex flex-col gap-6">
        <!-- Conversion Rate Card -->
        <div class="bg-primary text-white rounded-xl p-6 shadow-lg shadow-primary/10 flex-1 flex flex-col justify-between">
          <div class="flex justify-between items-start">
            <span class="material-symbols-outlined bg-white/10 p-2 rounded-lg">trending_up</span>
            <span class="text-xs font-bold bg-white/20 px-2 py-1 rounded-full">+12.4%</span>
          </div>
          <div class="mt-4">
            <p class="text-white/70 text-sm font-medium">Conversion Rate</p>
            <h4 class="text-3xl font-headline font-extrabold mt-1">4.82%</h4>
          </div>
        </div>

        <!-- New Subscribers Card -->
        <div class="bg-surface-container-lowest rounded-xl p-6 shadow-[0px_12px_32px_rgba(20,28,37,0.06)] flex-1 flex flex-col justify-between">
          <div class="flex justify-between items-start">
            <span class="material-symbols-outlined text-primary bg-primary/10 p-2 rounded-lg">groups</span>
          </div>
          <div class="mt-4">
            <p class="text-on-surface-variant text-sm font-medium">New Subscribers</p>
            <h4 class="text-3xl font-headline font-extrabold text-on-surface mt-1">
              <%= subscriberCount ? subscriberCount.toLocaleString() : '1,284' %>
            </h4>
          </div>
        </div>
      </div>
    </div>

    <!-- Channel Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- Email Marketing -->
      <div class="bg-surface-container-low rounded-xl p-6 hover:bg-surface-container-high transition-all group border border-transparent hover:border-outline-variant/20 cursor-pointer">
        <div class="w-12 h-12 rounded-xl bg-white flex items-center justify-center mb-6 shadow-sm group-hover:scale-110 duration-300">
          <span class="material-symbols-outlined text-primary">mail</span>
        </div>
        <h3 class="font-headline font-bold text-lg mb-2">Email Marketing</h3>
        <p class="text-sm text-on-surface-variant mb-6">Drive retention with personalized newsletter flows and automated recovery.</p>
        <div class="flex items-center justify-between text-[11px] font-bold uppercase tracking-wider text-primary">
          <span>4 Active Flows</span>
          <span class="material-symbols-outlined">arrow_forward</span>
        </div>
      </div>

      <!-- Discount Codes -->
      <div class="bg-surface-container-low rounded-xl p-6 hover:bg-surface-container-high transition-all group border border-transparent hover:border-outline-variant/20 cursor-pointer">
        <div class="w-12 h-12 rounded-xl bg-white flex items-center justify-center mb-6 shadow-sm group-hover:scale-110 duration-300">
          <span class="material-symbols-outlined text-primary">sell</span>
        </div>
        <h3 class="font-headline font-bold text-lg mb-2">Discount Codes</h3>
        <p class="text-sm text-on-surface-variant mb-6">Create time-sensitive offers and limited-time referral incentives.</p>
        <div class="flex items-center justify-between text-[11px] font-bold uppercase tracking-wider text-primary">
          <span>12 Active Codes</span>
          <span class="material-symbols-outlined">arrow_forward</span>
        </div>
      </div>

      <!-- Social Campaigns -->
      <div class="bg-surface-container-low rounded-xl p-6 hover:bg-surface-container-high transition-all group border border-transparent hover:border-outline-variant/20 cursor-pointer">
        <div class="w-12 h-12 rounded-xl bg-white flex items-center justify-center mb-6 shadow-sm group-hover:scale-110 duration-300">
          <span class="material-symbols-outlined text-primary">share</span>
        </div>
        <h3 class="font-headline font-bold text-lg mb-2">Social Campaigns</h3>
        <p class="text-sm text-on-surface-variant mb-6">Connect your storefront to Meta, TikTok, and Pinterest for discovery.</p>
        <div class="flex items-center justify-between text-[11px] font-bold uppercase tracking-wider text-primary">
          <span>Synced Storefront</span>
          <span class="material-symbols-outlined">arrow_forward</span>
        </div>
      </div>
    </div>

    <!-- Active Campaigns Table -->
    <div class="bg-surface-container-lowest rounded-xl shadow-[0px_12px_32px_rgba(20,28,37,0.06)] overflow-hidden">
      <div class="px-8 py-6 flex justify-between items-center border-b border-surface-container">
        <h3 class="font-headline font-bold text-xl">Active Campaigns</h3>
        <button class="text-sm font-medium text-on-surface-variant hover:text-primary transition-colors">View History</button>
      </div>

      <div class="overflow-x-auto">
        <table class="w-full text-left">
          <thead>
            <tr class="bg-surface-container-low/50">
              <th class="px-8 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Campaign Name</th>
              <th class="px-8 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Channel</th>
              <th class="px-8 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Status</th>
              <th class="px-8 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">ROI</th>
              <th class="px-8 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Reach</th>
              <th class="px-8 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Actions</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-surface-container-low">
            <% if (campaigns && campaigns.length > 0) { %>
              <% campaigns.forEach(campaign => { %>
              <tr class="hover:bg-surface-container-low/30 transition-colors group">
                <td class="px-8 py-5">
                  <div class="font-bold text-on-surface"><%= campaign.name %></div>
                  <div class="text-[11px] text-on-surface-variant">
                    Started <%= new Date(campaign.created_at || campaign.createdAt).toLocaleDateString('en-US', {month:'short', day:'numeric', year:'numeric'}) %>
                  </div>
                </td>
                <td class="px-8 py-5">
                  <div class="flex items-center gap-2">
                    <% if (campaign.type === 'email') { %>
                      <span class="material-symbols-outlined text-sm text-primary">mail</span>
                      <span class="text-sm font-medium">Email</span>
                    <% } else if (campaign.type === 'social') { %>
                      <span class="material-symbols-outlined text-sm text-primary">share</span>
                      <span class="text-sm font-medium">Social</span>
                    <% } else if (campaign.type === 'discount') { %>
                      <span class="material-symbols-outlined text-sm text-primary">sell</span>
                      <span class="text-sm font-medium">Discount</span>
                    <% } else { %>
                      <span class="material-symbols-outlined text-sm text-primary">settings_suggest</span>
                      <span class="text-sm font-medium">Automation</span>
                    <% } %>
                  </div>
                </td>
                <td class="px-8 py-5">
                  <% if (campaign.status === 'active') { %>
                    <span class="px-3 py-1 bg-primary-fixed text-on-primary-fixed text-[10px] font-bold rounded-full uppercase">Active</span>
                  <% } else if (campaign.status === 'paused') { %>
                    <span class="px-3 py-1 bg-surface-container-high text-on-surface-variant text-[10px] font-bold rounded-full uppercase">Paused</span>
                  <% } else { %>
                    <span class="px-3 py-1 bg-secondary-container text-on-secondary-container text-[10px] font-bold rounded-full uppercase"><%= campaign.status %></span>
                  <% } %>
                </td>
                <td class="px-8 py-5">
                  <div class="text-sm font-bold text-primary"><%= campaign.roi ? campaign.roi + 'x' : '—' %></div>
                </td>
                <td class="px-8 py-5">
                  <div class="text-sm"><%= campaign.reach ? campaign.reach.toLocaleString() : '—' %></div>
                </td>
                <td class="px-8 py-5">
                  <div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                    <form action="/marketing/<%= campaign.id %>?_method=DELETE" method="POST" onsubmit="return confirm('Delete this campaign?')">
                      <button type="submit" class="p-1.5 text-error hover:bg-error/10 rounded-lg transition-colors" title="Delete">
                        <span class="material-symbols-outlined text-sm">delete</span>
                      </button>
                    </form>
                  </div>
                </td>
              </tr>
              <% }); %>
            <% } else { %>
              <!-- Sample rows when no data -->
              <tr class="hover:bg-surface-container-low/30 transition-colors group">
                <td class="px-8 py-5">
                  <div class="font-bold text-on-surface">Summer Solstice Drop</div>
                  <div class="text-[11px] text-on-surface-variant">Started May 12, 2024</div>
                </td>
                <td class="px-8 py-5">
                  <div class="flex items-center gap-2">
                    <span class="material-symbols-outlined text-sm text-primary">mail</span>
                    <span class="text-sm font-medium">Email</span>
                  </div>
                </td>
                <td class="px-8 py-5">
                  <span class="px-3 py-1 bg-primary-fixed text-on-primary-fixed text-[10px] font-bold rounded-full uppercase">Active</span>
                </td>
                <td class="px-8 py-5"><div class="text-sm font-bold text-primary">8.4x</div></td>
                <td class="px-8 py-5"><div class="text-sm">24,500</div></td>
                <td class="px-8 py-5"></td>
              </tr>
              <tr class="hover:bg-surface-container-low/30 transition-colors group">
                <td class="px-8 py-5">
                  <div class="font-bold text-on-surface">Influencer Flash Sale</div>
                  <div class="text-[11px] text-on-surface-variant">Started May 18, 2024</div>
                </td>
                <td class="px-8 py-5">
                  <div class="flex items-center gap-2">
                    <span class="material-symbols-outlined text-sm text-primary">share</span>
                    <span class="text-sm font-medium">Social</span>
                  </div>
                </td>
                <td class="px-8 py-5">
                  <span class="px-3 py-1 bg-primary-fixed text-on-primary-fixed text-[10px] font-bold rounded-full uppercase">Active</span>
                </td>
                <td class="px-8 py-5"><div class="text-sm font-bold text-primary">5.2x</div></td>
                <td class="px-8 py-5"><div class="text-sm">182,000</div></td>
                <td class="px-8 py-5"></td>
              </tr>
              <tr class="hover:bg-surface-container-low/30 transition-colors group">
                <td class="px-8 py-5">
                  <div class="font-bold text-on-surface">Abandon Cart Recovery</div>
                  <div class="text-[11px] text-on-surface-variant">Ongoing Automation</div>
                </td>
                <td class="px-8 py-5">
                  <div class="flex items-center gap-2">
                    <span class="material-symbols-outlined text-sm text-primary">settings_suggest</span>
                    <span class="text-sm font-medium">Automation</span>
                  </div>
                </td>
                <td class="px-8 py-5">
                  <span class="px-3 py-1 bg-surface-container-high text-on-surface-variant text-[10px] font-bold rounded-full uppercase">Auto</span>
                </td>
                <td class="px-8 py-5"><div class="text-sm font-bold text-primary">12.1x</div></td>
                <td class="px-8 py-5"><div class="text-sm">4,280</div></td>
                <td class="px-8 py-5"></td>
              </tr>
            <% } %>
          </tbody>
        </table>
      </div>
    </div>

    <div class="h-8"></div>
  </main>
</div>

<!-- Create Campaign Modal -->
<div id="createCampaignModal" class="hidden fixed inset-0 bg-on-surface/40 backdrop-blur-sm z-50 flex items-center justify-center p-4">
  <div class="bg-surface-container-lowest rounded-2xl p-8 w-full max-w-md shadow-2xl">
    <div class="flex justify-between items-center mb-6">
      <h3 class="font-headline font-bold text-xl text-on-surface">New Campaign</h3>
      <button onclick="document.getElementById('createCampaignModal').classList.add('hidden')" class="p-2 hover:bg-surface-container rounded-lg transition-colors">
        <span class="material-symbols-outlined text-on-surface-variant">close</span>
      </button>
    </div>
    <form action="/marketing" method="POST" class="space-y-4">
      <div class="space-y-1">
        <label class="text-xs font-bold uppercase tracking-wider text-on-surface-variant">Campaign Name</label>
        <input name="name" type="text" required placeholder="Summer Sale 2024" class="w-full bg-surface-container-low border-none rounded-lg p-3 focus:ring-2 focus:ring-primary text-on-surface">
      </div>
      <div class="space-y-1">
        <label class="text-xs font-bold uppercase tracking-wider text-on-surface-variant">Channel</label>
        <select name="type" class="w-full bg-surface-container-low border-none rounded-lg p-3 focus:ring-2 focus:ring-primary text-on-surface appearance-none">
          <option value="email">Email</option>
          <option value="social">Social</option>
          <option value="discount">Discount</option>
          <option value="automation">Automation</option>
        </select>
      </div>
      <div class="space-y-1">
        <label class="text-xs font-bold uppercase tracking-wider text-on-surface-variant">Budget ($)</label>
        <input name="budget" type="number" placeholder="500" class="w-full bg-surface-container-low border-none rounded-lg p-3 focus:ring-2 focus:ring-primary text-on-surface">
      </div>
      <div class="flex gap-3 pt-4">
        <button type="button" onclick="document.getElementById('createCampaignModal').classList.add('hidden')" class="flex-1 py-3 bg-surface-container text-on-surface-variant rounded-xl font-bold text-sm hover:bg-surface-container-high transition-colors">
          Cancel
        </button>
        <button type="submit" class="flex-1 py-3 bg-gradient-to-r from-primary to-primary-container text-white rounded-xl font-bold text-sm shadow-lg shadow-primary/20 hover:scale-[1.02] transition-all">
          Launch Campaign
        </button>
      </div>
    </form>
  </div>
</div>

<!-- FAB -->
<div class="fixed bottom-8 right-8 z-40">
  <button onclick="document.getElementById('createCampaignModal').classList.remove('hidden')" class="w-16 h-16 bg-primary text-white rounded-full shadow-2xl shadow-primary/40 flex items-center justify-center hover:scale-110 active:scale-95 duration-300">
    <span class="material-symbols-outlined text-3xl">add</span>
  </button>
</div>

</body>
</html>
