Gishen-Mob/components/prescription/RxStatusStepper.tsx

import { View } from "react-native";
import { Text } from "@/components/ui/Text";
import type { RxStatus } from "@/lib/stores/prescriptionStore";
import { colors, radii } from "@/lib/theme";

const STEPS: { key: RxStatus; label: string }[] = [
  { key: "submitted", label: "Submitted" },
  { key: "under_review", label: "Under review" },
  { key: "approved", label: "Approved" },
  { key: "filled", label: "Filled" },
];

const BRANCH: Partial<Record<RxStatus, { label: string; tone: "warn" | "danger" | "info" }>> = {
  queried: { label: "Queried", tone: "info" },
  rejected: { label: "Rejected", tone: "danger" },
};

function stepIndex(status: RxStatus) {
  if (status === "queried") return 1;
  if (status === "rejected") return 1;
  const i = STEPS.findIndex((s) => s.key === status);
  return i < 0 ? 0 : i;
}

export function RxStatusStepper({ status }: { status: RxStatus }) {
  const active = stepIndex(status);
  const branch = BRANCH[status];

  return (
    <View style={{ gap: 12 }}>
      <View style={{ flexDirection: "row", alignItems: "center" }}>
        {STEPS.map((step, i) => {
          const done = i <= active && !branch;
          const current = i === active;
          const muted = i > active;
          return (
            <View key={step.key} style={{ flex: 1, flexDirection: "row", alignItems: "center" }}>
              <View style={{ alignItems: "center", flex: 1 }}>
                <View
                  style={{
                    width: 22,
                    height: 22,
                    borderRadius: 11,
                    backgroundColor: done || current ? colors.brand : colors.surfaceAlt,
                    borderWidth: 2,
                    borderColor:
                      branch && current
                        ? colors.info
                        : done || current
                          ? colors.brandDeep
                          : colors.line,
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  {(done && !current) || status === "filled" && i <= active ? (
                    <View
                      style={{
                        width: 8,
                        height: 8,
                        borderRadius: 4,
                        backgroundColor: colors.ink,
                      }}
                    />
                  ) : null}
                </View>
                <Text
                  variant="micro"
                  color={muted ? colors.subtle : colors.ink}
                  style={{ marginTop: 6, textAlign: "center" }}
                >
                  {step.label}
                </Text>
              </View>
              {i < STEPS.length - 1 ? (
                <View
                  style={{
                    position: "absolute",
                    right: -2,
                    top: 10,
                    width: "30%",
                    height: 2,
                    backgroundColor: i < active ? colors.brand : colors.line,
                    marginLeft: "70%",
                  }}
                />
              ) : null}
            </View>
          );
        })}
      </View>
      {branch ? (
        <View
          style={{
            alignSelf: "flex-start",
            backgroundColor: branch.tone === "danger" ? colors.dangerSoft : colors.infoSoft,
            paddingHorizontal: 12,
            paddingVertical: 8,
            borderRadius: radii.sm,
          }}
        >
          <Text
            variant="label"
            color={branch.tone === "danger" ? colors.danger : colors.info}
          >
            Pharmacist: {branch.label}
          </Text>
        </View>
      ) : null}
    </View>
  );
}