@extends('layouts.admin')

@section('title', 'Senarai Projek')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0"><i class="bi bi-folder2 me-2 text-primary"></i>Senarai Projek</h4>
        <p class="text-muted small mb-0 mt-1">Metadata sahaja — kandungan audio dan teks tidak dipaparkan.</p>
    </div>
    <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary">
        <i class="bi bi-speedometer2 me-2"></i>Kembali ke Dashboard
    </a>
</div>

{{-- Filter --}}
<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row g-2 align-items-center">
            <div class="col-md-3">
                <input type="text" class="form-control form-control-sm" name="search"
                       value="{{ request('search') }}" placeholder="Cari tajuk projek...">
            </div>
            <div class="col-md-2">
                <select class="form-select form-select-sm" name="status">
                    <option value="">Semua Status</option>
                    <option value="pending"    {{ request('status') === 'pending'    ? 'selected' : '' }}>Menunggu</option>
                    <option value="processing" {{ request('status') === 'processing' ? 'selected' : '' }}>Sedang Diproses</option>
                    <option value="completed"  {{ request('status') === 'completed'  ? 'selected' : '' }}>Selesai</option>
                    <option value="failed"     {{ request('status') === 'failed'     ? 'selected' : '' }}>Gagal</option>
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-select form-select-sm" name="owner_id">
                    <option value="">Semua Pemilik</option>
                    @foreach($owners as $owner)
                        <option value="{{ $owner->id }}" {{ request('owner_id') == $owner->id ? 'selected' : '' }}>
                            {{ $owner->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-auto">
                <button class="btn btn-sm btn-outline-secondary" type="submit">
                    <i class="bi bi-search me-1"></i>Cari
                </button>
                <a href="{{ route('admin.projects.index') }}" class="btn btn-sm btn-outline-secondary ms-1">Padam</a>
            </div>
        </form>
    </div>
</div>

{{-- Table --}}
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Tajuk</th>
                        <th>Pemilik</th>
                        <th>Status</th>
                        <th>Saiz Fail</th>
                        <th>Tempoh</th>
                        <th>Kolaborator</th>
                        <th>Tarikh Cipta</th>
                        <th style="width:80px">Tindakan</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $statusMap = [
                            'pending'    => ['bg-secondary', 'Menunggu'],
                            'processing' => ['bg-warning text-dark', 'Sedang Diproses'],
                            'completed'  => ['bg-success', 'Selesai'],
                            'failed'     => ['bg-danger', 'Gagal'],
                        ];
                    @endphp

                    @forelse($projects as $project)
                    <tr class="{{ $project->deleted_at ? 'table-secondary text-muted' : '' }}">
                        <td>
                            <span class="fw-semibold">{{ $project->title }}</span>
                            @if($project->deleted_at)
                                <span class="badge bg-secondary ms-1 small">Dipadam</span>
                            @endif
                        </td>
                        <td>
                            <span class="small">{{ $project->owner->name ?? '—' }}</span>
                            <div class="text-muted" style="font-size:0.75rem">{{ $project->owner->email ?? '' }}</div>
                        </td>
                        <td>
                            @php [$cls, $label] = $statusMap[$project->transcription_status] ?? ['bg-secondary', $project->transcription_status]; @endphp
                            <span class="badge {{ $cls }}">{{ $label }}</span>
                        </td>
                        <td class="small">
                            @php
                                $bytes = $project->file_size;
                                echo $bytes >= 1048576
                                    ? number_format($bytes/1048576, 1) . ' MB'
                                    : number_format($bytes/1024, 0) . ' KB';
                            @endphp
                        </td>
                        <td class="small">
                            @if($project->duration_seconds)
                                {{ intdiv($project->duration_seconds, 60) }}:{{ str_pad($project->duration_seconds % 60, 2, '0', STR_PAD_LEFT) }}
                            @else
                                —
                            @endif
                        </td>
                        <td class="text-center">
                            <span class="badge bg-light text-dark border">
                                {{ $project->projectCollaborators->count() }}
                            </span>
                        </td>
                        <td class="small text-muted text-nowrap">
                            {{ $project->created_at->format('d/m/Y H:i') }}
                        </td>
                        <td>
                            @if(! $project->deleted_at)
                            <button class="btn btn-sm btn-outline-warning"
                                    title="Pindah Pemilikan"
                                    data-bs-toggle="modal"
                                    data-bs-target="#modalTransfer{{ $project->id }}"
                                    data-project-title="{{ $project->title }}"
                                    data-project-owner="{{ $project->owner->name ?? '—' }}">
                                <i class="bi bi-arrow-left-right"></i>
                            </button>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center text-muted py-4">
                            <i class="bi bi-inbox fs-4 d-block mb-2"></i>Tiada projek ditemui.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if($projects->hasPages())
    <div class="card-footer bg-white">
        {{ $projects->links() }}
    </div>
    @endif
</div>

<div class="mt-2 text-muted small">
    <i class="bi bi-info-circle me-1"></i>
    Kandungan audio, teks transkripsi, dan ulasan projek tidak dipaparkan kepada pentadbir.
</div>

{{-- Transfer Ownership Modals --}}
@foreach($projects as $project)
@if(! $project->deleted_at)
<div class="modal fade" id="modalTransfer{{ $project->id }}" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">
                    <i class="bi bi-arrow-left-right me-2 text-warning"></i>Pindah Pemilikan Projek
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('admin.projects.transfer-owner', $project) }}">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-warning py-2 small">
                        <i class="bi bi-exclamation-triangle me-1"></i>
                        Tindakan ini akan memindahkan semua hak pemilik projek
                        <strong>"{{ $project->title }}"</strong> kepada pengguna lain.
                        Pemilik asal: <strong>{{ $project->owner->name ?? '—' }}</strong>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Pemilik Baru <span class="text-danger">*</span></label>
                        <select class="form-select" name="new_owner_id" required>
                            <option value="">— Pilih pengguna —</option>
                            @foreach($owners as $owner)
                                @if($owner->id !== $project->owner_user_id)
                                <option value="{{ $owner->id }}">{{ $owner->name }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Justifikasi <span class="text-danger">*</span>
                            <span class="text-muted fw-normal small">(min. 10 aksara)</span>
                        </label>
                        <textarea class="form-control" name="justification" rows="3"
                                  placeholder="Nyatakan sebab pemindahan projek ini..."
                                  minlength="10" maxlength="1000" required></textarea>
                        <div class="form-text">Justifikasi ini akan direkodkan dalam log audit.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning"
                            onclick="return confirm('Sahkan pemindahan pemilikan projek ini?')">
                        <i class="bi bi-arrow-left-right me-1"></i>Pindah Pemilikan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif
@endforeach

@endsection