import AddOutlined from "@mui/icons-material/AddOutlined";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import { useCallback, useMemo, useState } from "react";
import { useToast } from "@/shared/ui/ToastProvider.jsx";
import { createBanner, listBanners } from "../api/business.js";
import { BannerCreateDialog } from "../components/BannerCreateDialog.jsx";
import { useExternalI18n } from "../i18n/ExternalI18nProvider.jsx";
import { translateExternalError } from "../i18n/errors.js";
import { ExternalPage, ExternalPageState, PagePagination, ResponsiveDataList, StatusChip } from "../shared/PageComponents.jsx";
import { usePagedResource } from "../shared/usePagedResource.js";

export default function BannersPage() {
  const { showToast } = useToast();
  const { t } = useExternalI18n();
  const [open, setOpen] = useState(false);
  const [page, setPage] = useState(1);
  const [submitting, setSubmitting] = useState(false);
  const load = useCallback(() => listBanners({ page, page_size: 20 }), [page]);
  const { data, error, loading, reload } = usePagedResource(load);
  const columns = useMemo(() => [
    { key: "banner", label: t("banners.banner"), render: (item) => <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>{item.coverUrl ? <Box alt={item.description} className="external-banner-thumb" component="img" src={item.coverUrl} /> : null}<Box><Typography fontWeight={650}>{item.description || "-"}</Typography><Typography color="text.secondary" variant="caption">ID {item.id || "-"}</Typography></Box></Stack> },
    { key: "type", label: t("banners.type"), render: (item) => item.bannerType || "-" },
    { key: "platform", label: t("banners.platform"), render: (item) => item.platform || t("common.all") },
    { key: "sort", label: t("banners.sort"), render: (item) => item.sortOrder },
    { key: "status", label: t("common.status"), render: (item) => <StatusChip status={item.status} /> }
  ], [t]);

  const submit = async (form) => {
    setSubmitting(true);
    try {
      await createBanner(form);
      showToast(t("banners.created"), "success");
      setOpen(false);
      reload();
    } catch (requestError) {
      showToast(translateExternalError(requestError, t, "banners.createFailed"), "error");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <ExternalPage actions={<Button onClick={() => setOpen(true)} startIcon={<AddOutlined />} variant="contained">{t("banners.create")}</Button>} title={t("banners.title")}>
      <ExternalPageState error={error} loading={loading} onRetry={reload} />
      {!loading && !error ? <><ResponsiveDataList columns={columns} items={data.items} rowKey={(item) => item.id} /><PagePagination {...data} onChange={setPage} /></> : null}
      <BannerCreateDialog loading={submitting} open={open} onClose={() => setOpen(false)} onSubmit={submit} />
    </ExternalPage>
  );
}
