{{-- resources/views/support/show.blade.php --}}
@extends('layouts.app')
@section('title', $ticket->reference)
@section('page_title', $ticket->subject)
@section('page_subtitle', $ticket->reference)

@section('content')

@php
    $statusConfig = [
        'open'        => ['bg'=>'#fef3c7','color'=>'#92400e'],
        'in_progress' => ['bg'=>'#dbeafe','color'=>'#1e40af'],
        'resolved'    => ['bg'=>'#d1fae5','color'=>'#065f46'],
        'closed'      => ['bg'=>'#f1f5f9','color'=>'#64748b'],
    ];
    $sc = $statusConfig[$ticket->status] ?? $statusConfig['open'];

    $priorityConfig = [
        'low'    => ['bg'=>'#f1f5f9','color'=>'#64748b'],
        'medium' => ['bg'=>'#fef3c7','color'=>'#92400e'],
        'high'   => ['bg'=>'#fee2e2','color'=>'#991b1b'],
        'urgent' => ['bg'=>'#fee2e2','color'=>'#7f1d1d'],
    ];
    $pc = $priorityConfig[$ticket->priority] ?? $priorityConfig['medium'];
@endphp

<div class="d-flex align-items-center gap-2 mb-3 flex-wrap">
    <a href="{{ tenant_route('support.index') }}"
       class="btn btn-sm btn-outline-secondary">← Tickets</a>

    <span style="font-size:.75rem;font-weight:600;padding:5px 12px;
                 border-radius:20px;background:{{ $sc['bg'] }};
                 color:{{ $sc['color'] }};">
        {{ strtoupper(str_replace('_', ' ', $ticket->status)) }}
    </span>

    <span style="font-size:.72rem;font-weight:600;padding:4px 10px;
                 border-radius:20px;background:{{ $pc['bg'] }};
                 color:{{ $pc['color'] }};">
        {{ strtoupper($ticket->priority) }}
    </span>

    @if(!in_array($ticket->status, ['resolved','closed']))
        <form method="POST"
              action="{{ tenant_route('support.close', ['ticket' => $ticket->id]) }}"
              class="ms-auto"
              onsubmit="return confirm('Close this ticket?')">
            @csrf
            <button class="btn btn-sm btn-outline-secondary"
                    type="submit">
                <i class="bi bi-x-circle me-1"></i>Close Ticket
            </button>
        </form>
    @endif
</div>

<div class="row g-3">

    {{-- Conversation --}}
    <div class="col-xl-8">

        {{-- Messages --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-chat-dots me-2"
                       style="color:var(--clay)"></i>
                    Conversation
                </span>
            </div>
            <div class="card-body" style="padding:0;">

                @foreach($ticket->messages as $message)
                    @php
                        $isProperty = $message->author_type === \App\Models\User::class
                            || $message->author_type === 'App\Models\User';
                    @endphp

                    <div style="padding:18px;
                                border-bottom:1px solid var(--border);
                                {{ !$isProperty ? 'background:#fdf8f6;' : '' }}">
                        <div style="display:flex;align-items:flex-start;
                                    gap:12px;">

                            {{-- Avatar --}}
                            <div style="width:36px;height:36px;border-radius:9px;
                                        background:{{ $isProperty ? 'var(--clay-light)' : 'var(--clay)' }};
                                        display:flex;align-items:center;
                                        justify-content:center;flex-shrink:0;">
                                @if($isProperty)
                                    <i class="bi bi-person"
                                       style="color:var(--clay);font-size:.85rem;"></i>
                                @else
                                    <i class="bi bi-headset"
                                       style="color:#fff;font-size:.85rem;"></i>
                                @endif
                            </div>

                            <div style="flex:1;">
                                {{-- Author + time --}}
                                <div style="display:flex;align-items:center;
                                            gap:8px;margin-bottom:8px;
                                            flex-wrap:wrap;">
                                    <span class="fw-semibold"
                                          style="font-size:.83rem;">
                                        @if($isProperty)
                                            {{ $message->author?->name ?? 'Property' }}
                                        @else
                                            Kubhuka Support
                                        @endif
                                    </span>

                                    @if(!$isProperty)
                                        <span style="font-size:.65rem;
                                                     background:var(--clay);
                                                     color:#fff;padding:1px 7px;
                                                     border-radius:10px;
                                                     font-weight:700;">
                                            SUPPORT
                                        </span>
                                    @endif

                                    <span style="font-size:.7rem;color:var(--muted);">
                                        {{ $message->created_at->format('d M Y H:i') }}
                                        ({{ $message->created_at->diffForHumans() }})
                                    </span>
                                </div>

                                {{-- Body --}}
                                <div style="font-size:.83rem;line-height:1.7;
                                            color:var(--text);white-space:pre-wrap;">{{ $message->body }}</div>

                                {{-- Attachments --}}
                                @if($message->attachments->count() > 0)
                                    <div style="margin-top:10px;display:flex;
                                                flex-wrap:wrap;gap:6px;">
                                        @foreach($message->attachments as $attachment)
                                            <a href="{{ asset('storage/' . $attachment->stored_path) }}"
                                               target="_blank"
                                               style="display:inline-flex;
                                                      align-items:center;gap:5px;
                                                      background:var(--bg);
                                                      border:1px solid var(--border);
                                                      border-radius:6px;
                                                      padding:5px 10px;
                                                      font-size:.72rem;
                                                      color:var(--text);
                                                      text-decoration:none;
                                                      transition:border-color .15s;"
                                               onmouseover="this.style.borderColor='var(--clay)'"
                                               onmouseout="this.style.borderColor='var(--border)'">
                                                @if(str_contains($attachment->mime_type, 'pdf'))
                                                    📄
                                                @elseif(str_contains($attachment->mime_type, 'image'))
                                                    🖼️
                                                @else
                                                    📎
                                                @endif
                                                {{ Str::limit($attachment->original_filename, 25) }}
                                                <span style="color:var(--muted);">
                                                    ({{ number_format($attachment->file_size_bytes / 1024, 0) }}KB)
                                                </span>
                                            </a>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>

        {{-- Reply Box --}}
        @if(!in_array($ticket->status, ['closed']))
            <div class="card">
                <div class="card-header">
                    <span class="card-title">
                        <i class="bi bi-reply me-2"
                           style="color:var(--clay)"></i>
                        Reply
                    </span>
                </div>
                <div class="card-body">
                    <form method="POST"
                          action="{{ tenant_route('support.reply', ['ticket' => $ticket->id]) }}"
                          enctype="multipart/form-data">
                        @csrf

                        <div class="mb-3">
                            <textarea name="body" rows="5"
                                      class="form-control @error('body') is-invalid @enderror"
                                      placeholder="Type your reply..."
                                      required>{{ old('body') }}</textarea>
                            @error('body')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label"
                                   style="font-size:.75rem;font-weight:600;
                                          color:var(--muted);">
                                Attach Files (optional)
                            </label>
                            <input type="file" name="attachments[]"
                                   multiple
                                   class="form-control form-control-sm"
                                   accept=".pdf,.jpg,.jpeg,.png,.webp,.txt">
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit"
                                    class="btn btn-primary btn-sm">
                                <i class="bi bi-send me-1"></i>Send Reply
                            </button>
                            @if($ticket->status === 'resolved')
                                <span style="font-size:.75rem;color:var(--muted);
                                             align-self:center;">
                                    Replying will reopen this ticket
                                </span>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        @else
            <div class="card">
                <div class="card-body text-center py-4">
                    <i class="bi bi-lock"
                       style="font-size:1.8rem;color:var(--muted)"></i>
                    <p class="fw-semibold mt-2 mb-1">Ticket closed</p>
                    <p class="text-muted" style="font-size:.8rem;">
                        This ticket is closed. Open a new ticket if you need further help.
                    </p>
                    <a href="{{ tenant_route('support.create') }}"
                       class="btn btn-primary btn-sm mt-2">
                        Open New Ticket
                    </a>
                </div>
            </div>
        @endif

    </div>

    {{-- Right sidebar --}}
    <div class="col-xl-4">

        {{-- Ticket Info --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">Ticket Info</span>
            </div>
            <div class="card-body">
                <div style="display:flex;flex-direction:column;
                            gap:9px;font-size:.8rem;">
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Reference</span>
                        <span class="fw-semibold"
                              style="color:var(--clay);">
                            {{ $ticket->reference }}
                        </span>
                    </div>
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Status</span>
                        <span style="font-weight:600;
                                     color:{{ $sc['color'] }};">
                            {{ ucfirst(str_replace('_', ' ', $ticket->status)) }}
                        </span>
                    </div>
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Priority</span>
                        <span style="font-weight:600;
                                     color:{{ $pc['color'] }};">
                            {{ ucfirst($ticket->priority) }}
                        </span>
                    </div>
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Category</span>
                        <span>
                            {{ ucfirst(str_replace('_', ' ', $ticket->category)) }}
                        </span>
                    </div>
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Opened By</span>
                        <span>{{ $ticket->user?->name }}</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Created</span>
                        <span>
                            {{ $ticket->created_at->format('d M Y H:i') }}
                        </span>
                    </div>
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Last Updated</span>
                        <span>
                            {{ $ticket->updated_at->diffForHumans() }}
                        </span>
                    </div>
                    @if($ticket->admin)
                        <div style="padding-top:8px;
                                    border-top:1px solid var(--border);">
                            <div style="font-size:.68rem;font-weight:700;
                                        text-transform:uppercase;
                                        letter-spacing:.08em;
                                        color:var(--muted);margin-bottom:6px;">
                                Assigned Agent
                            </div>
                            <div style="display:flex;align-items:center;gap:9px;">
                                <div style="width:32px;height:32px;border-radius:8px;
                                             background:var(--clay);
                                             display:flex;align-items:center;
                                             justify-content:center;">
                                    <i class="bi bi-headset"
                                       style="color:#fff;font-size:.8rem;"></i>
                                </div>
                                <div>
                                    <div class="fw-semibold"
                                         style="font-size:.82rem;">
                                        {{ $ticket->admin->name }}
                                    </div>
                                    <div style="font-size:.7rem;color:var(--muted);">
                                        Kubhuka Support
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    @if($ticket->first_response_at)
                        <div style="display:flex;justify-content:space-between;">
                            <span style="color:var(--muted);">First Response</span>
                            <span style="color:var(--success);">
                                {{ $ticket->first_response_at->diffForHumans($ticket->created_at) }}
                            </span>
                        </div>
                    @endif
                    @if($ticket->resolved_at)
                        <div style="display:flex;justify-content:space-between;">
                            <span style="color:var(--muted);">Resolved</span>
                            <span>
                                {{ $ticket->resolved_at->format('d M Y') }}
                            </span>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Direct contact --}}
        <div class="card">
            <div class="card-header">
                <span class="card-title">Other Ways to Reach Us</span>
            </div>
            <div class="card-body">
                <div style="display:flex;flex-direction:column;gap:8px;">
                    <a href="mailto:support@kubhuka.com"
                       style="display:flex;align-items:center;gap:9px;
                              font-size:.8rem;color:var(--text);
                              text-decoration:none;padding:9px 12px;
                              background:var(--bg);border-radius:8px;
                              transition:background .15s;"
                       onmouseover="this.style.background='var(--clay-light)'"
                       onmouseout="this.style.background='var(--bg)'">
                        <i class="bi bi-envelope"
                           style="color:var(--clay);font-size:.9rem;
                                  flex-shrink:0;"></i>
                        <div>
                            <div class="fw-semibold">Email</div>
                            <div style="color:var(--muted);font-size:.72rem;">
                                support@kubhuka.com
                            </div>
                        </div>
                    </a>

                    <a href="https://wa.me/263777000000"
                       target="_blank"
                       style="display:flex;align-items:center;gap:9px;
                              font-size:.8rem;color:var(--text);
                              text-decoration:none;padding:9px 12px;
                              background:var(--bg);border-radius:8px;
                              transition:background .15s;"
                       onmouseover="this.style.background='#dcfce7'"
                       onmouseout="this.style.background='var(--bg)'">
                        <i class="bi bi-whatsapp"
                           style="color:#25D366;font-size:.9rem;
                                  flex-shrink:0;"></i>
                        <div>
                            <div class="fw-semibold">WhatsApp</div>
                            <div style="color:var(--muted);font-size:.72rem;">
                                +263 77 700 0000
                            </div>
                        </div>
                    </a>
                </div>

                <div style="margin-top:12px;padding:10px 12px;
                             background:var(--bg);border-radius:8px;
                             font-size:.72rem;color:var(--muted);
                             line-height:1.5;">
                    <strong>Support Hours:</strong><br>
                    Mon – Fri: 8:00 AM – 6:00 PM<br>
                    Sat: 9:00 AM – 1:00 PM<br>
                    Sun & Public Holidays: Closed
                </div>
            </div>
        </div>

    </div>
</div>

@endsection