import type { ReactNode } from 'react';
import type { LotStatus } from '@/types/portal';

export const STATUS_LABEL: Record<LotStatus, string> = {
    available: 'Disponible',
    held: 'Apartado',
    sold: 'Vendido',
    blocked: 'Bloqueado',
};

export const STATUS_PILL: Record<LotStatus, string> = {
    available: 'bg-status-available-soft text-status-available',
    held: 'bg-status-held-soft text-status-held',
    sold: 'bg-status-sold-soft text-status-sold',
    blocked: 'bg-status-blocked-soft text-status-blocked',
};

/** Plot colours for the availability bars, readable on either theme. */
export const STATUS_BAR: Record<LotStatus, string> = {
    available: 'var(--status-available)',
    held: 'var(--status-held)',
    sold: 'var(--status-sold)',
    blocked: 'var(--status-blocked)',
};

export const STATUS_ORDER: LotStatus[] = [
    'available',
    'held',
    'sold',
    'blocked',
];

export const money = (value: number): string =>
    new Intl.NumberFormat('es-MX', {
        style: 'currency',
        currency: 'MXN',
        maximumFractionDigits: 0,
    }).format(value);

export const area = (value: number): string =>
    `${new Intl.NumberFormat('es-MX', { maximumFractionDigits: 2 }).format(value)} m²`;

export const count = (value: number): string =>
    new Intl.NumberFormat('es-MX').format(value);

export const shortDate = (iso: string | null): string =>
    iso === null
        ? '—'
        : new Intl.DateTimeFormat('es-MX', {
              day: '2-digit',
              month: 'short',
              year: 'numeric',
          }).format(new Date(iso));

export function StatusPill({ status }: { status: LotStatus }) {
    return (
        <span
            className={`inline-flex rounded-md px-2.5 py-1.5 text-[12px] font-bold ${STATUS_PILL[status]}`}
        >
            {STATUS_LABEL[status]}
        </span>
    );
}

export function PageHeader({
    eyebrow,
    title,
    description,
    actions,
}: {
    eyebrow: string;
    title: string;
    description: string;
    actions?: ReactNode;
}) {
    return (
        <header className="flex flex-wrap items-start justify-between gap-4">
            <div>
                <p className="text-[12px] font-bold tracking-[0.14em] text-muted-foreground uppercase">
                    {eyebrow}
                </p>
                <h1 className="font-editorial mt-2 text-3xl leading-tight font-medium tracking-[-0.03em] text-foreground">
                    {title}
                </h1>
                <p className="mt-2 max-w-2xl text-xs leading-5 text-muted-foreground">
                    {description}
                </p>
            </div>
            {actions ? (
                <div className="flex flex-wrap items-center gap-2">
                    {actions}
                </div>
            ) : null}
        </header>
    );
}

export function Stat({
    value,
    label,
    hint,
    tone = 'plain',
}: {
    value: string;
    label: string;
    hint?: string;
    tone?: 'plain' | 'accent';
}) {
    return (
        <div
            className={`rounded-2xl border px-4 py-3.5 ${
                tone === 'accent'
                    ? 'border-brand bg-brand text-brand-foreground'
                    : 'border-border bg-card text-card-foreground'
            }`}
        >
            <strong className="block text-xl leading-tight font-semibold tracking-tight break-words tabular-nums sm:text-2xl">
                {value}
            </strong>
            <span
                className={`mt-2 block text-[12px] font-bold tracking-[0.08em] uppercase ${
                    tone === 'accent'
                        ? 'text-brand-foreground/70'
                        : 'text-muted-foreground'
                }`}
            >
                {label}
            </span>
            {hint ? (
                <span
                    className={`mt-1.5 block text-[12px] ${
                        tone === 'accent'
                            ? 'text-brand-foreground/65'
                            : 'text-muted-foreground'
                    }`}
                >
                    {hint}
                </span>
            ) : null}
        </div>
    );
}

export function Panel({
    title,
    action,
    children,
}: {
    title: string;
    action?: ReactNode;
    children: ReactNode;
}) {
    return (
        <section className="overflow-hidden rounded-2xl border border-border bg-card">
            <div className="flex items-center justify-between gap-3 border-b border-border px-4 py-3">
                <h2 className="text-[13px] font-bold tracking-[0.1em] text-foreground/75 uppercase">
                    {title}
                </h2>
                {action}
            </div>
            {children}
        </section>
    );
}

export function EmptyState({
    title,
    description,
    action,
}: {
    title: string;
    description: string;
    action?: ReactNode;
}) {
    return (
        <div className="rounded-2xl border border-dashed border-border bg-card/60 px-6 py-12 text-center">
            <p className="text-sm font-semibold text-foreground">{title}</p>
            <p className="mx-auto mt-2 max-w-md text-xs leading-5 text-muted-foreground">
                {description}
            </p>
            {action ? <div className="mt-5">{action}</div> : null}
        </div>
    );
}
