@extends('layouts.app')
@section('title', __('Add a user'))
@section('page-title', __('Add a user'))
@section('page-subtitle', __('Send an invitation by email or WhatsApp, or create the account directly.'))

@section('content')
@php
    $oldMode      = old('_mode', $invitation ? 'invite' : 'invite');
    $oldRole      = old('role', 'user');
    $oldChannels  = (array) old('channels', ['email']);
@endphp

<div x-data="{ mode: '{{ $oldMode }}' }" class="space-y-6">

    {{-- Mode tabs --------------------------------------------------------- --}}
    <div class="flex flex-col sm:flex-row sm:items-center gap-3 justify-between">
        <div class="inline-flex rounded-xl border border-slate-200 dark:border-slate-800 p-1 bg-white dark:bg-slate-900/40 self-start">
            <button type="button" @click="mode = 'invite'"
                    :class="mode === 'invite' ? 'bg-brand-600 text-white shadow-sm' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800/60'"
                    class="px-4 py-2 rounded-lg text-sm font-medium transition flex items-center gap-2">
                <x-icon name="send" class="w-4 h-4"/> {{ __('Send invitation') }}
            </button>
            <button type="button" @click="mode = 'direct'"
                    :class="mode === 'direct' ? 'bg-brand-600 text-white shadow-sm' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800/60'"
                    class="px-4 py-2 rounded-lg text-sm font-medium transition flex items-center gap-2">
                <x-icon name="user-plus" class="w-4 h-4"/> {{ __('Create directly') }}
            </button>
            <button type="button" @click="mode = 'import'"
                    :class="mode === 'import' ? 'bg-brand-600 text-white shadow-sm' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800/60'"
                    class="px-4 py-2 rounded-lg text-sm font-medium transition flex items-center gap-2">
                <x-icon name="upload" class="w-4 h-4"/> {{ __('Bulk import') }}
            </button>
        </div>
        <a href="{{ route('tenant.users.index') }}" class="btn-ghost text-sm self-start sm:self-auto">
            <x-icon name="arrow-left" class="w-4 h-4"/> {{ __('Back to users') }}
        </a>
    </div>

    {{-- ============================================================== --}}
    {{-- INVITE MODE                                                     --}}
    {{-- ============================================================== --}}
    <div x-show="mode === 'invite'" x-cloak class="grid grid-cols-1 xl:grid-cols-3 gap-6">

        {{-- Form column (spans 2) --}}
        <form method="POST" action="{{ route('tenant.users.invite') }}"
              x-data="{ channels: {{ json_encode(array_values($oldChannels)) }} }"
              class="xl:col-span-2 card-pad space-y-5">
            @csrf
            <input type="hidden" name="_mode" value="invite">

            <div>
                <h2 class="text-lg font-semibold flex items-center gap-2">
                    <span class="w-8 h-8 rounded-lg bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 flex items-center justify-center">
                        <x-icon name="mail" class="w-4 h-4"/>
                    </span>
                    {{ __('Invitation details') }}
                </h2>
                <p class="text-xs text-slate-500 mt-1 ms-10">{{ __('A signed accept link will be generated. The recipient sets their own password on first sign-in.') }}</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="form-label">{{ __('Full name') }}</label>
                    <input name="name" required value="{{ old('name') }}" class="form-input" placeholder="{{ __('e.g. Sarah El Amrani') }}">
                    @error('name')<div class="form-error">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label class="form-label">{{ __('Email') }}</label>
                    <input name="email" type="email" required value="{{ old('email') }}" class="form-input" placeholder="sarah@acme.com">
                    @error('email')<div class="form-error">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label class="form-label">{{ __('WhatsApp number') }} <span class="text-slate-400 font-normal">({{ __('optional') }})</span></label>
                    <input name="phone" value="{{ old('phone') }}" class="form-input" placeholder="+212 6 12 34 56 78">
                    <p class="mt-1 text-xs text-slate-500">{{ __('Used to prefill a WhatsApp share link with the invitation.') }}</p>
                    @error('phone')<div class="form-error">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label class="form-label">{{ __('Role') }}</label>
                    <div class="grid grid-cols-2 gap-2">
                        <label class="cursor-pointer rounded-lg border border-slate-200 dark:border-slate-700 p-3 has-[:checked]:border-brand-500 has-[:checked]:bg-brand-50/40 dark:has-[:checked]:bg-brand-900/20">
                            <input type="radio" name="role" value="user" class="sr-only" @checked($oldRole === 'user')>
                            <div class="flex items-center gap-2 text-sm font-medium"><x-icon name="user" class="w-4 h-4 text-slate-400"/> {{ __('User') }}</div>
                            <div class="text-xs text-slate-500 mt-0.5">{{ __('Uploads & views own submissions.') }}</div>
                        </label>
                        <label class="cursor-pointer rounded-lg border border-slate-200 dark:border-slate-700 p-3 has-[:checked]:border-brand-500 has-[:checked]:bg-brand-50/40 dark:has-[:checked]:bg-brand-900/20">
                            <input type="radio" name="role" value="tenant_admin" class="sr-only" @checked($oldRole === 'tenant_admin')>
                            <div class="flex items-center gap-2 text-sm font-medium"><x-icon name="shield-check" class="w-4 h-4 text-slate-400"/> {{ __('Tenant admin') }}</div>
                            <div class="text-xs text-slate-500 mt-0.5">{{ __('Full workspace access.') }}</div>
                        </label>
                    </div>
                </div>
            </div>

            {{-- Channels picker --}}
            <div class="pt-2">
                <label class="form-label">{{ __('How should we deliver the invitation?') }}</label>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <label class="flex items-start gap-3 p-3 rounded-lg border border-slate-200 dark:border-slate-700 cursor-pointer has-[:checked]:border-emerald-500 has-[:checked]:bg-emerald-50/40 dark:has-[:checked]:bg-emerald-900/20">
                        <input type="checkbox" name="channels[]" value="email" x-model="channels"
                               class="mt-0.5 rounded border-slate-300 text-emerald-600 focus:ring-emerald-500">
                        <div>
                            <div class="text-sm font-medium flex items-center gap-2"><x-icon name="mail" class="w-4 h-4"/> {{ __('Send by email') }}</div>
                            <div class="text-xs text-slate-500 mt-0.5">{{ __('Delivered via the platform email template.') }}</div>
                        </div>
                    </label>
                    <label class="flex items-start gap-3 p-3 rounded-lg border border-slate-200 dark:border-slate-700 cursor-pointer has-[:checked]:border-emerald-500 has-[:checked]:bg-emerald-50/40 dark:has-[:checked]:bg-emerald-900/20">
                        <input type="checkbox" name="channels[]" value="whatsapp" x-model="channels"
                               class="mt-0.5 rounded border-slate-300 text-emerald-600 focus:ring-emerald-500">
                        <div>
                            <div class="text-sm font-medium flex items-center gap-2">
                                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M.057 24l1.687-6.163A11.867 11.867 0 010 11.85C0 5.305 5.392 0 12.017 0c3.181 0 6.167 1.232 8.413 3.467a11.81 11.81 0 013.476 8.396c-.003 6.545-5.395 11.85-12.02 11.85a12.06 12.06 0 01-5.737-1.45L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 001.518 5.276l-1.005 3.668 3.976-1.043z"/></svg>
                                {{ __('Share by WhatsApp') }}
                            </div>
                            <div class="text-xs text-slate-500 mt-0.5">{{ __('Opens WhatsApp with a prefilled message after creation.') }}</div>
                        </div>
                    </label>
                </div>
            </div>

            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 pt-3 border-t border-slate-100 dark:border-slate-800">
                <p class="text-xs text-slate-500">
                    {{ __('Invitation expires in 7 days. You can resend it any time from the user list.') }}
                </p>
                <button class="btn-primary"
                        x-bind:disabled="channels.length === 0"
                        x-bind:class="channels.length === 0 ? 'opacity-50 cursor-not-allowed' : ''">
                    <x-icon name="send" class="w-4 h-4"/>
                    <span x-text="channels.includes('email') && channels.includes('whatsapp') ? '{{ __('Send invitation') }}' : (channels.includes('whatsapp') ? '{{ __('Generate WhatsApp link') }}' : '{{ __('Send invitation') }}')"></span>
                </button>
            </div>
        </form>

        {{-- Side column: result / preview --}}
        <div class="space-y-4">
            @if($invitation)
                <div class="card-pad space-y-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center">
                            <x-icon name="check" class="w-5 h-5"/>
                        </div>
                        <div>
                            <div class="font-semibold">{{ __('Invitation ready') }}</div>
                            <div class="text-xs text-slate-500">
                                {{ $invitation['mail_sent'] ? __('Email delivered') : __('Email not sent') }}
                                @if($invitation['expires_at'])
                                    · {{ __('expires :d', ['d' => $invitation['expires_at']]) }}
                                @endif
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="text-xs text-slate-500 mb-1">{{ __('Recipient') }}</div>
                        <div class="text-sm font-medium">{{ $invitation['name'] }}</div>
                        <div class="text-xs text-slate-500">{{ $invitation['email'] }}</div>
                    </div>

                    <div x-data="{ copied: false }">
                        <div class="text-xs text-slate-500 mb-1">{{ __('Accept link') }}</div>
                        <div class="flex gap-2">
                            <input readonly value="{{ $invitation['accept_url'] }}"
                                   class="form-input font-mono text-xs flex-1"
                                   x-ref="link" @focus="$el.select()">
                            <button type="button" class="btn-secondary text-xs"
                                    @click="navigator.clipboard.writeText($refs.link.value); copied = true; setTimeout(() => copied = false, 1500)">
                                <span x-show="!copied">{{ __('Copy') }}</span>
                                <span x-show="copied" x-cloak>{{ __('Copied!') }}</span>
                            </button>
                        </div>
                    </div>

                    <div>
                        <div class="text-xs text-slate-500 mb-1">{{ __('Temporary password') }}</div>
                        <div class="flex gap-2">
                            <input readonly value="{{ $invitation['temp_password'] }}"
                                   class="form-input font-mono text-xs flex-1">
                        </div>
                        <p class="text-[11px] text-slate-500 mt-1">{{ __('Shown once. The recipient sets a new password on accept.') }}</p>
                    </div>

                    <div class="flex flex-col gap-2 pt-2">
                        <a href="{{ $invitation['whatsapp_url'] }}" target="_blank" rel="noopener"
                           class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-[#25D366] hover:bg-[#1ebe5a] text-white text-sm font-medium transition">
                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M.057 24l1.687-6.163A11.867 11.867 0 010 11.85C0 5.305 5.392 0 12.017 0c3.181 0 6.167 1.232 8.413 3.467a11.81 11.81 0 013.476 8.396c-.003 6.545-5.395 11.85-12.02 11.85a12.06 12.06 0 01-5.737-1.45L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 001.518 5.276l-1.005 3.668 3.976-1.043z"/></svg>
                            {{ $invitation['phone'] ? __('Send on WhatsApp') : __('Open WhatsApp share') }}
                        </a>
                        <a href="mailto:{{ $invitation['email'] }}?subject={{ rawurlencode(__('Your invitation to join')) }}&body={{ rawurlencode($invitation['accept_url']) }}"
                           class="btn-secondary text-sm w-full justify-center">
                            <x-icon name="mail" class="w-4 h-4"/> {{ __('Open in mail app') }}
                        </a>
                    </div>
                </div>
            @else
                <div class="card-pad text-sm space-y-3 text-slate-500">
                    <div class="font-medium text-slate-700 dark:text-slate-200 flex items-center gap-2">
                        <x-icon name="info" class="w-4 h-4"/>
                        {{ __('How invitations work') }}
                    </div>
                    <ul class="space-y-2 text-xs leading-relaxed">
                        <li class="flex gap-2"><span class="text-brand-600">1.</span> {{ __('You fill in name, email, role and pick how to deliver.') }}</li>
                        <li class="flex gap-2"><span class="text-brand-600">2.</span> {{ __('We generate a one-time accept link valid for 7 days.') }}</li>
                        <li class="flex gap-2"><span class="text-brand-600">3.</span> {{ __('The recipient clicks, sets a password and is signed in.') }}</li>
                        <li class="flex gap-2"><span class="text-brand-600">4.</span> {{ __('Their seat counts against your plan only after acceptance.') }}</li>
                    </ul>
                </div>
            @endif
        </div>
    </div>

    {{-- ============================================================== --}}
    {{-- DIRECT MODE                                                     --}}
    {{-- ============================================================== --}}
    <div x-show="mode === 'direct'" x-cloak>

        <form method="POST" action="{{ route('tenant.users.store') }}" class="card-pad space-y-5">
            @csrf
            <input type="hidden" name="_mode" value="direct">

            <div>
                <h2 class="text-lg font-semibold flex items-center gap-2">
                    <span class="w-8 h-8 rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 flex items-center justify-center">
                        <x-icon name="user-plus" class="w-4 h-4"/>
                    </span>
                    {{ __('Create account directly') }}
                </h2>
                <p class="text-xs text-slate-500 mt-1 ms-10">
                    {{ __('Sets the password yourself. Use this when you already share credentials offline (e.g. internal staff onboarding).') }}
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="form-label">{{ __('Name') }}</label>
                    <input name="name" required value="{{ old('name') }}" class="form-input">
                    @error('name')<div class="form-error">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label class="form-label">{{ __('Email') }}</label>
                    <input name="email" type="email" required value="{{ old('email') }}" class="form-input">
                    @error('email')<div class="form-error">{{ $message }}</div>@enderror
                </div>
                <div class="md:col-span-2">
                    <label class="form-label">{{ __('Role') }}</label>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                        <label class="cursor-pointer rounded-lg border border-slate-200 dark:border-slate-700 p-3 has-[:checked]:border-brand-500 has-[:checked]:bg-brand-50/40 dark:has-[:checked]:bg-brand-900/20">
                            <input type="radio" name="role" value="user" class="sr-only" @checked(old('role', 'user') === 'user')>
                            <div class="flex items-center gap-2 text-sm font-medium"><x-icon name="user" class="w-4 h-4 text-slate-400"/> {{ __('User — read access') }}</div>
                        </label>
                        <label class="cursor-pointer rounded-lg border border-slate-200 dark:border-slate-700 p-3 has-[:checked]:border-brand-500 has-[:checked]:bg-brand-50/40 dark:has-[:checked]:bg-brand-900/20">
                            <input type="radio" name="role" value="tenant_admin" class="sr-only" @checked(old('role') === 'tenant_admin')>
                            <div class="flex items-center gap-2 text-sm font-medium"><x-icon name="shield-check" class="w-4 h-4 text-slate-400"/> {{ __('Tenant admin — full access') }}</div>
                        </label>
                    </div>
                </div>
                <div>
                    <label class="form-label">{{ __('Password') }}</label>
                    <input name="password" type="password" required class="form-input" autocomplete="new-password">
                    @error('password')<div class="form-error">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label class="form-label">{{ __('Confirm') }}</label>
                    <input name="password_confirmation" type="password" required class="form-input" autocomplete="new-password">
                </div>
            </div>

            <label class="flex items-center gap-2 text-sm">
                <input type="checkbox" name="is_active" value="1" checked class="rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                {{ __('Account active immediately') }}
            </label>

            <div class="flex justify-end gap-2 pt-3 border-t border-slate-100 dark:border-slate-800">
                <a href="{{ route('tenant.users.index') }}" class="btn-secondary">{{ __('Cancel') }}</a>
                <button class="btn-primary"><x-icon name="user-plus" class="w-4 h-4"/> {{ __('Create user') }}</button>
            </div>
        </form>

    </div>

    {{-- ============================================================== --}}
    {{-- IMPORT MODE — CSV / Excel                                       --}}
    {{-- ============================================================== --}}
    <div x-show="mode === 'import'" x-cloak class="grid grid-cols-1 xl:grid-cols-3 gap-6">

        <form method="POST" action="{{ route('tenant.users.import') }}" enctype="multipart/form-data"
              class="xl:col-span-2 card-pad space-y-5">
            @csrf

            <div>
                <h2 class="text-lg font-semibold flex items-center gap-2">
                    <span class="w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 flex items-center justify-center">
                        <x-icon name="upload" class="w-4 h-4"/>
                    </span>
                    {{ __('Import users from CSV or Excel') }}
                </h2>
                <p class="text-xs text-slate-500 mt-1 ms-10">
                    {{ __('Each row becomes one active user. The file must be clean — any invalid row blocks the whole import.') }}
                </p>
            </div>

            @if(session('error'))
                <div class="p-3 rounded-lg border border-rose-200 dark:border-rose-800 bg-rose-50 dark:bg-rose-900/20 text-rose-800 dark:text-rose-200 text-sm">
                    {{ session('error') }}
                </div>
            @endif

            @if(session('import_errors'))
                <div class="rounded-lg border border-rose-200 dark:border-rose-800 bg-rose-50/60 dark:bg-rose-900/10 overflow-hidden">
                    <div class="px-3 py-2 text-xs font-semibold text-rose-800 dark:text-rose-200 border-b border-rose-200 dark:border-rose-800">
                        {{ __('Per-row errors') }}
                    </div>
                    <div class="max-h-64 overflow-y-auto">
                        <table class="w-full text-xs">
                            <thead class="bg-rose-100/60 dark:bg-rose-900/20 text-rose-700 dark:text-rose-300">
                                <tr>
                                    <th class="px-3 py-1.5 text-start w-16">{{ __('Row') }}</th>
                                    <th class="px-3 py-1.5 text-start">{{ __('Email') }}</th>
                                    <th class="px-3 py-1.5 text-start">{{ __('Errors') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-rose-200/60 dark:divide-rose-900/40">
                                @foreach(session('import_errors') as $err)
                                    <tr>
                                        <td class="px-3 py-1.5 font-mono text-rose-700 dark:text-rose-300">{{ $err['line'] }}</td>
                                        <td class="px-3 py-1.5 font-mono text-slate-700 dark:text-slate-200">{{ $err['email'] }}</td>
                                        <td class="px-3 py-1.5 text-slate-700 dark:text-slate-200">{{ implode(' · ', $err['errors']) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif

            <div>
                <label class="form-label">{{ __('File') }} <span class="text-slate-400 font-normal">(.csv, .xlsx, .xls — {{ __('max :n MB', ['n' => 5]) }})</span></label>
                <input type="file" name="file" required accept=".csv,.xlsx,.xls"
                       class="block w-full text-sm text-slate-700 dark:text-slate-200
                              file:mr-3 file:rtl:ml-3 file:rtl:mr-0
                              file:py-2 file:px-4 file:rounded-lg file:border-0
                              file:text-sm file:font-medium
                              file:bg-slate-100 file:text-slate-700 hover:file:bg-slate-200
                              dark:file:bg-slate-800 dark:file:text-slate-200 dark:hover:file:bg-slate-700">
                @error('file')<div class="form-error">{{ $message }}</div>@enderror
            </div>

            <div class="rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/40 p-3 text-xs">
                <div class="font-semibold text-slate-700 dark:text-slate-200 mb-1.5">{{ __('Required columns') }}</div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1 text-slate-600 dark:text-slate-300">
                    <div><span class="font-mono text-slate-900 dark:text-slate-100">name</span> — {{ __('full name') }}</div>
                    <div><span class="font-mono text-slate-900 dark:text-slate-100">email</span> — {{ __('unique, valid format') }}</div>
                    <div><span class="font-mono text-slate-900 dark:text-slate-100">role</span> — <span class="font-mono">user</span> {{ __('or') }} <span class="font-mono">tenant_admin</span></div>
                    <div><span class="font-mono text-slate-900 dark:text-slate-100">password</span> — {{ __('optional, min 8 chars (auto-generated if empty)') }}</div>
                    <div><span class="font-mono text-slate-900 dark:text-slate-100">is_active</span> — <span class="font-mono">1</span> {{ __('or') }} <span class="font-mono">0</span> ({{ __('default 1') }})</div>
                </div>
            </div>

            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 pt-3 border-t border-slate-100 dark:border-slate-800">
                <a href="{{ route('tenant.users.import-template') }}"
                   class="inline-flex items-center gap-1.5 text-xs text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white">
                    <x-icon name="download" class="w-3.5 h-3.5"/>
                    {{ __('Download CSV template') }}
                </a>
                <button class="btn-primary">
                    <x-icon name="upload" class="w-4 h-4"/>
                    {{ __('Validate and import') }}
                </button>
            </div>
        </form>

        <div class="space-y-4">
            <div class="card-pad text-sm space-y-3">
                <div class="font-medium text-slate-700 dark:text-slate-200 flex items-center gap-2">
                    <x-icon name="info" class="w-4 h-4 text-slate-400"/>
                    {{ __('How import works') }}
                </div>
                <ul class="space-y-2 text-xs text-slate-500 leading-relaxed">
                    <li class="flex gap-2"><span class="text-slate-400">1.</span> {{ __('We validate every row before creating anything.') }}</li>
                    <li class="flex gap-2"><span class="text-slate-400">2.</span> {{ __('If any row is invalid the whole import is cancelled — fix the file and retry.') }}</li>
                    <li class="flex gap-2"><span class="text-slate-400">3.</span> {{ __('Seat quotas are enforced for the whole batch — not per row.') }}</li>
                    <li class="flex gap-2"><span class="text-slate-400">4.</span> {{ __('Imported users are active immediately and can sign in with the password from the file (or the auto-generated one).') }}</li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection