import { Form, Link, usePage } from '@inertiajs/react';
import { Lock, LogOut, Mail, Phone } from 'lucide-react';
import AppLogoIcon from '@/components/app-logo-icon';
import { Button } from '@/components/ui/button';
import type { Branding, PublicStatusLink } from '@/types';

type SharedProps = {
    branding: Branding;
    link?: PublicStatusLink | null;
};

/**
 * The shell the shared ticket status board sits in.
 *
 * Deliberately not the staff layout: there is no sidebar, no search over the
 * customer database and no account menu, because the person reading this has no
 * account. What it does carry is the company's own brand, which link is open,
 * the way out, and the office's phone number for anything the board cannot
 * answer.
 */
export default function StatusLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    const { branding, link } = usePage<SharedProps>().props;

    return (
        <div className="flex min-h-svh flex-col bg-background">
            <header className="border-hairline bg-background/95 supports-[backdrop-filter]:bg-background/80 sticky top-0 z-20 border-b backdrop-blur">
                <div className="mx-auto flex w-full max-w-6xl flex-wrap items-center gap-3 px-4 py-3 sm:px-6">
                    <Link
                        href={link ? '/ticket-status/board' : '/ticket-status'}
                        className="flex min-w-0 items-center gap-3"
                    >
                        {branding.logo_url ? (
                            <img
                                src={branding.logo_url}
                                alt={branding.name}
                                className="h-8 w-auto max-w-[9rem] object-contain object-left sm:max-w-[12rem]"
                            />
                        ) : (
                            <>
                                <span className="bg-solar-soft text-solar-ink ring-solar/30 flex size-8 shrink-0 items-center justify-center rounded-lg ring-1">
                                    <AppLogoIcon className="size-4 fill-current" />
                                </span>
                                <span className="truncate text-sm font-semibold">
                                    {branding.name}
                                </span>
                            </>
                        )}
                        <span className="text-muted-foreground hidden text-xs font-medium sm:block">
                            Ticket status board
                        </span>
                    </Link>

                    <div className="ml-auto flex items-center gap-2">
                        {link ? (
                            <>
                                <span className="hidden text-right text-[11px] leading-tight sm:block">
                                    <span className="block font-medium">
                                        {link.name}
                                    </span>
                                    <span className="text-muted-foreground block">
                                        Read-only · {link.username}
                                    </span>
                                </span>
                                <Form action="/ticket-status/logout" method="post">
                                    {({ processing }) => (
                                        <Button
                                            type="submit"
                                            variant="outline"
                                            size="sm"
                                            disabled={processing}
                                        >
                                            <LogOut />
                                            Sign out
                                        </Button>
                                    )}
                                </Form>
                            </>
                        ) : (
                            <span className="text-muted-foreground inline-flex items-center gap-1.5 text-[11px]">
                                <Lock className="size-3.5" />
                                Private link
                            </span>
                        )}
                    </div>
                </div>
            </header>

            <main className="mx-auto w-full max-w-6xl flex-1 px-4 py-6 sm:px-6 sm:py-8">
                {children}
            </main>

            <footer className="border-hairline border-t">
                <div className="text-muted-foreground mx-auto flex w-full max-w-6xl flex-col gap-2 px-4 py-5 text-xs sm:flex-row sm:items-center sm:justify-between sm:px-6">
                    <span>
                        {branding.legal_name || branding.name}
                        {branding.abn_label ? ` · ${branding.abn_label}` : ''}
                    </span>
                    <span className="flex flex-wrap items-center gap-x-4 gap-y-1">
                        {branding.support_phone ? (
                            <a
                                href={`tel:${branding.support_phone.replace(/\s+/g, '')}`}
                                className="hover:text-foreground inline-flex items-center gap-1.5"
                            >
                                <Phone className="size-3.5" />
                                {branding.support_phone}
                            </a>
                        ) : null}
                        {branding.support_email ? (
                            <a
                                href={`mailto:${branding.support_email}`}
                                className="hover:text-foreground inline-flex items-center gap-1.5"
                            >
                                <Mail className="size-3.5" />
                                {branding.support_email}
                            </a>
                        ) : null}
                    </span>
                </div>
            </footer>
        </div>
    );
}