menulio/apps/mobile/src/app/(auth)/login.tsx

import { useState } from "react";
import { Link, router } from "expo-router";
import { ActivityIndicator, Image, Pressable, Text, TextInput, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { supabase } from "@/lib/supabase";

export default function LoginScreen() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function onSubmit() {
    setError(null);
    setLoading(true);
    const { error: signInError } = await supabase.auth.signInWithPassword({ email, password });
    setLoading(false);

    if (signInError) {
      setError(signInError.message);
      return;
    }

    router.replace("/");
  }

  return (
    <View style={{ flex: 1, backgroundColor: "#FAF8F5", padding: 24, justifyContent: "center" }}>
      <View style={{ maxWidth: 400, width: "100%", alignSelf: "center" }}>
        {/* Brand Icon Header */}
        <View style={{ alignItems: "center", marginBottom: 28 }}>
          <Image
            source={require("../../../assets/icon.png")}
            style={{
              width: 72,
              height: 72,
              borderRadius: 18,
              marginBottom: 14,
              shadowColor: "#000",
              shadowOffset: { width: 0, height: 4 },
              shadowOpacity: 0.12,
              shadowRadius: 8,
            }}
            resizeMode="contain"
          />
          <Text style={{ fontSize: 28, fontWeight: "800", color: "#1C1917", letterSpacing: -0.5 }}>
            MenuL.io
          </Text>
          <Text style={{ fontSize: 13, color: "#57534E", marginTop: 4, fontWeight: "500" }}>
            AI destekli dijital restoran menü yöneticisi
          </Text>
        </View>

        {error ? (
          <View
            style={{
              backgroundColor: "#FEF2F2",
              borderWidth: 1,
              borderColor: "#FCA5A5",
              borderRadius: 12,
              padding: 12,
              marginBottom: 16,
              flexDirection: "row",
              alignItems: "center",
              gap: 8,
            }}
          >
            <Ionicons name="alert-circle" size={18} color="#DC2626" />
            <Text style={{ color: "#DC2626", fontSize: 13, flex: 1 }}>{error}</Text>
          </View>
        ) : null}

        {/* Email Input */}
        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
            backgroundColor: "#FFFFFF",
            borderWidth: 1.5,
            borderColor: "#D6D3D1",
            borderRadius: 12,
            paddingHorizontal: 14,
            marginBottom: 12,
          }}
        >
          <Ionicons name="mail-outline" size={18} color="#57534E" style={{ marginRight: 10 }} />
          <TextInput
            placeholder="E-posta adresiniz"
            placeholderTextColor="#57534E"
            autoCapitalize="none"
            keyboardType="email-address"
            value={email}
            onChangeText={setEmail}
            style={{ flex: 1, paddingVertical: 14, fontSize: 15, color: "#1C1917", fontWeight: "500" }}
          />
        </View>

        {/* Password Input */}
        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
            backgroundColor: "#FFFFFF",
            borderWidth: 1.5,
            borderColor: "#D6D3D1",
            borderRadius: 12,
            paddingHorizontal: 14,
            marginBottom: 20,
          }}
        >
          <Ionicons name="lock-closed-outline" size={18} color="#57534E" style={{ marginRight: 10 }} />
          <TextInput
            placeholder="Şifreniz"
            placeholderTextColor="#57534E"
            secureTextEntry={!showPassword}
            value={password}
            onChangeText={setPassword}
            style={{ flex: 1, paddingVertical: 14, fontSize: 15, color: "#1C1917", fontWeight: "500" }}
          />
          <Pressable onPress={() => setShowPassword(!showPassword)} style={{ padding: 4 }}>
            <Ionicons
              name={showPassword ? "eye-off-outline" : "eye-outline"}
              size={18}
              color="#57534E"
            />
          </Pressable>
        </View>

        {/* Submit Button */}
        <Pressable
          onPress={onSubmit}
          disabled={loading || !email || !password}
          style={({ pressed }) => ({
            backgroundColor: "#1C1917",
            borderRadius: 12,
            padding: 16,
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "center",
            gap: 8,
            opacity: loading || !email || !password ? 0.6 : pressed ? 0.9 : 1,
            shadowColor: "#000",
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.1,
            shadowRadius: 8,
            elevation: 3,
          })}
        >
          {loading ? (
            <ActivityIndicator color="#fff" />
          ) : (
            <>
              <Text style={{ color: "#fff", fontWeight: "700", fontSize: 15 }}>Giriş Yap</Text>
              <Ionicons name="arrow-forward" size={16} color="#fff" />
            </>
          )}
        </Pressable>

        <Link href="/(auth)/register" asChild>
          <Pressable style={{ marginTop: 16, padding: 8, alignItems: "center" }}>
            <Text style={{ color: "#78716C", fontSize: 14 }}>
              Hesabın yok mu? <Text style={{ color: "#C8A96B", fontWeight: "700" }}>Kayıt ol</Text>
            </Text>
          </Pressable>
        </Link>
      </View>
    </View>
  );
}