Gishen-Mob/components/prescription/RxCareCard.tsx

import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import { Image, Pressable, View } from "react-native";
import { Badge } from "@/components/ui/Badge";
import { Card } from "@/components/ui/Card";
import { DoseReminderPanel } from "@/components/ui/DoseReminderPanel";
import { Text } from "@/components/ui/Text";
import { routes } from "@/lib/routes";
import type { Prescription, Reminder } from "@/lib/stores/prescriptionStore";
import { colors } from "@/lib/theme";

const statusTone = {
  submitted: "neutral",
  under_review: "warn",
  approved: "brand",
  queried: "info",
  rejected: "danger",
  filled: "brand",
} as const;

function refillDays(rx: Prescription) {
  if (!rx.lastFilledAt) return null;
  const due = new Date(rx.lastFilledAt);
  due.setDate(due.getDate() + rx.daysSupply);
  return Math.ceil((due.getTime() - Date.now()) / (1000 * 60 * 60 * 24));
}

export function RxCareCard({
  rx,
  reminder,
  expanded,
  onToggleExpand,
}: {
  rx: Prescription;
  reminder?: Reminder;
  expanded: boolean;
  onToggleExpand: () => void;
}) {
  const dueIn = refillDays(rx);
  const thumb = rx.imageUris[0];

  return (
    <Card elevated style={{ padding: 0, overflow: "hidden" }}>
      <Pressable onPress={() => router.push(routes.rxDetail(rx.id))} style={{ padding: 14 }}>
        <View style={{ flexDirection: "row", gap: 12 }}>
          <View
            style={{
              width: 64,
              height: 64,
              borderRadius: 16,
              backgroundColor: colors.brandSoft,
              alignItems: "center",
              justifyContent: "center",
              overflow: "hidden",
            }}
          >
            {thumb ? (
              <Image source={{ uri: thumb }} style={{ width: 64, height: 64 }} />
            ) : (
              <Ionicons name="medkit" size={26} color={colors.brandText} />
            )}
          </View>
          <View style={{ flex: 1 }}>
            <View style={{ flexDirection: "row", gap: 8, alignItems: "flex-start" }}>
              <Text variant="h3" style={{ flex: 1 }} numberOfLines={2}>
                {rx.medicineName}
              </Text>
              <Badge label={rx.status.replace("_", " ")} tone={statusTone[rx.status]} />
            </View>
            <Text variant="caption" color={colors.subtle} style={{ marginTop: 4 }}>
              {rx.patientName} · {rx.medicines.length} medicine
              {rx.medicines.length === 1 ? "" : "s"} · {rx.daysSupply}d supply
            </Text>
            <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 6, marginTop: 10 }}>
              {reminder?.enabled ? (
                <Badge
                  label={`Reminders ${reminder.times.join(" · ")}`}
                  tone="brand"
                  icon="alarm-outline"
                />
              ) : (
                <Badge label="No dose reminder" tone="warn" icon="alarm-outline" />
              )}
              {dueIn !== null ? (
                <Badge
                  label={dueIn <= 0 ? "Refill overdue" : `Refill in ${dueIn}d`}
                  tone={dueIn <= 3 ? "warn" : "neutral"}
                />
              ) : (
                <Badge label="Awaiting fill" tone="info" />
              )}
            </View>
          </View>
        </View>
      </Pressable>

      <View style={{ flexDirection: "row", borderTopWidth: 1, borderTopColor: colors.line }}>
        <Pressable
          onPress={onToggleExpand}
          style={{
            flex: 1,
            paddingVertical: 12,
            alignItems: "center",
            flexDirection: "row",
            justifyContent: "center",
            gap: 6,
          }}
        >
          <Ionicons
            name={expanded ? "chevron-up" : "notifications-outline"}
            size={16}
            color={colors.brandText}
          />
          <Text variant="label" color={colors.brandText}>
            {expanded ? "Hide setup" : reminder?.enabled ? "Edit reminder" : "Set reminder"}
          </Text>
        </Pressable>
        <View style={{ width: 1, backgroundColor: colors.line }} />
        <Pressable
          onPress={() => router.push(routes.rxCalendar(rx.id))}
          style={{
            flex: 1,
            paddingVertical: 12,
            alignItems: "center",
            flexDirection: "row",
            justifyContent: "center",
            gap: 6,
          }}
        >
          <Ionicons name="calendar-outline" size={16} color={colors.brandText} />
          <Text variant="label" color={colors.brandText}>
            Calendar
          </Text>
        </Pressable>
      </View>

      {expanded ? (
        <View style={{ paddingHorizontal: 14, paddingBottom: 14 }}>
          <DoseReminderPanel rx={rx} reminder={reminder} compact />
        </View>
      ) : null}
    </Card>
  );
}