import React from "react";
import { View, Text, TouchableOpacity, Image } from "react-native";
import QRCode from "react-native-qrcode-svg";
import ScreenWrapper from "~/components/ui/ScreenWrapper";
import { Button } from "~/components/ui/button";
import { router, useLocalSearchParams } from "expo-router";
import { useTranslation } from "react-i18next";

export default function EventQRScreen() {
  const params = useLocalSearchParams<{
    code?: string;
    packageName?: string;
    qrImage?: string;
  }>();
  const { t } = useTranslation();

  const code = params.code || "AMB-123-2025";
  const packageName = params.packageName || "Package 2";
  const qrImage = params.qrImage as string | undefined;
  console.log("qrimage", params.qrImage);

  const handleClose = () => {
    router.back();
  };

  const handlePrint = () => {
    router.back();
  };

  return (
    <ScreenWrapper edges={[]}>
      <View className="flex-1 bg-white">
        {/* QR image */}
        <View className="flex-1 items-center justify-center px-5">
          <View className="items-center justify-center">
            {qrImage ? (
              <Image
                source={{ uri: qrImage }}
                style={{ width: 200, height: 200 }}
                resizeMode="contain"
              />
            ) : (
              <QRCode
                value={code}
                size={200}
                color="#0F7B4A"
                backgroundColor="transparent"
              />
            )}
          </View>

          <View className="mt-6 items-center">
            <Text className="text-sm font-dmsans text-[#6B7280]">
              {packageName}
            </Text>
          </View>
        </View>

        {/* Bottom buttons */}
        <View className="w-full flex flex-col px-5 pb-10 gap-4">
          <Button
            className="h-13 rounded-full bg-[#FFB668]"
            onPress={handlePrint}
          >
            <Text className="text-white font-dmsans-bold text-base">
              {t("eventqrscreen.printButton")}
            </Text>
          </Button>

          <Button
            className="h-13 rounded-full bg-[#0F7B4A]"
            onPress={handleClose}
          >
            <Text className="text-white font-dmsans-bold text-base">
              {t("eventqrscreen.goBackButton")}
            </Text>
          </Button>
        </View>
      </View>
    </ScreenWrapper>
  );
}