@extends('layouts.customer')
@section('title', 'License Details')

@section('content')

<div style="display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem">
  <a href="{{ route('customer.licenses.index') }}"
     style="display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;
       border-radius:var(--radius);border:1px solid var(--border);background:var(--card);
       font-size:.875rem;font-weight:500;color:var(--foreground);text-decoration:none;transition:background .12s"
     onmouseover="this.style.background='var(--muted)'" onmouseout="this.style.background='var(--card)'">
    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink:0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg> My Licenses
  </a>
</div>

<div style="display:grid;grid-template-columns:1fr 260px;gap:1.5rem;align-items:start">

  {{-- Main --}}
  <div style="display:flex;flex-direction:column;gap:1.25rem">

    {{-- License key card --}}
    <div style="background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.375rem">
      <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.125rem">
        <div>
          <div style="font-size:1rem;font-weight:700;color:var(--foreground);margin-bottom:.25rem">
            {{ $license->product->name }}
          </div>
          <div style="font-size:.8rem;color:var(--muted-foreground)">
            {{ $license->getDisplayType() }} License
          </div>
        </div>
        @php $statusDot=['active'=>'#22c55e','expired'=>'#9ca3af','suspended'=>'#f59e0b','revoked'=>'#ef4444'][$license->status]??'#9ca3af'; @endphp
        <span style="display:flex;align-items:center;gap:.375rem;font-size:.8rem;
          font-weight:500;color:var(--muted-foreground);flex-shrink:0">
          <span style="width:7px;height:7px;border-radius:50%;background:{{ $statusDot }}"></span>
          {{ ucfirst($license->status) }}
        </span>
      </div>

      {{-- License key --}}
      <div style="padding:.875rem 1rem;background:var(--muted);border:1px solid var(--border);
        border-radius:calc(var(--radius) - .1rem);margin-bottom:1.125rem">
        <div style="font-size:.6875rem;font-weight:600;color:var(--muted-foreground);
          text-transform:uppercase;letter-spacing:.07em;margin-bottom:.375rem">License Key</div>
        <div style="font-family:monospace;font-size:.8rem;color:var(--foreground);word-break:break-all">
          {{ $license->license_key }}
        </div>
      </div>

      {{-- Meta grid --}}
      <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:.875rem">
        @foreach([
          ['Activations Used', $license->activations_count.' / '.$license->max_activations],
          ['Expires',          $license->expires_at?->format('M d, Y') ?? 'Lifetime'],
          ['Product Version',  'v'.$license->product->version],
          ['Purchased',        $license->created_at->format('M d, Y')],
        ] as [$k,$v])
        <div>
          <div style="font-size:.7rem;font-weight:600;color:var(--muted-foreground);
            text-transform:uppercase;letter-spacing:.06em;margin-bottom:.2rem">{{ $k }}</div>
          <div style="font-size:.875rem;font-weight:500;color:var(--foreground)">{{ $v }}</div>
        </div>
        @endforeach
      </div>
    </div>

    {{-- Active installations --}}
    <div style="background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden">
      <div style="padding:.875rem 1.25rem;border-bottom:1px solid var(--border)">
        <div style="font-size:.875rem;font-weight:600;color:var(--foreground)">Active Installations</div>
        <div style="font-size:.75rem;color:var(--muted-foreground);margin-top:2px">
          Remove an activation to free up a slot for a new installation.
        </div>
      </div>
      @forelse($license->activations->where('status','active') as $activation)
      @php $isLast = $loop->last; @endphp
      <div style="display:flex;align-items:center;gap:1rem;padding:.875rem 1.25rem;
        background:var(--card);{{ !$isLast ? 'border-bottom:1px solid var(--border);' : '' }}">
        <div style="flex:1;display:grid;grid-template-columns:1fr 1fr;gap:.75rem">
          <div>
            <div style="font-size:.6875rem;color:var(--muted-foreground);text-transform:uppercase;
              letter-spacing:.05em;margin-bottom:2px">Domain</div>
            <div style="font-size:.8rem;font-weight:500;color:var(--foreground);font-family:monospace">
              {{ $activation->domain ?? 'N/A' }}
            </div>
          </div>
          <div>
            <div style="font-size:.6875rem;color:var(--muted-foreground);text-transform:uppercase;
              letter-spacing:.05em;margin-bottom:2px">Last Active</div>
            <div style="font-size:.8rem;color:var(--foreground)">
              {{ $activation->last_heartbeat_at?->diffForHumans() ?? $activation->activated_at->diffForHumans() }}
            </div>
          </div>
        </div>
        {{-- Activation removal is restricted to Admin panel only --}}
      </div>
      @empty
      <div style="padding:2rem;text-align:center;font-size:.875rem;color:var(--muted-foreground)">
        No active installations.
      </div>
      @endforelse
    </div>
  </div>

  {{-- Sidebar --}}
  <div style="display:flex;flex-direction:column;gap:1rem;position:sticky;top:calc(3.5rem + 1.5rem)">

    {{-- Download --}}
    @if($license->isValid())
    <div style="background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.125rem">
      <div style="font-size:.875rem;font-weight:600;color:var(--foreground);margin-bottom:.5rem">Download</div>
      <div style="font-size:.78rem;color:var(--muted-foreground);margin-bottom:.875rem">
        Latest version: <span style="font-weight:600;color:var(--foreground)">v{{ $license->product->version }}</span>
      </div>
      <a href="{{ route('customer.downloads.get', $license) }}"
         style="display:flex;align-items:center;justify-content:center;gap:.375rem;
           padding:.5rem .875rem;border-radius:var(--radius);font-size:.875rem;font-weight:500;
           color:#fff;background:var(--foreground);border:1px solid var(--foreground);
           text-decoration:none;transition:opacity .12s"
         onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
        <svg width="13" height="13" 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 {{ $license->product->name }}
      </a>
    </div>
    @endif

    {{-- API Credentials — shown inline for easy copy-paste into installer --}}
    <div style="background:var(--card);border:1.5px solid var(--foreground);border-radius:var(--radius);padding:1.125rem">
      <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="2"
            d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
        </svg>
        <div style="font-size:.875rem;font-weight:700;color:var(--foreground)">API Credentials</div>
      </div>
      <div style="font-size:.72rem;color:var(--muted-foreground);margin-bottom:.875rem;line-height:1.5">
        Use these to activate this license in your software installer.
      </div>

      {{-- License Key --}}
      <div style="margin-bottom:.75rem">
        <div style="font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
          color:var(--muted-foreground);margin-bottom:.35rem">License Key</div>
        <div style="display:flex;align-items:center;gap:.375rem">
          <div style="flex:1;padding:.5rem .7rem;background:var(--muted);border:1px solid var(--border);
            border-radius:calc(var(--radius)-.1rem);font-family:monospace;font-size:.72rem;
            color:var(--foreground);word-break:break-all;line-height:1.5">{{ $license->license_key }}</div>
          <button onclick="copyText('{{ $license->license_key }}', this)"
            style="flex-shrink:0;width:1.875rem;height:1.875rem;border-radius:calc(var(--radius)-.1rem);
              border:1px solid var(--border);background:var(--card);color:var(--muted-foreground);
              cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s"
            onmouseover="this.style.background='var(--muted)'" onmouseout="this.style.background='var(--card)'" title="Copy">
            <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
            </svg>
          </button>
        </div>
      </div>

      {{-- Secret Key --}}
      <div style="margin-bottom:.875rem">
        <div style="font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
          color:#dc2626;margin-bottom:.35rem">⚠ Secret Key <span style="font-weight:400;color:var(--muted-foreground);text-transform:none;letter-spacing:0">(keep private)</span></div>
        <div style="display:flex;align-items:center;gap:.375rem">
          <div id="sk-box" style="flex:1;padding:.5rem .7rem;background:#fef2f2;border:1px solid #fecaca;
            border-radius:calc(var(--radius)-.1rem);font-family:monospace;font-size:.72rem;
            color:#991b1b;word-break:break-all;line-height:1.5;
            filter:blur(4px);user-select:none;cursor:pointer;transition:filter .2s"
            onclick="revealSecret()" title="Click to reveal">
            {{ $license->secret_key }}
          </div>
          <div style="display:flex;flex-direction:column;gap:.3rem">
            <button onclick="revealSecret()" id="sk-eye"
              style="width:1.875rem;height:1.875rem;border-radius:calc(var(--radius)-.1rem);
                border:1px solid #fecaca;background:#fef2f2;color:#dc2626;
                cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s"
              onmouseover="this.style.background='#fee2e2'" onmouseout="this.style.background='#fef2f2'" title="Reveal">
              <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0zM2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
              </svg>
            </button>
            <button onclick="copyText('{{ $license->secret_key }}', this)"
              style="width:1.875rem;height:1.875rem;border-radius:calc(var(--radius)-.1rem);
                border:1px solid #fecaca;background:#fef2f2;color:#dc2626;
                cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s"
              onmouseover="this.style.background='#fee2e2'" onmouseout="this.style.background='#fef2f2'" title="Copy">
              <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
              </svg>
            </button>
          </div>
        </div>
        <div style="font-size:.68rem;color:var(--muted-foreground);margin-top:.3rem">
          Click to reveal · Copy and paste into your installer
        </div>
      </div>

    </div>

    <script>
    var skRevealed = false;
    function revealSecret() {
      var box = document.getElementById('sk-box');
      skRevealed = !skRevealed;
      box.style.filter      = skRevealed ? 'none' : 'blur(4px)';
      box.style.userSelect  = skRevealed ? 'text' : 'none';
      box.style.cursor      = skRevealed ? 'text' : 'pointer';
    }
    function copyText(text, btn) {
      navigator.clipboard.writeText(text).then(function() {
        btn.style.color = '#16a34a';
        setTimeout(function() { btn.style.color = ''; }, 1500);
      });
    }
    </script>

  </div>
</div>
@endsection
