<?php

namespace App\Livewire;

use Illuminate\Support\Carbon;
use Illuminate\Support\Number;
use Livewire\Attributes\Layout;
use Livewire\Component;

#[Layout('layouts.portal-app')]
class Invoices extends Component
{
    public function render()
    {
        $locale = app()->getLocale();
        $eur = fn (float $v) => Number::currency($v, in: 'EUR', locale: $locale);
        $date = fn (string $iso) => Carbon::parse($iso)->local()->locale($locale)->isoFormat('LL');

        $months = collect(['2026-03-01', '2026-04-01', '2026-05-01', '2026-06-01', '2026-07-01'])
            ->map(fn ($m) => Carbon::parse($m)->local()->locale($locale)->isoFormat('MMM'))->all();

        $rows = [
            ['no' => 'CP-2026-0007', 'date' => $date('2026-07-01'), 'amount' => $eur(198), 'status' => 'paid'],
            ['no' => 'CP-2026-0006', 'date' => $date('2026-06-01'), 'amount' => $eur(198), 'status' => 'paid'],
            ['no' => 'CP-2026-0005', 'date' => $date('2026-05-01'), 'amount' => $eur(198), 'status' => 'paid'],
            ['no' => 'CP-2026-0004', 'date' => $date('2026-04-01'), 'amount' => $eur(179), 'status' => 'paid'],
            ['no' => 'CP-2026-0003', 'date' => $date('2026-03-15'), 'amount' => $eur(179), 'status' => 'paid'],
        ];

        return view('livewire.invoices', [
            'rows' => $rows,
            'nextCharge' => $date('2026-08-01'),
            'nextAmount' => $eur(198),
            'spendChart' => [
                'type' => 'line',
                'data' => [
                    'labels' => $months,
                    'datasets' => [[
                        'label' => 'EUR',
                        'data' => [179, 179, 198, 198, 198],
                        'borderColor' => 'token:accent',
                        'fill' => true,
                        'tension' => 0.35,
                        'pointRadius' => 0,
                        'borderWidth' => 2,
                    ]],
                ],
                'options' => [
                    'scales' => [
                        'x' => ['grid' => ['display' => false]],
                        'y' => ['beginAtZero' => true, 'grid' => ['color' => 'token:border']],
                    ],
                    'plugins' => ['legend' => ['display' => false]],
                ],
            ],
        ]);
    }
}