"use client";

import Link from "next/link";

import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";

import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import CheckIcon from "@mui/icons-material/Check";

function MinistryIcon() {
    return (
        <Box
            sx={{
                width: 30,
                height: 30,
                borderRadius: "50%",
                flexShrink: 0,
                bgcolor: "#e8f4ff",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontSize: 18,
            }}
        >
            🌾
        </Box>
    );
}

export function ProgressReportHeaderSection({ id }: { id?: string }) {
    const theme = useTheme();

    return (
        <Box
            sx={{
                display: "flex",
                alignItems: { xs: "flex-start", md: "center" },
                justifyContent: "space-between",
                gap: 2,
                flexWrap: "wrap",
                minWidth: 0,
            }}
        >
            <Box
                sx={{
                    display: "flex",
                    alignItems: "flex-start",
                    gap: 2,
                    minWidth: 0,
                }}
            >
                <Button
                    component={Link}
                    href="/pswg/progress-report"
                    startIcon={<ArrowBackIosNewIcon sx={{ fontSize: 15 }} />}
                    sx={{
                        color: theme.palette.text.secondary,
                        textTransform: "none",
                        fontSize: 13,
                        minWidth: 0,
                        mt: 0.1,
                    }}
                >
                    Back
                </Button>

                <Box sx={{ minWidth: 0 }}>
                    <Box sx={{ display: "flex", alignItems: "center", gap: 1.2 }}>
                        <MinistryIcon />

                        <Typography
                            sx={{
                                fontSize: { xs: 17, md: 20 },
                                fontWeight: 700,
                                color: theme.palette.text.primary,
                                lineHeight: 1.2,
                            }}
                        >
                            Ministry of Agriculture Forestry and Fisheries
                        </Typography>
                    </Box>

                    <Typography
                        sx={{
                            mt: 0.6,
                            fontSize: 12,
                            color: theme.palette.text.secondary,
                        }}
                    >
                        Progress Reports / Semester 2 / Ministry of Agriculture Forestry and
                        Fisheries {id ? `/ ID ${id}` : ""}
                    </Typography>
                </Box>
            </Box>

            <Box sx={{ display: "flex", gap: "22px", flexWrap: "wrap" }}>
                <Button
                    variant="outlined"
                    sx={{
                        height: 44,
                        minWidth: 119,
                        px: 1.5,
                        py: 1.25,
                        borderRadius: "6px",
                        textTransform: "none",
                        fontSize: 13,
                        fontWeight: 500,
                        borderColor: "#1a64a8",
                        color: "#1a64a8",
                        bgcolor:
                            theme.palette.mode === "dark"
                                ? alpha("#1a64a8", 0.16)
                                : "#edf8fd",
                        "&:hover": {
                            borderColor: "#1a64a8",
                            bgcolor:
                                theme.palette.mode === "dark"
                                    ? alpha("#1a64a8", 0.24)
                                    : alpha("#1a64a8", 0.1),
                        },
                    }}
                >
                    Evaluation Link
                </Button>

                <Button
                    variant="contained"
                    startIcon={<CheckIcon sx={{ fontSize: 24 }} />}
                    sx={{
                        height: 44,
                        minWidth: 119,
                        px: 1.5,
                        py: 1.25,
                        borderRadius: "6px",
                        textTransform: "none",
                        fontSize: 13,
                        fontWeight: 500,
                        bgcolor: "#1a64a8",
                        boxShadow: "none",
                        "& .MuiButton-startIcon": { m: 0, mr: "10px" },
                        "&:hover": {
                            bgcolor: "#155489",
                            boxShadow: "none",
                        },
                    }}
                >
                    Reviewed
                </Button>
            </Box>
        </Box>
    );
}