@extends('layouts.customer')
@section('title', 'Downloads')

@section('content')

<div style="margin-bottom:1.75rem">
  <h1 style="font-size:1.625rem;font-weight:700;color:var(--foreground);letter-spacing:-.03em;line-height:1.2;margin:0 0 .25rem">Downloads</h1>
  <p style="font-size:.875rem;color:var(--muted-foreground);margin:0">Download your purchased products. License must be active.</p>
</div>

@php $typeIcons=['plugin'=>'🔌','module'=>'🧩','software'=>'💻','theme'=>'🎨','api'=>'⚡','saas'=>'☁️']; @endphp

{{-- Available downloads header --}}
<div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.875rem">
  <svg width="14" height="14" fill="none" stroke="var(--foreground)" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
      d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
  </svg>
  <span style="font-size:.875rem;font-weight:600;color:var(--foreground)">Available Downloads</span>
  <span style="font-size:.6875rem;font-weight:600;color:var(--muted-foreground);
    background:var(--muted);border:1px solid var(--border);
    padding:.1rem .45rem;border-radius:.35rem">{{ $licenses->count() }}</span>
</div>

{{-- Download list --}}
<div style="border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:2rem">
  @forelse($licenses as $license)
  @php
    $latest = $license->product->latestVersion;
    $isLast = $loop->last;
  @endphp
  <div style="display:flex;align-items:center;gap:.875rem;padding:1rem 1.25rem;
    background:var(--card);{{ !$isLast ? 'border-bottom:1px solid var(--border);' : '' }}
    transition:background .1s"
    onmouseover="this.style.background='var(--muted)'" onmouseout="this.style.background='var(--card)'">

    {{-- Icon --}}
    <div style="width:2.25rem;height:2.25rem;border-radius:.5rem;background:var(--muted);
      border:1px solid var(--border);display:flex;align-items:center;
      justify-content:center;font-size:1rem;flex-shrink:0">
      {{ $typeIcons[$license->product->type??'-']??'-' }}
    </div>

    {{-- Info --}}
    <div style="flex:1;min-width:0">
      <div style="font-size:.875rem;font-weight:600;color:var(--foreground);margin-bottom:.25rem">
        {{ $license->product->name }}
      </div>
      <div style="display:flex;align-items:center;gap:.5rem;font-size:.72rem;color:var(--muted-foreground)">
        @if($latest)
          <span>v{{ $latest->version }}</span>
          <span>.</span>
          <span>{{ number_format($latest->file_size / 1024 / 1024, 1) }} MB</span>
          <span>.</span>
          <span style="padding:.1rem .4rem;border-radius:.3rem;font-size:.65rem;font-weight:600;
            background:#f0fdf4;color:#166534;border:1px solid #bbf7d0">Stable</span>
        @else
          <span>No file available yet</span>
        @endif
      </div>
    </div>

    {{-- Status + Download --}}
    <div style="display:flex;align-items:center;gap:.625rem;flex-shrink:0">
      <span style="display:flex;align-items:center;gap:.3rem;font-size:.75rem;
        font-weight:500;color:var(--muted-foreground)">
        <span style="width:6px;height:6px;border-radius:50%;
          background:{{ $license->status==='active'?'#22c55e':'#9ca3af' }};flex-shrink:0"></span>
        {{ ucfirst($license->status) }}
      </span>

      @if($latest && $latest->file_path)
      <a href="{{ route('customer.downloads.get', $license) }}"
         style="display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;
           border-radius:var(--radius);font-size:.8rem;font-weight:500;
           color:var(--foreground);background:var(--card);border:1px solid var(--border);
           text-decoration:none;transition:all .12s;white-space:nowrap"
         onmouseover="this.style.background='var(--foreground)';this.style.color='var(--card)';this.style.borderColor='var(--foreground)'"
         onmouseout="this.style.background='var(--card)';this.style.color='var(--foreground)';this.style.borderColor='var(--border)'">
        <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
        </svg>
        Download
      </a>
      @else
      <span style="display:inline-flex;align-items:center;padding:.375rem .75rem;
        border-radius:var(--radius);font-size:.8rem;font-weight:500;
        color:var(--muted-foreground);background:var(--muted);border:1px solid var(--border);
        opacity:.6;cursor:not-allowed">No file</span>
      @endif
    </div>
  </div>
  @empty
  <div style="padding:4rem 2rem;text-align:center;background:var(--card)">
    <div style="width:3rem;height:3rem;border-radius:.75rem;background:var(--muted);
      border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
      margin:0 auto .875rem;font-size:1.25rem">📥</div>
    <div style="font-size:.9375rem;font-weight:600;color:var(--foreground);margin-bottom:.375rem">
      No downloads available
    </div>
    <p style="font-size:.875rem;color:var(--muted-foreground);margin:0 0 1.25rem">
      Purchase a product to get download access.
    </p>
    <a href="{{ route('customer.market') }}"
       style="display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;
         border-radius:var(--radius);font-size:.875rem;font-weight:500;
         color:var(--foreground);background:var(--card);border:1px solid var(--border);
         text-decoration:none;transition:all .12s"
       onmouseover="this.style.background='var(--muted)'" onmouseout="this.style.background='var(--card)'">
      Browse Market →
    </a>
  </div>
  @endforelse
</div>

{{-- Download history --}}
@if($history->count())
<div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.875rem">
  <svg width="14" height="14" fill="none" stroke="var(--foreground)" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
  </svg>
  <span style="font-size:.875rem;font-weight:600;color:var(--foreground)">Download History</span>
</div>

<div style="border:1px solid var(--border);border-radius:var(--radius);overflow:hidden">
  <table style="width:100%;border-collapse:collapse">
    <thead>
      <tr style="border-bottom:1px solid var(--border);background:var(--muted)">
        @foreach(['Product','Version','Date','IP Address'] as $h)
        <th style="padding:.625rem 1.25rem;font-size:.6875rem;font-weight:600;
          color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.07em;text-align:left">
          {{ $h }}
        </th>
        @endforeach
      </tr>
    </thead>
    <tbody>
      @foreach($history as $dl)
      <tr style="background:var(--card);border-bottom:1px solid var(--border);
        transition:background .1s"
        onmouseover="this.style.background='var(--muted)'"
        onmouseout="this.style.background='var(--card)'">
        <td style="padding:.75rem 1.25rem;font-size:.8375rem;font-weight:500;color:var(--foreground)">
          {{ $dl->product->name??'-' }}
        </td>
        <td style="padding:.75rem 1.25rem">
          <span style="font-size:.72rem;font-weight:600;padding:.15rem .45rem;border-radius:.35rem;
            background:var(--muted);color:var(--muted-foreground);border:1px solid var(--border)">
            v{{ $dl->version?->version??'-' }}
          </span>
        </td>
        <td style="padding:.75rem 1.25rem;font-size:.78rem;color:var(--muted-foreground);white-space:nowrap">
          {{ \Carbon\Carbon::parse($dl->created_at)->format('M d, Y H:i') }}
        </td>
        <td style="padding:.75rem 1.25rem;font-family:monospace;font-size:.75rem;color:var(--muted-foreground)">
          {{ $dl->ip_address??'-' }}
        </td>
      </tr>
      @endforeach
    </tbody>
  </table>
</div>
@endif

@endsection