<div class="rounded-xl border border-gray-200 bg-white p-6">
    {{-- Header --}}
    <div class="mb-4 flex items-center justify-between">
        <div>
            <h3 class="text-lg font-semibold text-gray-900">
                {{ $task->context['node_label'] ?? 'Human Task' }}
            </h3>
            @if($task->context['instructions'] ?? null)
                <p class="mt-1 text-sm text-gray-600">{{ $task->context['instructions'] }}</p>
            @endif
        </div>

        @if($task->sla_deadline)
            <div class="text-right">
                <span class="text-xs text-gray-500">SLA Deadline</span>
                <p class="text-sm font-medium {{ $task->isSlaExpired() ? 'text-red-600' : 'text-gray-700' }}">
                    {{ $task->sla_deadline->diffForHumans() }}
                </p>
            </div>
        @endif
    </div>

    @if(session()->has('message'))
        <div class="mb-4 rounded-lg bg-green-50 p-3 text-sm text-green-700">
            {{ session('message') }}
        </div>
    @endif

    {{-- Dynamic Form --}}
    @if($task->status === \App\Domain\Approval\Enums\ApprovalStatus::Pending)
        <form wire:submit="submit" class="space-y-4">
            @php
                $schema = $task->form_schema ?? [];
                // Support JSON Schema format (properties/required) from workflow nodes
                if (isset($schema['properties'])) {
                    $requiredKeys = $schema['required'] ?? [];
                    $fields = [];
                    foreach ($schema['properties'] as $propName => $def) {
                        $fields[] = [
                            'name' => $propName,
                            'type' => isset($def['enum']) ? 'select' : ($def['type'] ?? 'string'),
                            'label' => $def['description'] ?? ucfirst(str_replace('_', ' ', $propName)),
                            'required' => in_array($propName, $requiredKeys),
                            'options' => isset($def['enum']) ? array_map(fn($v) => ['value' => $v, 'label' => ucfirst(str_replace('_', ' ', $v))], $def['enum']) : [],
                        ];
                    }
                } else {
                    $fields = $schema['fields'] ?? [];
                }
            @endphp

            @foreach($fields as $field)
                @php
                    $name = $field['name'] ?? '';
                    $type = $field['type'] ?? 'text';
                    $label = $field['label'] ?? ucfirst(str_replace('_', ' ', $name));
                    $required = $field['required'] ?? false;
                    $hint = $field['hint'] ?? $field['help'] ?? null;
                    $placeholder = $field['placeholder'] ?? null;
                    $fieldId = 'field_'.$name;
                @endphp

                @if($type === 'textarea')
                    <x-form-textarea
                        wire:model="formData.{{ $name }}"
                        :label="$label"
                        :hint="$hint"
                        rows="{{ $field['rows'] ?? 3 }}"
                        :required="$required"
                    />
                @elseif($type === 'select')
                    <x-form-select
                        wire:model="formData.{{ $name }}"
                        :label="$label"
                        :required="$required"
                    >
                        <option value="">-- Select --</option>
                        @foreach($field['options'] ?? [] as $option)
                            <option value="{{ $option['value'] }}">{{ $option['label'] }}</option>
                        @endforeach
                    </x-form-select>
                @elseif($type === 'multi_select')
                    <div>
                        <label for="{{ $fieldId }}" class="mb-1 block text-sm font-medium text-gray-700">
                            {{ $label }}@if($required)<span class="text-red-500">*</span>@endif
                        </label>
                        <select
                            id="{{ $fieldId }}"
                            wire:model="formData.{{ $name }}"
                            multiple
                            @if($required) required @endif
                            size="{{ min(6, max(3, count($field['options'] ?? []))) }}"
                            class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary-500 focus:ring-primary-500"
                            aria-describedby="{{ $fieldId }}_hint"
                        >
                            @foreach($field['options'] ?? [] as $option)
                                <option value="{{ $option['value'] }}">{{ $option['label'] }}</option>
                            @endforeach
                        </select>
                        @if($hint)
                            <p id="{{ $fieldId }}_hint" class="mt-1 text-xs text-gray-500">{{ $hint }}</p>
                        @endif
                    </div>
                @elseif($type === 'radio_cards')
                    <div role="radiogroup" aria-labelledby="{{ $fieldId }}_label" aria-required="{{ $required ? 'true' : 'false' }}">
                        <span id="{{ $fieldId }}_label" class="mb-2 block text-sm font-medium text-gray-700">
                            {{ $label }}@if($required)<span class="text-red-500">*</span>@endif
                        </span>
                        <div class="grid gap-2 sm:grid-cols-{{ min(3, max(1, count($field['options'] ?? []))) }}">
                            @foreach($field['options'] ?? [] as $option)
                                @php $optionId = $fieldId.'_'.$loop->index; @endphp
                                <label
                                    for="{{ $optionId }}"
                                    class="relative flex cursor-pointer rounded-lg border p-3 text-sm transition hover:border-primary-400 has-[:checked]:border-primary-600 has-[:checked]:bg-primary-50 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary-500"
                                >
                                    <input
                                        type="radio"
                                        id="{{ $optionId }}"
                                        wire:model="formData.{{ $name }}"
                                        value="{{ $option['value'] }}"
                                        @if($required) required @endif
                                        class="sr-only"
                                    />
                                    <span class="flex-1 font-medium text-gray-900">{{ $option['label'] }}</span>
                                </label>
                            @endforeach
                        </div>
                        @if($hint)
                            <p class="mt-1 text-xs text-gray-500">{{ $hint }}</p>
                        @endif
                    </div>
                @elseif($type === 'checkbox' || $type === 'boolean')
                    <x-form-checkbox
                        wire:model="formData.{{ $name }}"
                        :label="$label"
                    />
                @elseif($type === 'number')
                    <x-form-input
                        wire:model="formData.{{ $name }}"
                        type="number"
                        :label="$label"
                        :hint="$hint"
                        :required="$required"
                        :placeholder="$placeholder"
                        :min="$field['min'] ?? null"
                        :max="$field['max'] ?? null"
                        step="{{ $field['step'] ?? 'any' }}"
                    />
                @elseif($type === 'date')
                    <x-form-input
                        wire:model="formData.{{ $name }}"
                        type="date"
                        :label="$label"
                        :hint="$hint"
                        :required="$required"
                    />
                @else
                    <x-form-input
                        wire:model="formData.{{ $name }}"
                        :type="$type === 'string' ? 'text' : $type"
                        :label="$label"
                        :hint="$hint"
                        :required="$required"
                        :placeholder="$placeholder"
                    />
                @endif

                @error("formData.{$name}")
                    <p class="mt-1 text-xs text-red-600" role="alert">{{ $message }}</p>
                @enderror
            @endforeach

            <x-form-textarea
                wire:model="reviewerNotes"
                label="Notes (optional)"
                rows="2"
                hint="Additional notes for this task"
            />

            {{-- Actions --}}
            <div class="flex items-center gap-3 border-t border-gray-100 pt-4">
                <button type="submit"
                    class="rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700">
                    Complete Task
                </button>
                <button type="button" wire:click="$set('showRejectModal', true)"
                    class="rounded-lg border border-red-300 px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-50">
                    Reject
                </button>
            </div>
        </form>

        {{-- Escalation Configuration --}}
        @can('edit-content')
            <div class="mt-4 border-t border-gray-100 pt-4">
                <button type="button" wire:click="$toggle('showEscalationConfig')"
                    class="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900">
                    <span>{{ $showEscalationConfig ? '▾' : '▸' }}</span>
                    Escalation settings
                </button>

                @if($showEscalationConfig)
                    <div class="mt-3 space-y-4 rounded-lg border border-gray-200 bg-gray-50 p-4">
                        <x-form-input
                            wire:model="slaHours"
                            type="number"
                            min="1"
                            max="8760"
                            label="SLA hours"
                            hint="Hours before the task is overdue and escalates to the next assignee."
                        />
                        @error('slaHours')
                            <p class="mt-1 text-xs text-red-600" role="alert">{{ $message }}</p>
                        @enderror

                        <div>
                            <span class="mb-1 block text-sm font-medium text-gray-700">Escalation chain</span>
                            <p class="mb-2 text-xs text-gray-500">Ordered list of team members the task escalates to.</p>

                            @forelse($escalationChain as $index => $assigneeId)
                                <div class="mb-2 flex items-center gap-2">
                                    <span class="w-6 text-xs text-gray-400">{{ $index + 1 }}.</span>
                                    <x-form-select
                                        wire:model="escalationChain.{{ $index }}"
                                        compact
                                        class="flex-1"
                                    >
                                        <option value="">-- Select team member --</option>
                                        @foreach($this->teamMembers as $member)
                                            <option value="{{ $member['id'] }}">{{ $member['name'] }}</option>
                                        @endforeach
                                    </x-form-select>
                                    <button type="button" wire:click="removeEscalationLevel({{ $index }})"
                                        class="rounded-lg border border-red-200 px-2 py-1 text-xs text-red-600 hover:bg-red-50">
                                        Remove
                                    </button>
                                </div>
                                @error("escalationChain.{$index}")
                                    <p class="mb-2 ml-8 text-xs text-red-600" role="alert">{{ $message }}</p>
                                @enderror
                            @empty
                                <p class="mb-2 text-xs text-gray-400">No escalation levels configured.</p>
                            @endforelse

                            <button type="button" wire:click="addEscalationLevel"
                                class="rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-100">
                                + Add level
                            </button>
                        </div>

                        <div class="border-t border-gray-200 pt-3">
                            <button type="button" wire:click="saveEscalationConfig"
                                class="rounded-lg bg-primary-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-primary-700">
                                Save escalation settings
                            </button>
                        </div>
                    </div>
                @endif
            </div>
        @endcan

        {{-- Reject Modal --}}
        @if($showRejectModal)
            <div class="mt-4 rounded-lg border border-red-200 bg-red-50 p-4">
                <p class="text-sm font-medium text-red-800">Reject this task?</p>
                <x-form-textarea wire:model="rejectionReason" rows="2"
                    placeholder="Reason for rejection"
                    class="mt-2 border-red-300 focus:border-red-500 focus:ring-red-500" />
                @error('rejectionReason')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
                <div class="mt-3 flex gap-2">
                    <button wire:click="reject"
                        class="rounded-lg bg-red-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-red-700">
                        Confirm Reject
                    </button>
                    <button wire:click="$set('showRejectModal', false)"
                        class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50">
                        Cancel
                    </button>
                </div>
            </div>
        @endif
    @else
        {{-- Read-only view for completed/rejected tasks --}}
        <div class="rounded-lg bg-gray-50 p-4">
            <div class="mb-2 text-xs font-medium text-gray-500">
                Status: <x-status-badge :status="$task->status->value" />
            </div>

            @if($task->form_response)
                <dl class="mt-3 space-y-2">
                    @foreach($task->form_response as $key => $value)
                        <div>
                            <dt class="text-xs font-medium text-gray-500">{{ ucfirst(str_replace('_', ' ', $key)) }}</dt>
                            <dd class="mt-0.5 text-sm text-gray-900">{{ is_bool($value) ? ($value ? 'Yes' : 'No') : $value }}</dd>
                        </div>
                    @endforeach
                </dl>
            @endif

            @if($task->reviewer_notes)
                <p class="mt-3 text-xs text-gray-500">Notes: {{ $task->reviewer_notes }}</p>
            @endif
        </div>
    @endif
</div>
