{{--
    A drawn revenue dashboard on a desktop monitor, with the same figures on a phone. It is decoration made of SVG (so it stays
    sharp at any size): the figures are made up, the caption says so, and the drawing is hidden from screen readers.
    The sample numbers live in config('site.home.showcase.revenue'). Usage: <x-dashboard-mock caption="Illustrative dashboard" />
--}}
@props(['caption' => 'Illustrative dashboard with sample figures'])

@php
    $r = config('site.home.showcase.revenue');
    $total = $r['total'];
    $depts = $r['departments'];

    // Whole rupees in the Indian style: 542000 -> ₹5,42,000
    $inr = function (int|float $n): string {
        $s = (string) (int) round($n);
        $last3 = substr($s, -3);
        $rest = substr($s, 0, -3);

        return '₹'.($rest === '' ? $last3 : preg_replace('/\B(?=(\d{2})+(?!\d))/', ',', $rest).','.$last3);
    };

    // Growth of the total, worked out from the departments' own growth so the numbers agree with each other.
    $before = collect($depts)->sum(fn ($d) => $d['amount'] / (1 + $d['growth'] / 100));
    $growth = round(($total / $before - 1) * 100, 1);
    $pct = fn ($d) => round($d['amount'] / $total * 100);
    $ranked = collect($depts)->sortByDesc('amount')->values();

    // A smooth curve through points (Catmull-Rom turned into cubic Beziers).
    $curve = function (array $p): string {
        $d = 'M'.round($p[0][0], 1).' '.round($p[0][1], 1);
        for ($i = 0; $i < count($p) - 1; $i++) {
            [$p0, $p1, $p2, $p3] = [$p[max($i - 1, 0)], $p[$i], $p[$i + 1], $p[min($i + 2, count($p) - 1)]];
            $d .= sprintf(' C%.1f %.1f %.1f %.1f %.1f %.1f',
                $p1[0] + ($p2[0] - $p0[0]) / 6, $p1[1] + ($p2[1] - $p0[1]) / 6,
                $p2[0] - ($p3[0] - $p1[0]) / 6, $p2[1] - ($p3[1] - $p1[1]) / 6,
                $p2[0], $p2[1]);
        }

        return $d;
    };
    $plot = fn (array $values, float $x, float $y, float $w, float $h, float $max) => collect($values)
        ->map(fn ($v, $i) => [$x + $i * $w / (count($values) - 1), $y + $h - $v / $max * $h])->all();

    // Monitor: the trend chart (plot box x 176..492, y 204..296; 0..30K).
    $trend = $plot($r['daily'], 176, 204, 316, 92, 30);
    $trendLine = $curve($trend);
    $trendArea = $trendLine.' L'.end($trend)[0].' 296 L'.$trend[0][0].' 296 Z';
    $peak = 7;
    $peakDay = (int) round(1 + $peak * 29 / (count($trend) - 1));
    $targetY = 296 - $r['target'] / 30 * 92;

    // Phone: last 7 days (plot box x 38..222, y 222..268; 0..30K).
    $week = $plot($r['week'], 38, 222, 184, 46, 30);
    $weekLine = $curve($week);
    $weekArea = $weekLine.' L'.end($week)[0].' 268 L'.$week[0][0].' 268 Z';

    $nav = [['chart', 'Dashboard'], ['receipt-rupee', 'Revenue'], ['bill', 'Billing'], ['users', 'OPD'], ['bed', 'IPD'], ['pill', 'Pharmacy'], ['lab', 'Laboratory'], ['doc', 'Reports']];
    $shades = ['#0284c7', '#38bdf8', '#7dd3fc', '#bae6fd'];
@endphp

<figure {{ $attributes->class('mx-auto w-full max-w-[46rem]') }}>
    <div aria-hidden="true" class="flex select-none flex-col items-center sm:relative sm:block">
        {{-- ======================= Monitor ======================= --}}
        <svg viewBox="0 0 800 600" focusable="false" class="block h-auto w-full sm:w-[82%]">
            <defs>
                <linearGradient id="dm-hero" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0ea5e9"/><stop offset="1" stop-color="#2563eb"/></linearGradient>
                <linearGradient id="dm-area" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#38bdf8" stop-opacity=".45"/><stop offset="1" stop-color="#38bdf8" stop-opacity="0"/></linearGradient>
                <linearGradient id="dm-neck" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#94a3b8"/><stop offset=".5" stop-color="#e2e8f0"/><stop offset="1" stop-color="#94a3b8"/></linearGradient>
                <linearGradient id="dm-base" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#e2e8f0"/><stop offset="1" stop-color="#94a3b8"/></linearGradient>
                <filter id="dm-shadow" x="-10%" y="-10%" width="120%" height="130%"><feDropShadow dx="0" dy="16" stdDeviation="14" flood-color="#0f2a5e" flood-opacity=".28"/></filter>
                <clipPath id="dm-screen"><rect x="36" y="30" width="728" height="440" rx="12"/></clipPath>
                <clipPath id="dm-pay"><rect x="136" y="382" width="356" height="12" rx="6"/></clipPath>
            </defs>

            {{-- Stand --}}
            <ellipse cx="400" cy="574" rx="190" ry="9" fill="#0f172a" opacity=".12"/>
            <polygon points="366,480 434,480 426,556 374,556" fill="url(#dm-neck)"/>
            <rect x="300" y="552" width="200" height="14" rx="7" fill="url(#dm-base)"/>

            {{-- Body and screen --}}
            <rect x="20" y="14" width="760" height="486" rx="24" fill="#0f172a" filter="url(#dm-shadow)"/>
            <circle cx="400" cy="485" r="2.5" fill="#334155"/>
            <rect x="36" y="30" width="728" height="440" rx="12" fill="#f1f5f9"/>

            <g clip-path="url(#dm-screen)">
                <g transform="translate(36 30)">
                    {{-- Sidebar --}}
                    <rect x="0" y="0" width="104" height="440" fill="#0a1b3d"/>
                    <rect x="14" y="14" width="28" height="28" rx="8" fill="url(#dm-hero)"/>
                    <path d="M28 21v14M21 28h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>
                    <text x="50" y="34" font-size="15" font-weight="800" fill="#fff">HMIS</text>

                    @foreach ($nav as $i => [$name, $label])
                        @php($y = 70 + $i * 38)
                        @php($on = $i === 1)
                        @if ($on)
                            <rect x="8" y="{{ $y }}" width="88" height="30" rx="8" fill="#38bdf8" opacity=".2"/>
                        @endif
                        <x-icon :name="$name" x="16" :y="$y + 7" width="16" height="16" :class="$on ? 'text-white' : 'text-slate-400'" />
                        <text x="38" y="{{ $y + 19 }}" font-size="11" font-weight="600" fill="{{ $on ? '#fff' : '#94a3b8' }}">{{ $label }}</text>
                    @endforeach

                    {{-- Top bar --}}
                    <rect x="104" y="0" width="624" height="52" fill="#fff"/>
                    <path d="M104 52.5H728" stroke="#e2e8f0"/>
                    <text x="120" y="32" font-size="17" font-weight="800" fill="#0f172a">Revenue dashboard</text>
                    <rect x="556" y="13" width="104" height="26" rx="13" fill="#f1f5f9" stroke="#e2e8f0"/>
                    <text x="570" y="30" font-size="12" font-weight="600" fill="#334155">This month</text>
                    <x-icon name="chevron" x="640" y="20" width="12" height="12" class="text-slate-500" />
                    <circle cx="692" cy="26" r="14" fill="#e0f2fe"/>
                    <circle cx="692" cy="22" r="4.5" fill="#0284c7"/>
                    <path d="M683.5 36c.8-5 4-7.5 8.5-7.5s7.7 2.5 8.5 7.5z" fill="#0284c7"/>

                    {{-- Key figures --}}
                    @php($cards = [['Total revenue', $total, $growth, 'receipt-rupee', true], ...collect($depts)->map(fn ($d) => [$d['name'], $d['amount'], $d['growth'], $d['icon'], false])->all()])
                    @foreach ($cards as $i => [$label, $amount, $delta, $iconName, $hero])
                        @php($x = 120 + $i * 151)
                        <rect x="{{ $x }}" y="68" width="139" height="80" rx="12" fill="{{ $hero ? 'url(#dm-hero)' : '#fff' }}" @if (! $hero) stroke="#e2e8f0" @endif/>
                        <text x="{{ $x + 14 }}" y="90" font-size="11" font-weight="600" fill="{{ $hero ? '#e0f2fe' : '#64748b' }}">{{ $label }}</text>
                        <rect x="{{ $x + 101 }}" y="76" width="24" height="24" rx="7" fill="{{ $hero ? '#fff' : '#e0f2fe' }}" @if ($hero) opacity=".22" @endif/>
                        <x-icon :name="$iconName" :x="$x + 106" y="81" width="14" height="14" :class="$hero ? 'text-white' : 'text-sky-600'" />
                        <text x="{{ $x + 14 }}" y="118" font-size="{{ $hero ? 22 : 20 }}" font-weight="800" fill="{{ $hero ? '#fff' : '#0f172a' }}">{{ $inr($amount) }}</text>
                        <path d="M{{ $x + 14 }} 135l3.5-6 3.5 6z" fill="{{ $hero ? '#fff' : '#0284c7' }}"/>
                        <text x="{{ $x + 26 }}" y="136" font-size="11" font-weight="700" fill="{{ $hero ? '#fff' : '#0284c7' }}">{{ number_format($delta, 1) }}%</text>
                        <text x="{{ $x + 66 }}" y="136" font-size="10" fill="{{ $hero ? '#e0f2fe' : '#94a3b8' }}">vs last month</text>
                    @endforeach

                    {{-- Revenue trend --}}
                    <rect x="120" y="160" width="388" height="180" rx="12" fill="#fff" stroke="#e2e8f0"/>
                    <text x="136" y="184" font-size="14" font-weight="800" fill="#0f172a">Revenue trend</text>
                    <circle cx="366" cy="181" r="4" fill="#0ea5e9"/>
                    <text x="374" y="185" font-size="11" fill="#64748b">Revenue</text>
                    <path d="M432 181h14" stroke="#94a3b8" stroke-width="2" stroke-dasharray="3 3"/>
                    <text x="450" y="185" font-size="11" fill="#64748b">Target</text>

                    @foreach ([0, 10, 20, 30] as $tick)
                        @php($ty = 296 - $tick * 92 / 30)
                        <path d="M176 {{ round($ty, 1) }}H492" stroke="#e2e8f0" stroke-width="1"/>
                        <text x="168" y="{{ round($ty + 3.5, 1) }}" font-size="10" text-anchor="end" fill="#94a3b8">{{ $tick === 0 ? '0' : $tick.'K' }}</text>
                    @endforeach
                    @foreach ([0, 3, 6, 9, 11] as $t)
                        <text x="{{ round($trend[$t][0], 1) }}" y="314" font-size="10" text-anchor="middle" fill="#94a3b8">{{ (int) round(1 + $t * 29 / (count($trend) - 1)) }}</text>
                    @endforeach

                    <path d="M176 {{ round($targetY, 1) }}H492" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4 4"/>
                    <path d="{{ $trendArea }}" fill="url(#dm-area)"/>
                    <path d="{{ $trendLine }}" fill="none" stroke="#0ea5e9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    @php([$px, $py] = $trend[$peak])
                    <path d="M{{ round($px, 1) }} {{ round($py, 1) }}V296" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="3 3"/>
                    <circle cx="{{ round($px, 1) }}" cy="{{ round($py, 1) }}" r="6" fill="#fff" stroke="#0284c7" stroke-width="3"/>
                    <g transform="translate({{ round($px - 38, 1) }} {{ round($py + 14, 1) }})">
                        <rect width="76" height="36" rx="8" fill="#0a1b3d"/>
                        <path d="M32 0l6-6 6 6z" fill="#0a1b3d"/>
                        <text x="38" y="15" font-size="10" text-anchor="middle" fill="#94a3b8">Day {{ $peakDay }}</text>
                        <text x="38" y="29" font-size="13" font-weight="800" text-anchor="middle" fill="#fff">{{ $inr($r['daily'][$peak] * 1000) }}</text>
                    </g>

                    {{-- By department --}}
                    <rect x="520" y="160" width="192" height="180" rx="12" fill="#fff" stroke="#e2e8f0"/>
                    <text x="536" y="184" font-size="14" font-weight="800" fill="#0f172a">By department</text>
                    @php($widest = $ranked->max('amount'))
                    @foreach ($ranked as $i => $d)
                        @php($by = 214 + $i * 44)
                        <text x="536" y="{{ $by }}" font-size="12" font-weight="700" fill="#0f172a">{{ $d['name'] }}</text>
                        <text x="696" y="{{ $by }}" font-size="12" font-weight="800" text-anchor="end" fill="#0f172a">{{ $inr($d['amount']) }}</text>
                        <rect x="536" y="{{ $by + 8 }}" width="128" height="9" rx="4.5" fill="#e0f2fe"/>
                        <rect x="536" y="{{ $by + 8 }}" width="{{ round($d['amount'] / $widest * 128, 1) }}" height="9" rx="4.5" fill="{{ $shades[$i] }}"/>
                        <text x="696" y="{{ $by + 17 }}" font-size="11" font-weight="700" text-anchor="end" fill="#475569">{{ $pct($d) }}%</text>
                    @endforeach

                    {{-- Payment modes --}}
                    <rect x="120" y="352" width="388" height="72" rx="12" fill="#fff" stroke="#e2e8f0"/>
                    <text x="136" y="372" font-size="12" font-weight="800" fill="#0f172a">Payment modes</text>
                    <g clip-path="url(#dm-pay)">
                        @php($cursor = 136)
                        @foreach ($r['payments'] as $i => [$mode, $share])
                            <rect x="{{ round($cursor, 1) }}" y="382" width="{{ round($share * 3.56, 1) }}" height="12" fill="{{ $shades[$i] }}"/>
                            @php($cursor += $share * 3.56)
                        @endforeach
                    </g>
                    @foreach ($r['payments'] as $i => [$mode, $share])
                        <circle cx="{{ 139 + $i * 90 }}" cy="411" r="3.5" fill="{{ $shades[$i] }}"/>
                        <text x="{{ 147 + $i * 90 }}" y="415" font-size="11" fill="#475569">{{ $mode }} {{ $share }}%</text>
                    @endforeach

                    {{-- Pending claims --}}
                    <rect x="520" y="352" width="192" height="72" rx="12" fill="#fff" stroke="#e2e8f0"/>
                    <text x="536" y="372" font-size="11" font-weight="600" fill="#64748b">Pending claims</text>
                    <text x="536" y="398" font-size="20" font-weight="800" fill="#0f172a">{{ $inr($r['pending']['amount']) }}</text>
                    <text x="536" y="414" font-size="10" fill="#64748b">{{ $r['pending']['claims'] }} claims awaiting approval</text>
                </g>
            </g>
        </svg>

        {{-- ======================= Phone: the same figures ======================= --}}
        <svg viewBox="0 0 260 500" focusable="false" class="-mt-10 block h-auto w-44 drop-shadow-2xl sm:absolute sm:bottom-2 sm:right-0 sm:mt-0 sm:w-[24%]">
            <defs>
                <linearGradient id="pm-hero" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0ea5e9"/><stop offset="1" stop-color="#2563eb"/></linearGradient>
                <linearGradient id="pm-area" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#38bdf8" stop-opacity=".45"/><stop offset="1" stop-color="#38bdf8" stop-opacity="0"/></linearGradient>
                <clipPath id="pm-screen"><rect x="10" y="10" width="240" height="480" rx="33"/></clipPath>
            </defs>

            <rect width="260" height="500" rx="42" fill="#0f172a"/>
            <rect x="10" y="10" width="240" height="480" rx="33" fill="#f1f5f9"/>

            <g clip-path="url(#pm-screen)">
                <rect x="10" y="10" width="240" height="480" fill="#f1f5f9"/>
                <rect x="95" y="18" width="70" height="20" rx="10" fill="#0f172a"/>
                <text x="36" y="33" font-size="12" font-weight="700" fill="#0f172a">9:41</text>
                <rect x="206" y="24" width="20" height="10" rx="3" fill="none" stroke="#0f172a" stroke-width="1.5"/>
                <rect x="208" y="26" width="13" height="6" rx="1.5" fill="#0f172a"/>

                {{-- Header --}}
                <rect x="22" y="52" width="216" height="124" rx="22" fill="url(#pm-hero)"/>
                <text x="38" y="80" font-size="13" fill="#e0f2fe">Revenue · this month</text>
                <text x="38" y="118" font-size="30" font-weight="800" fill="#fff">{{ $inr($total) }}</text>
                <rect x="38" y="134" width="142" height="24" rx="12" fill="#fff" opacity=".2"/>
                <path d="M50 150l4-7 4 7z" fill="#fff"/>
                <text x="64" y="150" font-size="12" font-weight="700" fill="#fff">{{ number_format($growth, 1) }}% vs last month</text>

                {{-- Last 7 days --}}
                <rect x="22" y="188" width="216" height="108" rx="18" fill="#fff" stroke="#e2e8f0"/>
                <text x="38" y="210" font-size="12" font-weight="800" fill="#0f172a">Last 7 days</text>
                <path d="M38 268H222" stroke="#e2e8f0"/>
                <path d="{{ $weekArea }}" fill="url(#pm-area)"/>
                <path d="{{ $weekLine }}" fill="none" stroke="#0ea5e9" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="{{ round(end($week)[0], 1) }}" cy="{{ round(end($week)[1], 1) }}" r="4" fill="#fff" stroke="#0284c7" stroke-width="2.5"/>
                @foreach (['M', 'T', 'W', 'T', 'F', 'S', 'S'] as $i => $day)
                    <text x="{{ round($week[$i][0], 1) }}" y="286" font-size="10" text-anchor="middle" fill="#94a3b8">{{ $day }}</text>
                @endforeach

                {{-- Departments --}}
                @foreach ($depts as $i => $d)
                    @php($ry = 308 + $i * 44)
                    <rect x="22" y="{{ $ry }}" width="216" height="38" rx="14" fill="#fff" stroke="#e2e8f0"/>
                    <rect x="30" y="{{ $ry + 6 }}" width="26" height="26" rx="8" fill="#e0f2fe"/>
                    <x-icon :name="$d['icon']" x="36" :y="$ry + 12" width="14" height="14" class="text-sky-600" />
                    <text x="64" y="{{ $ry + 17 }}" font-size="12" font-weight="700" fill="#0f172a">{{ $d['name'] }}</text>
                    <text x="64" y="{{ $ry + 30 }}" font-size="10" font-weight="600" fill="#0284c7">+{{ number_format($d['growth'], 1) }}%</text>
                    <text x="230" y="{{ $ry + 24 }}" font-size="12" font-weight="800" text-anchor="end" fill="#0f172a">{{ $inr($d['amount']) }}</text>
                @endforeach

                {{-- Tab bar --}}
                <rect x="10" y="446" width="240" height="44" fill="#fff"/>
                <path d="M10 446.5H250" stroke="#e2e8f0"/>
                @foreach (['chart', 'receipt-rupee', 'users', 'bell'] as $i => $tab)
                    <x-icon :name="$tab" :x="47 + $i * 50" y="458" width="20" height="20" :class="$i === 0 ? 'text-sky-600' : 'text-slate-400'" />
                @endforeach
                <rect x="105" y="482" width="50" height="4" rx="2" fill="#0f172a" opacity=".85"/>
            </g>
        </svg>
    </div>

    <figcaption class="mt-4 text-center text-xs text-slate-500">{{ $caption }}</figcaption>
</figure>