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

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

export default function ResourceView({ config, onNavigateToResource }: ResourceViewProps) {
  const [view, setView] = React.useState<'list' | 'create' | 'edit'>('list');
  const [selectedItem, setSelectedItem] = React.useState<any>(null);

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

  const { data, isLoading, error } = useList();
  const createMutation = useCreate();
  const updateMutation = useUpdate();
  const deleteMutation = useDelete();

  const handleEdit = (item: any) => {
    setSelectedItem(item);
    setView('edit');
  };

  const handleCreate = () => {
    setSelectedItem(null);
    setView('create');
  };

  const handleSave = async (formData: any) => {
    try {
      if (view === 'edit') {
        const id = formData[config.primaryKey];
        await updateMutation.mutateAsync({ id, data: formData });
      } else {
        await createMutation.mutateAsync(formData);
      }
      setView('list');
    } catch (err) {
      console.error('Save failed:', err);
    }
  };

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

  if (isLoading) return <CircularProgress />;
  if (error) return <Typography color="error">Error loading {config.pluralLabel}</Typography>;

  return (
    <Box>
      {view === 'list' ? (
        <EnhancedTable
          config={config}
          data={data || []}
          onEdit={handleEdit}
          onDelete={handleDelete}
          onCreate={handleCreate}
          onNavigateToResource={onNavigateToResource}
        />
      ) : (
        <Paper sx={{ p: 4 }}>
          <GenericForm
            config={config}
            initialData={selectedItem}
            onSave={handleSave}
            onCancel={() => setView('list')}
            loading={createMutation.isPending || updateMutation.isPending}
          />
        </Paper>
      )}
    </Box>
  );
}