import { useState } from "react";
import { Modal, View } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { Body, Button, Card, Heading, Screen, Small, Spacer } from "@/components/ui";
import { spacing } from "@/lib/theme";
import { t } from "@/lib/i18n";

const COACH_DISMISSED_KEY = "firstScanCoachDismissed";

export function useFirstScanCoach() {
  const [visible, setVisible] = useState(false);

  const showIfNeeded = async () => {
    const dismissed = await AsyncStorage.getItem(COACH_DISMISSED_KEY);
    if (dismissed !== "true") setVisible(true);
  };

  const dismiss = async () => {
    await AsyncStorage.setItem(COACH_DISMISSED_KEY, "true");
    setVisible(false);
  };

  return { visible, showIfNeeded, dismiss };
}

export function FirstScanCoach({ visible, onDismiss }: { visible: boolean; onDismiss: () => void }) {
  return (
    <Modal visible={visible} transparent animationType="fade">
      <View
        style={{
          flex: 1,
          backgroundColor: "rgba(0,0,0,0.6)",
          justifyContent: "center",
          padding: spacing.lg,
        }}
      >
        <Card>
          <Heading>{t("scan.coach.title")}</Heading>
          <Small>{t("scan.coach.body")}</Small>
          <Spacer size={spacing.md} />
          <Small>• {t("scan.coach.tip1")}</Small>
          <Small>• {t("scan.coach.tip2")}</Small>
          <Small>• {t("scan.coach.tip3")}</Small>
          <Spacer size={spacing.lg} />
          <Button label={t("scan.coach.button")} onPress={onDismiss} />
        </Card>
      </View>
    </Modal>
  );
}
