import { Form, Link, usePage } from '@inertiajs/react';
import {
    ClipboardList,
    LayoutDashboard,
    LogOut,
    Mail,
    Phone,
    UserRound,
} from 'lucide-react';
import AppLogoIcon from '@/components/app-logo-icon';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import type { Branding, CustomerSession } from '@/types';

type SharedProps = {
    branding: Branding;
    customer: CustomerSession | null;
    auth: { user: { name: string } | null };
};

/**
 * The shell every customer-facing screen sits in.
 *
 * It shares nothing with the staff layout on purpose: a customer's page has no
 * sidebar of CRM modules, no permission-driven actions and no company
 * dashboard. What it does carry, on every screen, is the company's own
 * contact details.
 */
export default function TicketLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    const { branding, customer, auth } = usePage<SharedProps>().props;
    const url = usePage().url;

    const links = customer
        ? [
              {
                  href: '/ticket/dashboard',
                  label: 'Overview',
                  icon: LayoutDashboard,
              },
              {
                  href: '/ticket/tickets',
                  label: 'My reports',
                  icon: ClipboardList,
              },
              {
                  href: '/ticket/details',
                  label: 'Your details',
                  icon: UserRound,
              },
          ]
        : [];

    return (
        <div className="flex min-h-svh flex-col bg-background">
            <header className="border-b border-hairline bg-background">
                <div className="mx-auto flex w-full max-w-6xl flex-wrap items-center gap-4 px-6 py-4">
                    {/* A client's own logo is the wordmark, so it is shown at
                        its own proportions. Squaring it off cropped the name
                        out of the picture, and repeating the company name
                        beside it printed the brand twice. */}
                    <Link
                        href={customer ? '/ticket/dashboard' : '/'}
                        className="flex min-w-0 items-center gap-3"
                    >
                        {branding.logo_url ? (
                            <>
                                <img
                                    src={branding.logo_url}
                                    alt={branding.name}
                                    className="h-9 w-auto max-w-[9rem] object-contain object-left sm:max-w-[13rem]"
                                />
                                <span className="text-xs font-medium text-muted-foreground">
                                    Tickets
                                </span>
                            </>
                        ) : (
                            <>
                                <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-solar-soft text-solar-ink ring-1 ring-solar/30">
                                    <AppLogoIcon className="size-4 fill-current" />
                                </span>
                                <span className="min-w-0">
                                    <span className="block truncate text-sm font-semibold">
                                        {branding.name}
                                    </span>
                                    <span className="block text-xs text-muted-foreground">
                                        Tickets
                                    </span>
                                </span>
                            </>
                        )}
                    </Link>

                    {links.length > 0 ? (
                        <nav className="order-3 flex w-full items-center gap-1 sm:order-none sm:w-auto sm:pl-6">
                            {links.map((link) => {
                                const active = url.startsWith(link.href);

                                return (
                                    <Link
                                        key={link.href}
                                        href={link.href}
                                        className={cn(
                                            'inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors',
                                            active
                                                ? 'bg-muted font-medium text-foreground'
                                                : 'text-muted-foreground hover:bg-muted hover:text-foreground',
                                        )}
                                    >
                                        <link.icon className="size-4" />
                                        {link.label}
                                    </Link>
                                );
                            })}
                        </nav>
                    ) : null}

                    <div className="ml-auto flex items-center gap-2">
                        {customer ? (
                            <>
                                <span className="hidden text-right text-xs leading-tight sm:block">
                                    <span className="block font-medium">
                                        {customer.name}
                                    </span>
                                    <span className="block text-muted-foreground">
                                        {customer.email}
                                    </span>
                                </span>
                                <Form action="/ticket/logout" method="post">
                                    {({ processing }) => (
                                        <Button
                                            type="submit"
                                            variant="outline"
                                            size="sm"
                                            disabled={processing}
                                        >
                                            <LogOut />
                                            Sign out
                                        </Button>
                                    )}
                                </Form>
                            </>
                        ) : (
                            <>
                                <Button asChild variant="ghost" size="sm">
                                    <Link href="/ticket/login">Sign in</Link>
                                </Button>
                                <Button asChild size="sm">
                                    <Link href="/ticket/register">
                                        Create account
                                    </Link>
                                </Button>
                            </>
                        )}
                    </div>
                </div>
            </header>

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

            <footer className="border-t border-hairline">
                <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-6 py-6 text-xs text-muted-foreground sm:flex-row sm:items-start sm:justify-between">
                    <div className="space-y-1">
                        <p className="font-medium text-foreground">
                            {branding.legal_name ?? branding.name}
                        </p>
                        {branding.address_lines.length > 0 ? (
                            <p>{branding.address_lines.join(', ')}</p>
                        ) : null}
                        {branding.abn_label || branding.acn_label ? (
                            <p>
                                {[branding.abn_label, branding.acn_label]
                                    .filter(Boolean)
                                    .join(' · ')}
                            </p>
                        ) : null}
                    </div>

                    <div className="flex flex-wrap items-center gap-x-5 gap-y-2">
                        {/* The customer customer is the site's front door, so the
                            staff entrance is kept quiet down here rather than
                            competing with it. */}
                        <Link
                            href={auth?.user ? '/dashboard' : '/login'}
                            className="inline-flex items-center gap-1.5 text-muted-foreground hover:text-foreground"
                        >
                            {auth?.user ? 'Staff dashboard' : 'Staff sign in'}
                        </Link>
                        {branding.support_phone ? (
                            <a
                                href={`tel:${branding.support_phone.replace(/\s+/g, '')}`}
                                className="inline-flex items-center gap-1.5 hover:text-foreground"
                            >
                                <Phone className="size-3.5" />
                                {branding.support_phone}
                            </a>
                        ) : null}
                        {branding.support_email ? (
                            <a
                                href={`mailto:${branding.support_email}`}
                                className="inline-flex items-center gap-1.5 hover:text-foreground"
                            >
                                <Mail className="size-3.5" />
                                {branding.support_email}
                            </a>
                        ) : null}
                    </div>
                </div>
            </footer>
        </div>
    );
}