<?php
declare(strict_types=1);
require_once __DIR__ . '/../includes/middleware.php';
require_once __DIR__ . '/../config/database.php';
require_customer();

$uid = $_SESSION['user']['id'];
$user = $_SESSION['user'];

// Load profile data
$stmt = $pdo->prepare("SELECT * FROM user_profiles WHERE user_id = ?");
$stmt->execute([$uid]);
$profile = $stmt->fetch(PDO::FETCH_ASSOC) ?: [];

// Calculate profile completion
$fields = ['phone', 'date_of_birth', 'residential_address', 'city', 'state', 'id_type', 'id_number', 'passport_path'];
$filled = 0;
foreach ($fields as $f) {
    if (!empty($profile[$f])) $filled++;
}
$completionPercent = round(($filled / count($fields)) * 100);

// Handle success message
$success = $_SESSION['profile_success'] ?? null;
unset($_SESSION['profile_success']);

include __DIR__ . '/../includes/header.php';
?>

<style>
.profile-container { max-width: 1000px; margin: 40px auto; padding: 0 20px; }
.profile-header { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; }
.profile-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #10b981 0%, #059669 100%); display: flex; align-items: center; justify-content: center; font-size: 32px; color: white; font-weight: 700; }
.profile-title { flex: 1; }
.profile-title h1 { margin: 0 0 4px 0; font-size: 24px; font-weight: 700; color: #1f2937; }
.profile-title p { margin: 0; color: #6b7280; font-size: 14px; }
.completion-badge { background: #f0fdf4; border: 1px solid #86efac; border-radius: 20px; padding: 8px 16px; font-size: 13px; color: #166534; font-weight: 600; }
.completion-badge.incomplete { background: #fef3c7; border-color: #fcd34d; color: #92400e; }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
@media (max-width: 768px) { .profile-grid { grid-template-columns: 1fr; } }

.profile-card { background: white; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; }
.card-header { background: #f8fafc; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; gap: 12px; }
.card-header-icon { width: 36px; height: 36px; border-radius: 10px; background: #eff6ff; color: #2563eb; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.card-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #1f2937; }
.card-body { padding: 20px; }

.info-row { display: flex; padding: 12px 0; border-bottom: 1px solid #f3f4f6; }
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-row:first-child { padding-top: 0; }
.info-label { width: 140px; color: #6b7280; font-size: 13px; font-weight: 500; flex-shrink: 0; }
.info-value { flex: 1; color: #1f2937; font-size: 14px; font-weight: 500; }
.info-value.empty { color: #9ca3af; font-style: italic; }

.documents-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.doc-card { border: 2px dashed #e5e7eb; border-radius: 12px; padding: 20px; text-align: center; transition: all 0.2s; }
.doc-card:hover { border-color: #10b981; background: #f0fdf4; }
.doc-card.has-file { border-style: solid; border-color: #10b981; background: #f0fdf4; }
.doc-icon { font-size: 32px; margin-bottom: 8px; }
.doc-name { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 4px; }
.doc-status { font-size: 12px; color: #6b7280; }
.doc-status.uploaded { color: #059669; font-weight: 500; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 14px; text-decoration: none; transition: all 0.2s; border: none; cursor: pointer; }
.btn-primary { background: #10b981; color: white; }
.btn-primary:hover { background: #059669; }
.btn-secondary { background: #f3f4f6; color: #374151; }
.btn-secondary:hover { background: #e5e7eb; }

.success-banner { background: #f0fdf4; border: 1px solid #86efac; border-radius: 10px; padding: 16px 20px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; color: #166534; }

.action-bar { display: flex; gap: 16px; justify-content: flex-end; margin-top: 32px; padding-top: 24px; border-top: 1px solid #e5e7eb; }
</style>

<div class="profile-container">
    <?php if ($success): ?>
    <div class="success-banner">
        <span style="font-size: 20px;">✓</span>
        <span><?= htmlspecialchars($success) ?></span>
    </div>
    <?php endif; ?>

    <div class="profile-header">
        <div class="profile-avatar">
            <?= strtoupper(substr($user['full_name'], 0, 1)) ?>
        </div>
        <div class="profile-title">
            <h1><?= htmlspecialchars($user['full_name']) ?></h1>
            <p><?= htmlspecialchars($user['email']) ?> • Member since <?= date('F Y', strtotime($user['created_at'] ?? 'now')) ?></p>
        </div>
        <div class="completion-badge <?= $completionPercent < 100 ? 'incomplete' : '' ?>">
            Profile <?= $completionPercent ?>% Complete
        </div>
    </div>

    <div class="profile-grid">
        <!-- Personal Information -->
        <div class="profile-card">
            <div class="card-header">
                <div class="card-header-icon">👤</div>
                <h3>Personal Information</h3>
            </div>
            <div class="card-body">
                <div class="info-row">
                    <div class="info-label">Full Name</div>
                    <div class="info-value"><?= htmlspecialchars($profile['full_name'] ?? $user['full_name']) ?></div>
                </div>
                <div class="info-row">
                    <div class="info-label">Email</div>
                    <div class="info-value"><?= htmlspecialchars($profile['email'] ?? $user['email']) ?></div>
                </div>
                <div class="info-row">
                    <div class="info-label">Phone</div>
                    <div class="info-value <?= empty($profile['phone']) ? 'empty' : '' ?>">
                        <?= !empty($profile['phone']) ? htmlspecialchars($profile['phone']) : 'Not provided' ?>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">Date of Birth</div>
                    <div class="info-value <?= empty($profile['date_of_birth']) ? 'empty' : '' ?>">
                        <?= !empty($profile['date_of_birth']) ? htmlspecialchars($profile['date_of_birth']) : 'Not provided' ?>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">Nationality</div>
                    <div class="info-value <?= empty($profile['nationality']) ? 'empty' : '' ?>">
                        <?= !empty($profile['nationality']) ? htmlspecialchars($profile['nationality']) : 'Not provided' ?>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">Gender</div>
                    <div class="info-value <?= empty($profile['gender']) ? 'empty' : '' ?>">
                        <?= !empty($profile['gender']) ? htmlspecialchars($profile['gender']) : 'Not provided' ?>
                    </div>
                </div>
            </div>
        </div>

        <!-- Address Information -->
        <div class="profile-card">
            <div class="card-header">
                <div class="card-header-icon">📍</div>
                <h3>Address Information</h3>
            </div>
            <div class="card-body">
                <div class="info-row">
                    <div class="info-label">Residential</div>
                    <div class="info-value <?= empty($profile['residential_address']) ? 'empty' : '' ?>">
                        <?= !empty($profile['residential_address']) ? nl2br(htmlspecialchars($profile['residential_address'])) : 'Not provided' ?>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">City</div>
                    <div class="info-value <?= empty($profile['city']) ? 'empty' : '' ?>">
                        <?= !empty($profile['city']) ? htmlspecialchars($profile['city']) : 'Not provided' ?>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">State</div>
                    <div class="info-value <?= empty($profile['state']) ? 'empty' : '' ?>">
                        <?= !empty($profile['state']) ? htmlspecialchars($profile['state']) : 'Not provided' ?>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">Country</div>
                    <div class="info-value <?= empty($profile['country']) ? 'empty' : '' ?>">
                        <?= !empty($profile['country']) ? htmlspecialchars($profile['country']) : 'Not provided' ?>
                    </div>
                </div>
            </div>
        </div>

        <!-- Business Information -->
        <div class="profile-card">
            <div class="card-header">
                <div class="card-header-icon">🏢</div>
                <h3>Business Information</h3>
            </div>
            <div class="card-body">
                <div class="info-row">
                    <div class="info-label">Business Name</div>
                    <div class="info-value <?= empty($profile['business_name']) ? 'empty' : '' ?>">
                        <?= !empty($profile['business_name']) ? htmlspecialchars($profile['business_name']) : 'Not provided' ?>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">Business Address</div>
                    <div class="info-value <?= empty($profile['business_address']) ? 'empty' : '' ?>">
                        <?= !empty($profile['business_address']) ? nl2br(htmlspecialchars($profile['business_address'])) : 'Not provided' ?>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">Nature of Business</div>
                    <div class="info-value <?= empty($profile['nature_of_business']) ? 'empty' : '' ?>">
                        <?= !empty($profile['nature_of_business']) ? htmlspecialchars($profile['nature_of_business']) : 'Not provided' ?>
                    </div>
                </div>
            </div>
        </div>

        <!-- Next of Kin -->
        <div class="profile-card">
            <div class="card-header">
                <div class="card-header-icon">👥</div>
                <h3>Next of Kin</h3>
            </div>
            <div class="card-body">
                <div class="info-row">
                    <div class="info-label">Full Name</div>
                    <div class="info-value <?= empty($profile['next_of_kin_name']) ? 'empty' : '' ?>">
                        <?= !empty($profile['next_of_kin_name']) ? htmlspecialchars($profile['next_of_kin_name']) : 'Not provided' ?>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">Phone</div>
                    <div class="info-value <?= empty($profile['next_of_kin_phone']) ? 'empty' : '' ?>">
                        <?= !empty($profile['next_of_kin_phone']) ? htmlspecialchars($profile['next_of_kin_phone']) : 'Not provided' ?>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">Relationship</div>
                    <div class="info-value <?= empty($profile['next_of_kin_relationship']) ? 'empty' : '' ?>">
                        <?= !empty($profile['next_of_kin_relationship']) ? htmlspecialchars($profile['next_of_kin_relationship']) : 'Not provided' ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Documents Section -->
    <div class="profile-card" style="margin-bottom: 24px;">
        <div class="card-header">
            <div class="card-header-icon">📄</div>
            <h3>Identity Documents</h3>
        </div>
        <div class="card-body">
            <div class="documents-grid">
                <div class="doc-card <?= !empty($profile['id_document_path']) ? 'has-file' : '' ?>">
                    <div class="doc-icon">🪪</div>
                    <div class="doc-name">ID Document</div>
                    <div class="doc-status <?= !empty($profile['id_document_path']) ? 'uploaded' : '' ?>">
                        <?= !empty($profile['id_document_path']) ? '✓ Uploaded' : 'Not uploaded' ?>
                    </div>
                    <?php if (!empty($profile['id_document_path'])): ?>
                    <a href="<?= htmlspecialchars($profile['id_document_path']) ?>" target="_blank" style="font-size: 12px; color: #10b981; margin-top: 8px; display: inline-block;">View Document →</a>
                    <?php endif; ?>
                </div>
                <div class="doc-card <?= !empty($profile['passport_path']) ? 'has-file' : '' ?>">
                    <div class="doc-icon">📷</div>
                    <div class="doc-name">Passport Photo</div>
                    <div class="doc-status <?= !empty($profile['passport_path']) ? 'uploaded' : '' ?>">
                        <?= !empty($profile['passport_path']) ? '✓ Uploaded' : 'Not uploaded' ?>
                    </div>
                    <?php if (!empty($profile['passport_path'])): ?>
                    <a href="<?= htmlspecialchars($profile['passport_path']) ?>" target="_blank" style="font-size: 12px; color: #10b981; margin-top: 8px; display: inline-block;">View Photo →</a>
                    <?php endif; ?>
                </div>
                <div class="doc-card <?= !empty($profile['signature_path']) ? 'has-file' : '' ?>">
                    <div class="doc-icon">✍️</div>
                    <div class="doc-name">Signature</div>
                    <div class="doc-status <?= !empty($profile['signature_path']) ? 'uploaded' : '' ?>">
                        <?= !empty($profile['signature_path']) ? '✓ Uploaded' : 'Not uploaded' ?>
                    </div>
                    <?php if (!empty($profile['signature_path'])): ?>
                    <a href="<?= htmlspecialchars($profile['signature_path']) ?>" target="_blank" style="font-size: 12px; color: #10b981; margin-top: 8px; display: inline-block;">View Signature →</a>
                    <?php endif; ?>
                </div>
            </div>

            <?php if (!empty($profile['id_type'])): ?>
            <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #f3f4f6;">
                <div class="info-row" style="padding: 8px 0;">
                    <div class="info-label">ID Type</div>
                    <div class="info-value"><?= htmlspecialchars($profile['id_type']) ?></div>
                </div>
                <div class="info-row" style="padding: 8px 0;">
                    <div class="info-label">ID Number</div>
                    <div class="info-value"><?= htmlspecialchars($profile['id_number'] ?? 'Not provided') ?></div>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>

    <div class="action-bar">
        <a href="/customer/dashboard.php" class="btn btn-secondary">← Back to Dashboard</a>
        <a href="/customer/edit-profile.php" class="btn btn-primary">✏️ Edit Profile</a>
    </div>
</div>

<?php include __DIR__ . '/../includes/footer.php'; ?>
