import { router, useLocalSearchParams } from "expo-router";
import { View } from "react-native";
import { Button } from "@/components/ui/Button";
import { Card } from "@/components/ui/Card";
import { AppHeader } from "@/components/ui/Header";
import { Screen } from "@/components/ui/Screen";
import { Text } from "@/components/ui/Text";
import { routes } from "@/lib/routes";
import { useOrdersStore } from "@/lib/stores/ordersStore";
import { colors, gutter } from "@/lib/theme";
import { formatETB } from "@/lib/utils";

export default function CheckoutSuccessScreen() {
  const params = useLocalSearchParams<{ id?: string }>();
  const id = Array.isArray(params.id) ? params.id[0] : params.id;
  const order = useOrdersStore((s) => s.orders.find((o) => o.id === id));

  return (
    <Screen>
      <AppHeader title="Order confirmed" />
      <View style={{ paddingHorizontal: gutter, gap: 14, paddingTop: 8 }}>
        <Card tone="brand" elevated={false}>
          <Text variant="h1">Thank you</Text>
          <Text variant="bodySm" color={colors.muted} style={{ marginTop: 8 }}>
            {order
              ? `Order ${order.id.slice(-8).toUpperCase()} · ${formatETB(order.selfPay ?? order.total)}`
              : "Your order was placed successfully."}
          </Text>
          {order?.pickupCode ? (
            <Text variant="h2" style={{ marginTop: 14, letterSpacing: 1 }}>
              Code {order.pickupCode}
            </Text>
          ) : null}
        </Card>
        <Button
          title="View order"
          onPress={() =>
            order ? router.replace(routes.orderDetail(order.id)) : router.replace(routes.orders)
          }
        />
        {order && !order.isGuestOrder && order.fulfillment === "delivery" ? (
          <Button
            title="Track delivery"
            variant="soft"
            onPress={() => router.replace(routes.tracking(order.id))}
          />
        ) : null}
        {order?.pickupCode && order.isGuestOrder ? (
          <Button
            title="Open pharmacist code card"
            variant="outline"
            onPress={() => router.replace(routes.orderCode(order.id))}
          />
        ) : null}
        <Button title="Continue shopping" variant="ghost" onPress={() => router.replace(routes.shop)} />
      </View>
    </Screen>
  );
}