import React, { useState, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Card, CardHeader, CardBody } from '../../ui/Card';
import { Button } from '../../ui/Button';
import { Input } from '../../ui/Input';
import { Textarea } from '../../ui';
import { Badge } from '../../ui/Badge';
import { Modal } from '../../ui/Modal';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../ui/Tabs';
import {
  Camera,
  CheckCircle,
  XCircle,
  AlertTriangle,
  Upload,
  Star,
  Target,
  FileText,
  Clock,
  User,
  Package
} from 'lucide-react';
import { useCurrentTenant } from '../../../stores/tenant.store';

export interface InspectionCriteria {
  id: string;
  category: string;
  name: string;
  description: string;
  type: 'visual' | 'measurement' | 'taste' | 'texture' | 'temperature';
  required: boolean;
  weight: number;
  acceptableCriteria: string;
  minValue?: number;
  maxValue?: number;
  unit?: string;
}

export interface InspectionResult {
  criteriaId: string;
  value: number | string | boolean;
  score: number;
  notes?: string;
  photos?: File[];
  pass: boolean;
  timestamp: string;
}

export interface QualityInspectionData {
  batchId: string;
  productName: string;
  inspectionType: string;
  inspector: string;
  startTime: string;
  criteria: InspectionCriteria[];
  results: InspectionResult[];
  overallScore: number;
  overallPass: boolean;
  finalNotes: string;
  photos: File[];
  correctiveActions: string[];
}

export interface QualityInspectionProps {
  className?: string;
  batchId?: string;
  productName?: string;
  inspectionType?: string;
  criteria?: InspectionCriteria[];
  onComplete?: (data: QualityInspectionData) => void;
  onCancel?: () => void;
  onSaveDraft?: (data: Partial<QualityInspectionData>) => void;
}

const DEFAULT_CRITERIA: InspectionCriteria[] = [
  {
    id: 'color_uniformity',
    category: 'Visual',
    name: 'Color Uniformity',
    description: 'Evaluate the consistency of color across the product',
    type: 'visual',
    required: true,
    weight: 15,
    acceptableCriteria: 'Score 7 or higher',
    minValue: 1,
    maxValue: 10
  },
  {
    id: 'shape_integrity',
    category: 'Visual',
    name: 'Shape Integrity',
    description: 'Check if the product maintains its intended shape',
    type: 'visual',
    required: true,
    weight: 20,
    acceptableCriteria: 'Score 7 or higher',
    minValue: 1,
    maxValue: 10
  },
  {
    id: 'surface_texture',
    category: 'Texture',
    name: 'Surface Texture',
    description: 'Evaluate surface texture quality',
    type: 'texture',
    required: true,
    weight: 15,
    acceptableCriteria: 'Score 7 or higher',
    minValue: 1,
    maxValue: 10
  },
  {
    id: 'weight_accuracy',
    category: 'Measurement',
    name: 'Weight Accuracy',
    description: 'Measure actual weight vs target weight',
    type: 'measurement',
    required: true,
    weight: 20,
    acceptableCriteria: 'Within �5% of target',
    unit: 'g'
  },
  {
    id: 'internal_texture',
    category: 'Texture',
    name: 'Internal Texture',
    description: 'Evaluate crumb structure and texture',
    type: 'texture',
    required: false,
    weight: 15,
    acceptableCriteria: 'Score 7 or higher',
    minValue: 1,
    maxValue: 10
  },
  {
    id: 'taste_quality',
    category: 'Taste',
    name: 'Taste Quality',
    description: 'Overall flavor and taste assessment',
    type: 'taste',
    required: false,
    weight: 15,
    acceptableCriteria: 'Score 7 or higher',
    minValue: 1,
    maxValue: 10
  }
];

const QualityInspection: React.FC<QualityInspectionProps> = ({
  className,
  batchId = 'PROD-2024-0123-001',
  productName = 'Pan de Molde Integral',
  inspectionType = 'Final Quality Check',
  criteria = DEFAULT_CRITERIA,
  onComplete,
  onCancel,
  onSaveDraft
}) => {
  const { t } = useTranslation();
  const currentTenant = useCurrentTenant();
  const [activeTab, setActiveTab] = useState('inspection');

  const [inspectionData, setInspectionData] = useState<Partial<QualityInspectionData>>({
    batchId,
    productName,
    inspectionType,
    inspector: currentTenant?.name || 'Inspector',
    startTime: new Date().toISOString(),
    criteria,
    results: [],
    finalNotes: '',
    photos: [],
    correctiveActions: []
  });

  const [currentCriteriaIndex, setCurrentCriteriaIndex] = useState(0);
  const [showPhotoModal, setShowPhotoModal] = useState(false);
  const [tempPhotos, setTempPhotos] = useState<File[]>([]);

  const updateResult = useCallback((criteriaId: string, updates: Partial<InspectionResult>) => {
    setInspectionData(prev => {
      const existingResults = prev.results || [];
      const existingIndex = existingResults.findIndex(r => r.criteriaId === criteriaId);

      let newResults;
      if (existingIndex >= 0) {
        newResults = [...existingResults];
        newResults[existingIndex] = { ...newResults[existingIndex], ...updates };
      } else {
        newResults = [...existingResults, {
          criteriaId,
          value: '',
          score: 0,
          pass: false,
          timestamp: new Date().toISOString(),
          ...updates
        }];
      }

      return { ...prev, results: newResults };
    });
  }, []);

  const getCriteriaResult = useCallback((criteriaId: string): InspectionResult | undefined => {
    return inspectionData.results?.find(r => r.criteriaId === criteriaId);
  }, [inspectionData.results]);

  const calculateOverallScore = useCallback((): number => {
    if (!inspectionData.results || inspectionData.results.length === 0) return 0;

    const totalWeight = criteria.reduce((sum, c) => sum + c.weight, 0);
    const weightedScore = inspectionData.results.reduce((sum, result) => {
      const criterion = criteria.find(c => c.id === result.criteriaId);
      return sum + (result.score * (criterion?.weight || 0));
    }, 0);

    return totalWeight > 0 ? weightedScore / totalWeight : 0;
  }, [inspectionData.results, criteria]);

  const isInspectionComplete = useCallback((): boolean => {
    const requiredCriteria = criteria.filter(c => c.required);
    const completedRequired = requiredCriteria.filter(c =>
      inspectionData.results?.some(r => r.criteriaId === c.id)
    );
    return completedRequired.length === requiredCriteria.length;
  }, [criteria, inspectionData.results]);

  const handlePhotoUpload = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(event.target.files || []);
    setTempPhotos(prev => [...prev, ...files]);
  }, []);

  const handleComplete = useCallback(() => {
    const overallScore = calculateOverallScore();
    const overallPass = overallScore >= 7.0; // Configurable threshold

    const completedData: QualityInspectionData = {
      ...inspectionData as QualityInspectionData,
      overallScore,
      overallPass,
      photos: tempPhotos
    };

    onComplete?.(completedData);
  }, [inspectionData, calculateOverallScore, tempPhotos, onComplete]);

  const currentCriteria = criteria[currentCriteriaIndex];
  const currentResult = currentCriteria ? getCriteriaResult(currentCriteria.id) : undefined;
  const overallScore = calculateOverallScore();
  const isComplete = isInspectionComplete();

  const renderCriteriaInput = (criterion: InspectionCriteria) => {
    const result = getCriteriaResult(criterion.id);

    if (criterion.type === 'measurement') {
      return (
        <div className="space-y-4">
          <Input
            type="number"
            placeholder={`Enter ${criterion.name.toLowerCase()}`}
            value={result?.value as string || ''}
            onChange={(e) => {
              const value = parseFloat(e.target.value);
              const score = !isNaN(value) ? Math.min(10, Math.max(1, 8)) : 0; // Simplified scoring
              updateResult(criterion.id, {
                value: e.target.value,
                score,
                pass: score >= 7
              });
            }}
          />
          {criterion.unit && (
            <p className="text-sm text-[var(--text-secondary)]">
              Unit: {criterion.unit}
            </p>
          )}
        </div>
      );
    }

    // For visual, texture, taste types - use 1-10 scale
    return (
      <div className="space-y-4">
        <div className="grid grid-cols-5 gap-2">
          {[...Array(10)].map((_, i) => {
            const score = i + 1;
            const isSelected = result?.score === score;
            return (
              <button
                key={score}
                className={`p-3 rounded-lg border-2 transition-all ${
                  isSelected
                    ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10'
                    : 'border-[var(--border-primary)] hover:border-[var(--color-primary)]/50'
                }`}
                onClick={() => {
                  updateResult(criterion.id, {
                    value: score,
                    score,
                    pass: score >= 7
                  });
                }}
              >
                <div className="text-center">
                  <div className="font-bold text-[var(--text-primary)]">{score}</div>
                  <div className="flex justify-center">
                    <Star className={`w-4 h-4 ${isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-tertiary)]'}`} />
                  </div>
                </div>
              </button>
            );
          })}
        </div>

        <div className="text-sm text-[var(--text-secondary)]">
          <p>1-3: Poor | 4-6: Fair | 7-8: Good | 9-10: Excellent</p>
          <p className="font-medium mt-1">Acceptable: {criterion.acceptableCriteria}</p>
        </div>
      </div>
    );
  };

  return (
    <Card className={className}>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-lg font-semibold text-[var(--text-primary)]">
              {t('quality.inspection.title', 'Quality Inspection')}
            </h3>
            <p className="text-sm text-[var(--text-secondary)]">
              {productName} " {batchId} " {inspectionType}
            </p>
          </div>
          <div className="flex items-center space-x-2">
            <Badge variant={isComplete ? 'success' : 'warning'}>
              {isComplete ? t('quality.status.complete', 'Complete') : t('quality.status.in_progress', 'In Progress')}
            </Badge>
            {overallScore > 0 && (
              <Badge variant={overallScore >= 7 ? 'success' : overallScore >= 5 ? 'warning' : 'error'}>
                {overallScore.toFixed(1)}/10
              </Badge>
            )}
          </div>
        </div>
      </CardHeader>

      <CardBody className="space-y-6">
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="inspection">
              {t('quality.tabs.inspection', 'Inspection')}
            </TabsTrigger>
            <TabsTrigger value="photos">
              {t('quality.tabs.photos', 'Photos')}
            </TabsTrigger>
            <TabsTrigger value="summary">
              {t('quality.tabs.summary', 'Summary')}
            </TabsTrigger>
          </TabsList>

          <TabsContent value="inspection" className="space-y-6">
            {/* Progress Indicator */}
            <div className="grid grid-cols-6 gap-2">
              {criteria.map((criterion, index) => {
                const result = getCriteriaResult(criterion.id);
                const isCompleted = !!result;
                const isCurrent = index === currentCriteriaIndex;

                return (
                  <button
                    key={criterion.id}
                    className={`p-2 rounded text-xs transition-all ${
                      isCurrent
                        ? 'bg-[var(--color-primary)] text-white'
                        : isCompleted
                        ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                        : 'bg-[var(--bg-secondary)] text-[var(--text-secondary)]'
                    }`}
                    onClick={() => setCurrentCriteriaIndex(index)}
                  >
                    {index + 1}
                  </button>
                );
              })}
            </div>

            {/* Current Criteria */}
            {currentCriteria && (
              <div className="space-y-6">
                <div className="bg-[var(--bg-secondary)] p-4 rounded-lg">
                  <div className="flex items-center justify-between mb-2">
                    <h4 className="font-semibold text-[var(--text-primary)]">
                      {currentCriteria.name}
                    </h4>
                    <Badge variant={currentCriteria.required ? 'error' : 'default'}>
                      {currentCriteria.required ? t('quality.required', 'Required') : t('quality.optional', 'Optional')}
                    </Badge>
                  </div>
                  <p className="text-sm text-[var(--text-secondary)] mb-3">
                    {currentCriteria.description}
                  </p>
                  <div className="flex items-center space-x-4 text-xs text-[var(--text-tertiary)]">
                    <span>Weight: {currentCriteria.weight}%</span>
                    <span>Category: {currentCriteria.category}</span>
                    <span>Type: {currentCriteria.type}</span>
                  </div>
                </div>

                {/* Input Section */}
                {renderCriteriaInput(currentCriteria)}

                {/* Notes Section */}
                <Textarea
                  placeholder={t('quality.inspection.notes_placeholder', 'Add notes for this criteria (optional)...')}
                  value={currentResult?.notes || ''}
                  onChange={(e) => {
                    updateResult(currentCriteria.id, { notes: e.target.value });
                  }}
                  rows={3}
                />

                {/* Navigation */}
                <div className="flex justify-between">
                  <Button
                    variant="outline"
                    onClick={() => setCurrentCriteriaIndex(Math.max(0, currentCriteriaIndex - 1))}
                    disabled={currentCriteriaIndex === 0}
                  >
                    {t('common.previous', 'Previous')}
                  </Button>
                  <Button
                    variant="primary"
                    onClick={() => setCurrentCriteriaIndex(Math.min(criteria.length - 1, currentCriteriaIndex + 1))}
                    disabled={currentCriteriaIndex === criteria.length - 1}
                  >
                    {t('common.next', 'Next')}
                  </Button>
                </div>
              </div>
            )}
          </TabsContent>

          <TabsContent value="photos" className="space-y-4">
            <div className="text-center py-8">
              <Camera className="w-12 h-12 text-[var(--text-tertiary)] mx-auto mb-4" />
              <p className="text-[var(--text-secondary)] mb-4">
                {t('quality.photos.description', 'Add photos to document quality issues or evidence')}
              </p>
              <Button
                variant="outline"
                onClick={() => setShowPhotoModal(true)}
              >
                <Upload className="w-4 h-4 mr-2" />
                {t('quality.photos.upload', 'Upload Photos')}
              </Button>
            </div>

            {tempPhotos.length > 0 && (
              <div className="grid grid-cols-3 gap-4">
                {tempPhotos.map((photo, index) => (
                  <div key={index} className="relative">
                    <img
                      src={URL.createObjectURL(photo)}
                      alt={`Quality photo ${index + 1}`}
                      className="w-full h-32 object-cover rounded-lg"
                    />
                    <button
                      className="absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center"
                      onClick={() => setTempPhotos(prev => prev.filter((_, i) => i !== index))}
                    >
                      �
                    </button>
                  </div>
                ))}
              </div>
            )}
          </TabsContent>

          <TabsContent value="summary" className="space-y-6">
            {/* Overall Score */}
            <div className="text-center py-6 bg-[var(--bg-secondary)] rounded-lg">
              <div className="text-4xl font-bold text-[var(--text-primary)] mb-2">
                {overallScore.toFixed(1)}/10
              </div>
              <div className="text-lg text-[var(--text-secondary)]">
                {t('quality.summary.overall_score', 'Overall Quality Score')}
              </div>
              <Badge
                variant={overallScore >= 7 ? 'success' : overallScore >= 5 ? 'warning' : 'error'}
                className="mt-2"
              >
                {overallScore >= 7 ? t('quality.status.passed', 'PASSED') : t('quality.status.failed', 'FAILED')}
              </Badge>
            </div>

            {/* Results Summary */}
            <div className="space-y-3">
              <h4 className="font-medium text-[var(--text-primary)]">
                {t('quality.summary.results', 'Inspection Results')}
              </h4>
              {criteria.map((criterion) => {
                const result = getCriteriaResult(criterion.id);
                if (!result) return null;

                const StatusIcon = result.pass ? CheckCircle : XCircle;
                return (
                  <div key={criterion.id} className="flex items-center justify-between p-3 bg-[var(--bg-secondary)] rounded">
                    <div className="flex items-center space-x-3">
                      <StatusIcon className={`w-5 h-5 ${result.pass ? 'text-green-500' : 'text-red-500'}`} />
                      <div>
                        <div className="font-medium text-[var(--text-primary)]">{criterion.name}</div>
                        <div className="text-sm text-[var(--text-secondary)]">{criterion.category}</div>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="font-bold text-[var(--text-primary)]">{result.score}/10</div>
                      <div className="text-sm text-[var(--text-secondary)]">
                        Weight: {criterion.weight}%
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Final Notes */}
            <Textarea
              placeholder={t('quality.summary.final_notes', 'Add final notes and recommendations...')}
              value={inspectionData.finalNotes || ''}
              onChange={(e) => setInspectionData(prev => ({ ...prev, finalNotes: e.target.value }))}
              rows={4}
            />
          </TabsContent>
        </Tabs>

        {/* Action Buttons */}
        <div className="flex justify-between pt-6 border-t border-[var(--border-primary)]">
          <div className="flex space-x-3">
            <Button variant="outline" onClick={onCancel}>
              {t('common.cancel', 'Cancel')}
            </Button>
            <Button variant="secondary" onClick={() => onSaveDraft?.(inspectionData)}>
              {t('quality.actions.save_draft', 'Save Draft')}
            </Button>
          </div>
          <Button
            variant="primary"
            onClick={handleComplete}
            disabled={!isComplete}
          >
            {t('quality.actions.complete_inspection', 'Complete Inspection')}
          </Button>
        </div>

        {/* Photo Upload Modal */}
        <Modal
          isOpen={showPhotoModal}
          onClose={() => setShowPhotoModal(false)}
          title={t('quality.photos.upload_title', 'Upload Quality Photos')}
        >
          <div className="p-6">
            <input
              type="file"
              accept="image/*"
              multiple
              onChange={handlePhotoUpload}
              className="w-full p-4 border-2 border-dashed border-[var(--border-primary)] rounded-lg"
            />
            <p className="text-sm text-[var(--text-secondary)] mt-2">
              {t('quality.photos.upload_help', 'Select multiple images to upload')}
            </p>
            <div className="flex justify-end mt-4">
              <Button onClick={() => setShowPhotoModal(false)}>
                {t('common.done', 'Done')}
              </Button>
            </div>
          </div>
        </Modal>
      </CardBody>
    </Card>
  );
};

export default QualityInspection;