@extends('layouts.app')

@section('content')
<x-page-header title="Architecture & Decision Logs" subtitle="Tracking technical decisions and infrastructure evolution">
    <x-slot name="actions">
        <button onclick="document.getElementById('add-log-modal').classList.remove('hidden')" class="btn-modern bg-[var(--accent-green)] text-black">
            <i class="bi bi-journal-plus mr-2"></i> Log Decision
        </button>
    </x-slot>
</x-page-header>

<div class="space-y-6">
    @forelse($logs as $log)
    <div class="bento-card p-6">
        <div class="flex justify-between items-start mb-4">
            <div>
                <h3 class="font-bold text-lg text-[var(--text-primary)]">{{ $log->title }}</h3>
                <div class="text-[10px] text-[var(--text-secondary)] uppercase font-bold tracking-widest">
                    {{ $log->created_at->format('M d, Y') }} • By {{ $log->creator->name ?? 'System' }}
                </div>
            </div>
            <i class="bi bi-shield-check text-[var(--accent-green)] text-2xl opacity-20"></i>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-6">
            <div class="space-y-4">
                <div>
                    <h4 class="text-[10px] uppercase font-black text-[var(--accent-green)] mb-1">Decision</h4>
                    <p class="text-sm text-[var(--text-primary)] leading-relaxed">{{ $log->decision }}</p>
                </div>
                @if($log->context)
                <div>
                    <h4 class="text-[10px] uppercase font-black text-[var(--text-secondary)] mb-1">Context</h4>
                    <p class="text-xs text-[var(--text-secondary)]">{{ $log->context }}</p>
                </div>
                @endif
            </div>
            <div class="bg-[var(--input-bg)] rounded-2xl p-4">
                <h4 class="text-[10px] uppercase font-black text-info mb-2">Impact Assessment</h4>
                <p class="text-xs text-[var(--text-secondary)] leading-relaxed italic">"{{ $log->impact ?? 'Standard operational impact' }}"</p>
            </div>
        </div>
    </div>
    @empty
    <x-empty-state title="No architecture logs" subtitle="Document technical decisions to maintain system integrity" icon="bi-layout-text-sidebar-reverse" />
    @endforelse

    <div class="mt-8">
        {{ $logs->links() }}
    </div>
</div>

<!-- Simple Add Log Modal -->
<div id="add-log-modal" class="hidden fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bento-card w-full max-w-2xl p-8 bg-[var(--bg-dark)] shadow-2xl">
        <div class="flex justify-between items-center mb-6">
            <h3 class="text-xl font-bold">New Architecture Log</h3>
            <button onclick="document.getElementById('add-log-modal').classList.add('hidden')" class="text-[var(--text-secondary)] hover:text-white">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        
        <form action="{{ route('knowledge.architecture.store') }}" method="POST" class="space-y-6">
            @csrf
            <div class="space-y-2">
                <label class="text-[10px] uppercase font-bold text-[var(--text-secondary)]">Decision Title</label>
                <input type="text" name="title" required class="input-modern w-full" placeholder="e.g. Switching to Redis for Socket.io">
            </div>
            <div class="space-y-2">
                <label class="text-[10px] uppercase font-bold text-[var(--text-secondary)]">Core Decision</label>
                <textarea name="decision" required rows="3" class="input-modern w-full" placeholder="What exactly was decided?"></textarea>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-2">
                    <label class="text-[10px] uppercase font-bold text-[var(--text-secondary)]">Impact</label>
                    <textarea name="impact" rows="2" class="input-modern w-full"></textarea>
                </div>
                <div class="space-y-2">
                    <label class="text-[10px] uppercase font-bold text-[var(--text-secondary)]">Context</label>
                    <textarea name="context" rows="2" class="input-modern w-full"></textarea>
                </div>
            </div>
            <div class="flex justify-end gap-4 mt-8">
                <button type="button" onclick="document.getElementById('add-log-modal').classList.add('hidden')" class="btn-modern">Cancel</button>
                <button type="submit" class="btn-modern bg-[var(--accent-green)] text-black font-bold px-8">Save Decision</button>
            </div>
        </form>
    </div>
</div>
@endsection