import { router } from "expo-router";
import { useState } from "react";
import { Alert, View } from "react-native";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/ui/Button";
import { Card } from "@/components/ui/Card";
import { Chip } from "@/components/ui/Chip";
import { Field } from "@/components/ui/Field";
import { AppHeader } from "@/components/ui/Header";
import { Screen } from "@/components/ui/Screen";
import { Text } from "@/components/ui/Text";
import { useProfileModeStore } from "@/lib/stores/profileModeStore";
import { colors, gutter } from "@/lib/theme";

const DEMO_CODES = ["GISHEN-BANK", "GISHEN-NGO"] as const;

export default function JoinOrgScreen() {
  const { t } = useTranslation();
  const joinOrg = useProfileModeStore((s) => s.joinOrg);
  const [code, setCode] = useState("");

  return (
    <Screen>
      <AppHeader
        title={t("common.joinOrg")}
        subtitle="Unlock corporate allowance and benefits"
      />
      <View style={{ flex: 1, paddingHorizontal: gutter, gap: 14 }}>
        <Card elevated={false}>
          <Text variant="bodySm" color={colors.muted}>
            Enter the join code from your HR or organisation admin. Demo codes work offline.
          </Text>
          <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8, marginTop: 12 }}>
            {DEMO_CODES.map((c) => (
              <Chip key={c} label={c} selected={code === c} onPress={() => setCode(c)} size="sm" />
            ))}
          </View>
        </Card>

        <Field
          label="Join code"
          value={code}
          onChangeText={setCode}
          autoCapitalize="characters"
          icon="key-outline"
          placeholder="GISHEN-BANK"
        />

        <Button
          title="Join organisation"
          onPress={() => {
            const res = joinOrg(code);
            Alert.alert(res.ok ? "Joined" : "Failed", res.message);
            if (res.ok) router.back();
          }}
        />
      </View>
    </Screen>
  );
}