import { Card, CardContent } from '@/components/ui/card';
import { useTranslation } from '@/hooks/use-translation';
import { cn } from '@/lib/utils';
import type { LogementShowStay } from '@/types/logement-show';
import { Link } from '@inertiajs/react';
import { ArrowRight } from 'lucide-react';
import { NS, dayMonth, stayMeta } from '../format';
import { CopyInstructionsButton } from './copy-instructions-button';
import { SectionTitle } from './detail-card';
import { MissingInstructionsNotice, StayOwnerBadge } from './today-card';

const MAX_ROWS = 4;

interface Props {
    upcoming: LogementShowStay[];
    /** Liste des réservations filtrée sur ce logement ; null sans accès. */
    reservationsHref: string | null;
    hasInstructions: boolean;
    /** Étape « Instructions d'entrée » de l'assistant ; null sans droit de modification. */
    addInstructionsHref: string | null;
}

export function UpcomingCard({ upcoming, reservationsHref, hasInstructions, addInstructionsHref }: Props) {
    const { t, locale } = useTranslation();
    const rows = upcoming.slice(0, MAX_ROWS);

    return (
        <Card className="gap-0">
            <CardContent>
                <SectionTitle className="mb-2">{t(NS, 'upcoming_title')}</SectionTitle>
                {rows.length === 0 ? (
                    <p className="text-muted-foreground text-sm">{t(NS, 'upcoming_empty')}</p>
                ) : (
                    <ul className="divide-border divide-y divide-dashed">
                        {rows.map((stay) => (
                            // Pas de lien sur toute la ligne : le bouton de copie ne peut pas vivre dans un lien.
                            <li key={stay.id} className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1 py-2">
                                <span
                                    className="bg-muted rounded px-1.5 py-0.5 font-mono text-xs tabular-nums"
                                    title={`${stay.check_in} → ${stay.check_out}`}
                                >
                                    {dayMonth(stay.check_in_iso)}
                                </span>
                                <span className="flex min-w-0 items-center gap-1.5">
                                    <GuestName stay={stay} />
                                    {stay.is_owner && <StayOwnerBadge />}
                                </span>
                                <span className="text-muted-foreground text-right text-xs">{stayMeta(stay, locale, t, { dates: false })}</span>
                                {stay.instructions_url && (
                                    <span className="col-start-2 col-end-4 flex justify-end">
                                        <CopyInstructionsButton stay={stay} />
                                    </span>
                                )}
                            </li>
                        ))}
                    </ul>
                )}
                {!hasInstructions && rows.length > 0 && <MissingInstructionsNotice addHref={addInstructionsHref} />}
                {reservationsHref && (
                    <Link
                        href={reservationsHref}
                        className="text-primary dark:text-secondary mt-3 inline-flex items-center gap-1 text-sm font-medium hover:underline"
                    >
                        {t(NS, 'upcoming_all')}
                        <ArrowRight className="h-3.5 w-3.5" />
                    </Link>
                )}
            </CardContent>
        </Card>
    );
}

function GuestName({ stay }: { stay: LogementShowStay }) {
    const className = 'truncate text-sm font-medium';
    return stay.url ? (
        <Link href={stay.url} className={cn(className, 'hover:underline')}>
            {stay.guest_name}
        </Link>
    ) : (
        <span className={className}>{stay.guest_name}</span>
    );
}