@extends('layouts.app')
@section('title', 'Settings')
@section('content')
<h1>Settings</h1>
<p style="color:var(--muted)">Plan: <strong style="color:var(--ink)">{{ $plan }}</strong></p>

<section class="card" style="margin-top:24px;max-width:620px">
    <h2 style="font-size:1.3rem">Profile</h2>
    <form method="post" action="{{ url('/settings/profile') }}">@csrf
        <label>Name <input name="name" value="{{ old('name', $user->name) }}" required></label>
        <label>Email <input value="{{ $user->email }}" disabled style="background:#EFEADC"></label>
        <label>Phone <input name="phone" value="{{ old('phone', $user->phone) }}" placeholder="+265"></label>
        <label>Country <input name="country" value="{{ old('country', $user->country) }}"></label>
        <label>Role
            <select name="profile_type">
                @foreach($types as $key => [$label, $desc])
                    <option value="{{ $key }}" @selected($user->profile_type === $key)>{{ $label }}</option>
                @endforeach
            </select>
        </label>
        <label>Research topic <input name="research_topic" value="{{ old('research_topic', $user->research_topic) }}"></label>
        <label>Industry <input name="industry" value="{{ old('industry', $user->industry) }}"></label>
        <p><button class="btn" type="submit">Save profile</button></p>
    </form>
</section>

<section class="card" style="margin-top:24px;max-width:620px">
    <h2 style="font-size:1.3rem">Password</h2>
    <form method="post" action="{{ url('/settings/password') }}">@csrf
        @if($user->password)
            <label>Current password <input type="password" name="current_password" required autocomplete="current-password"></label>
        @else
            <p style="color:var(--muted)">You signed in with Google or LinkedIn. Set a password to also sign in with email.</p>
        @endif
        <label>New password (10+ characters, letters and numbers) <input type="password" name="password" minlength="10" required autocomplete="new-password"></label>
        <label>Confirm new password <input type="password" name="password_confirmation" required autocomplete="new-password"></label>
        <p><button class="btn" type="submit">Change password</button></p>
    </form>
</section>

<section class="card" style="margin-top:24px;max-width:620px">
    <h2 style="font-size:1.3rem">Two-factor sign-in</h2>
    @if($user->mfa_enabled)
        <p>On. You will be asked for a code from your authenticator app each time you sign in.</p>
        <form method="post" action="{{ url('/settings/mfa/disable') }}">@csrf
            @if($user->password)<label>Current password <input type="password" name="current_password"></label>@endif
            <label>Current code <input name="code" inputmode="numeric" maxlength="6" required></label>
            <p><button class="btn ghost" type="submit">Turn off two-factor</button></p>
        </form>
    @elseif($pendingSecret)
        <p>Add this key to your authenticator app (Google Authenticator, Authy, 1Password), then enter the code it shows.</p>
        <p><code style="background:#fff;border:1px solid var(--rule);padding:8px 10px;border-radius:4px;word-break:break-all;display:inline-block">{{ $pendingSecret }}</code></p>
        <p style="font-size:.9rem;color:var(--muted)">Or add it from a link on your phone: <a href="{{ \App\Support\Totp::uri($user->email, $pendingSecret) }}">open in authenticator</a></p>
        <form method="post" action="{{ url('/settings/mfa/confirm') }}">@csrf
            <label>Code from your app <input name="code" inputmode="numeric" maxlength="6" required></label>
            <p><button class="btn" type="submit">Turn on two-factor</button></p>
        </form>
    @else
        <p>Protect your account with a one-time code from an authenticator app.</p>
        <form method="post" action="{{ url('/settings/mfa/start') }}">@csrf
            <p><button class="btn" type="submit">Set up two-factor</button></p>
        </form>
    @endif
</section>

<section class="card" style="margin-top:24px;max-width:620px">
    <h2 style="font-size:1.3rem">API access</h2>
    <p style="color:var(--muted)">Use a token to call the Nzeru Lab API from your own tools. Send it as <code>Authorization: Bearer &lt;token&gt;</code>.</p>
    @if(session('new_token'))
        <div class="flash" style="word-break:break-all">
            <strong>Copy this token now. It will not be shown again.</strong><br>
            <code>{{ session('new_token') }}</code>
        </div>
    @endif
    @forelse($tokens as $t)
        <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule)">
            <span>{{ $t->name }} <span style="color:var(--muted);font-size:.9rem">· last used {{ $t->last_used_at?->diffForHumans() ?? 'never' }}</span></span>
            <form method="post" action="{{ url('/settings/tokens/'.$t->id) }}">@csrf @method('DELETE')
                <button class="btn ghost" type="submit">Revoke</button>
            </form>
        </div>
    @empty
        <p>No tokens yet.</p>
    @endforelse
    <form method="post" action="{{ url('/settings/tokens') }}" style="display:flex;gap:10px;align-items:flex-end;margin-top:14px">@csrf
        <label style="flex:1;margin:0">Token name <input name="name" required maxlength="60" placeholder="e.g. Survey export script"></label>
        <button class="btn" type="submit">Create token</button>
    </form>
</section>
@endsection