@extends('card.layout')

@section('title', $profile->full_name.' — TAPLY')

@php
  use Illuminate\Support\Facades\Storage;

  $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 ? Storage::url($profile->profile_photo_path) : null;
  $companyLogoUrl  = $profile->company_logo_path  ? 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);
  };

  $editHref = $isOwner ? route('card.edit') : route('card.login');
@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>
      <button class="icon-btn" aria-label="Menu"><i class="bi bi-list"></i></button>
    </header>

    @if ($showDraftNotice)
      <div class="alert alert-warning small mb-3">
        <i class="bi bi-eye-slash me-1"></i>
        This card is a draft — only you can see it. Publish from the editor to make it public.
      </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>
          @if ($profile->role_title)
            <div class="subtitle">{{ $profile->role_title }}</div>
          @endif
        </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 class="btn btn-outline-glass" href="{{ $editHref }}"><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
      <a class="quick-action" href="#">
        <span class="circle"><i class="bi bi-share"></i></span>
        <span>Share</span>
      </a>
    </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)
        <a class="contact-row" href="tel:{{ preg_replace('/\s+/', '', $phone->number) }}">
          <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>
        </a>
      @endforeach
      @foreach ($emails as $email)
        <a class="contact-row" href="mailto:{{ $email->address }}">
          <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>
        </a>
      @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" id="qr">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>
      <div>&copy; {{ date('Y') }} TAPLY. All rights reserved.</div>
    </footer>
  </main>

  <div id="menuSheet" class="sheet" role="dialog" aria-modal="true" aria-label="Card menu">
    <div class="sheet-backdrop" id="menuBackdrop"></div>
    <div class="sheet-panel">
      <div class="sheet-handle" aria-hidden="true"></div>
      <a href="#" class="sheet-item" data-action="share">
        <span class="sheet-icon"><i class="bi bi-share"></i></span>
        <span class="sheet-label">Share this card</span>
        <i class="bi bi-chevron-right sheet-chev"></i>
      </a>
      <a href="#qr" class="sheet-item">
        <span class="sheet-icon"><i class="bi bi-qr-code"></i></span>
        <span class="sheet-label">Show QR code</span>
        <i class="bi bi-chevron-right sheet-chev"></i>
      </a>
      <a href="#" class="sheet-item">
        <span class="sheet-icon"><i class="bi bi-flag"></i></span>
        <span class="sheet-label">Report this profile</span>
        <i class="bi bi-chevron-right sheet-chev"></i>
      </a>
      <a href="{{ $editHref }}" class="sheet-item">
        <span class="sheet-icon"><i class="bi bi-person"></i></span>
        <span class="sheet-label">{{ $isOwner ? 'Edit my card' : 'Sign in as card owner' }}</span>
        <i class="bi bi-chevron-right sheet-chev"></i>
      </a>
    </div>
  </div>
@endsection

@push('scripts')
  <script>
    window.TAPLY_CARD = {
      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_CARD);</script>
  <script>
    (function () {
      var sheet = document.getElementById('menuSheet');
      var backdrop = document.getElementById('menuBackdrop');
      var btn = document.querySelector('.topbar .icon-btn');
      if (!sheet || !btn) return;

      function open() {
        sheet.classList.add('open');
        document.body.style.overflow = 'hidden';
      }
      function close() {
        sheet.classList.remove('open');
        document.body.style.overflow = '';
      }

      btn.addEventListener('click', open);
      backdrop.addEventListener('click', close);
      document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && sheet.classList.contains('open')) close();
      });

      sheet.querySelectorAll('.sheet-item').forEach(function (item) {
        item.addEventListener('click', function (e) {
          var href = item.getAttribute('href');
          if (!href || href === '#') {
            e.preventDefault();
            close();
            return;
          }
          close();
        });
      });
    })();
  </script>
@endpush