import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"

// Styles
const styles = {
    container: {
        fontFamily: "Inter, sans-serif",
        color: "#333",
        maxWidth: "400px",
        margin: "0 auto",
        padding: "20px",
        borderRadius: "8px",
        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
        backgroundColor: "#ffffff",
    },
    header: {
        backgroundColor: "#2563eb",
        color: "white",
        padding: "16px",
        marginBottom: "20px",
        borderRadius: "8px 8px 0 0",
        textAlign: "center" as const,
    },
    input: {
        width: "100%",
        padding: "8px",
        marginBottom: "10px",
        border: "1px solid #ccc",
        borderRadius: "4px",
        fontSize: "16px",
    },
    button: {
        width: "100%",
        padding: "10px",
        backgroundColor: "#2563eb",
        color: "white",
        border: "none",
        borderRadius: "4px",
        cursor: "pointer",
        fontSize: "16px",
        fontWeight: "bold",
    },
    result: {
        marginTop: "20px",
        padding: "15px",
        backgroundColor: "#ecfdf5",
        borderRadius: "4px",
        textAlign: "center" as const,
    },
}

export function TimeSavingsCalculator() {
    const [students, setStudents] = React.useState<string>("")
    const [assignments, setAssignments] = React.useState<string>("")
    const [timePerAssignment, setTimePerAssignment] = React.useState<string>("")
    const [timeSaved, setTimeSaved] = React.useState<number | null>(null)

    const calculateTimeSavings = () => {
        const studentsNum = parseInt(students)
        const assignmentsNum = parseInt(assignments)
        const timePerAssignmentNum = parseFloat(timePerAssignment)

        if (studentsNum && assignmentsNum && timePerAssignmentNum) {
            const totalTime = studentsNum * assignmentsNum * timePerAssignmentNum
            const savedTime = totalTime * 0.5 // Assuming 50% time saved
            setTimeSaved(savedTime)
        } else {
            alert("Please fill in all fields with valid numbers.")
        }
    }

    return (
        <Frame background="none" style={styles.container}>
            <div style={styles.header}>
                <h2>Mark My Words Time Savings Calculator</h2>
            </div>
            <input
                style={styles.input}
                type="number"
                placeholder="Number of Students"
                value={students}
                onChange={(e) => setStudents(e.target.value)}
            />
            <input
                style={styles.input}
                type="number"
                placeholder="Assignments per Student"
                value={assignments}
                onChange={(e) => setAssignments(e.target.value)}
            />
            <input
                style={styles.input}
                type="number"
                placeholder="Time per Assignment (minutes)"
                value={timePerAssignment}
                onChange={(e) => setTimePerAssignment(e.target.value)}
            />
            <button style={styles.button} onClick={calculateTimeSavings}>
                Calculate Time Savings
            </button>
            {timeSaved !== null && (
                <div style={styles.result}>
                    <p>
                        <strong>Estimated time saved:</strong>
                        <br />
                        {timeSaved.toFixed(2)} minutes
                        <br />
                        ({(timeSaved / 60).toFixed(2)} hours)
                    </p>
                </div>
            )}
        </Frame>
    )
}

addPropertyControls(TimeSavingsCalculator, {})