@extends('layouts.app')
@section('title', 'Settings — Hrivex Command Center')

@section('content')
<div class="fade-in">
    <h1 class="text-lg font-medium text-gray-900 mb-5"><i class="fas fa-cog mr-2 text-gray-400"></i>Settings</h1>

    <div class="bg-white rounded-xl border border-gray-100 p-5 mb-5">
        <h2 class="text-sm font-medium text-gray-900 mb-4">Tool connections</h2>
        <p class="text-xs text-gray-400 mb-4">Configure API keys in your <code class="bg-gray-100 px-1.5 py-0.5 rounded text-xs">.env</code> file on the server.</p>
        <div class="space-y-3">
            @foreach($connectionStatus as $id => $status)
                <div class="flex items-center justify-between py-3 border-b border-gray-50 last:border-0">
                    <div class="flex items-center gap-3">
                        <span class="w-2.5 h-2.5 rounded-full" style="background:{{ $status['config']['color'] }}"></span>
                        <div>
                            <div class="text-sm font-medium text-gray-800">{{ $status['config']['name'] }}</div>
                            <div class="text-xs text-gray-400">{{ ucfirst($status['config']['tool_type']) }}</div>
                        </div>
                    </div>
                    @if($status['configured'])
                        <span class="text-xs px-2.5 py-1 rounded-full bg-green-50 text-green-600 font-medium">
                            <i class="fas fa-check-circle mr-1"></i> Connected
                        </span>
                    @else
                        <span class="text-xs px-2.5 py-1 rounded-full bg-yellow-50 text-yellow-600 font-medium">
                            <i class="fas fa-exclamation-circle mr-1"></i> Not configured
                        </span>
                    @endif
                </div>
            @endforeach
        </div>
    </div>

    <div class="bg-white rounded-xl border border-gray-100 p-5 mb-5">
        <h2 class="text-sm font-medium text-gray-900 mb-3">Setup guide</h2>
        <div class="bg-blue-50 rounded-lg p-4">
            <pre class="text-xs text-blue-600 font-mono whitespace-pre-wrap">TOOL_OTRIX_TYPE=taskify
TOOL_OTRIX_URL=https://taskify.otrixlifescience.com
TOOL_OTRIX_API_KEY=your-api-key-here</pre>
        </div>
    </div>

    <div class="bg-white rounded-xl border border-gray-100 p-5">
        <h2 class="text-sm font-medium text-gray-900 mb-3">Your account</h2>
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full flex items-center justify-center text-xs font-medium" style="background:#E6F1FB;color:#0C447C">{{ auth()->user()->initials }}</div>
            <div>
                <div class="text-sm font-medium text-gray-900">{{ auth()->user()->name }}</div>
                <div class="text-xs text-gray-400">{{ auth()->user()->email }} · {{ ucfirst(str_replace('_', ' ', auth()->user()->role)) }}</div>
            </div>
        </div>
    </div>
</div>
@endsection