import { scannedPhotoSrc } from '../../utils/fhirPhoto';
import { useAuthServiceContext } from '../../services/AuthService.tsx';
import { ORG_LOGO_EXTENSION_URL } from '../../config/organizationExtensions';
import LoginPage from '../LoginPage/LoginPage.tsx';

// The front door of a practice's own address, ruled by Spencer 2026-09-16: the root carries the
// practice's branding, the patient sign-in and registration, a menu, and a staff login link.
//
// THE STAFF LINK IS A REAL NAVIGATION, not a route change: /staff-portal is a different mount of this
// same client, and the path is what tells it which experience to be.

const PracticeLandingPage = () => {
    const { wpOrganization } = useAuthServiceContext();
    const practice = wpOrganization.current;
    const practiceName = practice?.name ?? '';

    // Their mark only, never ours: a practice that has uploaded none gets its name and no picture.
    const attachment = (practice?.extension ?? []).find(
        (ext) => ext.url === ORG_LOGO_EXTENSION_URL,
    )?.valueAttachment;
    const logoSrc = scannedPhotoSrc(attachment) ?? null;

    return (
        <div className="min-h-screen bg-background">
            <header className="border-b border-border">
                <div className="mx-auto flex max-w-5xl flex-wrap items-center gap-4 px-4 py-4">
                    {logoSrc && <img src={logoSrc} alt={practiceName || 'This practice'} className="h-10 w-auto" />}
                    <span className="text-lg font-medium">{practiceName}</span>
                </div>
            </header>

            {/* The sign-in and registration UI itself, not a link to it: the same LoginPage the
                practice's own WordPress page mounts, so there is one sign-in screen in the product. */}
            <main>
                <LoginPage />
            </main>

            <footer className="mx-auto max-w-5xl px-4 pb-8 text-sm text-secondary">
                <a href="/staff-portal/" className="underline">Staff login</a>
            </footer>
        </div>
    );
};

export default PracticeLandingPage;