import React from "react";
import { Box, Typography, Avatar, FormHelperText } from "@mui/material";
import Button from "@mui/material/Button";
import type { FieldConfig } from "../../../types";
import { getApi } from "../../../hooks/useApi";

interface Props {
  field: FieldConfig;
  value: any;
  onChange: (value: any) => void;
  id?: string | number;
  uploadUrl?: string;
}

export function ImageField({ field, value, onChange, id, uploadUrl }: Props) {
  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    if (!id || !uploadUrl) {
      const reader = new FileReader();
      reader.onload = () => onChange(reader.result);
      reader.readAsDataURL(file);
      return;
    }

    const formData = new FormData();
    formData.append("file", file);

    try {
      const api = getApi();
      const url = uploadUrl.replace("{id}", String(id));
      const res = await api.post(url, formData, {
        headers: { "Content-Type": "multipart/form-data" },
      });
      onChange(res.data.url ?? res.data);
    } catch {
      const reader = new FileReader();
      reader.onload = () => onChange(reader.result);
      reader.readAsDataURL(file);
    }
  };

  return (
    <Box>
      <Typography variant="body2" fontWeight={600} sx={{ mb: 0.5 }}>
        {field.label}
      </Typography>
      {value ? (
        <Avatar src={value} variant="rounded" sx={{ width: 120, height: 120 }} />
      ) : (
        <Button variant="outlined" component="label" size="small">
          Upload {field.label}
          <input type="file" hidden accept="image/*" onChange={handleUpload} />
        </Button>
      )}
      <FormHelperText>{field.description}</FormHelperText>
    </Box>
  );
}