@extends('card.layout')

@section('title', 'Preview — TAPLY')

@php
  $coverGradients = [
    'Teal'     => 'linear-gradient(160deg,#14b8a6,#0ea5e9)',
    'Violet'   => 'linear-gradient(160deg,#7c5cff,#4b2fb8)',
    'Indigo'   => 'linear-gradient(160deg,#5e6cff,#2a3aa1)',
    'Sunset'   => 'linear-gradient(160deg,#ff7a59,#c83a1f)',
    'Emerald'  => 'linear-gradient(160deg,#34d399,#0f766e)',
    'Fuchsia'  => 'linear-gradient(160deg,#f472b6,#9d174d)',
    'Midnight' => 'linear-gradient(160deg,#222,#000)',
  ];
  $coverName = $profile->cover_name->value;
  $profilePhotoUrl = $profile->profile_photo_path ? \Illuminate\Support\Facades\Storage::url($profile->profile_photo_path) : null;
  $companyLogoUrl  = $profile->company_logo_path  ? \Illuminate\Support\Facades\Storage::url($profile->company_logo_path)  : null;

  $initials = collect(preg_split('/\s+/', trim($profile->full_name)))
    ->filter()->take(2)->map(fn ($w) => mb_strtoupper(mb_substr($w, 0, 1)))->implode('');
  $companyInitials = mb_strtoupper(mb_substr($profile->company_display_name ?: 'CO', 0, 3));

  $platformIcons = [
    'linkedin' => 'bi-linkedin',
    'x' => 'bi-twitter-x',
    'instagram' => 'bi-instagram',
    'facebook' => 'bi-facebook',
    'youtube' => 'bi-youtube',
    'tiktok' => 'bi-tiktok',
    'github' => 'bi-github',
    'whatsapp' => 'bi-whatsapp',
    'telegram' => 'bi-telegram',
    'snapchat' => 'bi-snapchat',
    'pinterest' => 'bi-pinterest',
    'website' => 'bi-globe2',
    'other' => 'bi-link-45deg',
  ];
  $platformLabels = [
    'linkedin' => 'LinkedIn',
    'x' => 'X / Twitter',
    'instagram' => 'Instagram',
    'facebook' => 'Facebook',
    'youtube' => 'YouTube',
    'tiktok' => 'TikTok',
    'github' => 'GitHub',
    'whatsapp' => 'WhatsApp',
    'telegram' => 'Telegram',
    'snapchat' => 'Snapchat',
    'pinterest' => 'Pinterest',
    'website' => 'Website',
    'other' => 'Other',
  ];

  $handleFromUrl = function (string $platform, string $url) {
      $u = parse_url($url);
      $path = trim($u['path'] ?? '', '/');
      if ($platform === 'x' || $platform === 'twitter') return '@'.basename($path);
      if ($platform === 'linkedin') return basename($path);
      if ($platform === 'instagram') return '@'.basename($path);
      if ($platform === 'youtube' || $platform === 'tiktok') return basename($path);
      return $path !== '' ? $path : ($u['host'] ?? $url);
  };
@endphp

@section('body')
  <main class="app-shell">

    <header class="topbar">
      <div class="brand"><span class="dot"><i class="bi bi-cursor-fill"></i></span>TAPLY<sup>&trade;</sup></div>
      <span class="tag-pill">Preview</span>
    </header>

    @if (session('status'))
      <div class="alert alert-success small mb-3">{{ session('status') }}</div>
    @endif

    <section class="hero-card">
      <div class="hero-company">
        <span class="company-logo" aria-label="{{ $profile->company_display_name }}">
          @if ($companyLogoUrl)
            <img src="{{ $companyLogoUrl }}" alt="">
          @else
            {{ $companyInitials }}
          @endif
        </span>
        <div class="company-info">
          <span class="company-tag">Working at</span>
          <span class="company-name">{{ $profile->company_display_name ?: '—' }}</span>
        </div>
        <span class="live-pill">{{ $profile->is_published ? 'Live' : 'Draft' }}</span>
      </div>
      <div class="hero-body">
        <div class="avatar-lg">
          @if ($profilePhotoUrl)
            <img src="{{ $profilePhotoUrl }}" alt="">
          @else
            {{ $initials ?: 'ME' }}
          @endif
        </div>
        <div class="hero-text">
          <h1>{{ $profile->full_name }}</h1>
          <div class="subtitle">{{ $profile->role_title }}</div>
        </div>
      </div>
    </section>

    <div class="d-grid gap-2 mt-3" style="grid-template-columns: 1fr 1fr; display: grid;">
      <a class="btn btn-primary-purple" href="{{ route('public.profile.vcard', $profile->slug) }}"><i class="bi bi-person-plus me-1"></i> SAVE CONTACT</a>
      <a href="{{ $isOwner ? route('card.edit') : route('card.edit', $target) }}" class="btn btn-outline-glass"><i class="bi bi-pencil-square me-1"></i> EDIT PROFILE</a>
    </div>

    <div class="quick-actions">
      @if ($phones->first())
        <a class="quick-action" href="tel:{{ preg_replace('/\s+/', '', $phones->first()->number) }}">
          <span class="circle"><i class="bi bi-telephone"></i></span>
          <span>Call</span>
        </a>
      @endif
      @if ($profile->whatsapp)
        <a class="quick-action" href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $profile->whatsapp) }}" target="_blank" rel="noopener">
          <span class="circle"><i class="bi bi-whatsapp"></i></span>
          <span>WhatsApp</span>
        </a>
      @endif
      @if ($emails->first())
        <a class="quick-action" href="mailto:{{ $emails->first()->address }}">
          <span class="circle"><i class="bi bi-envelope"></i></span>
          <span>Email</span>
        </a>
      @endif
      @if ($profile->website)
        <a class="quick-action" href="{{ $profile->website }}" target="_blank" rel="noopener">
          <span class="circle"><i class="bi bi-globe2"></i></span>
          <span>Web</span>
        </a>
      @endif
      <span class="quick-action">
        <span class="circle"><i class="bi bi-share"></i></span>
        <span>Share</span>
      </span>
    </div>

    @if ($profile->bio)
      <p class="bio-quote">&ldquo;{{ $profile->bio }}&rdquo;</p>
    @endif

    @if ($phones->isNotEmpty() || $emails->isNotEmpty())
      <div class="section-label">Contact</div>
      @foreach ($phones as $phone)
        <div class="contact-row">
          <span class="icon"><i class="bi bi-telephone"></i></span>
          <span class="meta">
            <span class="label">{{ $phone->label->value }}</span>
            <span class="value">{{ $phone->number }}</span>
          </span>
          <i class="bi bi-chevron-right chev"></i>
        </div>
      @endforeach
      @foreach ($emails as $email)
        <div class="contact-row">
          <span class="icon"><i class="bi bi-envelope"></i></span>
          <span class="meta">
            <span class="label">{{ $email->label->value }}</span>
            <span class="value">{{ $email->address }}</span>
          </span>
          <i class="bi bi-chevron-right chev"></i>
        </div>
      @endforeach
    @endif

    @if ($profile->address)
      <div class="section-label">Where to find me</div>
      <div class="map-tile">
        <span class="pin"><i class="bi bi-geo-alt-fill"></i></span>
      </div>
      <div class="address-card">
        <i class="bi bi-geo-alt-fill"></i>
        <div>
          <div class="label">Address</div>
          <div>{{ $profile->address }}</div>
        </div>
      </div>
    @endif

    @if ($socials->isNotEmpty())
      <div class="section-label">Find me online</div>
      <div class="social-grid">
        @foreach ($socials as $social)
          @php $p = $social->platform->value; @endphp
          <a class="social-pill" href="{{ $social->url }}" target="_blank" rel="noopener">
            <i class="bi {{ $platformIcons[$p] ?? 'bi-link-45deg' }}"></i>
            <span class="meta">
              <span class="label">{{ $platformLabels[$p] ?? ucfirst($p) }}</span>
              <span class="handle">{{ $handleFromUrl($p, $social->url) }}</span>
            </span>
          </a>
        @endforeach
      </div>
    @endif

    <div class="section-label">Share back</div>
    <div class="qr-card">
      <div class="qr-box">
        <img src="{{ route('public.profile.qr', $profile->slug) }}" alt="QR code for this profile" style="width:100%; height:100%; display:block;">
      </div>
      <div>
        <div class="title">Don't have TAPLY?</div>
        <div class="desc">Scan the QR with your contacts to send back, or get your own card.</div>
      </div>
    </div>

    <footer class="app-footer">
      <div class="brand"><span class="dot"><i class="bi bi-cursor-fill"></i></span>TAPLY<sup>&trade;</sup></div>
    </footer>

    <div class="sticky-actions">
      <a href="{{ $isOwner ? route('card.edit') : route('card.edit', $target) }}" class="btn btn-outline-glass"><i class="bi bi-arrow-left me-1"></i> BACK TO EDIT</a>
      <button class="btn btn-primary-purple">PUBLISH <i class="bi bi-send ms-1"></i></button>
    </div>
  </main>
@endsection

@push('scripts')
  <script>
    window.TAPLY_STATE = {
      coverName:  @json($coverName),
      cover:      @json($coverGradients[$coverName] ?? $coverGradients['Teal']),
      layout:     @json($profile->layout->value),
      appearance: @json($profile->appearance->value),
      companyLogo:  @json($companyLogoUrl),
      profilePhoto: @json($profilePhotoUrl),
    };
  </script>
  <script src="{{ asset('assets/js/state.js') }}"></script>
  <script>TaplyState.apply(window.TAPLY_STATE);</script>
@endpush