import { CircleCheck, Clock, Inbox, UserCheck, type LucideIcon } from 'lucide-react';
import { FORM_SUBMISSION_STATUS_LABELS, type FormSubmissionStatus } from '../../../services/FormSubmissionsService.tsx';

const parse = (iso: string): Date | null => {
    const date = new Date(iso);
    return isNaN(date.getTime()) ? null : date;
};

const time = (date: Date) => date.toLocaleString('en-US', { hour: 'numeric', minute: '2-digit' });

/** "Aug 21 · 1:49 PM" on a row; the year only when it is not this one. */
export const rowWhen = (iso: string, now: Date = new Date()): string => {
    const date = parse(iso);
    if (!date) return iso;
    const sameYear = date.getFullYear() === now.getFullYear();
    const day = date.toLocaleString('en-US', sameYear
        ? { month: 'short', day: 'numeric' }
        : { month: 'short', day: 'numeric', year: 'numeric' });
    return `${day} · ${time(date)}`;
};

/** "Aug 21, 2026 · 1:44 PM" - the full stamp, for the detail facts and a row's tooltip. */
export const fullWhen = (iso: string): string => {
    const date = parse(iso);
    if (!date) return iso;
    return `${date.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} · ${time(date)}`;
};

// A phone row shows the status as an icon; each has its own shape so colour is never the only cue.
const STATUS_ICONS: Record<FormSubmissionStatus, LucideIcon> = {
    new: Inbox,
    in_progress: Clock,
    converted: UserCheck,
    resolved: CircleCheck,
};

// The shared pill tones, as the deck's .pill br / prog / ok / mute.
const STATUS_PILL: Record<FormSubmissionStatus, string> = {
    new: 'ak-pill ak-pill--new',
    in_progress: 'ak-pill ak-pill--warn',
    converted: 'ak-pill ak-pill--ok',
    resolved: 'ak-pill',
};

export const SubmissionStatus = ({ status, className = '' }: { status: FormSubmissionStatus; className?: string }) => {
    const Icon = STATUS_ICONS[status];
    const label = FORM_SUBMISSION_STATUS_LABELS[status];
    return (
        <span className={`ahr-form-submissions__status ahr-form-submissions__status--${status} ${className}`.trim()}>
            <span className={`${STATUS_PILL[status]} ahr-form-submissions__status-text`}>{label}</span>
            <span className="ahr-form-submissions__status-icon" role="img" aria-label={label} title={label}>
                <Icon aria-hidden="true" />
            </span>
        </span>
    );
};