<?php
/**
 * User profile page.
 *
 * Shows the logged-in user's avatar, name, and account details such as
 * their username and email address. If the user is viewing their own
 * profile, they can also change their password, link social accounts (we can toggle this off in cfg, let's discuss with the client),
 * or return to the dashboard.
 */
$this->extend('/layout/TwitterBootstrap/dashboard');
?>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 mb-3">
            <h1 class="h2">
                <i class="bi bi-person-circle me-2"></i>User Profile
            </h1>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-body text-center">
                    <?php
                    $avatarUrl = empty($user->avatar) ? $avatarPlaceholder : $user->avatar;
                    echo $this->Html->image(
                        $avatarUrl,
                        [
                            'class' => 'rounded-circle mb-3',
                            'width' => '180',
                            'height' => '180',
                            'alt' => 'User Avatar'
                        ]
                    );
                    ?>
                    <h3 class="mb-1">
                        <?= h($user->first_name ?? '') ?> <?= h($user->last_name ?? '') ?>
                    </h3>
                    <p class="text-muted">@<?= h($user->username) ?></p>
                    
                    <?php if ($isCurrentUser): ?>
                        <div class="d-grid gap-2 mt-3">
                            <?= $this->Html->link(
                                '<i class="bi bi-key-fill me-2"></i>Change Password',
                                ['plugin' => 'CakeDC/Users', 'controller' => 'Users', 'action' => 'changePassword'],
                                ['class' => 'btn btn-outline-primary btn-sm', 'escape' => false]
                            ) ?>
                            <?= $this->Html->link(
                                '<i class="bi bi-arrow-left-circle me-2"></i>Back to Dashboard',
                                ['controller' => 'Dashboard', 'action' => 'index', 'plugin' => false],
                                ['class' => 'btn btn-outline-secondary btn-sm', 'escape' => false]
                            ) ?>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Account Information</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <strong>Username</strong>
                        </div>
                        <div class="col-md-8">
                            <?= h($user->username) ?>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <strong>Email</strong>
                        </div>
                        <div class="col-md-8">
                            <?= h($user->email) ?>
                        </div>
                    </div>
                    <?php if (!empty($user->first_name) || !empty($user->last_name)): ?>
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <strong>Full Name</strong>
                            </div>
                            <div class="col-md-8">
                                <?= h($user->first_name ?? '') ?> <?= h($user->last_name ?? '') ?>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <?php if (!empty($user->social_accounts)): ?>
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-share-fill me-2"></i>Social Accounts
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Avatar</th>
                                        <th>Provider</th>
                                        <th>Username</th>
                                        <th>Link</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach ($user->social_accounts as $socialAccount): ?>
                                        <tr>
                                            <td>
                                                <?= $this->Html->image(
                                                    $socialAccount->avatar,
                                                    ['width' => '40', 'height' => '40', 'class' => 'rounded-circle']
                                                ) ?>
                                            </td>
                                            <td>
                                                <span class="badge bg-secondary">
                                                    <?= h($socialAccount->provider) ?>
                                                </span>
                                            </td>
                                            <td><?= h($socialAccount->username) ?></td>
                                            <td>
                                                <?php if ($socialAccount->link && $socialAccount->link != '#'): ?>
                                                    <?= $this->Html->link(
                                                        '<i class="bi bi-box-arrow-up-right"></i>',
                                                        $socialAccount->link,
                                                        [
                                                            'target' => '_blank',
                                                            'escape' => false,
                                                            'class' => 'btn btn-sm btn-outline-primary'
                                                        ]
                                                    ) ?>
                                                <?php else: ?>
                                                    -
                                                <?php endif; ?>
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            <?php endif; ?>

            <?php if ($isCurrentUser): ?>
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-link-45deg me-2"></i>Connect Social Accounts
                        </h5>
                    </div>
                    <div class="card-body">
                        <?= $this->User->socialConnectLinkList($user->social_accounts ?? []) ?>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>
