import { View, ScrollView, Pressable } from 'react-native';
import { router } from 'expo-router';
import { Text } from '@/components/ui/text';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Mail, ArrowLeft } from '@/lib/icons';

export default function LoginScreen() {
  return (
    <ScrollView
      className="flex-1 bg-[#f5f5f5]"
      contentContainerStyle={{ padding: 24, paddingVertical: 48 }}
      showsVerticalScrollIndicator={false}
    >
      <Text className="mb-8 text-center text-2xl font-bold text-gray-900">Yaltopia Tickets</Text>
      <Card className="mb-5 overflow-hidden rounded-2xl border border-border bg-white">
        <CardHeader>
          <CardTitle className="text-lg">Sign in</CardTitle>
          <CardDescription className="mt-1">Use the same account as the web app.</CardDescription>
        </CardHeader>
        <CardContent className="gap-3">
          <Button className="min-h-12 rounded-xl bg-primary">
            <Mail color="#ffffff" size={20} strokeWidth={2} />
            <Text className="ml-2 text-primary-foreground font-medium">Email & password</Text>
          </Button>
          <Button variant="outline" className="min-h-12 rounded-xl border-border">
            <Text className="font-medium text-gray-700">Continue with Google</Text>
          </Button>
        </CardContent>
      </Card>
      <Pressable onPress={() => router.push('/register')} className="mt-4">
        <Text className="text-center text-primary font-medium">Create account</Text>
      </Pressable>
      <Button variant="ghost" className="mt-4 rounded-xl" onPress={() => router.back()}>
        <ArrowLeft color="#71717a" size={20} strokeWidth={2} />
        <Text className="ml-2 font-medium text-muted-foreground">Back</Text>
      </Button>
    </ScrollView>
  );
}