"use client";

import type { ReactNode } from "react";

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

import CalendarTodayOutlinedIcon from "@mui/icons-material/CalendarTodayOutlined";
import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
import UpdateOutlinedIcon from "@mui/icons-material/UpdateOutlined";

type InfoItemProps = {
  icon: ReactNode;
  label: string;
  children: ReactNode;
};

function InfoItem({ icon, label, children }: InfoItemProps) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateColumns: { xs: "1fr", sm: "180px 1fr" },
        alignItems: "flex-start",
        gap: { xs: 0.6, sm: 1.4 },
        mb: 1.45,
        minWidth: 0,
      }}
    >
      <Box sx={{ display: "flex", alignItems: "center", gap: 0.9, minWidth: 0 }}>
        <Box
          sx={{
            color: theme.palette.text.secondary,
            display: "inline-flex",
            flexShrink: 0,
            "& svg": { fontSize: 16 },
          }}
        >
          {icon}
        </Box>

        <Typography
          noWrap
          sx={{
            fontSize: 13,
            color: theme.palette.text.secondary,
            fontWeight: 500,
          }}
        >
          {label} :
        </Typography>
      </Box>

      <Box sx={{ minWidth: 0 }}>{children}</Box>
    </Box>
  );
}

function ValueText({ children }: { children: ReactNode }) {
  return (
    <Typography
      sx={{
        fontSize: 13,
        color: "text.primary",
        fontWeight: 500,
        lineHeight: 1.45,
      }}
    >
      {children}
    </Typography>
  );
}

function FileText({ title }: { title: string }) {
  return (
    <Box sx={{ display: "flex", alignItems: "center", gap: 0.9, minWidth: 0 }}>
      <DescriptionOutlinedIcon
        sx={{ fontSize: 18, color: "#ef4444", flexShrink: 0 }}
      />

      <Box sx={{ minWidth: 0 }}>
        <Typography
          noWrap
          sx={{
            fontSize: 13,
            color: "text.primary",
            fontWeight: 600,
            lineHeight: 1.15,
          }}
        >
          {title}
        </Typography>

        <Typography
          sx={{
            mt: 0.2,
            fontSize: 10,
            color: "text.secondary",
            lineHeight: 1.1,
          }}
        >
          200 KB
        </Typography>
      </Box>
    </Box>
  );
}

export function ProgressReportInfoSection() {
  const theme = useTheme();

  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr" },
        gap: { xs: 2, lg: 8 },
        minWidth: 0,
      }}
    >
      <Box sx={{ minWidth: 0 }}>
        <Typography sx={{ fontSize: 18, fontWeight: 700, mb: 2 }}>
          MAFF Information
        </Typography>

        <InfoItem icon={<CalendarTodayOutlinedIcon />} label="Submitted Date">
          <ValueText>June 07, 2025</ValueText>
        </InfoItem>

        <InfoItem icon={<CalendarTodayOutlinedIcon />} label="Prepared By">
          <ValueText>
            Sabda{" "}
            <Box component="span" sx={{ color: "text.secondary", fontWeight: 400 }}>
              June 01, 2025
            </Box>
          </ValueText>
        </InfoItem>

        <InfoItem icon={<LinkOutlinedIcon />} label="Approval Progress Report">
          <FileText title="Approval Report Document" />
        </InfoItem>
      </Box>

      <Box sx={{ minWidth: 0 }}>
        <Typography sx={{ fontSize: 18, fontWeight: 700, mb: 2 }}>
          CDC
        </Typography>

        <InfoItem icon={<InfoOutlinedIcon />} label="Status">
          <Chip
            label="Under Review"
            size="small"
            sx={{
              height: 24,
              px: 1.5,
              borderRadius: "999px",
              bgcolor:
                theme.palette.mode === "dark"
                  ? alpha("#f59e0b", 0.18)
                  : "#fff4d6",
              color: "#f59e0b",
              border: `1px solid ${alpha("#f59e0b", 0.18)}`,
              fontSize: 12,
              fontWeight: 500,
            }}
          />
        </InfoItem>

        <InfoItem icon={<EditOutlinedIcon />} label="Reviewed By">
          <ValueText>
            Phanat{" "}
            <Box component="span" sx={{ color: "text.secondary", fontWeight: 400 }}>
              June 07, 2025
            </Box>
          </ValueText>
        </InfoItem>

        <InfoItem icon={<UpdateOutlinedIcon />} label="Latest Update">
          <ValueText>2025</ValueText>
        </InfoItem>

        <InfoItem icon={<LinkOutlinedIcon />} label="Request Document">
          <FileText title="Request Semester Report Document" />
        </InfoItem>
      </Box>
    </Box>
  );
}