import React from "react";
import { Accordion, AccordionDetails, AccordionSummary, Box, Button, Chip, LinearProgress, Typography } from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { useI18n } from "../../i18n/I18nProvider";
import { localizeCompletenessLabel } from "./careerCompletenessLabels";

// Display-only slice of the Career Profile page: the completeness meter, the "missing" chips, and the
// version-history accordion. Extracted from CareerProfilePage as the first step of the Phase 1
// component split. It owns no state and makes no API calls — the parent still holds `completeness`
// and `versions` and performs the restore — so save/load behaviour is unchanged.
export type CareerCompletenessView = {
  percent: number;
  missing: string[];
};

export type CareerVersionView = {
  version: number;
  source: string;
  createdAtUtc: string;
  isCurrent: boolean;
};

export default function ProfileCompleteness({
  completeness,
  versions,
  loading,
  onRestore,
  showSummary = true,
}: {
  completeness: CareerCompletenessView | null;
  versions: CareerVersionView[];
  loading: boolean;
  onRestore: (version: number) => void;
  showSummary?: boolean;
}) {
  const { language, t } = useI18n();
  if ((!showSummary || !completeness) && versions.length <= 1) return null;

  const locale = language === "nb" ? "nb-NO" : "en";

  return (
    <Box sx={{ mb: 2.5, p: 2, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
      {showSummary && completeness ? (
        <>
          <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 2, flexWrap: "wrap", mb: 1 }}>
            <Typography variant="subtitle1" sx={{ fontWeight: 900 }}>{t("profileCvCompletenessTitle")}</Typography>
            <Typography variant="h6" sx={{ fontWeight: 900 }}>{completeness.percent}%</Typography>
          </Box>
          <LinearProgress
            variant="determinate"
            value={completeness.percent}
            color={completeness.percent >= 80 ? "success" : completeness.percent >= 40 ? "primary" : "warning"}
            sx={{ height: 8, borderRadius: 999 }}
          />
          {completeness.missing.length > 0 ? (
            <Box sx={{ display: "flex", gap: 0.75, flexWrap: "wrap", alignItems: "center", mt: 1.25 }}>
              <Typography variant="body2" sx={{ color: "text.secondary" }}>{t("profileCvCompletenessMissing")}</Typography>
              {completeness.missing.map((label) => (
                <Chip key={label} size="small" label={localizeCompletenessLabel(label, t)} sx={{ height: 22, fontWeight: 700 }} />
              ))}
            </Box>
          ) : (
            <Typography variant="body2" sx={{ color: "success.main", mt: 1.25, fontWeight: 700 }}>{t("profileCvCompletenessComplete")}</Typography>
          )}
        </>
      ) : null}
      {versions.length > 1 ? (
        <Accordion disableGutters elevation={0} sx={{ mt: showSummary ? 1.5 : 0, "&:before": { display: "none" }, backgroundColor: "transparent" }}>
          <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ px: 0, minHeight: 0 }}>
            <Typography variant="body2" sx={{ fontWeight: 700 }}>{t("profileCvVersionHistory", { count: versions.length })}</Typography>
          </AccordionSummary>
          <AccordionDetails sx={{ px: 0, pt: 0 }}>
            <Box sx={{ display: "grid", gap: 0.75 }}>
              {versions.slice(0, 12).map((v) => (
                <Box key={v.version} sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, flexWrap: "wrap" }}>
                  <Typography variant="body2" sx={{ color: "text.secondary" }}>
                    v{v.version} · {v.source} · {new Date(v.createdAtUtc).toLocaleString(locale)}{v.isCurrent ? ` · ${t("profileCvVersionCurrent")}` : ""}
                  </Typography>
                  {!v.isCurrent ? (
                    <Button size="small" variant="text" disabled={loading} onClick={() => onRestore(v.version)}>{t("profileCvVersionRestore")}</Button>
                  ) : null}
                </Box>
              ))}
            </Box>
          </AccordionDetails>
        </Accordion>
      ) : null}
    </Box>
  );
}
