import { ActivityIndicator, Pressable, Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import * as Haptics from "expo-haptics";
import { useSafeAreaInsets } from "react-native-safe-area-context";

interface PublishActionBarProps {
  isPublished: boolean;
  totalItems: number;
  totalCategories: number;
  publishing: boolean;
  onPublish: () => void;
  onPreview: () => void;
  onShowQr: () => void;
}

export function PublishActionBar({
  isPublished,
  totalItems,
  totalCategories,
  publishing,
  onPublish,
  onPreview,
  onShowQr,
}: PublishActionBarProps) {
  const insets = useSafeAreaInsets();

  return (
    <View
      style={{
        position: "absolute",
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: "#FFFFFF",
        borderTopWidth: 1,
        borderTopColor: "#E7E5E4",
        paddingTop: 12,
        paddingHorizontal: 16,
        paddingBottom: Math.max(insets.bottom, 14),
        shadowColor: "#000",
        shadowOffset: { width: 0, height: -3 },
        shadowOpacity: 0.06,
        shadowRadius: 8,
        elevation: 8,
      }}
    >
      <View style={{ flexDirection: "row", gap: 10, alignItems: "center" }}>
        {/* Permanent Preview Button */}
        <Pressable
          onPress={() => {
            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => {});
            onPreview();
          }}
          style={({ pressed }) => ({
            flex: 1,
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "center",
            gap: 6,
            backgroundColor: "#FAF8F5",
            borderWidth: 1.5,
            borderColor: "rgba(200, 169, 107, 0.4)",
            borderRadius: 14,
            paddingVertical: 14,
            opacity: pressed ? 0.85 : 1,
            minHeight: 50,
          })}
        >
          <Ionicons name="eye-outline" size={18} color="#C8A96B" />
          <Text style={{ fontSize: 14, fontWeight: "700", color: "#1C1917" }}>
            Önizle
          </Text>
        </Pressable>

        {/* Publish Action Button */}
        <Pressable
          onPress={() => {
            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium).catch(() => {});
            onPublish();
          }}
          disabled={publishing || totalItems === 0}
          style={({ pressed }) => ({
            flex: 2,
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "center",
            gap: 8,
            backgroundColor: totalItems === 0 ? "#D6D3D1" : "#1C1917",
            borderRadius: 14,
            paddingVertical: 14,
            opacity: pressed || publishing ? 0.85 : 1,
            minHeight: 50,
            shadowColor: "#000",
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.12,
            shadowRadius: 6,
          })}
        >
          {publishing ? (
            <ActivityIndicator color="#FFFFFF" size="small" />
          ) : (
            <>
              <Ionicons
                name={isPublished ? "sync" : "cloud-upload-outline"}
                size={18}
                color="#FFFFFF"
              />
              <Text style={{ color: "#FFFFFF", fontSize: 15, fontWeight: "700" }}>
                {isPublished ? "Değişiklikleri Yayınla" : "Menüyü Yayınla"}
              </Text>
            </>
          )}
        </Pressable>
      </View>
    </View>
  );
}
