import React from "react";
import {
    View, Text, TouchableOpacity,
    Linking, ScrollView, useColorScheme,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Ionicons } from "@expo/vector-icons";

const CONTACT_EMAIL = "contact@ksan.dev";
//TODO make github page because yea
const GITHUB_URL = "https://git.ksan.dev/ksan";
const APP_VERSION = "1.0.0";

export default function HelpSupport({ onClose }: { onClose: () => void }) {
    const dark = useColorScheme() === "dark";
    const accent = dark ? "#E07B45" : "#C4622D";

    const contactLinks = [
        {
            icon: "mail-outline" as const,
            label: "Contact support",
            sub: CONTACT_EMAIL,
            color: dark ? "#5E9EF4" : "#3B7DD8",
            onPress: () => Linking.openURL(`mailto:${CONTACT_EMAIL}`),
        },
        {
            icon: "logo-github" as const,
            label: "Submit a fix on GitHub",
            sub: "Open a pull request or report a bug",
            color: dark ? "#4EC992" : "#2E9E6B",
            onPress: () => Linking.openURL(GITHUB_URL),
        },
    ];

    const aboutRows = [
        { label: "Version", value: APP_VERSION },
        { label: "Platform", value: "React Native / Expo" },
        { label: "Source code", value: "GitHub", onPress: () => Linking.openURL(GITHUB_URL) },
        { label: "Contact", value: CONTACT_EMAIL, onPress: () => Linking.openURL(`mailto:${CONTACT_EMAIL}`) },
    ];

    return (
        <SafeAreaView className={`flex-1 ${dark ? "bg-obsidian-200" : "bg-parchment-50"}`}>
            {/* Header */}
            <View className={`flex-row items-center px-4 py-4 border-b ${dark ? "border-border-dark" : "border-border-light"
                }`}>
                <Text className={`flex-1 text-xl font-display font-bold ${dark ? "text-ink-dark" : "text-ink-light"}`}>
                    Help & Support
                </Text>
                <TouchableOpacity
                    onPress={onClose}
                    className={`w-8 h-8 rounded-full items-center justify-center ${dark ? "bg-obsidian-50" : "bg-parchment-200"}`}
                >
                    <Ionicons name="close" size={18} color={dark ? "#706D67" : "#8A8278"} />
                </TouchableOpacity>
            </View>

            <ScrollView
                contentContainerStyle={{ padding: 16, paddingBottom: 48 }}
                showsVerticalScrollIndicator={false}
            >
                {/* ── Contact section ── */}
                <Text className={`px-1 pb-2 text-xs font-sans font-bold tracking-widest uppercase ${dark ? "text-muted-dark" : "text-muted-light"
                    }`}>
                    Contact
                </Text>

                <Text className={`px-1 text-sm font-sans leading-relaxed mb-4 ${dark ? "text-muted-dark" : "text-muted-light"
                    }`}>
                    Need help or found something broken? Reach out directly or open an issue on GitHub.
                </Text>

                <View className={`rounded-2xl overflow-hidden border mb-6 ${dark ? "bg-obsidian-100 border-border-dark" : "bg-surface-light border-border-light"
                    }`}>
                    {contactLinks.map((link, index) => (
                        <TouchableOpacity
                            key={link.label}
                            onPress={link.onPress}
                            activeOpacity={0.7}
                            className={`flex-row items-center px-4 py-4 ${index < contactLinks.length - 1
                                    ? `border-b ${dark ? "border-border-dark" : "border-border-light"}`
                                    : ""
                                }`}
                        >
                            <View
                                className="w-10 h-10 rounded-xl items-center justify-center mr-3"
                                style={{ backgroundColor: link.color + "20" }}
                            >
                                <Ionicons name={link.icon} size={20} color={link.color} />
                            </View>
                            <View className="flex-1">
                                <Text className={`text-sm font-sans font-semibold ${dark ? "text-ink-dark" : "text-ink-light"}`}>
                                    {link.label}
                                </Text>
                                <Text className={`text-xs font-sans mt-0.5 ${dark ? "text-muted-dark" : "text-muted-light"}`}>
                                    {link.sub}
                                </Text>
                            </View>
                            <Ionicons name="open-outline" size={15} color={dark ? "#706D67" : "#8A8278"} />
                        </TouchableOpacity>
                    ))}
                </View>

                {/* About section */}
                <Text className={`px-1 pb-2 text-xs font-sans font-bold tracking-widest uppercase ${dark ? "text-muted-dark" : "text-muted-light"
                    }`}>
                    About
                </Text>

                {/* App identity card */}
                <View
                    className={`items-center py-6 rounded-2xl border mb-4 ${dark ? "bg-obsidian-100 border-border-dark" : "bg-surface-light border-border-light"
                        }`}
                >
                    <View
                        className="w-16 h-16 rounded-2xl items-center justify-center mb-3"
                        style={{ backgroundColor: accent + "20" }}
                    >
                        <Text style={{ fontSize: 32 }}>📰</Text>
                    </View>
                    <Text className={`text-lg font-display font-bold ${dark ? "text-ink-dark" : "text-ink-light"}`}>
                        ETF Oglasi
                    </Text>
                    <Text className={`text-xs font-sans mt-1 ${dark ? "text-muted-dark" : "text-muted-light"}`}>
                        Version {APP_VERSION}
                    </Text>
                </View>

                {/* About rows */}
                <View className={`rounded-2xl overflow-hidden border ${dark ? "bg-obsidian-100 border-border-dark" : "bg-surface-light border-border-light"
                    }`}>
                    {aboutRows.map((row, index) => {
                        const isLast = index === aboutRows.length - 1;
                        const Inner = (
                            <View className={`flex-row items-center px-4 py-3.5 ${!isLast ? `border-b ${dark ? "border-border-dark" : "border-border-light"}` : ""
                                }`}>
                                <Text className={`flex-1 text-sm font-sans ${dark ? "text-muted-dark" : "text-muted-light"}`}>
                                    {row.label}
                                </Text>
                                <Text
                                    className="text-sm font-sans font-semibold"
                                    style={{ color: row.onPress ? accent : dark ? "#F0EDE8" : "#1A1714" }}
                                >
                                    {row.value}
                                </Text>
                                {row.onPress && (
                                    <Ionicons
                                        name="open-outline"
                                        size={13}
                                        color={accent}
                                        style={{ marginLeft: 4 }}
                                    />
                                )}
                            </View>
                        );

                        return row.onPress ? (
                            <TouchableOpacity key={row.label} onPress={row.onPress} activeOpacity={0.7}>
                                {Inner}
                            </TouchableOpacity>
                        ) : (
                            <View key={row.label}>{Inner}</View>
                        );
                    })}
                </View>

                {/* Footer note */}
                <Text className={`text-center text-xs font-sans mt-6 ${dark ? "text-muted-dark" : "text-muted-light"}`}>
                    Built with ♥ — contributions welcome on GitHub
                </Text>
            </ScrollView>
        </SafeAreaView>
    );
}