import * as React from 'react';
import { Box, Typography, Paper, CircularProgress, Alert } from '@mui/material';
import { useResource } from '../hooks/useResource';
import GenericForm from './GenericForm';
import { ConfigContext } from '../App';

export default function ProfileView() {
  const appConfig = React.useContext(ConfigContext);
  const profileConfig = appConfig?.profile;
  const resourceConfig = appConfig?.resources.find(r => r.name === profileConfig?.resource);

  if (!profileConfig || !resourceConfig) {
    debugger;
    return <Alert severity="error">Profile configuration not found.</Alert>;
  }

  const { useMe, useUpdate } = useResource(resourceConfig);
  const { data: profile, isLoading, error } = useMe();
  const updateMutation = useUpdate();

  const handleSave = async (formData: any) => {
    try {
      const id = profile[resourceConfig.primaryKey];
      await updateMutation.mutateAsync({ id, data: formData });
    } catch (err) {
      console.error('Profile update failed:', err);
    }
  };

  if (isLoading) {
    return (
      <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
        <CircularProgress />
      </Box>
    );
  }

  if (error) {
    return <Alert severity="error">Failed to load profile data.</Alert>;
  }

  return (
    <Box sx={{ maxWidth: 800, mx: 'auto', mt: 4 }}>
      <Typography variant="h4" gutterBottom>
        My Profile
      </Typography>
      <Paper sx={{ p: 4, mt: 2 }}>
        <GenericForm
          config={resourceConfig}
          initialData={profile}
          onSave={handleSave}
          onCancel={() => window.history.back()}
          loading={updateMutation.isPending}
        />
      </Paper>
    </Box>
  );
}