<?php

use Livewire\Component;
use App\Models\Setting;

new class extends Component
{
    public $settings = [];

    public function render()
    {
        return $this->view()->layout('layouts::auth');
    }

    public function mount()
    {
        $this->settings = Setting::pluck('setting_value', 'setting_key')->toArray();
        
        $defaults = [
            'site_name' => '',
            'site_slogan' => '',
            'contact_email' => '',
            'contact_phone' => '',
            'contact_address' => '',
            'social_youtube' => '',
            'social_instagram' => '',
            'social_facebook' => '',
            'seo_description' => '',
            'google_analytics_id' => '',
        ];

        foreach ($defaults as $key => $value) {
            if (!isset($this->settings[$key])) {
                $this->settings[$key] = $value;
            }
        }
    }

    public function save()
    {
        foreach ($this->settings as $key => $value) {
            Setting::updateOrCreate(
                ['setting_key' => $key],
                ['setting_value' => $value]
            );
        }

        session()->flash('message', 'Settings updated successfully.');
    }
};
?>

<div class="max-content">
    <header class="mb-10">
        <h1 class="text-2xl font-semibold tracking-tight text-gray-900">Global Configuration</h1>
        <p class="text-sm text-gray-500 mt-1">Manage foundation information, contact channels, and global SEO defaults.</p>
    </header>

    @if (session()->has('message'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4 text-sm" role="alert">
            <span>{{ session('message') }}</span>
        </div>
    @endif

    <form wire:submit.prevent="save" class="space-y-8">
        <!-- Foundation Branding -->
        <section class="card p-8">
            <h2 class="text-sm font-semibold border-b border-gray-100 pb-4 mb-6 text-gray-900">Foundation Branding</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Organization Name</label>
                    <input type="text" wire:model="settings.site_name" class="input-field w-full">
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Site Slogan</label>
                    <input type="text" wire:model="settings.site_slogan" class="input-field w-full">
                </div>
            </div>
        </section>

        <!-- Contact Information -->
        <section class="card p-8">
            <h2 class="text-sm font-semibold border-b border-gray-100 pb-4 mb-6 text-gray-900">Contact Information</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Email Address</label>
                    <input type="email" wire:model="settings.contact_email" class="input-field w-full">
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Phone Number</label>
                    <input type="text" wire:model="settings.contact_phone" class="input-field w-full">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Physical Address</label>
                    <textarea wire:model="settings.contact_address" rows="2" class="input-field w-full resize-none"></textarea>
                </div>
            </div>
        </section>

        <!-- Social Media Links -->
        <section class="card p-8">
            <h2 class="text-sm font-semibold border-b border-gray-100 pb-4 mb-6 text-gray-900">Social Connectivity</h2>
            <div class="space-y-6">
                <div class="flex items-center gap-4">
                    <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center text-red-600">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
                    </div>
                    <div class="flex-1">
                        <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1 block">YouTube Channel</label>
                        <input type="url" wire:model="settings.social_youtube" class="input-field w-full">
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    <div class="w-10 h-10 rounded-lg bg-pink-50 flex items-center justify-center text-pink-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
                    </div>
                    <div class="flex-1">
                        <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1 block">Instagram Profile</label>
                        <input type="url" wire:model="settings.social_instagram" class="input-field w-full">
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center text-blue-600">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                    </div>
                    <div class="flex-1">
                        <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1 block">Facebook Page</label>
                        <input type="url" wire:model="settings.social_facebook" class="input-field w-full">
                    </div>
                </div>
            </div>
        </section>

        <!-- Global SEO -->
        <section class="card p-8">
            <h2 class="text-sm font-semibold border-b border-gray-100 pb-4 mb-6 text-gray-900">Global SEO Defaults</h2>
            <div class="space-y-6">
                <div>
                    <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Default Meta Description</label>
                    <textarea wire:model="settings.seo_description" rows="3" class="input-field w-full resize-none"></textarea>
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Google Analytics ID</label>
                    <input type="text" wire:model="settings.google_analytics_id" class="input-field w-full" placeholder="G-XXXXXXXXXX">
                </div>
            </div>
        </section>

        <div class="flex justify-end pt-4 pb-12">
            <button type="submit" wire:loading.attr="disabled" class="px-12 py-2 bg-sage text-white text-sm font-medium rounded-md hover:bg-sage-dark transition-colors disabled:opacity-50" style="background-color: #99BC85;">
                <span wire:loading.remove wire:target="save">Update Global Settings</span>
                <span wire:loading wire:target="save">Updating...</span>
            </button>
        </div>
    </form>
</div>
