<?php
include 'header.php';

if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit;
}

require_once 'db/config.php';
$db = db();
$stmt = $db->prepare("SELECT * FROM users WHERE id = ?");
$stmt->execute([$_SESSION['user_id']]);
$user = $stmt->fetch();

$status = $user['kyc_status'] ?? 0;

$message = '';
$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && $status != 1 && $status != 2) {
    $name = $_POST['kyc_name'] ?? '';
    $id_number = $_POST['kyc_id_number'] ?? '';
    
    // Simple file handling for prototype
    $upload_dir = 'uploads/kyc/';
    if (!is_dir($upload_dir)) mkdir($upload_dir, 0777, true);

    $front = '';
    $back = '';
    $handheld = '';

    if (isset($_FILES['front']) && $_FILES['front']['error'] === 0) {
        $front = $upload_dir . time() . '_front_' . $_FILES['front']['name'];
        move_uploaded_file($_FILES['front']['tmp_name'], $front);
    }
    if (isset($_FILES['back']) && $_FILES['back']['error'] === 0) {
        $back = $upload_dir . time() . '_back_' . $_FILES['back']['name'];
        move_uploaded_file($_FILES['back']['tmp_name'], $back);
    }
    if (isset($_FILES['handheld']) && $_FILES['handheld']['error'] === 0) {
        $handheld = $upload_dir . time() . '_handheld_' . $_FILES['handheld']['name'];
        move_uploaded_file($_FILES['handheld']['tmp_name'], $handheld);
    }

    $stmt = $db->prepare("UPDATE users SET kyc_name = ?, kyc_id_number = ?, kyc_id_front = ?, kyc_id_back = ?, kyc_id_handheld = ?, kyc_status = 1 WHERE id = ?");
    if ($stmt->execute([$name, $id_number, $front, $back, $handheld, $_SESSION['user_id']])) {
        $status = 1;
        $message = "KYC documents submitted successfully! Our team will review them shortly.";
    } else {
        $error = "Failed to submit KYC documents. Please try again.";
    }
}

$status_labels = [
    0 => ['text' => 'Unverified', 'color' => '#888', 'icon' => 'fa-user-slash'],
    1 => ['text' => 'Under Review', 'color' => '#f0b90b', 'icon' => 'fa-clock'],
    2 => ['text' => 'Verified', 'color' => 'var(--success-color)', 'icon' => 'fa-check-circle'],
    3 => ['text' => 'Rejected', 'color' => 'var(--danger-color)', 'icon' => 'fa-times-circle'],
];
$current = $status_labels[$status];
?>

<main style="padding: 40px 20px; background: #0b0e11; min-height: calc(100vh - 64px);">
    <div style="max-width: 800px; margin: 0 auto;">
        
        <a href="profile.php" class="back-btn"><i class="fas fa-arrow-left"></i> Profile</a>

        <div style="background: var(--card-bg); padding: 40px; border-radius: 24px; border: 1px solid var(--border-color);">
            <div style="text-align: center; margin-bottom: 40px;">
                <div style="width: 70px; height: 70px; background: rgba(0,82,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: <?php echo $current['color']; ?>; font-size: 32px;">
                    <i class="fas <?php echo $current['icon']; ?>"></i>
                </div>
                <h2 style="margin: 0; font-size: 2rem;">Identity Verification</h2>
                <p style="color: var(--text-muted); margin-top: 10px;">Status: <span style="color: <?php echo $current['color']; ?>; font-weight: bold;"><?php echo $current['text']; ?></span></p>
            </div>

            <?php if($message): ?>
                <div style="background: rgba(14,203,129,0.1); color: var(--success-color); padding: 20px; border-radius: 12px; margin-bottom: 30px; border: 1px solid var(--success-color);">
                    <i class="fas fa-check-circle"></i> <?php echo $message; ?>
                </div>
            <?php endif; ?>

            <?php if($error): ?>
                <div style="background: rgba(246,70,93,0.1); color: var(--danger-color); padding: 20px; border-radius: 12px; margin-bottom: 30px; border: 1px solid var(--danger-color);">
                    <i class="fas fa-exclamation-circle"></i> <?php echo $error; ?>
                </div>
            <?php endif; ?>

            <?php if($status == 0 || $status == 3): ?>
                <form method="POST" enctype="multipart/form-data">
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px;">
                        <div>
                            <label style="display: block; margin-bottom: 10px; color: var(--text-muted); font-size: 14px;">Full Name</label>
                            <input type="text" name="kyc_name" placeholder="As shown on ID" required style="width: 100%; padding: 14px; background: #161a1e; border: 1px solid var(--border-color); color: white; border-radius: 12px; outline: none;">
                        </div>
                        <div>
                            <label style="display: block; margin-bottom: 10px; color: var(--text-muted); font-size: 14px;">ID / Passport Number</label>
                            <input type="text" name="kyc_id_number" placeholder="Enter ID number" required style="width: 100%; padding: 14px; background: #161a1e; border: 1px solid var(--border-color); color: white; border-radius: 12px; outline: none;">
                        </div>
                    </div>

                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 30px;">
                        <div>
                            <label style="display: block; margin-bottom: 12px; color: var(--text-muted); font-size: 14px;">ID Front Side</label>
                            <div class="upload-box" onclick="document.getElementById('file-front').click()">
                                <i class="fas fa-plus" id="icon-front"></i>
                                <span id="text-front">Upload Photo</span>
                                <input type="file" name="front" id="file-front" hidden onchange="previewFile(this, 'front')">
                            </div>
                        </div>
                        <div>
                            <label style="display: block; margin-bottom: 12px; color: var(--text-muted); font-size: 14px;">ID Back Side</label>
                            <div class="upload-box" onclick="document.getElementById('file-back').click()">
                                <i class="fas fa-plus" id="icon-back"></i>
                                <span id="text-back">Upload Photo</span>
                                <input type="file" name="back" id="file-back" hidden onchange="previewFile(this, 'back')">
                            </div>
                        </div>
                    </div>

                    <div style="margin-bottom: 40px;">
                        <label style="display: block; margin-bottom: 12px; color: var(--text-muted); font-size: 14px;">Handheld ID & Signature</label>
                        <div class="upload-box" style="height: 180px;" onclick="document.getElementById('file-handheld').click()">
                            <i class="fas fa-camera" id="icon-handheld" style="font-size: 32px;"></i>
                            <span id="text-handheld" style="margin-top: 10px;">Upload handheld photo with date</span>
                            <input type="file" name="handheld" id="file-handheld" hidden onchange="previewFile(this, 'handheld')">
                        </div>
                    </div>

                    <button type="submit" class="btn-primary" style="width: 100%; padding: 18px; font-size: 1.1rem; border-radius: 12px; font-weight: bold;">Submit for Verification</button>
                </form>
            <?php elseif($status == 1): ?>
                <div style="text-align: center; padding: 40px 0;">
                    <p style="color: var(--text-muted); line-height: 1.8;">Your identity documents have been received and are currently being reviewed. This process usually takes 1-2 business days. We will notify you once the review is complete.</p>
                    <div style="margin-top: 30px; padding: 20px; background: rgba(240,185,11,0.05); border-radius: 12px; border: 1px solid rgba(240,185,11,0.1); display: inline-block;">
                        <i class="fas fa-info-circle"></i> You can still trade while waiting for verification.
                    </div>
                </div>
            <?php elseif($status == 2): ?>
                <div style="text-align: center; padding: 40px 0;">
                    <p style="color: var(--success-color); font-weight: 500;">Congratulations! Your identity has been fully verified.</p>
                    <p style="color: var(--text-muted); margin-top: 10px;">You now have full access to all withdrawal limits and advanced trading features.</p>
                </div>
            <?php endif; ?>
        </div>
    </div>
</main>

<style>
    .upload-box {
        border: 2px dashed var(--border-color);
        height: 140px;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--text-muted);
        transition: 0.3s;
        background: rgba(255,255,255,0.01);
    }
    .upload-box:hover {
        border-color: var(--primary-color);
        background: rgba(0,82,255,0.02);
        color: white;
    }
    .upload-box i { font-size: 24px; margin-bottom: 8px; }
    .upload-box span { font-size: 13px; }
</style>

<script>
    function previewFile(input, type) {
        if (input.files && input.files[0]) {
            const icon = document.getElementById('icon-' + type);
            const text = document.getElementById('text-' + type);
            icon.className = 'fas fa-check-circle';
            icon.style.color = 'var(--success-color)';
            text.innerText = input.files[0].name;
            text.style.color = 'var(--success-color)';
        }
    }
</script>

<?php include 'footer.php'; ?>