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 } from '@/components/ui/card';
import { MOCK_USER } from '@/lib/mock-data';
import { User, Mail, Globe, Bell, ChevronRight, Info, LogOut, LogIn, FileText, FolderOpen, Settings } from '@/lib/icons';

const PRIMARY = '#ea580c';

export default function ProfileScreen() {
  return (
    <ScrollView
      className="flex-1 bg-[#f5f5f5]"
      contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
      showsVerticalScrollIndicator={false}
    >
      <View className="mb-6 items-center">
        <View className="mb-3 h-20 w-20 items-center justify-center rounded-full bg-primary">
          <Text className="text-3xl font-bold text-primary-foreground">{MOCK_USER.name[0]}</Text>
        </View>
        <Text className="text-xl font-semibold text-gray-900">{MOCK_USER.name}</Text>
        <Text className="text-muted-foreground mt-1 text-sm">{MOCK_USER.email}</Text>
      </View>

      <Card className="mb-4 overflow-hidden rounded-xl border border-border bg-white">
        <CardHeader className="pb-2">
          <CardTitle className="text-base">Account</CardTitle>
        </CardHeader>
        <CardContent className="gap-0">
          <View className="flex-row items-center justify-between border-b border-border py-3">
            <View className="flex-row items-center gap-3">
              <Mail color="#71717a" size={20} strokeWidth={2} />
              <Text className="text-muted-foreground">Email</Text>
            </View>
            <Text className="text-gray-900">{MOCK_USER.email}</Text>
          </View>
          <View className="flex-row items-center justify-between border-b border-border py-3">
            <View className="flex-row items-center gap-3">
              <Globe color="#71717a" size={20} strokeWidth={2} />
              <Text className="text-muted-foreground">Language</Text>
            </View>
            <Text className="text-gray-900">English</Text>
          </View>
          <Pressable
            onPress={() => router.push('/notifications')}
            className="flex-row items-center justify-between border-b border-border py-3"
          >
            <View className="flex-row items-center gap-3">
              <Bell color="#71717a" size={20} strokeWidth={2} />
              <Text className="text-muted-foreground">Notifications</Text>
            </View>
            <View className="flex-row items-center gap-1">
              <Text className="text-primary font-medium">Manage</Text>
              <ChevronRight color={PRIMARY} size={18} strokeWidth={2} />
            </View>
          </Pressable>
          <Pressable
            onPress={() => router.push('/reports')}
            className="flex-row items-center justify-between border-b border-border py-3"
          >
            <View className="flex-row items-center gap-3">
              <FileText color="#71717a" size={20} strokeWidth={2} />
              <Text className="text-muted-foreground">Reports</Text>
            </View>
            <ChevronRight color="#a1a1aa" size={18} strokeWidth={2} />
          </Pressable>
          <Pressable
            onPress={() => router.push('/documents')}
            className="flex-row items-center justify-between border-b border-border py-3"
          >
            <View className="flex-row items-center gap-3">
              <FolderOpen color="#71717a" size={20} strokeWidth={2} />
              <Text className="text-muted-foreground">Documents</Text>
            </View>
            <ChevronRight color="#a1a1aa" size={18} strokeWidth={2} />
          </Pressable>
          <Pressable
            onPress={() => router.push('/settings')}
            className="flex-row items-center justify-between py-3"
          >
            <View className="flex-row items-center gap-3">
              <Settings color="#71717a" size={20} strokeWidth={2} />
              <Text className="text-muted-foreground">Settings</Text>
            </View>
            <ChevronRight color="#a1a1aa" size={18} strokeWidth={2} />
          </Pressable>
        </CardContent>
      </Card>

      <Card className="mb-4 overflow-hidden rounded-xl border border-border bg-white">
        <CardHeader className="pb-2">
          <View className="flex-row items-center gap-2">
            <Info color="#71717a" size={18} strokeWidth={2} />
            <CardTitle className="text-base">About</CardTitle>
          </View>
        </CardHeader>
        <CardContent>
          <Text className="text-muted-foreground text-sm leading-5">
            Yaltopia Tickets App — Scan. Send. Reconcile. Companion to the Yaltopia Tickets web app.
          </Text>
        </CardContent>
      </Card>

      <Button
        variant="outline"
        className="mt-2 min-h-12 rounded-xl border-border"
        onPress={() => router.push('/login')}
      >
        <LogIn color={PRIMARY} size={20} strokeWidth={2} />
        <Text className="ml-2 font-medium text-gray-700">Sign in (different account)</Text>
      </Button>
      <Button variant="destructive" className="mt-3 min-h-12 rounded-xl">
        <LogOut color="#ffffff" size={20} strokeWidth={2} />
        <Text className="ml-2 font-medium">Log out</Text>
      </Button>
    </ScrollView>
  );
}