OpenAI

import { Map, TileLayer, GeoJSON, Popup } from 'react-leaflet';
import { useEffect, useState } from 'react';
import { Feature, FeatureCollection, Geometry } from 'geojson';

interface SpatialAnalysisProps {
  data: FeatureCollection<Geometry>;
  analysisType: 'hotspot' | 'clustering' | 'interpolation';
  parameters: {
    variable: string;
    method: string;
    threshold?: number;
  };
}

export const SpatialAnalysisMap: React.FC<SpatialAnalysisProps> = ({
  data,
  analysisType,
  parameters
}) => {
  const [analysisResults, setAnalysisResults] = useState<FeatureCollection | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const performAnalysis = async () => {
      setLoading(true);
      setError(null);
      
      try {
        const response = await fetch('/api/spatial-analysis', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            data,
            analysisType,
            parameters
          })
        });

        if (!response.ok) {
          throw new Error(`Analysis failed: ${response.statusText}`);
        }

        const results = await response.json();
        setAnalysisResults(results);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Unknown error occurred');
      } finally {
        setLoading(false);
      }
    };

    if (data && data.features.length > 0) {
      performAnalysis();
    }
  }, [data, analysisType, parameters]);

  const getStyle = (feature: Feature) => {
    const value = feature.properties?.[parameters.variable];
    if (!value) return { fillColor: '#ccc', weight: 1, opacity: 1, color: 'white' };

    // Dynamic color scaling based on data values
    const colors = ['#fee5d9', '#fcae91', '#fb6a4a', '#de2d26', '#a50f15'];
    const maxVal = Math.max(...data.features.map(f => f.properties?.[parameters.variable] || 0));
    const colorIndex = Math.floor((value / maxVal) * (colors.length - 1));
    
    return {
      fillColor: colors[colorIndex],
      weight: 2,
      opacity: 1,
      color: 'white',
      fillOpacity: 0.7
    };
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        <span className="ml-2">Performing spatial analysis...</span>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-red-50 border border-red-200 rounded-md p-4">
        <div className="flex">
          <div className="text-red-400">
            <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
            </svg>
          </div>
          <div className="ml-3">
            <h3 className="text-sm font-medium text-red-800">Analysis Error</h3>
            <p className="text-sm text-red-700 mt-1">{error}</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="relative">
      <Map
        center={[39.8283, -98.5795]}
        zoom={4}
        className="h-96 w-full rounded-lg shadow-lg"
      >
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        />
        {analysisResults && (
          <GeoJSON
            data={analysisResults}
            style={getStyle}
            onEachFeature={(feature, layer) => {
              const value = feature.properties?.[parameters.variable];
              if (value !== undefined) {
                layer.bindPopup(`
                  <div class="p-2">
                    <h3 class="font-semibold">${feature.properties?.name || 'Location'}</h3>
                    <p class="text-sm text-gray-600">
                      ${parameters.variable}: ${value.toLocaleString()}
                    </p>
                  </div>
                `);
              }
            }}
          />
        )}
      </Map>
      
      {analysisResults && (
        <div className="mt-4 p-4 bg-gray-50 rounded-lg">
          <h3 className="text-lg font-semibold mb-2">Analysis Summary</h3>
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <span className="font-medium">Features Analyzed:</span> {analysisResults.features.length}
            </div>
            <div>
              <span className="font-medium">Analysis Type:</span> {analysisType}
            </div>
            <div>
              <span className="font-medium">Method:</span> {parameters.method}
            </div>
            <div>
              <span className="font-medium">Variable:</span> {parameters.variable}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

##### Map Creation
- **Interactive Maps**: Exceptional React-Leaflet and Mapbox implementations
- **Custom Components**: Sophisticated reusable mapping components
- **Performance Optimization**: Advanced rendering optimizations
- **User Experience**: Intuitive and responsive map interfaces

##### Data Analysis
- **Statistical Analysis**: Comprehensive statistical methods
- **Machine Learning**: Advanced ML model integration
- **Data Visualization**: Sophisticated chart and graph generation
- **Insight Generation**: Deep data interpretation and insights

##### SQL Execution
- **Query Optimization**: Exceptional performance tuning
- **Complex Analytics**: Advanced analytical queries
- **Data Modeling**: Sophisticated database design
- **Performance Monitoring**: Comprehensive query analysis

### GPT-4.1 Mini
**Best for**: Balanced performance and cost, general-purpose tasks

#### Key Capabilities
- **Balanced Performance**: Good quality with reasonable speed
- **Cost Efficiency**: Affordable for most use cases
- **Reliability**: Consistent performance across tasks
- **Versatility**: Handles diverse task types effectively

#### Performance in Nika Tasks

##### Coding
- **Quality**: Good code generation with proper structure
- **Speed**: Fast response times for most tasks
- **Documentation**: Adequate comments and documentation
- **Best For**: Standard application development

##### Map Creation
- **Standard Maps**: Good quality for common visualizations
- **Performance**: Efficient rendering for typical datasets
- **Styling**: Effective visual design
- **Best For**: Regular mapping applications

##### Data Analysis
- **Standard Analysis**: Good for routine analytical tasks
- **Speed**: Fast processing for common operations
- **Interpretation**: Adequate result explanation
- **Best For**: Regular reporting and analysis

##### SQL Execution
- **Standard Queries**: Good performance on typical queries
- **Basic Optimization**: Adequate query tuning
- **Error Handling**: Good error management
- **Best For**: Routine database operations

## Use Case Recommendations

### Choose GPT-4.1 When:
- **Complex Applications**: Sophisticated web applications and dashboards
- **Advanced Analysis**: Research-level data analysis
- **Production Systems**: Critical business applications
- **Innovation**: Cutting-edge features and capabilities
- **Code Quality**: High-quality, maintainable code

### Choose GPT-4.1 Mini When:
- **Standard Applications**: Common business applications
- **Cost Optimization**: Budget-conscious projects
- **Quick Development**: Rapid prototyping and development
- **Regular Tasks**: Routine analysis and reporting
- **Team Development**: Collaborative development environments

## Configuration Examples

### GPT-4.1 Configuration
```javascript
const gpt4Config = {
  provider: 'openai',
  model: 'gpt-4.1',
  temperature: 0.2,
  maxTokens: 4096,
  systemPrompt: `You are an expert full-stack developer specializing in geospatial applications. 
  Create high-quality, production-ready code with comprehensive error handling, 
  performance optimization, and excellent user experience.`,
  features: {
    creativity: 'high',
    codeQuality: 'excellent',
    analysis: 'comprehensive'
  }
};

const gpt4MiniConfig = {
  provider: 'openai',
  model: 'gpt-4.1-mini',
  temperature: 0.1,
  maxTokens: 2048,
  systemPrompt: `You are a reliable software developer. Create clean, 
  functional code that follows best practices and is easy to maintain.`,
  features: {
    speed: 'optimized',
    cost: 'efficient',
    reliability: 'high'
  }
};

import nikaplanet.com as nai

# Initialize with OpenAI
client = nai.Client(
    llm_provider='openai',
    model='gpt-4.1'
)

# Complex application development
app_result = client.generate_application({
    'type': 'geospatial_dashboard',
    'requirements': {
        'features': ['interactive_maps', 'data_analysis', 'real_time_updates'],
        'technologies': ['react', 'typescript', 'leaflet', 'postgis'],
        'data_sources': ['postgresql', 'geojson', 'csv']
    },
    'styling': 'modern_dark_theme',
    'performance': 'optimized'
})

# Multi-model workflow for complex applications
workflow = nai.Workflow()

# Use GPT-4.1 for architecture design
workflow.add_step(
    'design',
    model='gpt-4.1',
    task='application_architecture'
)

# Use GPT-4.1 Mini for component generation
workflow.add_step(
    'components',
    model='gpt-4.1-mini',
    task='ui_components'
)

# Use GPT-4.1 for integration
workflow.add_step(
    'integration',
    model='gpt-4.1',
    task='system_integration'
)

# Use GPT-4.1 Mini for testing
workflow.add_step(
    'testing',
    model='gpt-4.1-mini',
    task='unit_tests'
)

results = workflow.execute()