@extends('layouts.app')

@section('title', 'AI Settings')

@push('styles')
<style>
    .form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
    .form-input { width: 100%; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.15s; background: var(--card-bg); color: var(--text-primary); }
    .form-input:focus { border-color: var(--primary-light); }
    .form-textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.15s; background: var(--card-bg); color: var(--text-primary); resize: vertical; min-height: 100px; }
    .form-textarea:focus { border-color: var(--primary-light); }
    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: all 0.15s; text-decoration: none; }
    .btn-primary { background: var(--primary); color: white; }
    .btn-primary:hover { background: var(--primary-dark); }
    .btn-outline { background: transparent; border: 1px solid var(--card-border); color: var(--text-primary); }
    .btn-outline:hover { background: #F5F3F1; }
</style>
@endpush

@section('content')

<div style="max-width: 700px;">
    <div style="margin-bottom: 24px;">
        <h1 style="font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600;">AI settings</h1>
        <p style="font-size: 13px; color: var(--text-muted);">Configure Ollama integration for AI-powered features</p>
    </div>

    @if(session('success'))
        <div style="background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 6px; padding: 12px 16px; margin-bottom: 20px;">
            <p style="font-size: 13px; color: #166534; margin: 0;">{{ session('success') }}</p>
        </div>
    @endif

    <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px; margin-bottom: 24px;">
        <h3 style="font-size: 16px; font-weight: 600; margin-bottom: 16px; font-family: 'Fraunces', serif;">Connection settings</h3>
        <form method="POST" action="{{ route('settings.ai.save') }}">
            @csrf
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
                <div>
                    <label class="form-label">Ollama API URL</label>
                    <input type="url" name="ollama_base_url" class="form-input" value="{{ $ollamaBaseUrl }}" placeholder="http://localhost:11434" required>
                </div>
                <div>
                    <label class="form-label">Model name</label>
                    @if (count($models) > 0)
                        <select name="ollama_model" class="form-input" required>
                            @foreach ($models as $model)
                                @php $name = is_array($model) ? ($model['name'] ?? '') : $model; @endphp
                                <option value="{{ $name }}" {{ $name === $ollamaModel ? 'selected' : '' }}>{{ $name }}</option>
                            @endforeach
                        </select>
                    @else
                        <input type="text" name="ollama_model" class="form-input" value="{{ $ollamaModel }}" placeholder="llama3.2" required>
                    @endif
                </div>
            </div>
            <div style="margin-top: 16px;">
                <button type="submit" class="btn btn-primary">Save settings</button>
            </div>
        </form>
    </div>

    <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px; margin-bottom: 24px;">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
            <h3 style="font-size: 16px; font-weight: 600; font-family: 'Fraunces', serif;">Ollama status</h3>
            @if ($available)
                <span style="display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 500; background: #D1FAE5; color: #059669;">
                    <span style="width: 8px; height: 8px; border-radius: 50%; background: #059669; display: inline-block;"></span>
                    Running
                </span>
            @else
                <span style="display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 500; background: #FEE2E2; color: #DC2626;">
                    <span style="width: 8px; height: 8px; border-radius: 50%; background: #DC2626; display: inline-block;"></span>
                    Not running
                </span>
            @endif
        </div>

        @if (!$available)
            <div style="background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 6px; padding: 12px 16px;">
                <p style="font-size: 13px; color: #9A3412; margin: 0;">
                    Ollama is not running or not reachable. Make sure Ollama is installed and running on your server, and the API URL above is correct.
                </p>
            </div>
        @endif
    </div>

    @if ($available)
        <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px;">
            <h3 style="font-size: 16px; font-weight: 600; margin-bottom: 16px; font-family: 'Fraunces', serif;">Test prompt</h3>
            <form method="POST" action="{{ route('settings.ai.test') }}">
                @csrf
                <div style="margin-bottom: 16px;">
                    <label class="form-label">Enter your prompt</label>
                    <textarea name="prompt" class="form-textarea" placeholder="Ask the AI model something..." required></textarea>
                </div>
                <div style="display: flex; gap: 8px;">
                    <button type="submit" class="btn btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                        Send
                    </button>
                </div>
            </form>

            @if (session('ai_response'))
                <div style="margin-top: 20px;">
                    <label class="form-label" style="margin-bottom: 8px;">Response</label>
                    <div style="background: #F5F3F1; border: 1px solid var(--card-border); border-radius: 6px; padding: 16px; font-size: 14px; line-height: 1.6; white-space: pre-wrap;">{{ session('ai_response') }}</div>
                </div>
            @endif

            @if ($errors->any())
                <div style="margin-top: 16px; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 6px; padding: 12px 16px;">
                    <ul style="list-style: none; padding: 0; margin: 0;">
                        @foreach ($errors->all() as $error)
                            <li style="font-size: 13px; color: #991B1B; padding: 2px 0;">{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    @endif
</div>

@endsection