"use client";

import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
import { Box, Button, Paper, Stack, Typography } from "@mui/material";
import { useTheme } from "@mui/material/styles";

import type { RgcDecisionRow } from "../rgc-decision-data";
import { RgcDecisionStatusChip } from "../components/rgc-decision-status-chip";

export function RgcDecisionDetailScreen({
  row,
  onBack,
}: {
  row: RgcDecisionRow;
  onBack: () => void;
}) {
  const theme = useTheme();

  const fields = [
    ["Ministry", row.ministry],
    ["Meeting Date", row.meetingDate],
    ["Category", row.category],
    ["Indicator", row.indicator || "-"],
    ["Focal Person (H.E)", row.focalPerson],
    ["Source of Verification", row.sourceOfVerification],
  ];

  return (
    <Box sx={{ p: { xs: 2, md: 3 }, minHeight: "calc(100vh - 64px)" }}>
      <Button
        startIcon={<ArrowBackRoundedIcon />}
        onClick={onBack}
        sx={{ mb: 2, textTransform: "none", fontWeight: 700 }}
      >
        Back
      </Button>

      <Paper
        elevation={0}
        sx={{
          p: { xs: 2, md: 3 },
          borderRadius: "12px",
          border: `1px solid ${theme.palette.divider}`,
        }}
      >
        <Stack
          direction="row"
          spacing={2}
          sx={{ justifyContent: "space-between" }}
        >
          <Typography sx={{ fontSize: 24, fontWeight: 800 }}>
            RGC Decision Detail
          </Typography>
          <RgcDecisionStatusChip status={row.status} />
        </Stack>

        <Box
          sx={{
            mt: 3,
            display: "grid",
            gridTemplateColumns: { xs: "1fr", md: "repeat(2, 1fr)" },
            gap: 2,
          }}
        >
          {fields.map(([label, value]) => (
            <Box key={label}>
              <Typography sx={{ color: "text.secondary", fontSize: 12 }}>
                {label}
              </Typography>
              <Typography sx={{ mt: 0.5, fontSize: 14, fontWeight: 600 }}>
                {value}
              </Typography>
            </Box>
          ))}
        </Box>

        <Box sx={{ mt: 3 }}>
          <Typography sx={{ color: "text.secondary", fontSize: 12 }}>
            RGC Decision
          </Typography>
          <Typography sx={{ mt: 0.75, whiteSpace: "pre-wrap", lineHeight: 1.7 }}>
            {row.decision}
          </Typography>
        </Box>
      </Paper>
    </Box>
  );
}

export default RgcDecisionDetailScreen;