import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button, Alert, ScrollView } from 'react-native';

const BLOCK_SCHEDULES = {
"Block 1": {
"Monday": "07:30 AM - 11:30 AM",
"Tuesday": "07:30 AM - 11:30 AM",
"Wednesday": "08:30 AM - 12:00 PM",
"Thursday": "07:30 AM - 11:30 AM",
"Friday": "07:30 AM - 10:30 AM",
"Saturday": "No Classes",
"Sunday": "No Classes"
},
"Block 2": {
"Monday": "12:30 PM - 04:30 PM",
"Tuesday": "12:30 PM - 04:30 PM",
"Wednesday": "01:00 PM - 04:00 PM",
"Thursday": "12:30 PM - 04:30 PM",
"Friday": "11:00 AM - 02:00 PM",
"Saturday": "No Classes",
"Sunday": "No Classes"
}
};

const INITIAL_USER_ACCOUNTS = {
"teacher1": { role: "teacher", password: "password123", name: "Mrs. Smith", access: "Grade 10 Admin" },
"parent1": { role: "parent", password: "password123", name: "Maria Dela Cruz", childId: "2026001" },
"student1": { role: "student", password: "password123", studentId: "2026001", blockNum: "Block 1" }
};

export default function App() {
const [allUsers, setAllUsers] = useState(INITIAL_USER_ACCOUNTS);
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [loggedInUser, setLoggedInUser] = useState(null);
const [announcement, setAnnouncement] = useState("");
const [postedAnnouncement, setPostedAnnouncement] = useState("No announcements posted yet.");

const [isRegistering, setIsRegistering] = useState(false);
const [regUsername, setRegUsername] = useState("");
const [regPassword, setRegPassword] = useState("");
const [regStudentId, setRegStudentId] = useState("");
const [regBlockNum, setRegBlockNum] = useState("Block 1");

const getTodaySchedule = (blockNum) => {
const schedule = BLOCK_SCHEDULES[blockNum];
if (!schedule) return "No block schedule found";
const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const todayName = daysOfWeek[new Date().getDay()];
return `${todayName}: ${schedule[todayName] || "No classes scheduled"}`;
};

const handleRegisterStudent = () => {
const cleanUsername = regUsername.trim().toLowerCase();

if (!cleanUsername || !regPassword.trim() || !regStudentId.trim() || !regBlockNum.trim()) {
Alert.alert("Error", "Please fill out all registration fields!");
return;
}

if (allUsers[cleanUsername]) {
Alert.alert("Error", "This Username is already registered!");
return;
}

const newUser = {
role: "student",
password: regPassword.trim(),
studentId: regStudentId.trim(),
blockNum: regBlockNum.trim()
};

setAllUsers(prevUsers => ({
...prevUsers,
[cleanUsername]: newUser
}));

Alert.alert("Success!", "Account created! You can now sign in.");
setIsRegistering(false);
setRegUsername("");
setRegPassword("");
setRegStudentId("");
setRegBlockNum("Block 1");
};

const handleLogin = () => {
const user = allUsers[username.trim().toLowerCase()];

if (user && user.password === password) {
setLoggedInUser(user);
} else {
Alert.alert("Login Failed", "Incorrect username or password! Try user: student1, pass: password123");
}
};

const handleLogout = () => {
setLoggedInUser(null);
setUsername("");
setPassword("");
setAnnouncement("");
};

const handlePostAnnouncement = () => {
if (announcement.trim() === "") {
Alert.alert("Error", "Announcement text cannot be empty!");
return;
}
setPostedAnnouncement(announcement);
setAnnouncement("");
Alert.alert("Success", "Announcement posted for all parents and students!");
};

if (!loggedInUser) {
return (
<View style={styles.mainContainer}>
<View style={styles.topHeaderShape}>
<Text style={styles.headerTitleText}>SCHOOL PORTAL</Text>
<Text style={styles.headerSubtitleText}>Rapidly Connecting</Text>
</View>

{!isRegistering ? (
<View style={styles.loginCardShape}>
<Text style={styles.cardHeading}>🔒 Account Sign In</Text>
<TextInput
style={styles.inputField}
placeholder="Enter Username"
placeholderTextColor="#999"
value={username}
onChangeText={setUsername}
autoCapitalize="none"
/>
<TextInput
style={styles.inputField}
placeholder="Enter Password"
placeholderTextColor="#999"
secureTextEntry={true}
value={password}
onChangeText={setPassword}
autoCapitalize="none"
/>
<View style={styles.buttonWrapper}>
<Button title="Login to Portal" onPress={handleLogin} color="#1E3A8A" />
</View>
<Text
style={styles.switchScreenLink}
onPress={() => setIsRegistering(true)}
>
No account yet? Register here
</Text>
</View>
) : (
<ScrollView style={styles.loginCardShape}>
<Text style={styles.cardHeading}>Student Registration</Text>
<TextInput
style={styles.inputField}
placeholder="Create Username (e.g., student2)"
placeholderTextColor="#999"
value={regUsername}
onChangeText={setRegUsername}
autoCapitalize="none"
/>
<TextInput
style={styles.inputField}
placeholder="Create Password"
placeholderTextColor="#999"
secureTextEntry={true}
value={regPassword}
onChangeText={setRegPassword}
autoCapitalize="none"
/>
<TextInput
style={styles.inputField}
placeholder="Student ID Number"
placeholderTextColor="#999"
keyboardType="numeric"
value={regStudentId}
onChangeText={setRegStudentId}
/>
<Text style={styles.infoLabel}>Select Block Number:</Text>
<View style={styles.rolePickerRow}>
{["Block 1", "Block 2"].map((block) => (
<Text
key={block}
style={[styles.roleSelectButton, regBlockNum === block && styles.roleSelectButtonActive]}
onPress={() => setRegBlockNum(block)}
>
{block.toUpperCase()}
</Text>
))}
</View>
<View style={styles.buttonWrapper}>
<Button title="Create Account" onPress={handleRegisterStudent} color="#10B981" />
</View>
<Text
style={styles.switchScreenLink}
onPress={() => setIsRegistering(false)}
>
Already have an account? Sign In
</Text>
</ScrollView>
)}
</View>
);
}

return (
<View style={styles.mainContainer}>
<View style={styles.topHeaderShape}>
<Text style={styles.headerTitleText}>CAMPUS HUB</Text>
<Text style={styles.headerSubtitleText}>
Welcome, {loggedInUser.role === "student" ? `ID: ${loggedInUser.studentId}` : loggedInUser.name}
</Text>
<View style={styles.roleBadgeContainer}>
<Text style={styles.roleBadgeText}>{loggedInUser.role.toUpperCase()}</Text>
</View>
</View>

<ScrollView contentContainerStyle={styles.scrollContentLayout}>
{loggedInUser.role === "teacher" && (
<View style={styles.dashboardCardShape}>
<Text style={styles.cardHeading}>Announcement</Text>
<TextInput
style={[styles.inputField, { height: 80, textAlignVertical: 'top' }]}
placeholder="Type an announcement statement here..."
placeholderTextColor="#999"
multiline={true}
value={announcement}
onChangeText={setAnnouncement}
/>
<View style={styles.buttonWrapper}>
<Button title="Broadcast Announcement" onPress={handlePostAnnouncement} color="#10B981" />
</View>
</View>
)}

{loggedInUser.role === "parent" && (
<View style={styles.dashboardCardShape}>
<Text style={styles.cardHeading}>Attendance Monitor</Text>
<Text style={styles.infoLabel}>Monitored Student ID:</Text>
<Text style={styles.infoValueText}>{loggedInUser.childId}</Text>
<View style={styles.horizontalDivider} />
<Text style={styles.infoLabel}>Gate Status:</Text>
<Text style={[styles.infoValueText, { color: '#10B981', fontWeight: 'bold' }]}>🟢 Verified Inside Campus</Text>
</View>
)}

{loggedInUser.role === "student" && (
<View style={styles.dashboardCardShape}>
<Text style={styles.cardHeading}>📅 Student Overview</Text>
<Text style={styles.infoLabel}>Your Group Assignment:</Text>
<Text style={styles.infoValueText}>{loggedInUser.blockNum}</Text>
<View style={styles.horizontalDivider} />
<Text style={styles.infoLabel}>Today's Block Schedule:</Text>
<Text style={styles.infoValueText}>
{getTodaySchedule(loggedInUser.blockNum)}
</Text>
</View>
)}

<View style={styles.bulletinCardShape}>
<Text style={styles.bulletinHeadingText}>📢 Campus Bulletin Board</Text>
<Text style={styles.bulletinContentText}>{postedAnnouncement}</Text>
</View>

<View style={[styles.buttonWrapper, { marginTop: 10, marginBottom: 30 }]}>
<Button title="Log Out Account" onPress={handleLogout} color="#EF4444" />

);

}
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
backgroundColor: '#F3F4F6',
},
topHeaderShape: {
width: '100%',
backgroundColor: '#1E3A8A',
paddingTop: 60,
paddingBottom: 30,
paddingHorizontal: 24,
borderBottomLeftRadius: 30,
borderBottomRightRadius: 30,
alignItems: 'center',
elevation: 5,
shadowColor: '#000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 5,
},
headerTitleText: {
fontSize: 26,
fontWeight: '900',
color: '#FFFFFF',
letterSpacing: 1.5,
},
headerSubtitleText: {
fontSize: 14,
color: '#93C5FD',
marginTop: 4,
fontWeight: '500',
},
roleBadgeContainer: {
marginTop: 12,
backgroundColor: '#3B82F6',
paddingVertical: 4,
paddingHorizontal: 16,
borderRadius: 20,
},
roleBadgeText: {
color: '#FFFFFF',
fontSize: 11,
fontWeight: 'bold',
letterSpacing: 1,
},
scrollContentLayout: {
paddingHorizontal: 20,
paddingTop: 24,
},
loginCardShape: {
backgroundColor: '#FFFFFF',
borderRadius: 20,
padding: 24,
marginTop: -20,
marginHorizontal: 24,
elevation: 4,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.15,
shadowRadius: 4,
},
dashboardCardShape: {
backgroundColor: '#FFFFFF',
borderRadius: 16,
padding: 20,
marginBottom: 20,
elevation: 2,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.1,
shadowRadius: 3,
borderLeftWidth: 5,
borderLeftColor: '#3B82F6',
},
bulletinCardShape: {
backgroundColor: '#FEF3C7',
borderRadius: 16,
padding: 20,
marginBottom: 20,
borderWidth: 1,
borderColor: '#FDE68A',
elevation: 1,
},
cardHeading: {
fontSize: 18,
fontWeight: 'bold',
color: '#1F2937',
marginBottom: 16,
},
bulletinHeadingText: {
fontSize: 16,
fontWeight: 'bold',
color: '#92400E',
marginBottom: 8,
},
bulletinContentText: {
fontSize: 14,
color: '#B45309',
lineHeight: 20,
fontStyle: 'italic',
},
inputField: {
width: '100%',
backgroundColor: '#F9FAFB',
borderWidth: 1,
borderColor: '#D1D5DB',
borderRadius: 10,
padding: 14,
fontSize: 15,
color: '#1F2937',
marginBottom: 16,
},
buttonWrapper: {
borderRadius: 10,
overflow: 'hidden',
},
infoLabel: {
fontSize: 12,
color: '#6B7280',
fontWeight: '600',
textTransform: 'uppercase',
},
infoValueText: {
fontSize: 16,
color: '#1F2937',
marginTop: 2,
marginBottom: 12,
},
horizontalDivider: {
height: 1,
backgroundColor: '#E5E7EB',
marginBottom: 12,
},
switchScreenLink: {
color: '#3B82F6',
textAlign: 'center',
marginTop: 16,
fontWeight: '600',
fontSize: 14,
textDecorationLine: 'underline',
},
rolePickerRow: {
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 16,
marginTop: 6,
},
roleSelectButton: {
flex: 1,
textAlign: 'center',
backgroundColor: '#E5E7EB',
paddingVertical: 8,
marginHorizontal: 4,
borderRadius: 8,
fontSize: 12,
color: '#374151',
fontWeight: 'bold',
overflow: 'hidden',
},
roleSelectButtonActive: {
backgroundColor: '#1E3A8A',
color: '#FFFFFF',
}
});