import * as React from 'react';
import { Box, Typography, Paper, CircularProgress } from '@mui/material';
import { ResourceConfig } from '../types/config';
import { useResource } from '../hooks/useResource';
import GenericForm from './GenericForm';
import EnhancedTable from './EnhancedTable';
import { useParams, useLocation, useNavigate, Routes, Route } from 'react-router-dom';

interface ResourceViewProps {
  config: ResourceConfig;
  onNavigateToResource?: (resourceName: string, id: string) => void;
}

export default function ResourceView({ config, onNavigateToResource }: ResourceViewProps) {
  const { id } = useParams();
  const location = useLocation();
  const navigate = useNavigate();
  
  const isCreate = location.pathname.endsWith('/create');
  const isEdit = location.pathname.includes('/edit/');
  const isView = !!id && !isEdit;
  const isList = !id && !isCreate;

  const { useList, useRead, useCreate, useUpdate, useDelete } = useResource(config);

  const listQuery = useList();
  const itemQuery = useRead(id || "");
  
  const createMutation = useCreate();
  const updateMutation = useUpdate();
  const deleteMutation = useDelete();

  const handleEdit = (item: any) => {
    navigate(`/${config.name}/edit/${item[config.primaryKey]}`);
  };

  const handleCreate = () => {
    navigate(`/${config.name}/create`);
  };

  const handleSave = async (formData: any) => {
    try {
      if (isEdit) {
        await updateMutation.mutateAsync({ id: id!, data: formData });
      } else {
        await createMutation.mutateAsync(formData);
      }
      navigate(`/${config.name}`);
    } catch (err) {
      console.error('Save failed:', err);
    }
  };

  const handleDelete = async (itemId: string) => {
    if (window.confirm('Are you sure you want to delete this item?')) {
      await deleteMutation.mutateAsync(itemId);
    }
  };

  if (isList && listQuery.isLoading) return <CircularProgress />;
  if ((isEdit || isView) && itemQuery.isLoading) return <CircularProgress />;

  return (
    <Box>
      {isList ? (
        <EnhancedTable
          config={config}
          data={listQuery.data || []}
          onEdit={handleEdit}
          onDelete={handleDelete}
          onCreate={handleCreate}
          onNavigateToResource={(res, id) => navigate(`/${res}/${id}`)}
        />
      ) : (
        <Paper sx={{ p: 4 }}>
          <GenericForm
            config={config}
            initialData={isCreate ? null : itemQuery.data}
            onSave={handleSave}
            onCancel={() => navigate(`/${config.name}`)}
            loading={createMutation.isPending || updateMutation.isPending}
            readOnly={isView}
            onEditClick={() => navigate(`/${config.name}/edit/${id}`)}
          />
        </Paper>
      )}
    </Box>
  );
}
