@extends('layouts.master')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
    .font-cairo { font-family: 'Cairo', sans-serif !important; }
</style>

<div class="p-4 sm:p-6 space-y-6 font-cairo" dir="rtl" x-data="{ copiedToast: false }">
    <!-- Header Card -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
                <i class="fas fa-university text-emerald-500"></i>
                بيانات وإعدادات الربط المصرفي: {{ $bank->bank_name ?: $bank->name }}
            </h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">الاسم الإنجليزي: <span class="font-semibold text-gray-700 dark:text-gray-300">{{ $bank->name }}</span></p>
        </div>

        <div class="flex flex-wrap items-center gap-3">
            <form method="POST" action="{{ route('banks.refresh-token', $bank->id) }}">
                @csrf
                <button type="submit" class="px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white rounded-xl font-bold text-sm transition flex items-center gap-2 shadow-sm cursor-pointer">
                    <i class="fas fa-sync-alt"></i> تجديد رمز الوصول (1 سنة)
                </button>
            </form>

            <a href="{{ route('banks.edit', $bank->id) }}" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-bold text-sm transition flex items-center gap-2 shadow-sm">
                <i class="fas fa-edit"></i> تعديل البيانات
            </a>

            <a href="{{ route('banks.index') }}" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-xl font-bold text-sm transition flex items-center gap-2">
                <i class="fas fa-arrow-right"></i> العودة
            </a>
        </div>
    </div>

    @if(session('success_message'))
        <div class="p-4 bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-xl flex items-center gap-3 shadow-sm">
            <i class="fas fa-check-circle text-emerald-600 text-lg"></i>
            <div>{{ session('success_message') }}</div>
        </div>
    @endif

    <!-- Toast Notification -->
    <div x-show="copiedToast" x-transition.duration.300ms class="fixed bottom-5 left-5 z-50 bg-emerald-600 text-white px-4 py-2.5 rounded-xl shadow-xl font-bold text-sm flex items-center gap-2">
        <i class="fas fa-clipboard-check text-lg"></i> تم نسخ رمز الوصول البنكي للحافظة!
    </div>

    <!-- Status & Information Grid -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <!-- Arabic & English Names -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 space-y-2">
            <span class="text-xs font-bold text-gray-400 block">اسم البنك</span>
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ $bank->bank_name }}</h3>
            <span class="text-xs text-gray-400 block">{{ $bank->name }}</span>
        </div>

        <!-- Bank Identifier & Email -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 space-y-2">
            <span class="text-xs font-bold text-gray-400 block">المعرف البنكي / البريد</span>
            <div class="font-mono font-bold text-indigo-600 dark:text-indigo-400 text-sm">
                {{ $bank->bank_identifier ?: '—' }}
            </div>
            <span class="text-xs text-gray-500 block font-mono">{{ $bank->email ?: '—' }}</span>
        </div>

        <!-- Account Status -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 space-y-2">
            <span class="text-xs font-bold text-gray-400 block">حالة الحساب</span>
            <div>
                @if($bank->is_active)
                    <span class="px-3 py-1 bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300 rounded-full font-bold text-xs inline-block">حساب مفعل ومتاح للربط</span>
                @else
                    <span class="px-3 py-1 bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-300 rounded-full font-bold text-xs inline-block">حساب معطل</span>
                @endif
            </div>
        </div>

        <!-- Expiration Date -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 space-y-2">
            <span class="text-xs font-bold text-gray-400 block">صلاحية الرمز البنكي</span>
            <div class="font-mono font-bold text-base text-emerald-600 dark:text-emerald-400">
                {{ $bank->token_expires_at ? $bank->token_expires_at->format('Y-m-d') : '—' }}
            </div>
            <span class="text-xs text-gray-400 block">مدة صلاحية الرمز: سنة كاملة</span>
        </div>
    </div>

    <!-- API Token Access Card -->
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 space-y-4">
        <div class="flex items-center justify-between border-b border-gray-100 dark:border-gray-700 pb-3">
            <h2 class="text-base font-bold text-gray-800 dark:text-gray-200 flex items-center gap-2">
                <i class="fas fa-key text-emerald-500"></i> رمز الوصول البنكي الشخصي (Passport Personal Access Token)
            </h2>
            @if($bank->access_token)
                <button type="button" onclick="copyToken('{{ $bank->access_token }}')" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold text-xs transition flex items-center gap-2 shadow-sm cursor-pointer">
                    <i class="fas fa-copy"></i> نسخ الرمز للحافظة
                </button>
            @endif
        </div>

        <div>
            <textarea readonly rows="4" class="w-full bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl p-3 text-xs font-mono text-emerald-600 dark:text-emerald-400 leading-relaxed">{{ $bank->access_token }}</textarea>
        </div>

        <!-- cURL Integration Snippet -->
        <div class="bg-gray-900 text-gray-200 p-4 rounded-xl font-mono text-xs space-y-2 dir-ltr text-left">
            <span class="text-gray-400 block">// مثال على استعلام معلومات الطالب عبر API:</span>
            <div class="text-emerald-400 whitespace-pre-wrap">curl -X POST "{{ url('/api/student/student-info') }}" \
  -H "Accept: application/json" \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer {{ Str::limit($bank->access_token, 30) }}..." \
  -d '{"student_id": "LAB/24/044", "bank_identifier": "{{ $bank->bank_identifier }}"}'</div>
        </div>
    </div>
</div>

<script>
    function copyToken(tokenText) {
        if (!tokenText) {
            alert('لا يوجد رمز وصول متاح');
            return;
        }
        navigator.clipboard.writeText(tokenText).then(() => {
            const toast = document.querySelector('[x-data]').__x.$data;
            toast.copiedToast = true;
            setTimeout(() => { toast.copiedToast = false; }, 3000);
        }).catch(err => {
            prompt('انسخ رمز الوصول الخاص بالبنك يدويًا:', tokenText);
        });
    }
</script>
@endsection