import React, { useState } from "react";
import {
    Box,
    Typography,
    Container,
    FormControl,
    InputLabel,
    Select,
    MenuItem,
    Card,
    CardContent,
    Button,
    Grid,
    Divider
} from "@mui/material";
import {
    PTMarkScreen,
    Student,
    PartGuiConfig,
    MarkData
} from "./PTMarkScreen";

// Mock student data
const mockStudents: Student[] = [
    {
        id: 4223,
        fullName: "Alex Trist",
        targetGrade: "D*",
        reference: "S011319",
        callouts: ["SEN", "EAL"],
        pronouns: "he/him",
        links: [
            { rel: "ui:profile", href: "/student/JS1234", type: "text/html", title: "Student Profile" }
        ]
    },
    {
        id: 2,
        fullName: "Jane Doe",
        targetGrade: "M",
        reference: "JD5678",
        callouts: ["PP"],
        pronouns: "she/her",
        links: [
            { rel: "ui:profile", href: "/student/JD5678", type: "text/html", title: "Student Profile" }
        ]
    },
    {
        id: 3,
        fullName: "Ahmed Khan",
        targetGrade: "P",
        reference: "AK9012",
        callouts: ["EAL"],
        pronouns: "he/him",
        links: [
            { rel: "ui:profile", href: "/student/AK9012", type: "text/html", title: "Student Profile" }
        ]
    },
    {
        id: 4,
        fullName: "Sarah Johnson-Williams",
        targetGrade: "D",
        reference: "SJW3456",
        callouts: ["G&T"],
        pronouns: "she/her",
        links: [
            { rel: "ui:profile", href: "/student/SJW3456", type: "text/html", title: "Student Profile" }
        ]
    },
    {
        id: 5,
        fullName: "Carlos Rodriguez",
        targetGrade: null,
        reference: "CR7890",
        callouts: [],
        pronouns: "he/him",
        links: [
            { rel: "ui:profile", href: "/student/CR7890", type: "text/html", title: "Student Profile" }
        ]
    },
    {
        id: 6,
        fullName: "Priya Patel",
        targetGrade: "M",
        reference: "PP1234",
        callouts: ["SEN"],
        pronouns: "she/her",
        links: [
            { rel: "ui:profile", href: "/student/PP1234", type: "text/html", title: "Student Profile" }
        ]
    },
    {
        id: 7,
        fullName: "Alex O'Connor",
        targetGrade: "D*",
        reference: "AOC5678",
        callouts: ["PP", "G&T"],
        pronouns: "they/them",
        links: [
            { rel: "ui:profile", href: "/student/AOC5678", type: "text/html", title: "Student Profile" }
        ]
    },
    {
        id: 8,
        fullName: "Maria Garcia",
        targetGrade: "P",
        reference: "MG9012",
        callouts: [],
        pronouns: "she/her",
        links: [
            { rel: "ui:profile", href: "/student/MG9012", type: "text/html", title: "Student Profile" }
        ]
    },
    {
        id: 9,
        fullName: "James Wilson",
        targetGrade: null,
        reference: "JW3456",
        callouts: ["SEN"],
        pronouns: "he/him",
        links: [
            { rel: "ui:profile", href: "/student/JW3456", type: "text/html", title: "Student Profile" }
        ]
    },
    {
        id: 10,
        fullName: "Li Wei",
        targetGrade: "D",
        reference: "LW7890",
        callouts: ["EAL", "G&T"],
        pronouns: "he/him",
        links: [
            { rel: "ui:profile", href: "/student/LW7890", type: "text/html", title: "Student Profile" }
        ]
    },
];

// Mock mark data
const mockMarks: { [studentId: number]: MarkData } = {
    1: {
        grades: "P",
        score: 18,
        criteria: {
            P1: { attained: true, referred: false, failed: false, try: 1 },
            M1: null,
            D1: null
        }
    },
    2: {
        grades: "M",
        score: 22,
        criteria: {
            P1: { attained: true, referred: false, failed: false, try: 1 },
            M1: { attained: true, referred: false, failed: false, try: 1 },
            D1: { attained: false, referred: true, failed: false, try: 1 }
        }
    },
    3: {
        grades: "P",
        score: 14,
        criteria: {
            P1: { attained: true, referred: false, failed: false, try: 2 },
            M1: { attained: false, referred: true, failed: false, try: 1 },
            D1: null
        }
    },
    4: {
        grades: "D",
        score: 25,
        criteria: {
            P1: { attained: true, referred: false, failed: false, try: 1 },
            M1: { attained: true, referred: false, failed: false, try: 1 },
            D1: { attained: true, referred: false, failed: false, try: 1 }
        }
    },
    5: {
        grades: "",
        score: 0,
        criteria: {
            P1: null,
            M1: null,
            D1: null
        }
    },
    6: {
        grades: "M",
        score: 20,
        criteria: {
            P1: { attained: true, referred: false, failed: false, try: 1 },
            M1: { attained: false, referred: false, failed: true, try: 2 },
            D1: null
        }
    },
    7: {
        grades: "D*",
        score: 28,
        criteria: {
            P1: { attained: true, referred: false, failed: false, try: 1 },
            P2: { attained: true, referred: false, failed: false, try: 1 },
            M1: { attained: true, referred: false, failed: false, try: 1 },
            M2: { attained: true, referred: false, failed: false, try: 1 },
            D1: { attained: true, referred: false, failed: false, try: 1 },
            D2: { attained: true, referred: false, failed: false, try: 1 }
        }
    },
    8: {
        grades: "P",
        score: 16,
        criteria: {
            P1: { attained: false, referred: true, failed: false, try: 1 },
            P2: { attained: true, referred: false, failed: false, try: 2 },
            M1: null,
            D1: null
        }
    },
    9: {
        grades: "M",
        score: 19,
        criteria: {
            P1: { attained: true, referred: false, failed: false, try: 1 },
            M1: { attained: true, referred: false, failed: false, try: 2 },
            D1: null
        }
    },
    10: {
        grades: "D",
        score: 24,
        criteria: {
            P1: { attained: true, referred: false, failed: false, try: 1 },
            M1: { attained: true, referred: false, failed: false, try: 1 },
            D1: { attained: false, referred: true, failed: false, try: 2 }
        }
    },
};

// Configuration presets
const configPresets: { [key: string]: PartGuiConfig } = {
    "All Editable": {
        gradeCol: "EDITABLE",
        scoreCol: "EDITABLE",
        unitCriteria: "EDITABLE"
    },
    "Criteria Only": {
        gradeCol: "HIDDEN",
        scoreCol: "HIDDEN",
        unitCriteria: "EDITABLE"
    },
    "Grade Only": {
        gradeCol: "EDITABLE",
        scoreCol: "HIDDEN",
        unitCriteria: "HIDDEN"
    },
    "Score Only": {
        gradeCol: "HIDDEN",
        scoreCol: "EDITABLE",
        unitCriteria: "HIDDEN"
    },
    "Read Only": {
        gradeCol: "VISIBLE",
        scoreCol: "VISIBLE",
        unitCriteria: "VISIBLE"
    }
};

export const TestPTMarkScreen = () => {
    // Tracker and part IDs would normally be determined by route params or props
    const trackerId = 1;
    const partId = 101;

    // State for configuration
    const [selectedConfig, setSelectedConfig] = useState<string>("All Editable");
    const [loading, setLoading] = useState<boolean>(false);

    // Handler for simulating loading state
    const toggleLoading = () => {
        setLoading(prev => !prev);
    };

    return (
        <Container maxWidth="xl">
            <Box sx={{ my: 4 }}>
                <Typography variant="h4" component="h1" gutterBottom>
                    Progress Tracker Mark Screen Test Harness
                </Typography>

                <Card sx={{ mb: 3 }}>
                    <CardContent>
                        <Typography variant="h6" gutterBottom>
                            Configuration
                        </Typography>

                        <Grid container spacing={2} alignItems="center">
                            <Grid item xs={12} md={4}>
                                <FormControl fullWidth>
                                    <InputLabel id="config-preset-label">Configuration Preset</InputLabel>
                                    <Select
                                        labelId="config-preset-label"
                                        value={selectedConfig}
                                        label="Configuration Preset"
                                        onChange={(e) => setSelectedConfig(e.target.value as string)}
                                    >
                                        {Object.keys(configPresets).map(preset => (
                                            <MenuItem key={preset} value={preset}>{preset}</MenuItem>
                                        ))}
                                    </Select>
                                </FormControl>
                            </Grid>

                            <Grid item>
                                <Button
                                    variant="outlined"
                                    onClick={toggleLoading}
                                    color={loading ? "secondary" : "primary"}
                                >
                                    {loading ? "Stop Loading Simulation" : "Simulate Loading"}
                                </Button>
                            </Grid>
                        </Grid>

                        <Box sx={{ mt: 2 }}>
                            <Typography variant="subtitle2">Current Configuration:</Typography>
                            <Typography variant="body2" component="pre" sx={{
                                bgcolor: '#f5f5f5',
                                p: 1,
                                borderRadius: 1,
                                fontFamily: 'monospace'
                            }}>
                                {JSON.stringify(configPresets[selectedConfig], null, 2)}
                            </Typography>
                        </Box>
                    </CardContent>
                </Card>

                <Divider sx={{ my: 3 }} />

                <Typography variant="h6" gutterBottom>
                    Mark Screen Component
                </Typography>

                <Box sx={{ mt: 2 }}>
                    <PTMarkScreen
                        trackerId={trackerId}
                        partId={partId}
                        students={mockStudents}
                        partGuiConfig={configPresets[selectedConfig]}
                        initialMarks={mockMarks}
                        loading={loading}
                    />
                </Box>
            </Box>
        </Container>
    );
};

export default TestPTMarkScreen;
