import React from "react";
import { Layout, Card, Typography, Button, Space, Divider, Tag } from "antd";
import { useLocation, useHistory } from "react-router-dom";
import { Headerc } from "../../../Main/Headerc";
import "./Instructions.css";

const { Content } = Layout;
const { Title, Text, Paragraph } = Typography;

const Instructions = () => {
    const history = useHistory();
    const location = useLocation();

    // ✅ Extract props safely
    const examId = location.state?.examId || -1;
    const examName = location.state?.examName || "General Exam";
    const duration = location.state?.duration || "N/A";
    const totalQuestions = location.state?.totalQuestions || "N/A";
    const totalMarks = location.state?.totalMarks || "N/A";
    const startDate = location.state?.startDate || "N/A";
    const endDate = location.state?.endDate || "N/A";
    const daysLeft = location.state?.daysLeft ?? 0; // default fallback

    const handleStart = () => {
        history.replace({
            pathname: "/attemptExam",
            state: { examId, examIdType: "exam" },
        });
    };

    const getStatusColor = () => {
        if (daysLeft <= 0) return "red";
        if (daysLeft < 3) return "orange";
        return "green";
    };

    return (
        <Layout>
            <Content
                style={{
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "flex-center",
                    padding: "40px 40px",
                    minHeight: "100vh",
                }}
            >
                <Card
                    bordered={false}
                    style={{
                        maxWidth: 800,
                        width: "100%",
                        borderRadius: 20,
                        padding: "40px 48px",
                    }}
                >
                    {/* Header */}
                    <div style={{ textAlign: "center", marginBottom: 20 }}>
                        <Title
                            level={3}
                            style={{
                                marginBottom: 8,
                                color: "#1f2937",
                                fontWeight: 700,
                                fontSize: 26,
                                letterSpacing: 0.5,
                            }}
                        >
                            📘 Exam Instructions
                        </Title>
                        <Text
                            type="secondary"
                            style={{
                                fontSize: 17,
                                fontWeight: 500,
                                color: "#4b5563",
                            }}
                        >
                            {examName}
                        </Text>
                    </div>

                    <Divider style={{ margin: "20px 0" }} />

                    {/* Exam Info */}
                    <div
                        style={{
                            display: "grid",
                            gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
                            gap: "14px 20px",
                            fontSize: 15,
                            marginBottom: 8,
                        }}
                    >
                        <Text>
                            <strong>Duration:</strong> {duration} mins
                        </Text>
                        <Text>
                            <strong>Total Questions:</strong> {totalQuestions}
                        </Text>
                        <Text>
                            <strong>Total Marks:</strong> {totalMarks}
                        </Text>
                        <Text>
                            <strong>Start Date:</strong> {startDate}
                        </Text>
                        <Text>
                            <strong>End Date:</strong> {endDate}
                        </Text>
                        <Text>
                            <strong>Status:</strong>{" "}
                            <Tag
                                color={getStatusColor()}
                                style={{
                                    fontWeight: 600,
                                    borderRadius: 6,
                                    padding: "2px 10px",
                                    fontSize: 14,
                                }}
                            >
                                {daysLeft > 0 ? `${daysLeft} days left` : "Ended"}
                            </Tag>
                        </Text>
                    </div>

                    <Divider style={{ margin: "16px 0" }} />

                    {/* Instructions */}
                    <div
                        style={{
                            background: "#f9fafb",
                            borderRadius: 12,
                            padding: "20px 24px",
                            border: "1px solid #e5e7eb",
                            boxShadow: "inset 0 1px 2px rgba(0,0,0,0.02)",
                        }}
                    >
                        <Title
                            level={4}
                            style={{
                                marginBottom: 12,
                                color: "#1f2937",
                                fontWeight: 600,
                                fontSize: 18,
                            }}
                        >
                            Please Read Carefully:
                        </Title>

                        <Paragraph
                            style={{
                                fontSize: 15,
                                lineHeight: 1.8,
                                color: "#374151",
                                marginBottom: 0,
                            }}
                        >
                            • Once you start the exam, the timer will begin immediately. <br />
                            • Do not close or refresh the browser during the exam. <br />
                            • Ensure a stable internet connection throughout. <br />
                            • Each question carries equal marks unless mentioned otherwise. <br />
                            • Navigate questions easily using the sidebar. <br />
                            • Your answers are auto-submitted when the timer ends. <br />
                            • Avoid switching tabs — this may lead to disqualification.
                        </Paragraph>
                    </div>

                    {/* Buttons */}
                    <Space
                        style={{
                            display: "flex",
                            justifyContent: "center",
                            marginTop: 36,
                            gap: 20,
                            flexWrap: "wrap",
                        }}
                    >
                        <Button
                            size="large"
                            type={"default"}
                            onClick={() => history.goBack()}
                        >
                            Go Back
                        </Button>

                        <Button
                            type="primary"
                            size="large"
                            onClick={handleStart}
                            disabled={daysLeft <= 0}

                        >
                            Start Now
                        </Button>
                    </Space>
                </Card>
            </Content>
        </Layout>
    );
};

export default Instructions;
