<script setup lang="ts">
import { Head, router } from '@inertiajs/vue3';
import { ref, onMounted, nextTick } from 'vue';
import UserLayout from '../../layouts/user/userlayout.vue';

type Doc = {
    id: number
    category: string
    type: string
    status: string
    rejection_reason?: string | null
    mime: string
    size: number
    created_at: string
}

defineProps<{
    documents: Doc[]
    accepted: Record<string, string[]>
    maxUploadMb: number
}>()

const uploading = ref(false);
const error = ref<string | null>(null);
const success = ref<string | null>(null);

const category = ref<'identity'|'address'|'payment'>('identity');
const type = ref<string>('passport');
const fileInput = ref<HTMLInputElement | null>(null);

function onFileChosen(e: Event) {
    const input = e.target as HTMLInputElement;
    if (!input.files || input.files.length === 0) return;
    upload(input.files[0]);
}

async function upload(file: File) {
    uploading.value = true;
    error.value = null;
    success.value = null;
    const form = new FormData();
    form.append('category', category.value);
    form.append('type', type.value);
    form.append('file', file);
    try {
        const res = await fetch('/settings/kyc', {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content || ''
            },
            body: form,
        });
        if (!res.ok) {
            const j = await res.json().catch(() => ({}));
            throw new Error(j.message || 'Upload failed');
        }
        success.value = 'Document uploaded successfully';
        router.reload({ only: ['documents'] });
    } catch (e: any) {
        error.value = e?.message || 'Upload failed';
    } finally {
        uploading.value = false;
        if (fileInput.value) fileInput.value.value = '';
    }
}

async function removeDoc(id: number) {
    if (!confirm('Delete this document? Only pending documents can be deleted.')) return;
    const res = await fetch(`/settings/kyc/${id}`, {
        method: 'DELETE',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content || ''
        },
    });
    if (res.ok) {
        router.reload({ only: ['documents'] });
    }
}

function formatSize(bytes: number) {
    if (bytes < 1024) return `${bytes} B`;
    const kb = bytes/1024; if (kb < 1024) return `${kb.toFixed(1)} KB`;
    const mb = kb/1024; return `${mb.toFixed(2)} MB`;
}

onMounted(() => {
    nextTick(() => { if (window.lucide) window.lucide.createIcons(); });
});
</script>

<template>
    <UserLayout>
        <Head title="KYC Verification" />
        <section class="content">
            <div class="wrap">
                <div class="panel main-panel">
                    <header class="page-head">
                        <div class="head-flex">
                            <div class="title-group">
                                <div class="title">KYC Protocol</div>
                                <p class="subtitle">Secure identity verification & document management</p>
                            </div>
                            <div class="status-indicator">
                                <span class="dot"></span>
                                <span class="status-text">System Active</span>
                            </div>
                        </div>
                    </header>

                    <div class="settings-nav">
                        <a href="/settings/profile" class="nav-item"><i data-lucide="user"></i> Profile</a>
                        <a href="/settings/kyc" class="nav-item active"><i data-lucide="file-check"></i> KYC</a>
                        <a href="/settings/security" class="nav-item"><i data-lucide="lock"></i> Security</a>
                        <a href="/settings/two-factor" class="nav-item"><i data-lucide="shield"></i> 2FA</a>
                    </div>

                    <div class="grid-layout">
                        <div class="left-col">
                            <div class="glass-card uploader-box">
                                <div class="form-grid">
                                    <div class="input-group">
                                        <label class="lbl">Category</label>
                                        <div class="select-wrapper">
                                            <select v-model="category">
                                                <option value="identity">Identity</option>
                                                <option value="address">Address</option>
                                                <option value="payment">Payment</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="input-group">
                                        <label class="lbl">Document Type</label>
                                        <div class="select-wrapper">
                                            <select v-model="type">
                                                <option value="passport">Passport</option>
                                                <option value="driver_license">Driver license</option>
                                                <option value="id_card">ID card</option>
                                                <option value="bank_statement">Bank statement</option>
                                                <option value="utility_bill">Utility bill</option>
                                                <option value="online_banking">Online banking</option>
                                                <option value="other">Other</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="drop-zone" @click="fileInput?.click()" :class="{ 'is-uploading': uploading }">
                                    <div class="drop-content">
                                        <i data-lucide="shield-check" class="drop-icon"></i>
                                        <div class="drop-text">Click or drag-and-drop file</div>
                                        <small class="drop-info">JPG, PNG, WEBP, PDF • Max {{ maxUploadMb }} MB</small>
                                    </div>
                                    <div v-if="uploading" class="upload-overlay">
                                        <div class="spinner"></div>
                                    </div>
                                    <input ref="fileInput" type="file" class="hidden" @change="onFileChosen" :disabled="uploading" />
                                </div>

                                <div class="feedback-area">
                                    <p v-if="error" class="msg err"><i data-lucide="alert-circle"></i> {{ error }}</p>
                                    <p v-if="success" class="msg ok"><i data-lucide="check-circle"></i> {{ success }}</p>
                                </div>
                            </div>

                            <div class="document-list-container">
                                <div class="list-header">
                                    <h3>Your Documents</h3>
                                    <span class="count">{{ documents.length }} Files</span>
                                </div>

                                <div v-if="!documents.length" class="empty-state">
                                    <i data-lucide="folder-open"></i>
                                    <p>No documents uploaded yet</p>
                                </div>

                                <div class="docs-grid">
                                    <div v-for="d in documents" :key="d.id" class="doc-card" :data-status="d.status">
                                        <div class="doc-main">
                                            <div class="doc-info">
                                                <div class="doc-badges">
                                                    <span class="badge-cat">{{ d.category }}</span>
                                                    <span class="badge-type">{{ d.type }}</span>
                                                </div>
                                                <div class="doc-status">
                                                    <span class="status-dot"></span>
                                                    <span class="status-label">{{ d.status }}</span>
                                                </div>
                                            </div>
                                            <div class="doc-meta">
                                                <span>{{ d.mime.split('/')[1]?.toUpperCase() }}</span>
                                                <span>{{ formatSize(d.size) }}</span>
                                                <span>{{ new Date(d.created_at).toLocaleDateString() }}</span>
                                            </div>
                                            <div v-if="d.rejection_reason" class="rejection-box">
                                                Reason: {{ d.rejection_reason }}
                                            </div>
                                        </div>
                                        <div class="doc-actions">
                                            <a :href="`/settings/kyc/${d.id}/download`" target="_blank" class="act-btn view">
                                                <i data-lucide="eye"></i>
                                            </a>
                                            <button v-if="d.status==='pending'" @click="removeDoc(d.id)" class="act-btn delete">
                                                <i data-lucide="trash-2"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <aside class="right-col">
                            <div class="glass-card side-info">
                                <div class="side-head">Guidelines</div>
                                <div class="guide-sections">
                                    <div class="guide-item">
                                        <div class="g-title"><i data-lucide="user"></i> Identity</div>
                                        <ul>
                                            <li>Passport (Full page)</li>
                                            <li>Driver’s license (Both sides)</li>
                                            <li>ID Card (Both sides)</li>
                                        </ul>
                                    </div>
                                    <div class="guide-item">
                                        <div class="g-title"><i data-lucide="map-pin"></i> Address</div>
                                        <ul>
                                            <li>Bank statement (Last 3m)</li>
                                            <li>Utility bill (Electricity/Water)</li>
                                        </ul>
                                    </div>
                                    <div class="guide-item">
                                        <div class="g-title"><i data-lucide="credit-card"></i> Payment</div>
                                        <ul>
                                            <li>Online banking screenshot</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="secure-footer">
                                    <i data-lucide="lock" style="width:12px"></i> End-to-end Encrypted
                                </div>
                            </div>
                        </aside>
                    </div>
                </div>
            </div>
        </section>
    </UserLayout>
</template>

<style scoped>
:global(:root) {
    --bg-card: #0a0a0a;
    --border: #151515;
    --cyan: #00f2ff;
    --magenta: #ff007a;
    --green: #00ff9d;
    --gold: #f7931a;
    --red: #ff3e3e;
}

.content { padding: 30px; animation: fade-in 0.8s cubic-bezier(0.2, 0, 0, 1); }
.wrap { max-width: 1200px; margin: 0 auto; }

.main-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }

/* Header Styles */
.page-head { padding: 25px 30px; border-bottom: 1px solid var(--border); background: linear-gradient(to right, rgba(0,242,255,0.03), transparent); }
.head-flex { display: flex; justify-content: space-between; align-items: center; }
.title { font-size: 14px; font-weight: 900; color: #fff; letter-spacing: 3px; text-transform: uppercase; }
.subtitle { color: #555; font-size: 12px; margin-top: 4px; font-weight: 600; }

.status-indicator { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.3); padding: 6px 12px; border-radius: 50px; border: 1px solid #111; }
.status-indicator .dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 10px var(--green); animation: pulse 2s infinite; }
.status-text { font-size: 10px; font-weight: 900; color: #666; text-transform: uppercase; letter-spacing: 1px; }

/* Navigation */
.settings-nav { display: flex; gap: 5px; padding: 15px 30px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.2); overflow-x: auto; }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; font-size: 11px; font-weight: 800; color: #666; text-transform: uppercase; letter-spacing: 1px; transition: 0.2s; text-decoration: none; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
.nav-item.active { color: var(--cyan); background: rgba(0,242,255,0.1); }
.nav-item i { width: 14px; }

/* Grid Layout */
.grid-layout { display: grid; grid-template-columns: 1fr 320px; gap: 30px; padding: 30px; }

/* Left Column / Uploader */
.left-col { display: flex; flex-direction: column; gap: 30px; animation: slide-up 0.6s cubic-bezier(0.2, 0, 0, 1) backwards; animation-delay: 0.1s; }
.glass-card { background: #050505; border: 1px solid var(--border); border-radius: 16px; padding: 20px; transition: 0.3s; }
.glass-card:hover { border-color: #222; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.lbl { display: block; font-size: 10px; font-weight: 900; color: #444; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }

.select-wrapper { position: relative; }
select { width: 100%; background: #000; border: 1px solid var(--border); color: #fff; padding: 12px; border-radius: 12px; font-size: 13px; appearance: none; transition: 0.3s; }
select:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 15px rgba(0,242,255,0.1); }

/* Drop Zone */
.drop-zone { border: 2px dashed #1a1a1a; border-radius: 16px; padding: 40px 20px; text-align: center; cursor: pointer; transition: 0.3s; position: relative; overflow: hidden; }
.drop-zone:hover { border-color: var(--cyan); background: rgba(0,242,255,0.02); transform: scale(1.01); }
.drop-icon { width: 32px; height: 32px; color: #222; margin: 0 auto 15px; transition: 0.3s; }
.drop-zone:hover .drop-icon { color: var(--cyan); transform: translateY(-3px); }
.drop-text { font-weight: 800; color: #eee; font-size: 14px; margin-bottom: 5px; }
.drop-info { color: #444; font-size: 11px; }

.upload-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 10; }
.spinner { width: 24px; height: 24px; border: 3px solid rgba(0,242,255,0.1); border-top-color: var(--cyan); border-radius: 50%; animation: spin 0.8s linear infinite; }

/* Documents List */
.list-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 15px; }
.list-header h3 { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #444; margin: 0; }
.list-header .count { font-size: 10px; color: #666; font-weight: 800; }

.docs-grid { display: grid; gap: 12px; }
.doc-card { display: flex; justify-content: space-between; align-items: center; background: #070707; border: 1px solid var(--border); padding: 16px; border-radius: 14px; transition: 0.3s; animation: fade-in 0.5s backwards; }
.doc-card:hover { border-color: #222; transform: translateX(5px); }

.doc-info { display: flex; align-items: center; gap: 15px; margin-bottom: 8px; }
.doc-badges { display: flex; gap: 6px; }
.badge-cat { font-size: 9px; font-weight: 900; color: var(--cyan); text-transform: uppercase; background: rgba(0,242,255,0.05); padding: 2px 8px; border-radius: 4px; }
.badge-type { font-size: 9px; font-weight: 900; color: #666; text-transform: uppercase; background: #111; padding: 2px 8px; border-radius: 4px; }

.doc-status { display: flex; align-items: center; gap: 6px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #444; }
.status-label { font-size: 10px; font-weight: 900; text-transform: uppercase; color: #444; }

.doc-card[data-status="approved"] .status-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.doc-card[data-status="approved"] .status-label { color: var(--green); }
.doc-card[data-status="pending"] .status-dot { background: var(--gold); }
.doc-card[data-status="rejected"] .status-dot { background: var(--red); }

.doc-meta { display: flex; gap: 15px; font-size: 11px; color: #333; font-weight: 700; }
.rejection-box { margin-top: 8px; font-size: 11px; color: var(--red); background: rgba(255,62,62,0.05); padding: 6px 10px; border-radius: 6px; }

.doc-actions { display: flex; gap: 8px; }
.act-btn { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid #151515; background: #000; color: #444; transition: 0.2s; }
.act-btn:hover { color: #fff; border-color: #333; }
.act-btn.delete:hover { color: var(--red); border-color: var(--red); background: rgba(255,62,62,0.05); }

/* Right Column */
.right-col { animation: slide-up 0.6s cubic-bezier(0.2, 0, 0, 1) backwards; animation-delay: 0.2s; }
.side-info { position: sticky; top: 30px; }
.side-head { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #fff; margin-bottom: 20px; border-left: 3px solid var(--cyan); padding-left: 12px; }
.guide-sections { display: flex; flex-direction: column; gap: 20px; }
.g-title { font-size: 10px; font-weight: 900; text-transform: uppercase; color: #555; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.g-title i { width: 12px; }
.guide-item ul { padding-left: 20px; margin: 0; }
.guide-item li { font-size: 12px; color: #888; margin-bottom: 5px; }

.secure-footer { margin-top: 25px; padding-top: 15px; border-top: 1px solid #111; font-size: 10px; font-weight: 800; color: #333; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }

/* Utility */
.empty-state { padding: 40px; text-align: center; color: #222; }
.empty-state i { width: 40px; height: 40px; margin-bottom: 10px; opacity: 0.5; }
.msg { font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 8px; margin-top: 15px; }
.msg i { width: 14px; }
.msg.err { color: var(--red); }
.msg.ok { color: var(--green); }
.hidden { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1000px) {
    .grid-layout { grid-template-columns: 1fr; }
    .side-info { position: static; }
    .form-grid { grid-template-columns: 1fr; }
    .settings-nav { padding: 10px 15px; }
}
</style>
