import React from "react";
import { View } from "react-native";
import { useRouter, useLocalSearchParams } from "expo-router";
import { AppContainer, MyText, MyButton, tw } from "common-ui";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";

export default function OrderSuccess() {
  const router = useRouter();
  const params = useLocalSearchParams();

  // You can access order details from params if passed
  const orderId = params.orderId as string;
  const totalAmount = params.totalAmount as string;

  return (
    <AppContainer>
      <View style={tw`flex-1 justify-center items-center px-6 py-8`}>
        {/* Success Icon */}
        <View
          style={tw`w-24 h-24 bg-green-100 rounded-full items-center justify-center mb-6`}
        >
          <MaterialIcons name="check-circle" size={48} color="#10B981" />
        </View>

        {/* Success Message */}
        <MyText
          weight="bold"
          style={tw`text-3xl mb-4 text-center text-gray-900`}
        >
          Order Placed Successfully!
        </MyText>

        <MyText style={tw`text-lg text-center text-gray-600 mb-2`}>
          Thank you for your order
        </MyText>

        <MyText style={tw`text-base text-center text-gray-500 mb-8`}>
          Your order will be delivered as per your selected slot
        </MyText>

        {/* Order Details (if available) */}
        {orderId && (
          <View style={tw`bg-gray-50 px-4 py-3 rounded-lg mb-8`}>
            <MyText style={tw`text-sm text-gray-600 text-center`}>
              Order #{orderId}
            </MyText>
            {totalAmount && (
              <MyText weight="semibold" style={tw`text-lg text-gray-900 text-center mt-1`}>
                Total: ₹{totalAmount}
              </MyText>
            )}
          </View>
        )}

        {/* Action Buttons */}
        <View style={tw`w-full gap-3`}>
          <MyButton
            textContent="Continue Shopping"
            onPress={() => router.replace("/(drawer)/(tabs)/home")}
            fillColor="brand500"
            textColor="white1"
            fullWidth
          />

          <MyButton
            textContent="View My Orders"
            onPress={() => {
              router.dismissAll();
              router.replace("/(drawer)/(tabs)/me/my-orders");
            }}
            fillColor="gray1"
            textColor="black1"
            fullWidth
          />
        </View>
      </View>
    </AppContainer>
  );
}