<?php
// components/Ui/LicenseCard.php

namespace Components\Ui;

use Components\Base;

class LicenseCard
{
    /**
     * Render a license card based on the mockup.
     *
     * @param array $data Supported keys:
     *                   - title: string (localized title)
     *                   - subtitle: string (original title)
     *                   - level: string (license level/plan)
     *                   - valid_until: string (expiration date)
     *                   - customer_limit: string (formatted customer limit)
     *                   - is_valid: bool (default: true)
     *                   - accent: string (blue|purple|violet|red|rose)
     *                   - category: string (optional category text)
     * @return string
     */
    public static function render(array $data): string
    {
        $title    = (string)($data['title'] ?? '');
        $subTitle = (string)($data['subtitle'] ?? '');
        $category = (string)($data['category'] ?? $subTitle);
        $level    = (string)($data['level'] ?? mh_lng('MAILBEEZ_LABEL_PLAN', 'Plan'));
        $validUntil = (string)($data['valid_until'] ?? '');
        $validUntilLabel = $validUntil !== '' ? date('d.m.Y', strtotime($validUntil)) : '';
        $customerLimit = (string)($data['customer_limit'] ?? '');
        $isValid  = (bool)($data['is_valid'] ?? true);
        $status   = strtoupper((string)($data['status'] ?? ''));
        $accent   = (string)($data['accent'] ?? 'brand');

        if ($status === '') {
            $status = $isValid ? 'ACTIVE' : 'EXPIRED';
        }
        $grayscale = ($status === 'EXPIRED' || $status === 'CANCELED') ? 'grayscale' : '';

        switch ($status) {
            case 'PASTDUE':
                $statusLabel = mh_lng('MAILBEEZ_CONFIG_CLOUDBEEZ_LICENSE_STATUS_PASTDUE', 'PAST DUE');
                $statusIcon  = Base::SVG_EXCLAMATION_TRIANGLE;
                $statusBgColor = 'bg-amber-600';
                break;
            case 'EXPIRED':
            case 'CANCELED':
                $statusLabel = mh_lng('MAILBEEZ_CONFIG_CLOUDBEEZ_LICENSE_STATUS_EXPIRED', 'EXPIRED');
                $statusIcon  = Base::SVG_OUTLINE_PAUSE;
                $statusBgColor = 'bg-red-600';
                break;
            case 'ACTIVE':
            default:
                $statusLabel = $isValid
                    ? mh_lng('MAILBEEZ_CONFIG_CLOUDBEEZ_LICENSE_STATUS_VALID', 'LICENCE')
                    : mh_lng('MAILBEEZ_CONFIG_CLOUDBEEZ_LICENSE_STATUS_INVALID', 'INVALID');
                $statusIcon  = $isValid ? Base::SVG_CHECK_ROUNDED : Base::SVG_OUTLINE_PAUSE;
                $statusBgColor = $isValid ? 'bg-green-600' : 'bg-red-600';
                break;
        }

        switch ($accent) {
            case 'purple':
            case 'violet':
                $theme = [
                    'gradient' => 'from-violet-600 via-purple-500 to-fuchsia-400',
                    'text' => 'text-violet-700',
                    'soft' => 'bg-white/75',
                    'iconBg' => 'bg-violet-100/80',
                    'ring' => 'ring-violet-200/70',
                    'glow' => 'bg-fuchsia-300/30',
                ];
                break;
            case 'red':
            case 'rose':
                $theme = [
                    'gradient' => 'from-rose-600 via-red-500 to-orange-400',
                    'text' => 'text-rose-700',
                    'soft' => 'bg-white/75',
                    'iconBg' => 'bg-rose-100/80',
                    'ring' => 'ring-rose-200/70',
                    'glow' => 'bg-orange-300/30',
                ];
                break;
            case 'brand':
            default:
                $theme = [
                    'gradient' => 'from-brand  via-sky-500 to-brand',
                    'text' => 'text-brand-700',
                    'soft' => 'bg-white/75',
                    'iconBg' => 'bg-brand-100/80',
                    'ring' => 'ring-brand-200/70',
                    'glow' => 'bg-cyan-200/5',
                ];
                break;
        }

        $svgPlan = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h1.5c.621 0 1.125.504 1.125 1.125v6.75C6.75 20.496 6.246 21 5.625 21h-1.5A1.125 1.125 0 0 1 3 19.875v-6.75ZM10.125 8.625c0-.621.504-1.125 1.125-1.125h1.5c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-1.5a1.125 1.125 0 0 1-1.125-1.125V8.625ZM17.25 4.125c0-.621.504-1.125 1.125-1.125h1.5C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-1.5a1.125 1.125 0 0 1-1.125-1.125V4.125Z" /></svg>';
        $svgUsers = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 7.5a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" /></svg>';
        $svgCalendar = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5A2.25 2.25 0 0 1 5.25 5.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" /></svg>';

        ob_start();
        ?>
        <div
            x-data="{
                rotateX: 0,
                rotateY: 0,
                shineX: 50,
                shineY: 50,
                handleMouseMove(e) {
                    const card = $el.getBoundingClientRect();
                    const x = e.clientX - card.left;
                    const y = e.clientY - card.top;
                    const centerX = card.width / 2;
                    const centerY = card.height / 2;
                    // Subtle rotation: max 6 degrees
                    this.rotateX = ((y - centerY) / centerY) * -2;
                    this.rotateY = ((x - centerX) / centerX) * 2;
                    this.shineX = (x / card.width) * 100;
                    this.shineY = (y / card.height) * 100;
                },
                reset() {
                    this.rotateX = 0;
                    this.rotateY = 0;
                    this.shineX = 50;
                    this.shineY = 50;
                }
            }"
            @mousemove="handleMouseMove"
            @mouseleave="reset"
            :style="`transform: perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(${rotateX !== 0 || rotateY !== 0 ? -0.5 : 0}px); will-change: transform;`"
            class="group bg-white rounded-xl overflow-hidden border border-divider flex flex-col h-full transition-all duration-200 ease-out hover:shadow-lg hover:shadow-zinc-300/50 relative"
        >
            <div class="flex flex-col h-full <?= $grayscale ?>">
                <!-- Physical Reflection Effect -->
            <div
                class="pointer-events-none absolute inset-0 z-40 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                :style="`background: radial-gradient(circle at ${shineX}% ${shineY}%, rgba(255,255,255,0.12) 0%, transparent 80%)`"
            ></div>
            <div
                class="pointer-events-none absolute inset-0 z-40 opacity-0 group-hover:opacity-10 transition-opacity duration-500"
                :style="`background: linear-gradient(${135 + rotateY * 2}deg, transparent 20%, rgba(255,255,255,0.2) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.2) 60%, transparent 80%)`"
            ></div>
            <div class="relative h-24 bg-gradient-to-br <?= $theme['gradient'] ?> overflow-hidden">
                <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.42),transparent_38%)]"></div>
                <div class="absolute -right-12 -bottom-12 w-40 h-40 rounded-full blur-2xl <?= $theme['glow'] ?>"></div>
                <div class="absolute inset-0 opacity-25 transition-transform duration-500 group-hover:scale-105">
                    <div class="absolute -right-10 -top-16 w-72 h-72 rounded-full border border-white/30"></div>
                    <div class="absolute right-16 -bottom-24 w-80 h-80 rounded-full border border-white/20"></div>
                    <div class="absolute left-1/3 top-12 h-px w-96 rotate-[-12deg] bg-white/30"></div>
                </div>
            </div>

            <div class="<?= $theme['soft'] ?> backdrop-blur-md <?= $theme['text'] ?> px-5 py-2.5 text-xs font-semibold flex items-center gap-3 uppercase tracking-wider border-b border-zinc-100 [&_svg]:size-4">
                <?= $svgPlan ?>
                <span class="truncate"><?= Base::h($level) ?></span>
            </div>

            <div class="p-5 flex flex-col flex-1">
                <p class="text-xs font-semibold text-zinc-400 uppercase tracking-tight mb-2 truncate"><?= Base::h($category) ?></p>
                <h3 class="text-lg font-bold text-zinc-900 leading-tight min-h-[3rem] line-clamp-2">
                    <?= Base::h($title) ?>
                </h3>

                <div class="mt-auto pt-5 -mx-1 grid grid-cols-2 gap-4 text-sm text-zinc-600">
                    <div class="flex items-center gap-3 min-w-0">
                        <span class="shrink-0 w-10 h-10 rounded-full <?= $theme['iconBg'] ?> <?= $theme['text'] ?> flex items-center justify-center">
                            <?= $svgUsers ?>
                        </span>
                        <span class="min-w-0">
                            <span class="block text-base font-semibold text-zinc-900 truncate"><?= Base::h($customerLimit) ?></span>
                            <span class="block text-xs text-zinc-500 truncate"><?= mh_lng('MAILBEEZ_CONFIG_CLOUDBEEZ_CUSTOMERS_SUPPORTED', 'Kunden unterstützt') ?></span>
                        </span>
                    </div>

                    <div class="flex items-start gap-3 min-w-0 pl-4">
                        <span class="shrink-0 w-10 h-10 rounded-full <?= $theme['iconBg'] ?> <?= $theme['text'] ?> flex items-center justify-center">
                            <?= $svgCalendar ?>
                        </span>
                        <span class="min-w-0">
                            <time
                                class="block text-base font-semibold text-zinc-900 truncate leading-tight"
                                datetime="<?= Base::h($validUntil) ?>"
                                x-data="{ date: new Date('<?= Base::h($validUntil) ?>') }"
                                x-timeago="date"
                            ><?= Base::h($validUntilLabel) ?></time>
                            <span class="block text-xs text-zinc-500 truncate"><?= mh_lng('MAILBEEZ_CONFIG_CLOUDBEEZ_VALID_UNTIL_PREFIX', 'bis') ?> <?= Base::h($validUntilLabel) ?></span>
                        </span>
                    </div>
                </div>
            </div>
            </div>

            <div class="absolute top-4 left-0 z-50">
                <div class="pl-4 pr-5 py-1.5 text-xs font-semibold text-white <?= $statusBgColor ?> flex items-center gap-2 shadow-md rounded-r-lg border-y border-r border-white/30 [&_svg]:size-4">
                    <?= $statusIcon ?>
                    <span><?= $statusLabel ?></span>
                </div>
            </div>
        </div>
        <?php return ob_get_clean();
    }
}
