Prior Auth Screen

import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Avatar, Button, Icon, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { Mount, Press, StickyBottomBar } from "../shared";

const TABS = ["Overview", "Requirements", "AI Review", "Evidence"];

const CHECKS = [
  { label: "Procedure meets payer criteria", ok: true },
  { label: "Diagnosis documented", ok: true },
  { label: "Prior treatment documented", ok: true },
  { label: "Missing imaging report", ok: false },
];

/** Prior-auth detail — AI-assisted review idiom: status chips + segmented
 *  tabs over an approval-odds card (huge %, segment meter, criteria
 *  checklist), then a lime next-best-action card and request CTA. */
export function PriorAuthScreen({
  caseTitle = "MRI · Lumbar Spine",
  caseId = "PA-48291",
  patient = "James Carter",
  odds = 78,
  onRequest,
  onShare,
  onBack,
  onMore,
}: {
  caseTitle?: string;
  caseId?: string;
  patient?: string;
  odds?: number;
  onRequest?: () => void;
  onShare?: () => void;
  onBack?: () => void;
  onMore?: () => void;
}) {
  const haptics = useHaptic();
  const [tab, setTab] = React.useState(0);
  const filled = Math.round((odds / 100) * 10);

  return (
    <View className="flex-1 bg-[#F4F5F9]">
      <SafeAreaView className="flex-1" edges={["top"]}>
        {/* Case header — back disc, centered case id, more disc. */}
        <View className="flex-row items-center px-4 pt-1">
          <Press
            onPress={() => {
              haptics.light();
              onBack?.();
            }}
            accessibilityRole="button"
            accessibilityLabel="Go back"
            className="h-10 w-10 items-center justify-center rounded-full bg-white"
          >
            <Icon name="chevron-left" size="sm" color="foreground" />
          </Press>
          <View className="flex-1 items-center">
            <Text className="text-[17px] font-bold tracking-tight">{caseTitle}</Text>
            <Text variant="muted" className="text-[12px]">{caseId} · {patient}</Text>
          </View>
          <Press
            onPress={onMore}
            accessibilityRole="button"
            accessibilityLabel="More options"
            className="h-10 w-10 items-center justify-center rounded-full bg-white"
          >
            <Icon name="more-horizontal" size="sm" color="foreground" />
          </Press>
        </View>

        <ScrollView showsVerticalScrollIndicator={false} contentContainerClassName="gap-4 px-4 pb-32 pt-4">
          {/* Status chips — blocker first, then parties. */}
          <View className="flex-row gap-1">
            <View className="flex-row items-center gap-1 rounded-full bg-[#F59E0B] px-1.5 py-1.5">
              <View className="h-1.5 w-1.5 rounded-full bg-[#0B0B0F]" />
              <Text className="text-[10.5px] font-semibold text-[#0B0B0F]">Needs documentation</Text>
            </View>
            <View className="flex-row items-center gap-1 rounded-full bg-white px-1.5 py-1.5">
              <Avatar fallback="JC" size="sm" className="h-5 w-5" />
              <Text className="text-[10.5px] font-semibold">{patient}</Text>
            </View>
            <View className="flex-row items-center gap-1 rounded-full bg-white px-1.5 py-1.5">
              <Icon name="shield" size="sm" color="mutedForeground" />
              <Text className="text-[10.5px] font-semibold">United Healthcare</Text>
            </View>
          </View>

          {/* Dark segmented tabs — Overview active. */}
          <View className="flex-row items-center rounded-full bg-white p-1">
            {TABS.map((t, i) => (
              <Press
                key={t}
                onPress={() => {
                  haptics.selection();
                  setTab(i);
                }}
                accessibilityRole="button"
                accessibilityLabel={t}
                accessibilityState={{ selected: tab === i }}
                className={cn("flex-1 items-center rounded-full py-2", tab === i && "bg-[#0B0B0F]")}
              >
                <Text className={cn("text-[13px] font-semibold", tab === i ? "text-white" : "text-muted-foreground")}>
                  {t}
                </Text>
              </Press>
            ))}
          </View>

          {/* Approval odds — the AI estimate card. */}
          <Mount className="rounded-3xl bg-white p-5">
            <View className="flex-row items-center justify-between">
              <Text className="text-[17px] font-bold tracking-tight">Approval odds</Text>
              <View className="flex-row items-center gap-1 rounded-full bg-[#EDE9FE] px-2.5 py-1">
                <Icon name="sparkles" size="sm" color="chart2" />
                <Text className="text-[11px] font-semibold text-[#7C3AED]">AI estimate</Text>
              </View>
            </View>

            <View className="mt-2 flex-row items-end gap-4">
              <Text className="text-[64px] font-bold leading-[68px] tracking-tight tabular-nums">{odds}%</Text>
              <View className="pb-2.5">
                <View className="flex-row items-center gap-1">
                  {Array.from({ length: 10 }, (_, i) => (
                    <View
                      key={i}
                      className={cn("h-5 w-2 rounded-full", i < filled ? "bg-[#22C55E]" : "bg-[#22C55E]/15")}
                    />
                  ))}
                </View>
                <Text variant="muted" className="mt-1.5 text-[13px]">High · estimate</Text>
              </View>
            </View>

            <View className="mt-3 gap-2.5">
              {CHECKS.map((c) => (
                <View key={c.label} className="flex-row items-center gap-2.5">
                  <View
                    className={cn(
                      "h-5 w-5 items-center justify-center rounded-full",
                      c.ok ? "bg-[#22C55E]" : "bg-[#F59E0B]"
                    )}
                  >
                    <Icon name={c.ok ? "check" : "alert-triangle"} size="sm" color="primaryForeground" />
                  </View>
                  <Text className="text-[14px] font-medium">{c.label}</Text>
                </View>
              ))}
            </View>

            <Text variant="muted" className="mt-4 text-[12px] leading-4">
              An estimate from the case information available. Not a guarantee.
            </Text>
          </Mount>

          {/* Next best action — lime, unmissable. */}
          <Mount delay={80} className="gap-2 rounded-3xl bg-[#BEF04C] p-5">
            <View className="flex-row items-center gap-1.5">
              <Icon name="zap" size="sm" color="foreground" />
              <Text className="text-[13px] font-semibold text-foreground/70">Next best action</Text>
            </View>
            <Text className="text-[20px] font-bold leading-6 tracking-tight text-[#0B0B0F]">
              Request the imaging report from Dr. Wilson's office
            </Text>
          </Mount>

          {/* Timeline teaser */}
          <Mount delay={140} className="flex-row items-center gap-2.5 px-1">
            <View className="h-2.5 w-2.5 rounded-full bg-[#22C55E]" />
            <Text variant="muted" className="text-[13px] tabular-nums">Sep 18, 9:04 AM</Text>
          </Mount>
        </ScrollView>

        <StickyBottomBar className="flex-row items-center gap-3 px-5">
          <Press
            onPress={onShare}
            accessibilityRole="button"
            accessibilityLabel="Share case"
            className="h-14 w-14 items-center justify-center rounded-full bg-white"
          >
            <Icon name="share" size="md" color="foreground" />
          </Press>
          <Button
            size="lg"
            className="h-14 flex-1 bg-[#0B0B0F]"
            icon={<Icon name="mail" size="sm" color="primaryForeground" />}
            onPress={() => {
              haptics.light();
              onRequest?.();
            }}
            accessibilityLabel="Request document"
          >
            Request Document
          </Button>
        </StickyBottomBar>
      </SafeAreaView>
    </View>
  );
}
PriorAuthScreen.displayName = "PriorAuthScreen";

Recreate the "Prior Auth Screen" screen in React Native using LumioUI.

Goal: AI-assisted case review: status chips, segmented tabs, approval-odds card with segment meter + checklist, lime next-action card Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.

## Setup

Fastest path — install the screen plus its component deps:

```bash
npx lumioui add health-prior-auth
```

Or pull just the components: `npx lumioui add avatar button icon text`

Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*

Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.

## Components — how, where, when

### `avatar` — Circular user image with fallback initials and status dot.
- `<Avatar>` ×1

### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×1

### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×8

### `text` — Themed type scale from caption to display.
- `<Text>` ×15

## Conventions (non-negotiable)

- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.

## Deliverable

One file: `screens/health/prior-auth.tsx` exporting PriorAuthScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.

## Reference implementation

The LumioUI source for this screen — reproduce it faithfully:

```tsx
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Avatar, Button, Icon, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { Mount, Press, StickyBottomBar } from "../shared";

const TABS = ["Overview", "Requirements", "AI Review", "Evidence"];

const CHECKS = [
  { label: "Procedure meets payer criteria", ok: true },
  { label: "Diagnosis documented", ok: true },
  { label: "Prior treatment documented", ok: true },
  { label: "Missing imaging report", ok: false },
];

/** Prior-auth detail — AI-assisted review idiom: status chips + segmented
 *  tabs over an approval-odds card (huge %, segment meter, criteria
 *  checklist), then a lime next-best-action card and request CTA. */
export function PriorAuthScreen({
  caseTitle = "MRI · Lumbar Spine",
  caseId = "PA-48291",
  patient = "James Carter",
  odds = 78,
  onRequest,
  onShare,
  onBack,
  onMore,
}: {
  caseTitle?: string;
  caseId?: string;
  patient?: string;
  odds?: number;
  onRequest?: () => void;
  onShare?: () => void;
  onBack?: () => void;
  onMore?: () => void;
}) {
  const haptics = useHaptic();
  const [tab, setTab] = React.useState(0);
  const filled = Math.round((odds / 100) * 10);

  return (
    <View className="flex-1 bg-[#F4F5F9]">
      <SafeAreaView className="flex-1" edges={["top"]}>
        {/* Case header — back disc, centered case id, more disc. */}
        <View className="flex-row items-center px-4 pt-1">
          <Press
            onPress={() => {
              haptics.light();
              onBack?.();
            }}
            accessibilityRole="button"
            accessibilityLabel="Go back"
            className="h-10 w-10 items-center justify-center rounded-full bg-white"
          >
            <Icon name="chevron-left" size="sm" color="foreground" />
          </Press>
          <View className="flex-1 items-center">
            <Text className="text-[17px] font-bold tracking-tight">{caseTitle}</Text>
            <Text variant="muted" className="text-[12px]">{caseId} · {patient}</Text>
          </View>
          <Press
            onPress={onMore}
            accessibilityRole="button"
            accessibilityLabel="More options"
            className="h-10 w-10 items-center justify-center rounded-full bg-white"
          >
            <Icon name="more-horizontal" size="sm" color="foreground" />
          </Press>
        </View>

        <ScrollView showsVerticalScrollIndicator={false} contentContainerClassName="gap-4 px-4 pb-32 pt-4">
          {/* Status chips — blocker first, then parties. */}
          <View className="flex-row gap-1">
            <View className="flex-row items-center gap-1 rounded-full bg-[#F59E0B] px-1.5 py-1.5">
              <View className="h-1.5 w-1.5 rounded-full bg-[#0B0B0F]" />
              <Text className="text-[10.5px] font-semibold text-[#0B0B0F]">Needs documentation</Text>
            </View>
            <View className="flex-row items-center gap-1 rounded-full bg-white px-1.5 py-1.5">
              <Avatar fallback="JC" size="sm" className="h-5 w-5" />
              <Text className="text-[10.5px] font-semibold">{patient}</Text>
            </View>
            <View className="flex-row items-center gap-1 rounded-full bg-white px-1.5 py-1.5">
              <Icon name="shield" size="sm" color="mutedForeground" />
              <Text className="text-[10.5px] font-semibold">United Healthcare</Text>
            </View>
          </View>

          {/* Dark segmented tabs — Overview active. */}
          <View className="flex-row items-center rounded-full bg-white p-1">
            {TABS.map((t, i) => (
              <Press
                key={t}
                onPress={() => {
                  haptics.selection();
                  setTab(i);
                }}
                accessibilityRole="button"
                accessibilityLabel={t}
                accessibilityState={{ selected: tab === i }}
                className={cn("flex-1 items-center rounded-full py-2", tab === i && "bg-[#0B0B0F]")}
              >
                <Text className={cn("text-[13px] font-semibold", tab === i ? "text-white" : "text-muted-foreground")}>
                  {t}
                </Text>
              </Press>
            ))}
          </View>

          {/* Approval odds — the AI estimate card. */}
          <Mount className="rounded-3xl bg-white p-5">
            <View className="flex-row items-center justify-between">
              <Text className="text-[17px] font-bold tracking-tight">Approval odds</Text>
              <View className="flex-row items-center gap-1 rounded-full bg-[#EDE9FE] px-2.5 py-1">
                <Icon name="sparkles" size="sm" color="chart2" />
                <Text className="text-[11px] font-semibold text-[#7C3AED]">AI estimate</Text>
              </View>
            </View>

            <View className="mt-2 flex-row items-end gap-4">
              <Text className="text-[64px] font-bold leading-[68px] tracking-tight tabular-nums">{odds}%</Text>
              <View className="pb-2.5">
                <View className="flex-row items-center gap-1">
                  {Array.from({ length: 10 }, (_, i) => (
                    <View
                      key={i}
                      className={cn("h-5 w-2 rounded-full", i < filled ? "bg-[#22C55E]" : "bg-[#22C55E]/15")}
                    />
                  ))}
                </View>
                <Text variant="muted" className="mt-1.5 text-[13px]">High · estimate</Text>
              </View>
            </View>

            <View className="mt-3 gap-2.5">
              {CHECKS.map((c) => (
                <View key={c.label} className="flex-row items-center gap-2.5">
                  <View
                    className={cn(
                      "h-5 w-5 items-center justify-center rounded-full",
                      c.ok ? "bg-[#22C55E]" : "bg-[#F59E0B]"
                    )}
                  >
                    <Icon name={c.ok ? "check" : "alert-triangle"} size="sm" color="primaryForeground" />
                  </View>
                  <Text className="text-[14px] font-medium">{c.label}</Text>
                </View>
              ))}
            </View>

            <Text variant="muted" className="mt-4 text-[12px] leading-4">
              An estimate from the case information available. Not a guarantee.
            </Text>
          </Mount>

          {/* Next best action — lime, unmissable. */}
          <Mount delay={80} className="gap-2 rounded-3xl bg-[#BEF04C] p-5">
            <View className="flex-row items-center gap-1.5">
              <Icon name="zap" size="sm" color="foreground" />
              <Text className="text-[13px] font-semibold text-foreground/70">Next best action</Text>
            </View>
            <Text className="text-[20px] font-bold leading-6 tracking-tight text-[#0B0B0F]">
              Request the imaging report from Dr. Wilson's office
            </Text>
          </Mount>

          {/* Timeline teaser */}
          <Mount delay={140} className="flex-row items-center gap-2.5 px-1">
            <View className="h-2.5 w-2.5 rounded-full bg-[#22C55E]" />
            <Text variant="muted" className="text-[13px] tabular-nums">Sep 18, 9:04 AM</Text>
          </Mount>
        </ScrollView>

        <StickyBottomBar className="flex-row items-center gap-3 px-5">
          <Press
            onPress={onShare}
            accessibilityRole="button"
            accessibilityLabel="Share case"
            className="h-14 w-14 items-center justify-center rounded-full bg-white"
          >
            <Icon name="share" size="md" color="foreground" />
          </Press>
          <Button
            size="lg"
            className="h-14 flex-1 bg-[#0B0B0F]"
            icon={<Icon name="mail" size="sm" color="primaryForeground" />}
            onPress={() => {
              haptics.light();
              onRequest?.();
            }}
            accessibilityLabel="Request document"
          >
            Request Document
          </Button>
        </StickyBottomBar>
      </SafeAreaView>
    </View>
  );
}
PriorAuthScreen.displayName = "PriorAuthScreen";
```

Screen: https://lumioui.dev/screens/health-prior-auth