{{-- resources/views/admin/support/show.blade.php --}}
@extends('admin.layouts.app')

@section('title', $ticket->ticket_number)
@section('page_title', $ticket->subject)
@section('breadcrumb')
    <a href="{{ route('admin.support.index') }}"
       style="color:var(--muted);text-decoration:none;">Support</a>
    → {{ $ticket->ticket_number }}
@endsection

@section('content')

@php
    $isOpen = in_array($ticket->status, ['open', 'in_progress', 'awaiting_property']);

    $priorityStyle = match($ticket->priority) {
        'urgent' => 'background:#fee2e2;color:#991b1b;',
        'high'   => 'background:#fef3c7;color:#92400e;',
        'medium' => 'background:#dbeafe;color:#1e40af;',
        default  => 'background:var(--bg);color:var(--muted);',
    };

    $statusClass = match($ticket->status) {
        'open'              => 'bs-pending',
        'in_progress'       => 'bs-trialing',
        'awaiting_property' => 'bs-info_requested',
        'resolved'          => 'bs-approved',
        'closed'            => 'bs-draft',
        default             => 'bs-draft',
    };
@endphp

<div class="row g-3">

    {{-- Left — conversation thread --}}
    <div class="col-xl-8">

        {{-- Thread header --}}
        <div class="card mb-3">
            <div class="card-body"
                 style="display:flex;align-items:center;justify-content:space-between;
                        flex-wrap:wrap;gap:10px;">
                <div>
                    <div style="font-size:.7rem;font-weight:700;text-transform:uppercase;
                                letter-spacing:.08em;color:var(--muted);margin-bottom:4px;">
                        {{ $ticket->ticket_number }}
                        · {{ ucfirst(str_replace('_', ' ', $ticket->type)) }}
                    </div>
                    <div style="font-size:1rem;font-weight:600;">
                        {{ $ticket->subject }}
                    </div>
                    <div style="font-size:.75rem;color:var(--muted);margin-top:4px;">
                        Opened {{ $ticket->created_at->format('d M Y H:i') }}
                        @if($ticket->first_response_at)
                            · First response {{ $ticket->first_response_at->diffForHumans() }}
                        @endif
                    </div>
                </div>
                <div style="display:flex;gap:6px;align-items:center;">
                    <span style="font-size:.7rem;font-weight:600;padding:3px 9px;
                                 border-radius:4px;{{ $priorityStyle }}">
                        {{ ucfirst($ticket->priority) }}
                    </span>
                    <span class="badge-status {{ $statusClass }}">
                        {{ str_replace('_', ' ', $ticket->status) }}
                    </span>
                </div>
            </div>
        </div>

        {{-- 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>
                <span style="font-size:.75rem;color:var(--muted);">
                    {{ $ticket->messages->count() }} messages
                </span>
            </div>

            @if($ticket->messages->isEmpty())
                <div class="card-body text-center py-4">
                    <i class="bi bi-chat" style="font-size:2rem;color:var(--muted)"></i>
                    <p class="text-muted mt-2 mb-0" style="font-size:.82rem;">
                        No messages yet
                    </p>
                </div>
            @else
                <div class="card-body" style="padding:0;">
                    @foreach($ticket->messages as $message)
                        @php
                            $isAdmin    = $message->author_type && str_contains($message->author_type, 'Admin');
                            $isInternal = $message->is_internal;
                        @endphp

                        <div style="padding:16px 20px;
                                    border-bottom:1px solid var(--border);
                                    {{ $isInternal ? 'background:rgba(245,158,11,.04);' : '' }}
                                    {{ $isAdmin ? '' : 'background:var(--bg);' }}">

                            {{-- Message header --}}
                            <div style="display:flex;align-items:center;
                                        justify-content:space-between;
                                        margin-bottom:10px;">
                                <div style="display:flex;align-items:center;gap:8px;">
                                    <div style="width:28px;height:28px;border-radius:6px;
                                                {{ $isAdmin
                                                    ? 'background:var(--clay-light);color:var(--clay);'
                                                    : 'background:#e0f2fe;color:#0369a1;' }}
                                                display:flex;align-items:center;
                                                justify-content:center;
                                                font-size:.7rem;font-weight:700;flex-shrink:0;">
                                        {{ strtoupper(substr($message->author?->name ?? '?', 0, 1)) }}
                                    </div>
                                    <div>
                                        <span class="fw-semibold" style="font-size:.82rem;">
                                            {{ $message->author?->name ?? 'Unknown' }}
                                        </span>
                                        <span style="font-size:.72rem;color:var(--muted);margin-left:6px;">
                                            {{ $isAdmin ? 'Kubhuka Support' : 'Property' }}
                                        </span>
                                    </div>
                                    @if($isInternal)
                                        <span style="font-size:.65rem;font-weight:600;
                                                     background:#fef3c7;color:#92400e;
                                                     padding:2px 7px;border-radius:4px;">
                                            Internal note
                                        </span>
                                    @endif
                                </div>
                                <span style="font-size:.7rem;color:var(--muted);white-space:nowrap;">
                                    {{ $message->created_at->format('d M Y H:i') }}
                                </span>
                            </div>

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

                            {{-- Attachments --}}
                            @if($message->attachments->count() > 0)
                                <div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;">
                                    @foreach($message->attachments as $att)
                                        <a href="{{ asset('storage/' . $att->stored_path) }}"
                                           target="_blank"
                                           style="display:inline-flex;align-items:center;gap:5px;
                                                  font-size:.73rem;color:var(--clay);
                                                  background:var(--clay-light);
                                                  padding:3px 10px;border-radius:5px;
                                                  text-decoration:none;font-weight:500;">
                                            <i class="bi bi-paperclip"></i>
                                            {{ $att->original_filename }}
                                            <span style="color:var(--muted);font-weight:400;">
                                                ({{ number_format($att->file_size_bytes / 1024) }} KB)
                                            </span>
                                        </a>
                                    @endforeach
                                </div>
                            @endif

                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        {{-- Reply Form --}}
        @if($isOpen)
            <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="{{ route('admin.support.reply', $ticket) }}">
                        @csrf

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

                        <div style="display:flex;align-items:center;
                                    justify-content:space-between;flex-wrap:wrap;gap:10px;">
                            <div class="form-check" style="margin:0;">
                                <input type="checkbox"
                                       name="is_internal"
                                       value="1"
                                       id="internal_note"
                                       class="form-check-input">
                                <label class="form-check-label"
                                       for="internal_note"
                                       style="font-size:.75rem;color:var(--muted);">
                                    Internal note
                                    <span style="font-size:.68rem;">(not visible to property)</span>
                                </label>
                            </div>
                            <button type="submit" class="btn btn-sm btn-primary">
                                <i class="bi bi-send me-1"></i> Send Reply
                            </button>
                        </div>

                    </form>
                </div>
            </div>
        @else
            <div class="card">
                <div class="card-body text-center py-4"
                     style="color:var(--muted);font-size:.82rem;">
                    <i class="bi bi-lock" style="font-size:1.5rem;display:block;margin-bottom:8px;"></i>
                    This ticket is {{ $ticket->status }}. Reopen it to reply.
                </div>
            </div>
        @endif

    </div>

    {{-- Right column — meta + actions --}}
    <div class="col-xl-4">

        {{-- Actions --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-lightning me-2" style="color:var(--clay)"></i>
                    Actions
                </span>
            </div>
            <div class="card-body" style="display:flex;flex-direction:column;gap:8px;">

                @if($isOpen)
                    <form method="POST"
                          action="{{ route('admin.support.resolve', $ticket) }}"
                          onsubmit="return confirm('Mark this ticket as resolved?')">
                        @csrf
                        <button type="submit"
                                class="btn btn-outline-success w-100 d-flex align-items-center gap-2">
                            <i class="bi bi-check-circle"></i>
                            Mark Resolved
                        </button>
                    </form>

                    <form method="POST"
                          action="{{ route('admin.support.close', $ticket) }}"
                          onsubmit="return confirm('Close this ticket?')">
                        @csrf
                        <button type="submit"
                                class="btn btn-outline-secondary w-100 d-flex align-items-center gap-2">
                            <i class="bi bi-x-circle"></i>
                            Close Ticket
                        </button>
                    </form>
                @else
                    <div style="text-align:center;font-size:.8rem;color:var(--muted);padding:4px 0;">
                        Ticket is {{ $ticket->status }}
                    </div>
                @endif

            </div>
        </div>

        {{-- Assign --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-person-check me-2" style="color:var(--clay)"></i>
                    Assigned To
                </span>
            </div>
            <div class="card-body">
                <form method="POST"
                      action="{{ route('admin.support.assign', $ticket) }}">
                    @csrf
                    <select name="admin_id"
                            class="form-select form-select-sm mb-2">
                        <option value="">Unassigned</option>
                        @foreach(\App\Models\Admin::where('is_active', true)->orderBy('name')->get() as $admin)
                            <option value="{{ $admin->id }}"
                                {{ $ticket->admin_id === $admin->id ? 'selected' : '' }}>
                                {{ $admin->name }}
                                ({{ $admin->role }})
                            </option>
                        @endforeach
                    </select>
                    <button type="submit"
                            class="btn btn-sm btn-outline-secondary w-100">
                        Update Assignment
                    </button>
                </form>
            </div>
        </div>

        {{-- Ticket Info --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-info-circle me-2" style="color:var(--clay)"></i>
                    Details
                </span>
            </div>
            <div class="card-body">
                @php
                    $details = [
                        'Ticket #'          => $ticket->ticket_number,
                        'Type'              => ucfirst(str_replace('_', ' ', $ticket->type)),
                        'Priority'          => ucfirst($ticket->priority),
                        'Opened'            => $ticket->created_at->format('d M Y H:i'),
                        'First Response'    => $ticket->first_response_at?->format('d M Y H:i') ?? '—',
                        'Resolved At'       => $ticket->resolved_at?->format('d M Y H:i') ?? '—',
                        'Closed At'         => $ticket->closed_at?->format('d M Y H:i') ?? '—',
                        'Messages'          => $ticket->messages->count(),
                    ];
                @endphp
                @foreach($details as $label => $value)
                    <div style="display:flex;justify-content:space-between;
                                align-items:center;padding:6px 0;
                                border-bottom:1px solid var(--border);
                                font-size:.78rem;">
                        <span style="color:var(--muted);">{{ $label }}</span>
                        <span class="fw-semibold"
                              style="{{ $label === 'Ticket #' ? 'font-family:monospace;' : '' }}">
                            {{ $value }}
                        </span>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Property & User --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-building me-2" style="color:var(--clay)"></i>
                    Raised By
                </span>
            </div>
            <div class="card-body">

                {{-- User --}}
                <div style="margin-bottom:14px;">
                    <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;
                                letter-spacing:.08em;color:var(--muted);margin-bottom:6px;">
                        User
                    </div>
                    @if($ticket->user)
                        <div style="display:flex;align-items:center;gap:8px;">
                            <div style="width:28px;height:28px;border-radius:6px;
                                        background:#e0f2fe;color:#0369a1;
                                        display:flex;align-items:center;
                                        justify-content:center;
                                        font-size:.7rem;font-weight:700;flex-shrink:0;">
                                {{ strtoupper(substr($ticket->user->name, 0, 1)) }}
                            </div>
                            <div>
                                <div class="fw-semibold" style="font-size:.82rem;">
                                    {{ $ticket->user->name }}
                                </div>
                                <div style="font-size:.72rem;color:var(--muted);">
                                    {{ $ticket->user->email }}
                                </div>
                            </div>
                        </div>
                    @else
                        <span style="color:var(--muted);font-size:.8rem;">—</span>
                    @endif
                </div>

                {{-- Property --}}
                <div>
                    <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;
                                letter-spacing:.08em;color:var(--muted);margin-bottom:6px;">
                        Property
                    </div>
                    @if($ticket->property)
                        <a href="{{ route('admin.properties.show', $ticket->property) }}"
                           style="display:flex;align-items:center;gap:8px;text-decoration:none;">
                            <div style="width:28px;height:28px;border-radius:6px;
                                        background:var(--clay-light);color:var(--clay);
                                        display:flex;align-items:center;
                                        justify-content:center;
                                        font-size:.7rem;font-weight:700;flex-shrink:0;">
                                <i class="bi bi-building"></i>
                            </div>
                            <div>
                                <div class="fw-semibold" style="font-size:.82rem;color:var(--clay);">
                                    {{ $ticket->property->name }}
                                </div>
                                <div style="font-size:.72rem;color:var(--muted);">
                                    {{ $ticket->property->city }}
                                </div>
                            </div>
                        </a>
                    @else
                        <span style="color:var(--muted);font-size:.8rem;">—</span>
                    @endif
                </div>

            </div>
        </div>

    </div>
</div>

@endsection