/**
 * POI Detection Onboarding Step
 *
 * Onboarding wizard step for automatic POI detection during bakery registration
 */

import React, { useState, useEffect } from 'react';
import { Button } from '@/components/ui/Button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/Card';
import { Alert, AlertDescription } from '@/components/ui/Alert';
import { Progress } from '@/components/ui/Progress';
import { CheckCircle, MapPin, AlertCircle, Loader2, ArrowRight } from 'lucide-react';
import { poiContextApi } from '@/services/api/poiContextApi';
import { POI_CATEGORY_METADATA } from '@/types/poi';
import type { POIDetectionResponse } from '@/types/poi';
import { useWizardContext } from '../context';

interface POIDetectionStepProps {
  onNext?: () => void;
  onPrevious?: () => void;
  onComplete?: (data?: any) => void;
  onUpdate?: (data: any) => void;
  isFirstStep?: boolean;
  isLastStep?: boolean;
  initialData?: any;
}

export const POIDetectionStep: React.FC<POIDetectionStepProps> = ({
  onComplete,
  onUpdate,
  initialData,
}) => {
  const [isDetecting, setIsDetecting] = useState(false);
  const [detectionResult, setDetectionResult] = useState<POIDetectionResponse | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [progress, setProgress] = useState(0);
  const wizardContext = useWizardContext();
  
  // Extract tenantId and location from context or initialData
  // Prioritize initialData (from previous step completion), fall back to context
  const tenantId = initialData?.tenantId || wizardContext.state.tenantId;
  const bakeryLocation = initialData?.bakeryLocation || wizardContext.state.bakeryLocation;

  // Auto-detect POIs when both tenantId and location are available
  useEffect(() => {
    if (tenantId && bakeryLocation?.latitude && bakeryLocation?.longitude) {
      handleDetectPOIs();
    } else {
      // If we don't have the required data, show a message
      setError('Location data not available. Please complete the previous step first.');
    }
  }, [tenantId, bakeryLocation]);

  const handleDetectPOIs = async () => {
    if (!tenantId || !bakeryLocation?.latitude || !bakeryLocation?.longitude) {
      setError('Tenant ID and location are required for POI detection.');
      return;
    }

    setIsDetecting(true);
    setError(null);
    setProgress(10);

    try {
      // Simulate progress updates
      const progressInterval = setInterval(() => {
        setProgress(prev => {
          if (prev >= 90) {
            clearInterval(progressInterval);
            return 90;
          }
          return prev + 10;
        });
      }, 500);

      const result = await poiContextApi.detectPOIs(
        tenantId,
        bakeryLocation.latitude,
        bakeryLocation.longitude,
        false
      );

      clearInterval(progressInterval);
      setProgress(100);
      setDetectionResult(result);
    } catch (err: any) {
      setError(err.message || 'Failed to detect POIs');
      console.error('POI detection error:', err);
    } finally {
      setIsDetecting(false);
    }
  };

  // Loading state
  if (isDetecting) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MapPin className="h-5 w-5" />
            Detecting Nearby Points of Interest
          </CardTitle>
          <CardDescription>
            Analyzing your bakery's location to identify nearby schools, offices, transport hubs, and more...
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="flex flex-col items-center justify-center py-8">
            <Loader2 className="h-16 w-16 animate-spin text-blue-600 mb-4" />
            <div className="text-center">
              <div className="text-lg font-medium mb-2">
                Scanning OpenStreetMap data...
              </div>
              <div className="text-sm text-gray-600">
                This may take a few moments
              </div>
            </div>
          </div>

          <div className="space-y-2">
            <div className="flex justify-between text-sm text-gray-600 mb-1">
              <span>Detection Progress</span>
              <span>{progress}%</span>
            </div>
            <Progress value={progress} className="h-2" />
          </div>

          <div className="grid grid-cols-3 gap-3">
            {Object.values(POI_CATEGORY_METADATA).slice(0, 9).map(category => (
              <div key={category.name} className="flex items-center gap-2 p-2 bg-gray-50 rounded">
                <span style={{ fontSize: '20px' }}>{category.icon}</span>
                <span className="text-xs text-gray-700">{category.displayName}</span>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    );
  }

  // Error state
  if (error && !detectionResult) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-red-600">
            <AlertCircle className="h-5 w-5" />
            POI Detection Failed
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <Alert variant="destructive">
            <AlertDescription>{error}</AlertDescription>
          </Alert>

          <div className="flex gap-3">
            <Button
              onClick={handleDetectPOIs}
              variant="outline"
              className="flex-1"
              disabled={isDetecting}
            >
              {isDetecting ? 'Detecting...' : 'Try Again'}
            </Button>
            <Button
              onClick={() => onComplete?.({ poi_detection_skipped: true })}
              variant="ghost"
              className="flex-1"
            >
              Skip for Now
            </Button>
          </div>
        </CardContent>
      </Card>
    );
  }

  // Success state
  if (detectionResult) {
    const { poi_context, competitive_insights } = detectionResult;
    const categoriesWithPOIs = Object.entries(poi_context.poi_detection_results)
      .filter(([_, data]) => data.count > 0)
      .sort((a, b) => (b[1].features?.proximity_score || 0) - (a[1].features?.proximity_score || 0));

    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-green-600">
            <CheckCircle className="h-5 w-5" />
            POI Detection Complete
          </CardTitle>
          <CardDescription>
            Successfully detected {poi_context.total_pois_detected} points of interest around your bakery
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Summary */}
          <div className="grid grid-cols-3 gap-4">
            <div className="p-4 bg-blue-50 rounded-lg text-center">
              <div className="text-3xl font-bold text-blue-600">
                {poi_context.total_pois_detected}
              </div>
              <div className="text-sm text-gray-700 mt-1">Total POIs</div>
            </div>
            <div className="p-4 bg-green-50 rounded-lg text-center">
              <div className="text-3xl font-bold text-green-600">
                {poi_context.relevant_categories?.length || 0}
              </div>
              <div className="text-sm text-gray-700 mt-1">Relevant Categories</div>
            </div>
            <div className="p-4 bg-purple-50 rounded-lg text-center">
              <div className="text-3xl font-bold text-purple-600">
                {Object.keys(poi_context.ml_features || {}).length}
              </div>
              <div className="text-sm text-gray-700 mt-1">ML Features</div>
            </div>
          </div>

          {/* Competitive Insights */}
          {competitive_insights && competitive_insights.length > 0 && (
            <Alert>
              <CheckCircle className="h-4 w-4" />
              <AlertDescription>
                <div className="font-semibold mb-2">Location Insights</div>
                <ul className="space-y-1 text-sm">
                  {competitive_insights.map((insight, index) => (
                    <li key={index}>{insight}</li>
                  ))}
                </ul>
              </AlertDescription>
            </Alert>
          )}

          {/* High Impact Categories */}
          {poi_context.high_impact_categories && poi_context.high_impact_categories.length > 0 && (
            <div>
              <div className="text-sm font-semibold text-gray-700 mb-3">
                High Impact Factors for Your Location
              </div>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                {poi_context.high_impact_categories.map(category => {
                  const metadata = (POI_CATEGORY_METADATA as Record<string, any>)[category];
                  if (!metadata) return null;

                  const categoryData = poi_context.poi_detection_results[category];

                  return (
                    <div
                      key={category}
                      className="p-3 border border-green-200 bg-green-50 rounded-lg"
                    >
                      <div className="flex items-center gap-2 mb-1">
                        <span style={{ fontSize: '24px' }}>{metadata.icon}</span>
                        <span className="font-medium text-sm">{metadata.displayName}</span>
                      </div>
                      <div className="text-xs text-gray-700">
                        {categoryData.count} {categoryData.count === 1 ? 'location' : 'locations'}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* All Categories */}
          {categoriesWithPOIs.length > 0 && (
            <div>
              <div className="text-sm font-semibold text-gray-700 mb-3">
                All Detected Categories
              </div>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
                {categoriesWithPOIs.map(([category, data]) => {
                  const metadata = (POI_CATEGORY_METADATA as Record<string, any>)[category];
                  if (!metadata) return null;

                  return (
                    <div
                      key={category}
                      className="flex items-center gap-2 p-2 bg-gray-50 rounded"
                    >
                      <span style={{ fontSize: '20px' }}>{metadata.icon}</span>
                      <div className="flex-1 min-w-0">
                        <div className="text-xs font-medium truncate">
                          {metadata.displayName}
                        </div>
                        <div className="text-xs text-gray-600">
                          {data.count} nearby
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* Actions */}
          <div className="pt-4 border-t border-gray-200">
            <Button
              onClick={() => onComplete?.({
                poi_detection_completed: true,
                total_pois_detected: poi_context.total_pois_detected,
                relevant_categories: poi_context.relevant_categories,
                high_impact_categories: poi_context.high_impact_categories,
              })}
              size="lg"
              className="w-full"
            >
              Continue to Next Step
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
            <p className="text-xs text-center text-gray-600 mt-3">
              These location-based features will enhance your demand forecasting accuracy
            </p>
          </div>
        </CardContent>
      </Card>
    );
  }

  // Default state - show loading or instruction if needed
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <MapPin className="h-5 w-5" />
          Preparing POI Detection
        </CardTitle>
        <CardDescription>
          Preparing to analyze nearby points of interest around your bakery
        </CardDescription>
      </CardHeader>
      <CardContent className="text-center py-8">
        <div className="text-gray-600 mb-4">
          {error || 'Waiting for location data...'}
        </div>
        {error && !tenantId && !bakeryLocation && (
          <p className="text-sm text-gray-600">
            Please complete the previous step to provide location information.
          </p>
        )}
      </CardContent>
    </Card>
  );
};
