import { scannedPhotoSrc } from '../../utils/fhirPhoto';
import type { ReactNode } from 'react';
import type { Organization } from 'fhir/r4';
import { assetUrl } from '../../utils/assetUrl';
import { Card, CardBody, CardHeader } from '../../components/ui/wp-card';
import { initialsOf } from '../../components/ui/org-badge';
import { Flex, FlexBlock } from '../../components/ui/flex';
import { Text } from '../../components/ui/text';
import { ORG_LOGO_EXTENSION_URL } from '../../config/organizationExtensions';
import './LoginPage.css';

// No uploaded mark shows the practice name, never Akashic's logo on a practice's sign-in screen.
// `null`, not "": an <img src=""> requests the page itself and draws a broken-image box.
const practiceLogoSrc = (organization?: Organization | null): string | null => {
    const attachment = (organization?.extension ?? []).find(
        (ext) => ext.url === ORG_LOGO_EXTENSION_URL
    )?.valueAttachment;
    return scannedPhotoSrc(attachment) ?? null;
};

type PracticeDoorCardProps = {
    organization?: Organization | null;
    /** The line under the practice name, e.g. "Patient portal". */
    sub?: string;
    maxWidth?: string;
    children: ReactNode;
};

// The practice's door: its mark and name heading one card, "Powered by" Akashic beneath it. Sign-in
// and the closed door share it, so a practice's patients meet the same front whatever it says.
const PracticeDoorCard = ({ organization, sub, maxWidth = '450px', children }: PracticeDoorCardProps) => {
    const practiceName = organization?.name?.trim();
    const logoSrc = practiceLogoSrc(organization);
    /* Their mark, so their name - and the name is beside it on screen now, so the alt only has to
       say whose mark this is for somebody who cannot see it. */
    const logoAlt = practiceName || 'Your practice';

    return (
        <Flex justify="center" align="center" className="min-h-screen px-4">
            <FlexBlock style={{ maxWidth, width: '100%' }}>
                <Card size="large">
                    {/* The mark and the name, centred, and the header is dropped entirely when the
                        practice has given us neither - an empty bordered strip above the form is
                        worse than no strip at all. */}
                    {(logoSrc || practiceName) && (
                        <CardHeader className="ahr-login__brand" isBorderless>
                            {/* Organization logos are always round, sign-in included. */}
                            {logoSrc ? (
                                <span className="ak-org-mark ak-org-mark--lg">
                                    <img src={logoSrc} alt={logoAlt}/>
                                </span>
                            ) : practiceName && (
                                <span className="ak-org-mark ak-org-mark--lg" aria-hidden="true">{initialsOf(practiceName)}</span>
                            )}
                            {practiceName && <p className="ahr-login__org">{practiceName}</p>}
                            {practiceName && sub && <p className="ahr-login__sub">{sub}</p>}
                        </CardHeader>
                    )}
                    <CardBody>
                        {children}
                    </CardBody>
                </Card>
                <Flex direction="column" align="center" gap={1} className="login-poweredby">
                    <Text>
                        Powered by
                    </Text>
                    <img src={assetUrl('logo.png')} alt="Akashic"/>
                </Flex>
            </FlexBlock>
        </Flex>
    );
};

export default PracticeDoorCard;