import { ArrowRight } from 'lucide-react';
import { Link } from '@inertiajs/react';
import { toneClasses } from '@/components/crm/tone';
import { cn } from '@/lib/utils';
import type { CustomerTicketStatus } from '@/types';

/**
 * The status of a report, in the customer's language. The colour comes from
 * the backend so the portal and the support desk never disagree about what a
 * state looks like.
 */
export function StatusPill({
    status,
    className,
}: {
    status: CustomerTicketStatus;
    className?: string;
}) {
    return (
        <span
            className={cn(
                'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium',
                toneClasses(status.tone).pill,
                className,
            )}
        >
            <span
                className={cn(
                    'size-1.5 rounded-full',
                    toneClasses(status.tone).dot,
                )}
            />
            {status.label}
        </span>
    );
}

/** A plain panel, used for every block on a portal page. */
export function TicketCard({
    title,
    description,
    action,
    children,
    className,
}: {
    title?: string;
    description?: string;
    action?: React.ReactNode;
    children: React.ReactNode;
    className?: string;
}) {
    return (
        <section
            className={cn(
                'rounded-2xl bg-card p-5 text-card-foreground ring-1 ring-hairline sm:p-6',
                className,
            )}
        >
            {title ? (
                <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <h2 className="text-sm font-semibold">{title}</h2>
                        {description ? (
                            <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
                                {description}
                            </p>
                        ) : null}
                    </div>
                    {action}
                </div>
            ) : null}
            {children}
        </section>
    );
}

/** The one button the portal exists for. */
export function ReportIssueButton({
    href,
    label = 'Report an issue',
}: {
    href: string;
    label?: string;
}) {
    return (
        <Link
            href={href}
            className="inline-flex h-10 items-center justify-center gap-2 rounded-md bg-primary px-5 text-sm font-medium text-primary-foreground shadow-xs transition-colors hover:bg-primary/90 focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none"
        >
            {label}
            <ArrowRight className="size-4" />
        </Link>
    );
}