import React, { useCallback, useEffect, useMemo, useState } from "react";

import { Alert, Box, Button, Typography } from "@mui/material";

import { api, getApiErrorMessage } from "../api";
import { clearAuthClientState } from "../auth";
import { useToast } from "../toast";
import { useI18n } from "../i18n/I18nProvider";
import { PageSection } from "../layout/PageLayout";

type MeResponse = {
  provider?: string;
  id?: string;
  email?: string;
  userName?: string;
  firstName?: string;
  lastName?: string;
  displayName?: string;
  roles?: string[];
  googleLink?: {
    linked: boolean;
    email?: string | null;
  } | null;
};

export default function AuthStatusCard() {
  const { toast } = useToast();
  const { t } = useI18n();
  const [me, setMe] = useState<MeResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const refresh = useCallback(() => {
    setLoading(true);
    setError(null);
    api.get<MeResponse>("/auth/me")
      .then((r) => setMe(r.data))
      .catch((e) => {
        setMe(null);
        if (e?.response?.status !== 401) setError(getApiErrorMessage(e, t("profileLoadFailed")));
      })
      .finally(() => setLoading(false));
  }, [t]);

  useEffect(() => {
    refresh();
    window.addEventListener("auth-changed", refresh);
    return () => window.removeEventListener("auth-changed", refresh);
  }, [refresh]);

  const label = useMemo(() => me?.userName || me?.displayName || [me?.firstName, me?.lastName].filter(Boolean).join(" ") || me?.email, [me]);

  return (
    <PageSection title={t("authStatusTitle")} surface>
      {loading ? <Typography role="status" color="text.secondary">{t("loading")}</Typography> : error ? (
        <Alert severity="error" action={<Button color="inherit" onClick={refresh}>{t("retry")}</Button>}>{error}</Alert>
      ) : !me ? (
        <Typography sx={{ color: "text.secondary" }}>{t("authStatusNotSignedIn")}</Typography>
      ) : (
        <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5, overflowWrap: "anywhere" }}>
          <Typography sx={{ color: "text.secondary" }}>
            {label ? t("signedInAs", { name: label }) : t("signedIn")}
            {me.provider ? ` (${me.provider === "local" ? t("profileLocalAccount") : me.provider === "google" ? t("profileGoogleSession") : t("profileExternalSession")})` : ""}
          </Typography>
          {me?.roles && me.roles.length > 0 ? (
            <Typography sx={{ color: "text.secondary" }}>
              {t("authStatusRoles", { roles: me.roles.join(", ") })}
            </Typography>
          ) : null}
          {me?.googleLink?.linked ? (
            <Typography sx={{ color: "text.secondary" }}>
              {t("authStatusGoogleLinked", { suffix: me.googleLink.email ? `: ${me.googleLink.email}` : "." })}
            </Typography>
          ) : null}

          <Box sx={{ mt: 1 }}>
            <Button
              variant="outlined"
              onClick={() => {
                void api.post("/auth/logout").catch(() => undefined).finally(() => {
                  setMe(null);
                  clearAuthClientState();
                  toast(t("signedOut"), "info");
                });
              }}
            >
              {t("signOut")}
            </Button>
          </Box>
        </Box>
      )}
    </PageSection>
  );
}