import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import {
  Box,
  Typography,
  Button,
  Paper,
  Grid,
  CircularProgress,
} 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";

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

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);

  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 (
      <Typography variant="body1" color="text.secondary" sx={{ py: 4 }}>
        Record not found
      </Typography>
    );
  }

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

  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 }}>
          {applyDisplayFormat(data, resource.displayFormat)}
        </Typography>
        {resource.operations.update && (
          <Button variant="contained" startIcon={<EditIcon />} onClick={() => navigate(`${basePath}/${resource.name}/${id}/edit`)}>
            Edit
          </Button>
        )}
      </Box>

      <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} />
              </Grid>
            );
          })}
        </Grid>
      </Paper>
    </Box>
  );
}