<?php
use App\Enums\QrCodeType;
use App\Models\QrCode;
use Flux\Flux;
use Illuminate\Validation\Rule;
use Livewire\Attributes\Title;
use Livewire\Component;
?>

<section class="w-full max-w-3xl space-y-6">
    <div class="flex items-start justify-between gap-4">
        <div>
            <flux:heading size="xl" level="1">{{ __('New QR Code') }}</flux:heading>
            <flux:subheading size="lg">{{ __('Create a QR code to print or share') }}</flux:subheading>
        </div>

        <flux:button variant="ghost" icon="arrow-left" :href="route('admin.qr-codes')" wire:navigate>
            {{ __('Back to QR codes') }}
        </flux:button>
    </div>

    <form wire:submit="save" class="space-y-6">
        <flux:card class="space-y-6">
            <flux:input wire:model="name" :label="__('Name')" :placeholder="__('e.g. Front window poster')" required autofocus data-test="qr-name-input" />

            <flux:select wire:model.live="type" :label="__('Type')" data-test="qr-type-select">
                @foreach (QrCodeType::cases() as $case)
                    <flux:select.option :value="$case->value">{{ $case->label() }}</flux:select.option>
                @endforeach
            </flux:select>

            @if ($type !== QrCodeType::Url->value)
                <flux:callout
                    variant="warning"
                    icon="information-circle"
                    :heading="__('No scan tracking for this type')"
                    :text="__('Only URL codes can be dynamic and trackable through a redirect. This code will encode its content directly, so there will be no analytics dashboard for it.')"
                    data-test="no-tracking-notice"
                />
            @endif

            @if ($type === QrCodeType::Url->value)
                <flux:input wire:model="targetUrl" :label="__('Target URL')" type="url" placeholder="https://example.com" required data-test="qr-target-url-input" />

                <flux:switch wire:model="isDynamic" :label="__('Dynamic (trackable)')" data-test="qr-dynamic-switch" />
                <flux:text class="-mt-4 text-sm text-zinc-500 dark:text-zinc-400">
                    {{ __('Redirects through a short link so scans, devices, and locations are tracked. Turn this off to encode the target URL directly instead.') }}
                </flux:text>
            @elseif ($type === QrCodeType::Text->value)
                <flux:textarea wire:model="text" :label="__('Text')" rows="4" required data-test="qr-text-input" />
            @elseif ($type === QrCodeType::Email->value)
                <flux:input wire:model="emailAddress" :label="__('Email address')" type="email" required data-test="qr-email-address-input" />
                <flux:input wire:model="emailSubject" :label="__('Subject')" data-test="qr-email-subject-input" />
                <flux:textarea wire:model="emailBody" :label="__('Body')" rows="4" data-test="qr-email-body-input" />
            @elseif ($type === QrCodeType::Phone->value)
                <flux:input wire:model="phoneNumber" :label="__('Phone number')" type="tel" required data-test="qr-phone-number-input" />
            @elseif ($type === QrCodeType::Sms->value)
                <flux:input wire:model="smsNumber" :label="__('Phone number')" type="tel" required data-test="qr-sms-number-input" />
                <flux:textarea wire:model="smsMessage" :label="__('Message')" rows="3" data-test="qr-sms-message-input" />
            @elseif ($type === QrCodeType::Wifi->value)
                <flux:input wire:model="wifiSsid" :label="__('Network name (SSID)')" required data-test="qr-wifi-ssid-input" />
                <flux:input wire:model="wifiPassword" :label="__('Password')" type="password" data-test="qr-wifi-password-input" />
                <flux:select wire:model="wifiEncryption" :label="__('Encryption')" data-test="qr-wifi-encryption-select">
                    <flux:select.option value="WPA">{{ __('WPA/WPA2') }}</flux:select.option>
                    <flux:select.option value="WEP">{{ __('WEP') }}</flux:select.option>
                    <flux:select.option value="none">{{ __('None') }}</flux:select.option>
                </flux:select>
                <flux:switch wire:model="wifiHidden" :label="__('Hidden network')" data-test="qr-wifi-hidden-switch" />
            @elseif ($type === QrCodeType::VCard->value)
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <flux:input wire:model="vcardFirstName" :label="__('First name')" required data-test="qr-vcard-first-name-input" />
                    <flux:input wire:model="vcardLastName" :label="__('Last name')" data-test="qr-vcard-last-name-input" />
                    <flux:input wire:model="vcardOrganization" :label="__('Organization')" data-test="qr-vcard-organization-input" />
                    <flux:input wire:model="vcardTitle" :label="__('Title')" data-test="qr-vcard-title-input" />
                    <flux:input wire:model="vcardPhone" :label="__('Phone')" type="tel" data-test="qr-vcard-phone-input" />
                    <flux:input wire:model="vcardEmail" :label="__('Email')" type="email" data-test="qr-vcard-email-input" />
                </div>
                <flux:input wire:model="vcardWebsite" :label="__('Website')" type="url" data-test="qr-vcard-website-input" />
            @endif
        </flux:card>

        <div class="flex justify-end gap-3">
            <flux:button variant="ghost" :href="route('admin.qr-codes')" wire:navigate>
                {{ __('Cancel') }}
            </flux:button>

            <flux:button variant="primary" type="submit" data-test="save-qr-code-button">
                {{ __('Create QR Code') }}
            </flux:button>
        </div>
    </form>
</section>