import { usePage } from '@inertiajs/react';
import { HardHat, Mail, Phone } from 'lucide-react';
import AppLogoIcon from '@/components/app-logo-icon';
import type { Branding } from '@/types';

type SharedProps = {
    branding: Branding;
};

/**
 * The shell the crew's form sits in.
 *
 * Deliberately not the staff layout: a crew holding a phone on a roof needs the
 * brand, the job and their own progress, and nothing that looks like a CRM they
 * cannot sign in to. The link is the whole account, so the header says so.
 */
export default function InspectionLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    const { branding } = usePage<SharedProps>().props;

    return (
        <div className="flex min-h-svh flex-col bg-background">
            <div className="bg-solar-soft text-solar-ink border-b border-solar/20">
                <div className="mx-auto flex w-full max-w-5xl items-start gap-2.5 px-4 py-2.5 text-xs leading-relaxed sm:px-6">
                    <HardHat className="mt-0.5 size-4 shrink-0" aria-hidden />
                    <p>
                        <span className="font-semibold">Site safety first.</span>{' '}
                        If anything you find is unsafe, isolate it before you
                        carry on and call the office. Do not energise a system
                        you have failed.
                    </p>
                </div>
            </div>

            <header className="bg-background border-hairline border-b">
                <div className="mx-auto flex w-full max-w-5xl items-center gap-3 px-4 py-3.5 sm:px-6">
                    {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 ml-auto text-right text-[11px] leading-tight sm:text-xs">
                        <span className="block font-medium text-foreground">
                            Inspection &amp; warranty report
                        </span>
                        <span className="block">No sign-in needed</span>
                    </span>
                </div>
            </header>

            <main className="mx-auto w-full max-w-5xl 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-5xl 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>
    );
}