﻿import { Head, Link } from '@inertiajs/react';
import type { ReactNode } from 'react';
import AppLayout from '@/layouts/app-layout';

export interface PageData<T> {
    data: T[];
    current_page: number;
    last_page: number;
    total: number;
    prev_page_url: string | null;
    next_page_url: string | null;
}
export const labels: Record<string, string> = {
    ALL: 'Semua',
    CREATED: 'Dibuat',
    PENDING_PAYMENT: 'Menunggu pembayaran',
    PAID: 'Lunas',
    FAILED: 'Gagal',
    EXPIRED: 'Kedaluwarsa',
    REFUNDED: 'Dikembalikan',
    PENDING: 'Menunggu tinjauan',
    APPROVED: 'Disetujui',
    PUBLISHED: 'Terbit',
    REJECTED: 'Ditolak',
    ARCHIVED: 'Diarsipkan',
    DRAFT: 'Draf',
};
export const money = (value: string | number) =>
    new Intl.NumberFormat('id-ID', {
        style: 'currency',
        currency: 'IDR',
        maximumFractionDigits: 0,
    }).format(Number(value));
export function date(value: string | null) {
    if (!value) return 'Belum tersedia';
    const d = new Date(value);
    return Number.isNaN(d.getTime())
        ? 'Tanggal tidak tersedia'
        : d.toLocaleDateString('id-ID', {
              day: 'numeric',
              month: 'short',
              year: 'numeric',
              timeZone: 'Asia/Jakarta',
          });
}
export function AdminPage({
    title,
    description,
    path,
    action,
    children,
}: {
    title: string;
    description: string;
    path: string;
    action?: ReactNode;
    children: ReactNode;
}) {
    return (
        <AppLayout breadcrumbs={[{ title, href: path }]}>
            <Head title={`${title} | FT UNMA`}>
                <meta name="description" content={description} />
                <meta name="robots" content="noindex, nofollow" />
            </Head>
            <div className="admin-overview">
                <div className="admin-overview-inner">
                    <header className="admin-overview-heading">
                        <div>
                            <p className="admin-eyebrow">
                                Administrasi / Fakultas Teknik UNMA
                            </p>
                            <h1>{title}</h1>
                            <p className="admin-intro">{description}</p>
                        </div>
                        {action}
                    </header>
                    {children}
                </div>
            </div>
        </AppLayout>
    );
}
export function Filters({
    path,
    values,
    current,
}: {
    path: string;
    values: string[];
    current: string;
}) {
    return (
        <nav className="admin-toolbar" aria-label="Filter status">
            {values.map((value) => (
                <Link
                    id={`filter-${value.toLowerCase()}`}
                    key={value}
                    href={`${path}?status=${value}`}
                    className="admin-filter"
                    aria-current={current === value ? 'page' : undefined}
                    preserveScroll
                >
                    {labels[value]}
                </Link>
            ))}
        </nav>
    );
}
export function Status({ value }: { value: string }) {
    return (
        <span className="admin-status" data-status={value}>
            {labels[value] ?? value}
        </span>
    );
}
export function Pagination({
    page,
}: {
    page: Omit<PageData<unknown>, 'data'>;
}) {
    return (
        <nav className="admin-pagination" aria-label="Navigasi halaman">
            <span>
                {page.total} data · Halaman {page.current_page} dari{' '}
                {page.last_page}
            </span>
            <div>
                {page.prev_page_url && (
                    <Link
                        id="page-previous"
                        className="admin-button"
                        href={page.prev_page_url}
                    >
                        Sebelumnya
                    </Link>
                )}
                {page.next_page_url && (
                    <Link
                        id="page-next"
                        className="admin-button"
                        href={page.next_page_url}
                    >
                        Berikutnya
                    </Link>
                )}
            </div>
        </nav>
    );
}
export function Errors({ errors }: { errors: Record<string, string> }) {
    return Object.keys(errors).length ? (
        <div className="admin-errors" role="alert">
            {Object.entries(errors).map(([key, message]) => (
                <p key={key}>{message}</p>
            ))}
        </div>
    ) : null;
}
