<?php
namespace Components\Support;

use Components\Base;

/**
 * Devices: shared device presets for email preview & editor.
 *
 * Similar to Palette, this class centralises configuration for the
 * different viewports we support (desktop, tablet, mobile, small-mobile).
 *
 * Each device entry exposes:
 * - id           : string identifier (e.g. "desktop", "mobile")
 * - label        : human readable label (used for aria-labels)
 * - icon         : logical icon key (mapped to a Base::SVG_* constant)
 * - preview      : [ 'width' => css, 'max_width' => css, 'enabled' => bool ]
 * - editor       : [ 'max_width' => int,  'enabled' => bool ]
 *
 * EmailPreviewer and EmailEditor should rely on this map so that the
 * device list (and widths/icons) can be adjusted in one place.
 */
class Devices
{
    /**
     * Return the full device configuration map.
     *
     * @return array<string, array{
     *   id:string,
     *   label:string,
     *   icon:string,
     *   preview:array{width:string,max_width:string,enabled:bool},
     *   editor:array{max_width:int,enabled:bool}
     * }>
     */
    public static function map(): array
    {
        return [
            // Default desktop view – full width for preview, 1024px editor max width
            'desktop' => [
                'id'     => 'desktop',
                'label'  => 'Desktop',
                'icon'   => 'desktop',
                'preview'=> [
                    // For the previewer we allow desktop to stretch to the container
                    'width'      => '100%',
                    'max_width'  => '100%',
                    'enabled'    => true,
                ],
                'editor' => [
                    'max_width'  => 1024,
                    'enabled'    => true,
                ],
            ],

            // Tablet – currently unused in the editor, but kept here so
            // it can be enabled centrally later.
            'tablet' => [
                'id'     => 'tablet',
                'label'  => 'Tablet',
                'icon'   => 'tablet',
                'preview'=> [
                    'width'      => '768px',
                    'max_width'  => '100%',
                    'enabled'    => false,
                ],
                'editor' => [
                    'max_width'  => 768,
                    'enabled'    => false,
                ],
            ],

            // Regular mobile viewport
            'mobile' => [
                'id'     => 'mobile',
                'label'  => 'Mobile',
                'icon'   => 'phone',
                'preview'=> [
                    'width'      => '375px',
                    'max_width'  => '100%',
                    'enabled'    => true,
                ],
                'editor' => [
                    'max_width'  => 375,
                    'enabled'    => true,
                ],
            ],

            // Small mobile viewport (editor only by default)
            'mobile-small' => [
                'id'     => 'mobile-small',
                'label'  => 'Mobile (small)',
                'icon'   => 'phone-small',
                'preview'=> [
                    'width'      => '320px',
                    'max_width'  => '100%',
                    'enabled'    => true,
                ],
                'editor' => [
                    'max_width'  => 320,
                    'enabled'    => true,
                ],
            ],
        ];
    }

    /**
     * Devices enabled for the EmailPreviewer component.
     *
     * @return array<int, array<string, mixed>> ordered list of devices
     */
    public static function previewDevices(): array
    {
        $all = self::map();
        $out = [];
        foreach ($all as $id => $cfg) {
            if (!empty($cfg['preview']['enabled'])) {
                $out[] = $cfg;
            }
        }
        return $out;
    }

    /**
     * Devices enabled for the EmailEditor component.
     *
     * @return array<int, array<string, mixed>> ordered list of devices
     */
    public static function editorDevices(): array
    {
        $all = self::map();
        $out = [];
        foreach ($all as $id => $cfg) {
            if (!empty($cfg['editor']['enabled'])) {
                $out[] = $cfg;
            }
        }
        return $out;
    }

    /**
     * Resolve the editor max width (in px) for a device id.
     * Falls back to the desktop width when the id is unknown.
     */
    public static function editorWidth(string $id): int
    {
        $all = self::map();
        if (isset($all[$id]['editor']['max_width'])) {
            return (int)$all[$id]['editor']['max_width'];
        }
        // Fallback to desktop config
        if (isset($all['desktop']['editor']['max_width'])) {
            return (int)$all['desktop']['editor']['max_width'];
        }
        return 1024;
    }

    /**
     * Resolve preview width + max_width for a device id.
     * Returns an array with string CSS values.
     *
     * @return array{width:string,max_width:string}
     */
    public static function previewSize(string $id): array
    {
        $all = self::map();
        if (isset($all[$id]['preview'])) {
            $p = $all[$id]['preview'];
            return [
                'width'     => isset($p['width']) ? (string)$p['width'] : '100%',
                'max_width' => isset($p['max_width']) ? (string)$p['max_width'] : '100%',
            ];
        }
        // Fallback to desktop preset
        $d = $all['desktop']['preview'] ?? ['width' => '100%', 'max_width' => '100%'];
        return [
            'width'     => (string)($d['width'] ?? '100%'),
            'max_width' => (string)($d['max_width'] ?? '100%'),
        ];
    }

    /**
     * Resolve the SVG icon HTML for a device configuration or device id.
     *
     * @param string|array<string,mixed> $device Either a device id or a
     *                                           full config array from map().
     */
    public static function iconHtml($device): string
    {
        $iconKey = null;

        if (is_array($device)) {
            if (isset($device['icon']) && is_string($device['icon'])) {
                $iconKey = $device['icon'];
            } elseif (isset($device['id']) && is_string($device['id'])) {
                $id = $device['id'];
                $map = self::map();
                if (isset($map[$id]['icon'])) {
                    $iconKey = (string)$map[$id]['icon'];
                }
            }
        } elseif (is_string($device)) {
            $id = $device;
            $map = self::map();
            if (isset($map[$id]['icon'])) {
                $iconKey = (string)$map[$id]['icon'];
            }
        }

        switch ($iconKey) {
            case 'desktop':
                return Base::SVG_DEVICE_DESKTOP;
            case 'tablet':
                return Base::SVG_DEVICE_TABLET;
            case 'phone':
                // For phones we reuse the generic phone icon used in the previewer
                return Base::SVG_DEVICE_PHONE;
            case 'phone-small':
                // For phones we reuse the generic phone icon used in the previewer
                return Base::SVG_DEVICE_PHONE_SMALL;
        }

        // Reasonable fallback
        return Base::SVG_DEVICE_DESKTOP;
    }
}
