@extends('layouts.admin')
@section('title', $isCreate ? 'New definition' : $definition->name)
@section('content')
@php
  $schema = old('fields', $schema ?? $definition->fields ?? []);
  if (! is_array($schema) || $schema === []) {
      $schema = [['key' => 'title', 'name' => 'Title', 'type' => 'single_line_text', 'required' => true, 'help' => '', 'position' => 0]];
  }
@endphp

<form method="post" action="{{ $isCreate ? route('admin.metaobjects.definitions.store') : route('admin.metaobjects.definitions.update', $definition) }}" id="metaobject-definition-form">
@csrf
@unless($isCreate) @method('PUT') @endunless

<x-admin.page
    :title="$isCreate ? 'New definition' : ('Edit · '.$definition->name)"
    subtitle="Define typed fields once — every entry uses the same schema with validation."
>
    <x-slot:actions>
        <a href="{{ $isCreate ? route('admin.metaobjects.index') : route('admin.metaobjects.definitions.show', $definition) }}" class="admin-btn">Cancel</a>
        <button class="admin-btn admin-btn-primary">{{ $isCreate ? 'Create definition' : 'Save schema' }}</button>
    </x-slot:actions>

    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ $errors->first() }}</div>
    @endif

    <div class="grid gap-4 lg:grid-cols-2">
        <x-admin.section title="Identity">
            <x-admin.field label="Name" name="name">
                <input name="name" value="{{ old('name', $definition->name) }}" required class="admin-input" maxlength="160">
            </x-admin.field>
            <x-admin.field label="Type key" name="type" class="mt-4" help="Machine key used in code (e.g. homepage_banner).">
                <input name="type" value="{{ old('type', $definition->type) }}" class="admin-input font-mono text-sm" maxlength="120" @disabled(! $isCreate && $definition->isProtected())>
                @if(! $isCreate && $definition->isProtected())
                    <input type="hidden" name="type" value="{{ $definition->type }}">
                @endif
            </x-admin.field>
            <x-admin.field label="Description" name="description" class="mt-4">
                <textarea name="description" rows="3" class="admin-input" maxlength="2000">{{ old('description', $definition->description) }}</textarea>
            </x-admin.field>
        </x-admin.section>

        <x-admin.section title="Behavior">
            <x-admin.field label="Display name field" name="display_name_key" help="Which field shows as the entry title in admin lists.">
                <input name="display_name_key" value="{{ old('display_name_key', $definition->display_name_key) }}" class="admin-input font-mono text-sm" placeholder="headline">
            </x-admin.field>
            <x-admin.field label="Sort order" name="sort_order" class="mt-4">
                <input type="number" name="sort_order" min="0" max="9999" value="{{ old('sort_order', $definition->sort_order ?? 0) }}" class="admin-input">
            </x-admin.field>
            <div class="mt-4 space-y-3 text-sm">
                <label class="flex items-center gap-2">
                    <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $definition->is_active ?? true))>
                    Active (available for new entries / storefront)
                </label>
                <label class="flex items-center gap-2">
                    <input type="checkbox" name="one_entry" value="1" @checked(old('one_entry', $definition->one_entry ?? false))>
                    Singleton — only one entry allowed
                </label>
            </div>
        </x-admin.section>
    </div>

    <x-admin.section title="Field schema" class="mt-4" hint="Supported types: text, number, boolean, URL, color, JSON, and Media library file reference.">
        <div class="space-y-3" data-field-rows>
            @foreach($schema as $i => $field)
                @php
                    $field = is_array($field) ? $field : ['key' => (string) $field, 'name' => (string) $field, 'type' => 'single_line_text'];
                @endphp
                <div class="grid gap-2 rounded-xl border border-[var(--color-admin-border)] bg-[#fafbfb] p-3 md:grid-cols-12" data-field-row>
                    <input type="hidden" name="fields[{{ $i }}][position]" value="{{ $i }}">
                    <div class="md:col-span-2">
                        <label class="admin-label">Key</label>
                        <input name="fields[{{ $i }}][key]" value="{{ $field['key'] ?? '' }}" class="admin-input font-mono text-xs" required>
                    </div>
                    <div class="md:col-span-3">
                        <label class="admin-label">Label</label>
                        <input name="fields[{{ $i }}][name]" value="{{ $field['name'] ?? '' }}" class="admin-input text-sm" required>
                    </div>
                    <div class="md:col-span-3">
                        <label class="admin-label">Type</label>
                        <select name="fields[{{ $i }}][type]" class="admin-input text-sm">
                            @foreach($fieldTypes as $type)
                                <option value="{{ $type }}" @selected(($field['type'] ?? '') === $type)>{{ str_replace('_', ' ', $type) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="md:col-span-3">
                        <label class="admin-label">Help</label>
                        <input name="fields[{{ $i }}][help]" value="{{ $field['help'] ?? '' }}" class="admin-input text-sm">
                    </div>
                    <div class="flex items-end justify-between gap-2 md:col-span-1">
                        <label class="flex items-center gap-1 pb-2 text-xs">
                            <input type="checkbox" name="fields[{{ $i }}][required]" value="1" @checked(! empty($field['required']))>
                            Req
                        </label>
                        <button type="button" class="admin-btn text-xs text-[var(--color-danger)]" data-remove-field>&times;</button>
                    </div>
                </div>
            @endforeach
        </div>
        <button type="button" class="admin-btn mt-3" data-add-field>
            <i data-lucide="plus" class="h-3.5 w-3.5"></i> Add field
        </button>
    </x-admin.section>
</x-admin.page>
</form>

<template id="metaobject-field-row-template">
    <div class="grid gap-2 rounded-xl border border-[var(--color-admin-border)] bg-[#fafbfb] p-3 md:grid-cols-12" data-field-row>
        <input type="hidden" name="fields[__I__][position]" value="__I__">
        <div class="md:col-span-2">
            <label class="admin-label">Key</label>
            <input name="fields[__I__][key]" class="admin-input font-mono text-xs" required>
        </div>
        <div class="md:col-span-3">
            <label class="admin-label">Label</label>
            <input name="fields[__I__][name]" class="admin-input text-sm" required>
        </div>
        <div class="md:col-span-3">
            <label class="admin-label">Type</label>
            <select name="fields[__I__][type]" class="admin-input text-sm">
                @foreach($fieldTypes as $type)
                    <option value="{{ $type }}">{{ str_replace('_', ' ', $type) }}</option>
                @endforeach
            </select>
        </div>
        <div class="md:col-span-3">
            <label class="admin-label">Help</label>
            <input name="fields[__I__][help]" class="admin-input text-sm">
        </div>
        <div class="flex items-end justify-between gap-2 md:col-span-1">
            <label class="flex items-center gap-1 pb-2 text-xs">
                <input type="checkbox" name="fields[__I__][required]" value="1">
                Req
            </label>
            <button type="button" class="admin-btn text-xs text-[var(--color-danger)]" data-remove-field>&times;</button>
        </div>
    </div>
</template>

<script>
(() => {
  const wrap = document.querySelector('[data-field-rows]');
  const tpl = document.getElementById('metaobject-field-row-template');
  if (!wrap || !tpl) return;
  let index = wrap.querySelectorAll('[data-field-row]').length;

  document.querySelector('[data-add-field]')?.addEventListener('click', () => {
    const html = tpl.innerHTML.replaceAll('__I__', String(index));
    wrap.insertAdjacentHTML('beforeend', html);
    index += 1;
    if (window.lucide) window.lucide.createIcons();
  });

  wrap.addEventListener('click', (e) => {
    const btn = e.target.closest('[data-remove-field]');
    if (!btn) return;
    const rows = wrap.querySelectorAll('[data-field-row]');
    if (rows.length <= 1) return;
    btn.closest('[data-field-row]')?.remove();
  });
})();
</script>
@endsection