import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { useTranslation } from '@/hooks/use-translation';
import { cn } from '@/lib/utils';
import type { LogementShowMandate, LogementShowOwner } from '@/types/logement-show';
import { Link } from '@inertiajs/react';
import { AlertTriangle, FileText, UserRound } from 'lucide-react';
import { NS, fill } from '../format';
import { SectionTitle } from './detail-card';

interface Props {
    owner: LogementShowOwner;
    /** Première étape de l'assistant, où se choisit le propriétaire ; null sans droit de modification. */
    linkHref: string | null;
}

export function OwnerCard({ owner, linkHref }: Props) {
    const { t } = useTranslation();

    return (
        <Card data-tour="logement-show-owner" className="gap-0">
            <CardContent>
                <SectionTitle className="mb-2">{t(NS, 'owner')}</SectionTitle>
                {owner.status === 'linked' ? (
                    <p className="flex items-center gap-2 text-sm font-medium">
                        <UserRound className="text-muted-foreground h-4 w-4 shrink-0" aria-hidden="true" />
                        {owner.url ? (
                            <Link href={owner.url} className="hover:underline">
                                {owner.name ?? '—'}
                            </Link>
                        ) : (
                            (owner.name ?? '—')
                        )}
                    </p>
                ) : (
                    <div className="flex items-start gap-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2.5 text-sm text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-200">
                        <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
                        <div className="min-w-0">
                            <p className="font-medium">{owner.status === 'missing' ? t(NS, 'owner_missing') : t(NS, 'owner_not_found')}</p>
                            {owner.status === 'not_found' && <p className="mt-0.5 text-xs">{t(NS, 'owner_not_found_hint')}</p>}
                            {linkHref && (
                                <Link href={linkHref} className="mt-1 inline-block text-xs font-semibold underline underline-offset-2">
                                    {t(NS, 'owner_link')}
                                </Link>
                            )}
                        </div>
                    </div>
                )}
                {owner.mandates !== null && <Mandates mandates={owner.mandates} createHref={owner.mandate_create_url} />}
            </CardContent>
        </Card>
    );
}

/** Mandats de gestion : signés d'abord ; « Ouvrir » ouvre le contrat dans un nouvel onglet. */
function Mandates({ mandates, createHref }: { mandates: LogementShowMandate[]; createHref: string | null }) {
    const { t } = useTranslation();

    return (
        <div className="mt-3 border-t pt-3">
            <p className="text-muted-foreground mb-1.5 text-xs font-semibold tracking-wide uppercase">{t(NS, 'mandates_title')}</p>
            {mandates.length === 0 ? (
                <p className="text-muted-foreground text-sm">
                    {t(NS, 'mandates_empty')}{' '}
                    {createHref && (
                        <Link href={createHref} className="text-primary dark:text-secondary font-medium hover:underline">
                            {t(NS, 'mandates_create')}
                        </Link>
                    )}
                </p>
            ) : (
                <ul className="divide-border divide-y divide-dashed">
                    {mandates.map((mandate) => (
                        <li key={mandate.url} className="flex items-center justify-between gap-2 py-1.5">
                            <div className="min-w-0">
                                <span
                                    className={cn(
                                        'inline-flex rounded-full px-2 py-0.5 text-xs font-medium',
                                        mandate.status === 'signed'
                                            ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300'
                                            : 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300',
                                    )}
                                >
                                    {mandate.status === 'signed'
                                        ? mandate.signed_at
                                            ? fill(t(NS, 'mandate_signed_on'), { date: mandate.signed_at })
                                            : t(NS, 'mandate_signed')
                                        : t(NS, 'mandate_pending')}
                                </span>
                                {mandate.scope === 'owner' && <p className="text-muted-foreground mt-0.5 text-xs">{t(NS, 'mandate_owner_scope')}</p>}
                            </div>
                            <Button asChild variant="outline" size="sm" className="h-7 shrink-0 gap-1.5 px-2 text-xs">
                                <a href={mandate.url} target="_blank" rel="noopener noreferrer">
                                    <FileText className="h-3.5 w-3.5" aria-hidden="true" />
                                    {t(NS, 'mandate_open')}
                                </a>
                            </Button>
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
}