khata-ui/react-openapi/src/components/ResourceDetail.tsx

import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import {
  Box,
  Typography,
  Button,
  Paper,
  Grid,
  CircularProgress,
  Tabs,
  Tab,
} from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import EditIcon from "@mui/icons-material/Edit";
import type { ResourceConfig } from "../types";
import { useResource } from "../context/useResource";
import { useAppContext } from "../context/AppContext";
import { DetailFieldRenderer, applyDisplayFormat } from "./fields";
import { SseStreamView } from "./SseStreamView";

interface ResourceDetailProps {
  resource: ResourceConfig;
  basePath: string;
}

function TabPanel({ children, value, index }: { children: React.ReactNode; value: number; index: number }) {
  if (value !== index) return null;
  return <Box sx={{ pt: 3 }}>{children}</Box>;
}

export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
  const navigate = useNavigate();
  const { id } = useParams();
  const crud = useResource(resource.name);
  const { resources: allResources } = useAppContext();
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [tabIndex, setTabIndex] = useState(0);

  useEffect(() => {
    if (id) {
      setLoading(true);
      crud
        .get(id)
        .then(setData)
        .catch(() => navigate(`${basePath}/${resource.name}`))
        .finally(() => setLoading(false));
    }
  }, [id]);

  if (loading) {
    return (
      <Box sx={{ display: "flex", justifyContent: "center", py: 8 }}>
        <CircularProgress />
      </Box>
    );
  }

  if (!data) {
    return (
      <Box sx={{ py: 6, textAlign: "center" }}>
        <Typography variant="body2" color="text.secondary">
          Record not found
        </Typography>
        <Button sx={{ mt: 1.5 }} onClick={() => navigate(`${basePath}/${resource.name}`)}>
          Back to list
        </Button>
      </Box>
    );
  }

  const visibleFields = resource.orderedFields.filter((f) => !f.hidden?.detail);

  const tabs = [{ label: "Details", key: "details" }];
  if (resource.subResources) {
    for (const subName of resource.subResources) {
      const sub = allResources.find((r) => r.name === subName);
      if (sub) {
        tabs.push({ label: sub.displayName, key: subName });
      }
    }
  }

  return (
    <Box>
      <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 3 }}>
        <Button startIcon={<ArrowBackIcon />} onClick={() => navigate(`${basePath}/${resource.name}`)}>
          Back
        </Button>
        <Typography variant="h5" fontWeight={700} sx={{ flex: 1, letterSpacing: "-0.02em" }}>
          {applyDisplayFormat(
            Object.fromEntries(
              resource.orderedFields.map((field) => {
                const value = data[field.name];
                if (field.fk && typeof value === "object" && value != null) {
                  const target = allResources.find((r) => r.name === field.fk!.resource);
                  if (target) return [field.name, applyDisplayFormat(value, target.displayFormat)];
                }
                return [field.name, value];
              })
            ),
            resource.displayFormat
          )}
        </Typography>
        {resource.operations.update && (
          <Button variant="contained" startIcon={<EditIcon />} onClick={() => navigate(`${basePath}/${resource.name}/${id}/edit`)}>
            Edit
          </Button>
        )}
      </Box>

      {tabs.length > 1 && (
        <Tabs value={tabIndex} onChange={(_, v) => setTabIndex(v)} sx={{ mb: 1 }}>
          {tabs.map((t) => (
            <Tab key={t.key} label={t.label} />
          ))}
        </Tabs>
      )}

      <TabPanel value={tabIndex} index={0}>
        <Paper variant="outlined" sx={{ p: 3 }}>
          <Grid container spacing={2}>
            {visibleFields.map((field) => {
              let value = data[field.name];
              let fmt = resource.displayFormat;
              if (field.fk && typeof value === "object") {
                const targetRes = allResources.find((r) => r.name === field.fk!.resource);
                fmt = targetRes!.displayFormat;
              } else if (field.refSchema && !field.fk && typeof value === "object") {
                fmt = field.inlineDisplayFormat ?? resource.displayFormat;
              }
              return (
                <Grid item xs={12} sm={6} md={4} key={field.name}>
                  <DetailFieldRenderer field={field} value={value} displayFormat={fmt} basePath={basePath} />
                </Grid>
              );
            })}
          </Grid>
        </Paper>
      </TabPanel>

      {tabs.slice(1).map((t, i) => {
        const sub = allResources.find((r) => r.name === t.key)!;
        const pathParam = sub.parent?.pathParam ?? "id";
        return (
          <TabPanel key={t.key} value={tabIndex} index={i + 1}>
            {sub.streaming ? (
              <SseStreamView resource={sub} pathParams={{ [pathParam]: id! }} />
            ) : null}
          </TabPanel>
        );
      })}
    </Box>
  );
}