import AsyncStorage from "@react-native-async-storage/async-storage";
import * as LocalAuthentication from "expo-local-authentication";
import * as SQLite from "expo-sqlite";
import React, { useEffect, useState } from "react";
import {
  ActivityIndicator,
  Alert,
  KeyboardAvoidingView,
  Platform,
  SafeAreaView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import CalendarSync from "../../components/CalendarSync";

// Types
interface User {
  id: number;
  email: string;
  firstName: string;
  lastName: string;
  createdAt: string;
}

// Simple Auth Component
export default function AuthScreen() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [loading, setLoading] = useState(true);
  const [currentUser, setCurrentUser] = useState<User | null>(null);
  const [authMode, setAuthMode] = useState<"login" | "register">("login");

  // Form states
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [biometricSupported, setBiometricSupported] = useState(false);
  const [showCalendar, setShowCalendar] = useState(false);

  // Database
  const [db, setDb] = useState<SQLite.SQLiteDatabase | null>(null);

  useEffect(() => {
    initApp();
  }, []);

  const initApp = async () => {
    try {
      // Initialize database
      const database = await SQLite.openDatabaseAsync("AuthApp.db");
      setDb(database);

      await database.execAsync(`
        CREATE TABLE IF NOT EXISTS users (
          id INTEGER PRIMARY KEY AUTOINCREMENT,
          email TEXT UNIQUE NOT NULL,
          firstName TEXT NOT NULL,
          lastName TEXT NOT NULL,
          password TEXT NOT NULL,
          createdAt TEXT NOT NULL
        )
      `);

      // Check biometric support
      const compatible = await LocalAuthentication.hasHardwareAsync();
      const enrolled = await LocalAuthentication.isEnrolledAsync();
      setBiometricSupported(compatible && enrolled);

      // Check if user is logged in
      const session = await AsyncStorage.getItem("@user_session");
      if (session) {
        const userData = JSON.parse(session);
        setCurrentUser(userData.user);
        setIsLoggedIn(true);
      }
    } catch (error) {
      console.error("App initialization failed:", error);
    } finally {
      setLoading(false);
    }
  };

  const handleRegister = async () => {
    if (!email || !password || !firstName || !lastName) {
      Alert.alert("Fehler", "Bitte füllen Sie alle Felder aus.");
      return;
    }

    if (password.length < 6) {
      Alert.alert(
        "Fehler",
        "Das Passwort muss mindestens 6 Zeichen lang sein."
      );
      return;
    }

    if (!db) return;

    try {
      setLoading(true);

      const createdAt = new Date().toISOString();
      const result = await db.runAsync(
        "INSERT INTO users (email, firstName, lastName, password, createdAt) VALUES (?, ?, ?, ?, ?)",
        [email, firstName, lastName, password, createdAt]
      );

      const newUser: User = {
        id: result.lastInsertRowId,
        email,
        firstName,
        lastName,
        createdAt,
      };

      // Save session
      await AsyncStorage.setItem(
        "@user_session",
        JSON.stringify({ user: newUser })
      );

      setCurrentUser(newUser);
      setIsLoggedIn(true);
      Alert.alert("Erfolg", "Registrierung erfolgreich!");
    } catch (error: any) {
      if (error.message?.includes("UNIQUE constraint failed")) {
        Alert.alert(
          "Fehler",
          "Ein Benutzer mit dieser E-Mail existiert bereits."
        );
      } else {
        Alert.alert("Fehler", "Registrierung fehlgeschlagen.");
      }
    } finally {
      setLoading(false);
    }
  };

  const handleLogin = async () => {
    if (!email || !password) {
      Alert.alert("Fehler", "Bitte füllen Sie alle Felder aus.");
      return;
    }

    if (!db) return;

    try {
      setLoading(true);

      const result = (await db.getFirstAsync(
        "SELECT * FROM users WHERE email = ? AND password = ?",
        [email, password]
      )) as any;

      if (result) {
        const user: User = {
          id: result.id,
          email: result.email,
          firstName: result.firstName,
          lastName: result.lastName,
          createdAt: result.createdAt,
        };

        // Save session
        await AsyncStorage.setItem("@user_session", JSON.stringify({ user }));

        setCurrentUser(user);
        setIsLoggedIn(true);
        Alert.alert("Erfolg", "Anmeldung erfolgreich!");
      } else {
        Alert.alert("Fehler", "Ungültige E-Mail oder Passwort.");
      }
    } catch (error) {
      Alert.alert("Fehler", "Anmeldung fehlgeschlagen.");
    } finally {
      setLoading(false);
    }
  };

  const handleBiometricAuth = async () => {
    try {
      const result = await LocalAuthentication.authenticateAsync({
        promptMessage: "Biometrische Authentifizierung",
        cancelLabel: "Abbrechen",
        fallbackLabel: "Passcode verwenden",
      });

      if (result.success) {
        // For demo, auto-login first user
        if (!db) return;

        const user = (await db.getFirstAsync(
          "SELECT * FROM users LIMIT 1"
        )) as any;
        if (user) {
          const userData: User = {
            id: user.id,
            email: user.email,
            firstName: user.firstName,
            lastName: user.lastName,
            createdAt: user.createdAt,
          };

          await AsyncStorage.setItem(
            "@user_session",
            JSON.stringify({ user: userData })
          );
          setCurrentUser(userData);
          setIsLoggedIn(true);
        }
      }
    } catch (error) {
      Alert.alert("Fehler", "Biometrische Authentifizierung fehlgeschlagen.");
    }
  };

  const handleLogout = async () => {
    try {
      await AsyncStorage.removeItem("@user_session");
      setCurrentUser(null);
      setIsLoggedIn(false);
      setEmail("");
      setPassword("");
      setFirstName("");
      setLastName("");
    } catch (error) {
      Alert.alert("Fehler", "Abmeldung fehlgeschlagen.");
    }
  };

  if (loading) {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#007AFF" />
          <Text style={styles.loadingText}>Lade App...</Text>
        </View>
      </SafeAreaView>
    );
  }

  if (isLoggedIn && currentUser) {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.welcomeContainer}>
          <Text style={styles.welcomeTitle}>Willkommen zurück!</Text>
          <Text style={styles.userName}>
            {currentUser.firstName} {currentUser.lastName}
          </Text>

          <View style={styles.userInfo}>
            <Text style={styles.infoLabel}>E-Mail:</Text>
            <Text style={styles.infoValue}>{currentUser.email}</Text>

            <Text style={styles.infoLabel}>Mitglied seit:</Text>
            <Text style={styles.infoValue}>
              {new Date(currentUser.createdAt).toLocaleDateString("de-DE")}
            </Text>
          </View>

          <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
            <Text style={styles.logoutButtonText}>Abmelden</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={[styles.submitButton, { marginTop: 20 }]}
            onPress={() => setShowCalendar((prev) => !prev)}
          >
            <Text style={styles.submitButtonText}>
              {showCalendar ? "Kalender ausblenden" : "Kalender anzeigen"}
            </Text>
          </TouchableOpacity>

          {showCalendar && <CalendarSync />}
        </View>
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={styles.container}>
      <KeyboardAvoidingView
        style={styles.keyboardView}
        behavior={Platform.OS === "ios" ? "padding" : "height"}
      >
        <View style={styles.authContainer}>
          <Text style={styles.title}>
            {authMode === "login" ? "Anmelden" : "Registrieren"}
          </Text>

          {authMode === "register" && (
            <>
              <TextInput
                style={styles.input}
                placeholder="Vorname"
                value={firstName}
                onChangeText={setFirstName}
                autoCapitalize="words"
              />

              <TextInput
                style={styles.input}
                placeholder="Nachname"
                value={lastName}
                onChangeText={setLastName}
                autoCapitalize="words"
              />
            </>
          )}

          <TextInput
            style={styles.input}
            placeholder="E-Mail"
            value={email}
            onChangeText={setEmail}
            keyboardType="email-address"
            autoCapitalize="none"
          />

          <TextInput
            style={styles.input}
            placeholder="Passwort"
            value={password}
            onChangeText={setPassword}
            secureTextEntry
            autoCapitalize="none"
          />

          <TouchableOpacity
            style={styles.submitButton}
            onPress={authMode === "login" ? handleLogin : handleRegister}
            disabled={loading}
          >
            {loading ? (
              <ActivityIndicator color="white" />
            ) : (
              <Text style={styles.submitButtonText}>
                {authMode === "login" ? "Anmelden" : "Registrieren"}
              </Text>
            )}
          </TouchableOpacity>

          {biometricSupported && authMode === "login" && (
            <TouchableOpacity
              style={styles.biometricButton}
              onPress={handleBiometricAuth}
            >
              <Text style={styles.biometricButtonText}>
                Mit Face ID / Touch ID anmelden
              </Text>
            </TouchableOpacity>
          )}

          <TouchableOpacity
            style={styles.switchButton}
            onPress={() =>
              setAuthMode(authMode === "login" ? "register" : "login")
            }
          >
            <Text style={styles.switchButtonText}>
              {authMode === "login"
                ? "Noch kein Konto? Registrieren"
                : "Bereits ein Konto? Anmelden"}
            </Text>
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f8f9fa",
  },
  keyboardView: {
    flex: 1,
  },
  authContainer: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 30,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  loadingText: {
    marginTop: 10,
    fontSize: 16,
    color: "#666",
  },
  welcomeContainer: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 30,
  },
  welcomeTitle: {
    fontSize: 28,
    fontWeight: "bold",
    color: "#333",
    textAlign: "center",
    marginBottom: 10,
  },
  userName: {
    fontSize: 20,
    color: "#666",
    textAlign: "center",
    marginBottom: 40,
  },
  userInfo: {
    backgroundColor: "white",
    padding: 20,
    borderRadius: 10,
    marginBottom: 30,
    elevation: 2,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  infoLabel: {
    fontSize: 14,
    color: "#666",
    marginTop: 10,
  },
  infoValue: {
    fontSize: 16,
    color: "#333",
    fontWeight: "500",
    marginBottom: 5,
  },
  title: {
    fontSize: 32,
    fontWeight: "bold",
    color: "#333",
    textAlign: "center",
    marginBottom: 40,
  },
  input: {
    backgroundColor: "white",
    paddingHorizontal: 15,
    paddingVertical: 15,
    borderRadius: 10,
    fontSize: 16,
    marginBottom: 15,
    elevation: 2,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  submitButton: {
    backgroundColor: "#007AFF",
    paddingVertical: 15,
    borderRadius: 10,
    alignItems: "center",
    marginTop: 10,
  },
  submitButtonText: {
    color: "white",
    fontSize: 18,
    fontWeight: "600",
  },
  biometricButton: {
    backgroundColor: "#34C759",
    paddingVertical: 15,
    borderRadius: 10,
    marginTop: 15,
    alignItems: "center",
  },
  biometricButtonText: {
    color: "white",
    fontSize: 16,
    fontWeight: "600",
  },
  switchButton: {
    marginTop: 20,
    alignItems: "center",
  },
  switchButtonText: {
    color: "#007AFF",
    fontSize: 16,
  },
  logoutButton: {
    backgroundColor: "#FF3B30",
    paddingVertical: 15,
    borderRadius: 10,
    alignItems: "center",
  },
  logoutButtonText: {
    color: "white",
    fontSize: 18,
    fontWeight: "600",
  },
});