import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { useTranslation } from '@/hooks/use-translation';
import { cn } from '@/lib/utils';
import { ActivityHistoryButton } from '@/pages/activity/components/ActivityHistoryButton';
import type { LogementShowLinks, LogementShowProperty } from '@/types/logement-show';
import { Link } from '@inertiajs/react';
import { ArrowLeft, CalendarDays, List, Pencil } from 'lucide-react';
import { NS } from '../format';

interface Props {
    property: LogementShowProperty;
    links: LogementShowLinks;
}

export function ShowHeader({ property, links }: Props) {
    const { t } = useTranslation();
    const subline = [property.internal_name, `${t(NS, 'uid')} ${property.uid}`, property.address].filter(Boolean).join(' · ');

    return (
        <div className="flex flex-wrap items-start gap-3">
            <Button asChild variant="outline" size="icon" className="shrink-0">
                <Link href="/logements" aria-label={t(NS, 'back_to_list')}>
                    <ArrowLeft className="h-4 w-4" />
                </Link>
            </Button>

            <div className="min-w-0 flex-1 basis-56">
                <div className="flex flex-wrap items-center gap-2">
                    <h1 className="text-2xl font-bold break-words">{property.name}</h1>
                    <Badge
                        className={cn(
                            'border-transparent',
                            property.is_active
                                ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300'
                                : 'bg-muted text-muted-foreground',
                        )}
                    >
                        {property.is_active ? t(NS, 'active') : t(NS, 'inactive')}
                    </Badge>
                </div>
                <p className="text-muted-foreground mt-0.5 text-xs break-words">{subline}</p>
            </div>

            <div className="flex flex-wrap items-center gap-2">
                {/* TL-293 — journal d'activité filtré sur ce logement (absent sans accès au journal). */}
                <ActivityHistoryButton subject={`Property:${property.id}`} dataTour="logement-show-history" />
                {links.calendar && (
                    <Button asChild variant="outline" size="sm">
                        <Link href={links.calendar}>
                            <CalendarDays className="h-4 w-4" />
                            {t(NS, 'calendar')}
                        </Link>
                    </Button>
                )}
                {links.reservations && (
                    <Button asChild variant="outline" size="sm">
                        <Link href={links.reservations}>
                            <List className="h-4 w-4" />
                            {t(NS, 'reservations')}
                        </Link>
                    </Button>
                )}
                {links.edit && (
                    <Button asChild size="sm" data-tour="logement-show-edit">
                        <Link href={links.edit}>
                            <Pencil className="h-4 w-4" />
                            {t(NS, 'edit')}
                        </Link>
                    </Button>
                )}
            </div>
        </div>
    );
}