<?php

namespace Mtc\Plugins\BlockManager\Services;

/**
 * Canonical source-of-truth for the Designer's property panels.
 *
 * Phase 9 ships 4 panels: typography / box / border / background, all applied
 * to the `default` state at the `desktop` breakpoint. Phase 15 adds layout,
 * effects, and custom CSS. State + breakpoint tabs land in Phases 12–13.
 *
 * Pure-read service — no I/O, no DB. The Vue right rail renders panels
 * dynamically from `panels()`, so adding a property here makes it available
 * in the SPA on next page load with no JS change.
 */
class PropertySchemaService
{
    /**
     * @return array<int, array{id: string, label: string, properties: array}>
     */
    public function panels(): array
    {
        return [
            $this->typographyPanel(),
            $this->boxPanel(),
            $this->borderPanel(),
            $this->backgroundPanel(),
            $this->layoutPanel(),
            $this->effectsPanel(),
            $this->customCssPanel(),
        ];
    }

    private function typographyPanel(): array
    {
        return [
            'id'    => 'typography',
            'label' => 'Typography',
            'properties' => [
                $this->prop('color',           'Color',           'color+token',  ['color']),
                $this->prop('font_family',     'Font Family',     'select'),
                $this->prop('font_size',       'Font Size',       'length+token', ['length']),
                $this->prop('font_weight',     'Weight',          'select'),
                $this->prop('line_height',     'Line Height',     'length+token', ['length']),
                $this->prop('letter_spacing',  'Letter Spacing',  'length+token', ['length']),
                $this->prop('text_transform',  'Transform',       'select', [], [
                    'options' => ['none', 'uppercase', 'lowercase', 'capitalize'],
                ]),
                $this->prop('text_decoration', 'Decoration',      'select', [], [
                    'options' => ['none', 'underline', 'line-through'],
                ]),
                $this->prop('text_align',      'Align',           'select', [], [
                    'options' => ['left', 'center', 'right', 'justify'],
                ]),
            ],
        ];
    }

    private function boxPanel(): array
    {
        return [
            'id'    => 'box',
            'label' => 'Box',
            'properties' => [
                $this->prop('width',     'Width',     'length+token', ['length']),
                $this->prop('height',    'Height',    'length+token', ['length']),
                $this->prop('padding_x', 'Padding X', 'length+token', ['length']),
                $this->prop('padding_y', 'Padding Y', 'length+token', ['length']),
                $this->prop('margin_x',  'Margin X',  'length+token', ['length']),
                $this->prop('margin_y',  'Margin Y',  'length+token', ['length']),
            ],
        ];
    }

    private function borderPanel(): array
    {
        return [
            'id'    => 'border',
            'label' => 'Border',
            'properties' => [
                $this->prop('border_width',  'Width',  'length+token', ['length']),
                $this->prop('border_style',  'Style',  'select', [], [
                    'options' => ['none', 'solid', 'dashed', 'dotted'],
                ]),
                $this->prop('border_color',  'Color',  'color+token',  ['color']),
                $this->prop('border_radius', 'Radius', 'length+token', ['length']),
            ],
        ];
    }

    private function backgroundPanel(): array
    {
        return [
            'id'    => 'background',
            'label' => 'Background',
            'properties' => [
                $this->prop('color',    'Color',    'color+token', ['color']),
                $this->prop('image',    'Image',    'text'),
                $this->prop('gradient', 'Gradient', 'text'),
            ],
        ];
    }

    private function layoutPanel(): array
    {
        return [
            'id'    => 'layout',
            'label' => 'Layout',
            'properties' => [
                $this->prop('display', 'Display', 'select', [], [
                    'options' => ['block', 'inline-block', 'flex', 'grid', 'inline-flex', 'inline-grid', 'none'],
                ]),
                $this->prop('flex_direction', 'Flex Direction', 'select', [], [
                    'options' => ['row', 'column', 'row-reverse', 'column-reverse'],
                ]),
                $this->prop('flex_wrap', 'Flex Wrap', 'select', [], [
                    'options' => ['nowrap', 'wrap', 'wrap-reverse'],
                ]),
                $this->prop('justify_content', 'Justify', 'select', [], [
                    'options' => ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'],
                ]),
                $this->prop('align_items', 'Align', 'select', [], [
                    'options' => ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'],
                ]),
                $this->prop('align_content', 'Align Content', 'select', [], [
                    'options' => ['stretch', 'flex-start', 'center', 'flex-end', 'space-between', 'space-around'],
                ]),
                $this->prop('columns', 'Grid Columns', 'number'),
                $this->prop('grid_template_columns', 'Grid Template', 'text+token', ['length']),
                $this->prop('grid_auto_flow', 'Grid Flow', 'select', [], [
                    'options' => ['row', 'column', 'dense'],
                ]),
                $this->prop('justify_items', 'Justify Items', 'select', [], [
                    'options' => ['stretch', 'start', 'center', 'end'],
                ]),
                $this->prop('gap', 'Gap', 'length+token', ['length']),
            ],
        ];
    }

    private function effectsPanel(): array
    {
        return [
            'id'    => 'effects',
            'label' => 'Effects',
            'properties' => [
                $this->prop('box_shadow', 'Shadow',  'text'),
                $this->prop('opacity',    'Opacity', 'number'),
                $this->prop('blur',       'Blur',    'length+token', ['length']),
            ],
        ];
    }

    private function customCssPanel(): array
    {
        return [
            'id'    => 'custom_css',
            'label' => 'Custom CSS',
            'properties' => [
                $this->prop('css', 'CSS', 'textarea'),
            ],
        ];
    }

    /**
     * @param array<string, mixed> $extra
     * @return array<string, mixed>
     */
    private function prop(string $name, string $label, string $input, array $tokenTypes = [], array $extra = []): array
    {
        return array_merge([
            'name'        => $name,
            'label'       => $label,
            'input'       => $input,
            'token_types' => $tokenTypes,
        ], $extra);
    }
}
