@extends('layouts.app')

@section('title', 'Paramètres de ' . $project->name . ' - DevFlow')

@section('content')
<div class="max-w-4xl mx-auto space-y-6" x-data="{ tab: 'columns' }">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div class="flex items-center space-x-3">
            <a href="{{ route('projects.kanban', $project) }}" class="p-2 rounded-xl bg-white border border-slate-200 text-slate-500 hover:text-slate-800 transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
            </a>
            <div>
                <h1 class="text-xl font-black text-slate-900 flex items-center space-x-2">
                    <span>Paramètres : {{ $project->name }}</span>
                    <span class="w-3 h-3 rounded-full" style="background-color: {{ $project->color }};"></span>
                </h1>
                <p class="text-xs text-slate-500">Personnalisez les colonnes du Kanban, les accès et les liens publics de signalement.</p>
            </div>
        </div>

        <a href="{{ route('projects.kanban', $project) }}" class="px-4 py-2 bg-slate-900 text-white text-xs font-semibold rounded-xl hover:bg-indigo-600 transition-colors">
            Retour au Kanban
        </a>
    </div>

    <!-- Tabs Navigation -->
    <div class="flex space-x-2 border-b border-slate-200 pb-2">
        <button @click="tab = 'columns'"
            :class="tab === 'columns' ? 'bg-indigo-50 text-indigo-700 font-bold border-indigo-200' : 'text-slate-600 hover:bg-slate-100'"
            class="px-4 py-2 rounded-xl text-xs border border-transparent transition-all flex items-center">
            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
            </svg>
            Colonnes du Kanban ({{ $project->columns->count() }})
        </button>

        <button @click="tab = 'public'"
            :class="tab === 'public' ? 'bg-indigo-50 text-indigo-700 font-bold border-indigo-200' : 'text-slate-600 hover:bg-slate-100'"
            class="px-4 py-2 rounded-xl text-xs border border-transparent transition-all flex items-center">
            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
            </svg>
            Liens Publics & Signalement sans compte
        </button>

        <button @click="tab = 'members'"
            :class="tab === 'members' ? 'bg-indigo-50 text-indigo-700 font-bold border-indigo-200' : 'text-slate-600 hover:bg-slate-100'"
            class="px-4 py-2 rounded-xl text-xs border border-transparent transition-all flex items-center">
            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
            </svg>
            Membres & Accès
        </button>

        <button @click="tab = 'general'"
            :class="tab === 'general' ? 'bg-indigo-50 text-indigo-700 font-bold border-indigo-200' : 'text-slate-600 hover:bg-slate-100'"
            class="px-4 py-2 rounded-xl text-xs border border-transparent transition-all flex items-center">
            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
            </svg>
            Général & Danger
        </button>
    </div>

    <!-- TAB 1: COLUMNS CONFIGURATION -->
    <div x-show="tab === 'columns'" class="space-y-6">
        <div class="bg-white rounded-2xl border border-slate-200 p-6 shadow-xs">
            <h2 class="text-base font-bold text-slate-900 mb-1">Configuration des Colonnes du Kanban</h2>
            <p class="text-xs text-slate-500 mb-6">Ajoutez, renommez, ordonnez et paramétrez chaque étape de votre flux de travail.</p>

            <form action="{{ route('projects.settings.columns', $project) }}" method="POST">
                @csrf
                <div class="space-y-3">
                    @foreach($project->columns as $col)
                        <div class="flex items-center justify-between p-3.5 rounded-xl border border-slate-200 bg-slate-50 gap-3">
                            <div class="flex items-center space-x-3 flex-1">
                                <span class="text-xs font-mono font-bold text-slate-400">#{{ $col->order_position }}</span>
                                <input type="color" name="columns[{{ $col->id }}][color]" value="{{ $col->color }}" class="w-8 h-8 rounded-lg cursor-pointer border border-slate-300 p-0.5">
                                <input type="text" name="columns[{{ $col->id }}][name]" value="{{ $col->name }}" required
                                    class="flex-1 px-3 py-1.5 rounded-lg border border-slate-300 text-xs font-semibold">
                                <input type="number" name="columns[{{ $col->id }}][order_position]" value="{{ $col->order_position }}" title="Position"
                                    class="w-16 px-2 py-1.5 rounded-lg border border-slate-300 text-xs text-center font-mono">
                            </div>

                            <div class="flex items-center space-x-4 shrink-0">
                                <label class="flex items-center space-x-1.5 text-xs text-slate-600 cursor-pointer" title="Statut attribué par défaut aux nouveaux tickets">
                                    <input type="radio" name="default_column_id" value="{{ $col->id }}" {{ $col->is_default ? 'checked' : '' }} class="text-indigo-600">
                                    <span class="text-[11px]">Par défaut</span>
                                </label>

                                <label class="flex items-center space-x-1.5 text-xs text-slate-600 cursor-pointer" title="Marquer les tickets de cette colonne comme résolus/terminés">
                                    <input type="checkbox" name="columns[{{ $col->id }}][is_closed_status]" value="1" {{ $col->is_closed_status ? 'checked' : '' }} class="rounded text-emerald-600">
                                    <span class="text-[11px]">Terminé</span>
                                </label>

                                @if($project->columns->count() > 1)
                                    <button type="submit" formaction="{{ route('projects.settings.columns.delete', [$project, $col]) }}"
                                        onclick="return confirm('Supprimer cette colonne ? Les tickets seront déplacés vers une autre colonne.')"
                                        class="p-1.5 text-slate-400 hover:text-rose-600 rounded-lg hover:bg-rose-50 transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                        </svg>
                                    </button>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="mt-5 flex justify-end">
                    <button type="submit" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold rounded-xl shadow-xs transition-colors">
                        Enregistrer les modifications de colonnes
                    </button>
                </div>
            </form>

            <!-- Add new column form -->
            <div class="mt-8 pt-6 border-t border-slate-100">
                <h3 class="text-xs font-bold uppercase tracking-wider text-slate-700 mb-3">Ajouter une nouvelle colonne</h3>
                <form action="{{ route('projects.settings.columns', $project) }}" method="POST" class="flex items-center gap-3">
                    @csrf
                    <input type="color" name="new_column_color" value="#8b5cf6" class="w-9 h-9 rounded-lg border border-slate-300 p-0.5 cursor-pointer">
                    <input type="text" name="new_column_name" placeholder="Ex: En recette client, Bloqué, En attente..." required
                        class="flex-1 px-3 py-2 rounded-xl border border-slate-300 text-xs font-medium focus:ring-2 focus:ring-indigo-500">
                    <button type="submit" class="px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white text-xs font-semibold rounded-xl transition-colors">
                        + Ajouter la colonne
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- TAB 2: PUBLIC BUG REPORTING LINK -->
    <div x-show="tab === 'public'" class="space-y-6">
        <div class="bg-white rounded-2xl border border-slate-200 p-6 shadow-xs space-y-6">
            <div>
                <h2 class="text-base font-bold text-slate-900">Lien Magique de Signalement de Bugs (Sans Connexion)</h2>
                <p class="text-xs text-slate-500 mt-1">
                    Envoyez simplement cette URL à vos clients (par email, Slack, Teams ou WhatsApp). Ils peuvent signaler un bug, joindre une capture d'écran et suivre son traitement sans jamais avoir besoin de créer de mot de passe !
                </p>
            </div>

            <!-- Report URL Box -->
            <div x-data="{ copied: false }" class="p-4 rounded-2xl bg-indigo-50/60 border border-indigo-100 space-y-2">
                <div class="flex items-center justify-between">
                    <span class="text-xs font-bold uppercase tracking-wider text-indigo-900">Lien Public pour signaler un bug :</span>
                    <button @click="navigator.clipboard.writeText('{{ route('public.report.form', $project->public_token) }}'); copied = true; setTimeout(() => copied = false, 2500)"
                        class="text-xs font-bold text-indigo-700 hover:text-indigo-900 flex items-center">
                        <span x-show="!copied">📋 Copier le lien</span>
                        <span x-show="copied" x-cloak class="text-emerald-700">✓ Lien copié dans le presse-papier !</span>
                    </button>
                </div>
                <div class="flex items-center space-x-2">
                    <input type="text" readonly value="{{ route('public.report.form', $project->public_token) }}"
                        class="w-full bg-white px-3 py-2 rounded-xl border border-indigo-200 text-xs font-mono text-indigo-900">
                    <a href="{{ route('public.report.form', $project->public_token) }}" target="_blank" class="p-2 rounded-xl bg-white border border-indigo-200 text-indigo-600 hover:bg-indigo-600 hover:text-white transition-colors" title="Tester le formulaire">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                        </svg>
                    </a>
                </div>
            </div>

            <!-- Portal URL Box -->
            <div x-data="{ copiedPortal: false }" class="p-4 rounded-2xl bg-slate-50 border border-slate-200 space-y-2">
                <div class="flex items-center justify-between">
                    <span class="text-xs font-bold uppercase tracking-wider text-slate-700">Lien du Portail de Suivi en Direct (Lecture seule) :</span>
                    <button @click="navigator.clipboard.writeText('{{ route('public.portal.show', $project->public_token) }}'); copiedPortal = true; setTimeout(() => copiedPortal = false, 2500)"
                        class="text-xs font-bold text-slate-700 hover:text-slate-900 flex items-center">
                        <span x-show="!copiedPortal">📋 Copier le lien</span>
                        <span x-show="copiedPortal" x-cloak class="text-emerald-700">✓ Lien copié !</span>
                    </button>
                </div>
                <div class="flex items-center space-x-2">
                    <input type="text" readonly value="{{ route('public.portal.show', $project->public_token) }}"
                        class="w-full bg-white px-3 py-2 rounded-xl border border-slate-200 text-xs font-mono text-slate-800">
                    <a href="{{ route('public.portal.show', $project->public_token) }}" target="_blank" class="p-2 rounded-xl bg-white border border-slate-200 text-slate-600 hover:bg-slate-900 hover:text-white transition-colors" title="Voir le portail">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                        </svg>
                    </a>
                </div>
            </div>

            <!-- Security Token Regeneration -->
            <div class="pt-4 border-t border-slate-100 flex items-center justify-between">
                <div>
                    <h4 class="text-xs font-bold text-slate-800">Régénérer le lien de sécurité</h4>
                    <p class="text-xs text-slate-400">Si vous souhaitez révoquer l'ancien lien et en produire un nouveau.</p>
                </div>
                <form action="{{ route('projects.settings.regenerate_token', $project) }}" method="POST" onsubmit="return confirm('Régénérer le lien ? Les anciens liens envoyés ne fonctionneront plus.')">
                    @csrf
                    <button type="submit" class="px-3.5 py-2 border border-slate-300 rounded-xl text-xs font-semibold text-slate-700 hover:bg-slate-50 transition-colors">
                        🔄 Nouveau Token
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- TAB 3: MEMBERS & ACCESS -->
    <div x-show="tab === 'members'" class="space-y-6">
        <div class="bg-white rounded-2xl border border-slate-200 p-6 shadow-xs">
            <h2 class="text-base font-bold text-slate-900 mb-1">Membres autorisés sur ce projet</h2>
            <p class="text-xs text-slate-500 mb-6">Déterminez qui a accès à cette application dans son espace de travail.</p>

            <form action="{{ route('projects.settings.members', $project) }}" method="POST" class="space-y-6">
                @csrf

                <div>
                    <h3 class="text-xs font-bold uppercase tracking-wider text-slate-700 mb-3">Collaborateurs & Développeurs</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        @foreach($allCollaborators as $collab)
                            <label class="flex items-center space-x-3 p-3 rounded-xl border border-slate-200 hover:bg-slate-50 cursor-pointer">
                                <input type="checkbox" name="user_ids[]" value="{{ $collab->id }}"
                                    {{ $project->users->contains($collab->id) ? 'checked' : '' }}
                                    class="w-4 h-4 rounded text-indigo-600">
                                <div>
                                    <div class="text-xs font-bold text-slate-800">{{ $collab->name }}</div>
                                    <div class="text-[11px] text-slate-400">{{ $collab->email }}</div>
                                </div>
                            </label>
                        @endforeach
                    </div>
                </div>

                <div class="pt-4 border-t border-slate-100">
                    <h3 class="text-xs font-bold uppercase tracking-wider text-slate-700 mb-3">Clients (Comptes dédiés)</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        @foreach($allClients as $client)
                            <label class="flex items-center space-x-3 p-3 rounded-xl border border-slate-200 hover:bg-slate-50 cursor-pointer">
                                <input type="checkbox" name="user_ids[]" value="{{ $client->id }}"
                                    {{ $project->users->contains($client->id) ? 'checked' : '' }}
                                    class="w-4 h-4 rounded text-indigo-600">
                                <div>
                                    <div class="text-xs font-bold text-slate-800">{{ $client->name }}</div>
                                    <div class="text-[11px] text-slate-400">{{ $client->email }} &bull; {{ $client->company ?? 'Client' }}</div>
                                </div>
                            </label>
                        @endforeach
                    </div>
                </div>

                <div class="pt-4 border-t border-slate-100 flex justify-end">
                    <button type="submit" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold rounded-xl shadow-xs transition-colors">
                        Mettre à jour les accès
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- TAB 4: GENERAL & DANGER ZONE -->
    <div x-show="tab === 'general'" class="space-y-6">
        <div class="bg-white rounded-2xl border border-slate-200 p-6 shadow-xs space-y-6">
            <h2 class="text-base font-bold text-slate-900">Paramètres généraux</h2>

            <form action="{{ route('projects.settings.update', $project) }}" method="POST" class="space-y-4">
                @csrf
                @method('PUT')

                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">Nom de l'application</label>
                    <input type="text" name="name" value="{{ $project->name }}" required class="w-full px-3.5 py-2 rounded-xl border border-slate-300 text-sm">
                </div>

                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">Description</label>
                    <textarea name="description" rows="3" class="w-full px-3.5 py-2 rounded-xl border border-slate-300 text-sm">{{ $project->description }}</textarea>
                </div>

                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">Couleur du projet</label>
                    <input type="color" name="color" value="{{ $project->color }}" class="w-10 h-10 rounded-xl cursor-pointer border border-slate-300 p-1">
                </div>

                <div class="space-y-3 pt-4 border-t border-slate-100">
                    <label class="flex items-center space-x-3 cursor-pointer">
                        <input type="checkbox" name="allow_guest_reports" value="1" {{ $project->allow_guest_reports ? 'checked' : '' }} class="w-4 h-4 rounded text-indigo-600">
                        <span class="text-xs font-semibold text-slate-800">Autoriser les signalements de bugs sans mot de passe</span>
                    </label>

                    <label class="flex items-center space-x-3 cursor-pointer">
                        <input type="checkbox" name="client_portal_enabled" value="1" {{ $project->client_portal_enabled ? 'checked' : '' }} class="w-4 h-4 rounded text-indigo-600">
                        <span class="text-xs font-semibold text-slate-800">Autoriser la consultation du portail en direct</span>
                    </label>
                </div>

                <div class="pt-4 border-t border-slate-100 flex justify-end">
                    <button type="submit" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold rounded-xl">
                        Enregistrer les modifications
                    </button>
                </div>
            </form>
        </div>

        <!-- Danger Zone -->
        <div class="bg-rose-50/50 rounded-2xl border border-rose-200 p-6">
            <h3 class="text-sm font-bold text-rose-800">Zone de danger</h3>
            <p class="text-xs text-rose-600 mt-1">La suppression du projet effacera définitivement l'ensemble de ses colonnes, tickets, commentaires et pièces jointes.</p>

            <form action="{{ route('projects.destroy', $project) }}" method="POST" class="mt-4" onsubmit="return confirm('Êtes-vous ABSOLUMENT certain de vouloir supprimer ce projet et tous ses tickets ?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white text-xs font-bold rounded-xl transition-colors">
                    Supprimer définitivement ce projet
                </button>
            </form>
        </div>
    </div>
</div>
@endsection