import { ArrowRight } from 'lucide-react';
import DemoEntranceBanner from './DemoEntranceBanner';
import { DEMO_ROLES, DEMO_STAFF_ROLES, demoAppOrigin, demoEntryUrl, type DemoRole } from '../../utils/demoEntrance';
import DemoExitLink from './DemoExitLink';

// One role choice: what this role is, the three things to try, and the way in. A link rather than a
// button, because choosing a role goes somewhere; nothing is asked or kept on this page.
const RoleCard = ({ demoRole: role, cta, origin }: { demoRole: DemoRole; cta: string; origin: string | undefined }) => {
    const choice = DEMO_ROLES[role];
    const href = demoEntryUrl(role, origin);

    return (
        <li className="ak-card ak-card--panel flex flex-col gap-3">
            <h3>{choice.label}</h3>
            <ul className="list-disc space-y-1 pl-5">
                {choice.tries.map((tryThis) => <li key={tryThis}>{tryThis}</li>)}
            </ul>
            {href && (
                <a href={href} className="btn btn-blue mt-auto inline-flex items-center gap-2 self-start">
                    {cta}
                    <ArrowRight aria-hidden size={16} />
                </a>
            )}
        </li>
    );
};

// The demo origin is passed in so a test can state it; the page itself reads the reviewed configuration.
const DemoLanding = ({ origin = demoAppOrigin() }: { origin?: string }) => (
    <div className="min-h-screen bg-[var(--paper)]">
        <DemoEntranceBanner />

        <main className="mx-auto max-w-5xl space-y-8 px-4 py-8">
            <header className="space-y-2">
                <h1 className="ak-page-title">Try Akashic</h1>
                <p>
                    Explore a fictional clinic as a patient or as its staff. The clinic is set up for your demo visit.
                    When your demo ends, your changes won't carry into the next visitor's clinic.
                </p>
                {origin ? (
                    <p className="text-sm text-muted-foreground">
                        The demo opens on our test environment, so the address changes when you choose a role.
                    </p>
                ) : (
                    <p role="status">The demo is not available right now. Please come back later.</p>
                )}
            </header>

            <section aria-labelledby="demo-patient" className="space-y-3">
                <h2 id="demo-patient">Try as a patient</h2>
                <ul className="grid gap-4 md:grid-cols-3">
                    <RoleCard demoRole="patient" cta="Try as a patient" origin={origin} />
                </ul>
            </section>

            <section aria-labelledby="demo-staff" className="space-y-3">
                <h2 id="demo-staff">Try as healthcare staff</h2>
                <ul className="grid gap-4 md:grid-cols-3">
                    {DEMO_STAFF_ROLES.map((role) => (
                        <RoleCard key={role} demoRole={role} cta={'Try as ' + DEMO_ROLES[role].label.toLowerCase()} origin={origin} />
                    ))}
                </ul>
            </section>
            <p><DemoExitLink /></p>
        </main>
    </div>
);

export default DemoLanding;