import * as ImagePicker from "expo-image-picker";
import { useState } from "react";
import { ActivityIndicator, Button, Image, StyleSheet, Text, TextInput, View } from "react-native";

const BASE_URL =
  "https://shsf-api.reversed.dev/api/exec/15/1c44d8b5-4065-4a54-b259-748561021329";

export function ImagePage() {
  const [caption, setCaption] = useState("");
  const [uploading, setUploading] = useState(false);
  const [previewUri, setPreviewUri] = useState<string | null>(null);

  const handleTakePhoto = async () => {
    const { granted } = await ImagePicker.requestCameraPermissionsAsync();
    if (!granted) {
      alert("Camera permission is required to take photos.");
      return;
    }

    const result = await ImagePicker.launchCameraAsync({
      mediaTypes: "images",
      quality: 1,
      base64: true,
    });

    if (result.canceled) return;

    const asset = result.assets[0];
    setPreviewUri(asset.uri);
    setUploading(true);

    try {
      const res = await fetch(`${BASE_URL}/push_image`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ image_b64: asset.base64, caption }),
      });
      const data = await res.json();
      if (data.status !== "success") throw new Error(data.message ?? "Upload failed");
    } catch (error) {
      console.error("Upload error:", error);
      alert("Failed to upload image.");
    } finally {
      setUploading(false);
    }
  };

  const handleDismiss = () => {
    fetch(`${BASE_URL}/push_dismiss_image`, { method: "POST" })
      .then((r) => r.json())
      .then((data) => {
        if (data.status !== "success") alert("Failed to dismiss image.");
      })
      .catch((error) => {
        console.error("Error dismissing image:", error);
        alert("Error dismissing image.");
      });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Image Popup</Text>
      <Text style={styles.subtitle}>Show a photo on the TV with an optional caption.</Text>

      <View style={styles.field}>
        <Text style={styles.label}>Caption (optional)</Text>
        <TextInput
          style={styles.input}
          placeholder="Add a caption..."
          value={caption}
          onChangeText={setCaption}
        />
      </View>

      {previewUri && (
        <Image source={{ uri: previewUri }} style={styles.preview} />
      )}

      {uploading ? (
        <ActivityIndicator size="large" style={{ marginTop: 8 }} />
      ) : (
        <View style={styles.actions}>
          <View style={styles.actionBtn}>
            <Button title="Take Photo & Show" onPress={handleTakePhoto} />
          </View>
          <View style={styles.actionBtn}>
            <Button title="Dismiss" onPress={handleDismiss} color="#e55" />
          </View>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#f9f9f9",
    gap: 20,
  },
  title: {
    fontSize: 26,
    fontWeight: "700",
    color: "#111",
    marginTop: 8,
  },
  subtitle: {
    fontSize: 14,
    color: "#888",
    marginTop: -12,
  },
  field: {
    gap: 6,
  },
  label: {
    fontSize: 13,
    fontWeight: "600",
    color: "#555",
    textTransform: "uppercase",
    letterSpacing: 0.5,
  },
  input: {
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 10,
    padding: 12,
    fontSize: 16,
    backgroundColor: "#fff",
  },
  preview: {
    width: "100%",
    height: 200,
    borderRadius: 10,
    resizeMode: "cover",
  },
  actions: {
    flexDirection: "row",
    gap: 12,
    marginTop: 4,
  },
  actionBtn: {
    flex: 1,
  },
});