import { useState, useEffect, useRef } from 'react'
import { invoke } from '@tauri-apps/api/tauri'
import { 
  Monitor,
  Crosshair,
  Check,
  ChevronRight,
  ChevronLeft,
  RefreshCw,
  AlertCircle,
  Settings2
} from 'lucide-react'

interface CalibrationRegion {
  name: string
  key: string
  description: string
  required: boolean
  detected?: boolean
}

const REGIONS: CalibrationRegion[] = [
  { 
    name: 'HP Bar', 
    key: 'hp_bar', 
    description: 'Health bar at bottom of screen',
    required: true 
  },
  { 
    name: 'Radar', 
    key: 'radar', 
    description: 'Mini-map showing location',
    required: true 
  },
  { 
    name: 'Skill Window', 
    key: 'skill_window', 
    description: 'Window showing skill gains',
    required: false 
  },
  { 
    name: 'Mob Name', 
    key: 'mob_name', 
    description: 'Floating text above creatures',
    required: false 
  },
]

export default function SetupWizard() {
  const [step, setStep] = useState(0)
  const [isDetecting, setIsDetecting] = useState(false)
  const [detections, setDetections] = useState<Record<string, boolean>>({})
  const [calibration, setCalibration] = useState<any>(null)
  const [showWizard, setShowWizard] = useState(false)

  useEffect(() => {
    checkFirstRun()
  }, [])

  const checkFirstRun = async () => {
    try {
      const settings = await invoke<any>('get_settings')
      if (!settings?.ocr?.calibration) {
        setShowWizard(true)
      }
    } catch (e) {
      setShowWizard(true)
    }
  }

  const autoDetect = async () => {
    setIsDetecting(true)
    try {
      const detected = await invoke<any>('detect_ui_elements')
      setDetections({
        hp_bar: detected.hp_bar.found,
        radar: detected.radar.found,
        skill_window: detected.skill_window.found,
      })
    } catch (e) {
      console.error('Detection failed:', e)
    }
    setIsDetecting(false)
  }

  const saveCalibration = async () => {
    try {
      await invoke('set_ocr_calibration', { calibration })
      setShowWizard(false)
    } catch (e) {
      console.error('Save failed:', e)
    }
  }

  if (!showWizard) return null

  return (
    <div className="fixed inset-0 bg-background/95 backdrop-blur-sm z-50 flex items-center justify-center">
      <div className="w-full max-w-4xl bg-surface rounded-2xl border border-border shadow-2xl">
        {/* Header */}
        <div className="p-6 border-b border-border">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
              <Settings2 className="w-6 h-6 text-primary" />
            </div>
            <div>
              <h2 className="text-2xl font-bold text-white">EU-Utility Setup</h2>
              <p className="text-text-muted">Configure screen regions for OCR recognition</p>
            </div>
          </div>
        </div>

        {/* Steps */}
        <div className="p-6">
          {step === 0 && (
            <div className="space-y-6">
              <div className="text-center py-8">
                <Monitor className="w-20 h-20 text-primary mx-auto mb-6" />
                <h3 className="text-xl font-bold text-white mb-3">Welcome to EU-Utility V3</h3>
                <p className="text-text-muted max-w-lg mx-auto">
                  This setup wizard will help you configure the application to read 
                  screen elements from Entropia Universe. This enables features like 
                  automatic loot tracking, HP monitoring, and skill gain detection.
                </p>
              </div>

              <div className="bg-surface-light rounded-lg p-4 border border-border">
                <h4 className="font-semibold text-white mb-3">What will be configured:</h4>
                <ul className="space-y-2 text-text-muted">
                  <li className="flex items-center gap-2">
                    <Check className="w-4 h-4 text-accent" />
                    HP bar position and reading
                  </li>
                  <li className="flex items-center gap-2">
                    <Check className="w-4 h-4 text-accent" />
                    Radar/mini-map coordinate extraction
                  </li>
                  <li className="flex items-center gap-2">
                    <Check className="w-4 h-4 text-accent" />
                    Skill window detection
                  </li>
                  <li className="flex items-center gap-2">
                    <Check className="w-4 h-4 text-accent" />
                    Mob name recognition
                  </li>
                </ul>
              </div>
            </div>
          )}

          {step === 1 && (
            <div className="space-y-6">
              <div className="text-center mb-6">
                <h3 className="text-xl font-bold text-white">Auto-Detect UI Elements</h3>
                <p className="text-text-muted mt-2">
                  Make sure Entropia Universe is running and visible on your screen, 
                  then click detect to automatically find UI elements.
                </p>
              </div>

              <button
                onClick={autoDetect}
                disabled={isDetecting}
                className="w-full py-4 bg-primary hover:bg-primary-hover disabled:opacity-50 text-white rounded-xl font-medium transition-colors flex items-center justify-center gap-3"
              >
                {isDetecting ? (
                  <>
                    <RefreshCw className="w-5 h-5 animate-spin" />
                    Detecting UI elements...
                  </>
                ) : (
                  <>
                    <Crosshair className="w-5 h-5" />
                    Auto-Detect Elements
                  </>
                )}
              </button>

              <div className="grid grid-cols-2 gap-4">
                {REGIONS.map((region) => (
                  <div 
                    key={region.key}
                    className={`p-4 rounded-lg border ${
                      detections[region.key] 
                        ? 'bg-accent/10 border-accent/30' 
                        : 'bg-surface-light border-border'
                    }`}
                  >
                    <div className="flex items-center justify-between mb-2">
                      <span className="font-medium text-white">{region.name}</span>
                      {detections[region.key] ? (
                        <Check className="w-5 h-5 text-accent" />
                      ) : (
                        <AlertCircle className="w-5 h-5 text-text-muted" />
                      )}
                    </div>
                    <p className="text-sm text-text-muted">{region.description}</p>
                  </div>
                ))}
              </div>
            </div>
          )}

          {step === 2 && (
            <RegionCalibrator 
              regions={REGIONS}
              onComplete={(cal) => {
                setCalibration(cal)
                setStep(3)
              }}
            />
          )}

          {step === 3 && (
            <div className="text-center py-12">
              <div className="w-20 h-20 rounded-full bg-accent/10 flex items-center justify-center mx-auto mb-6">
                <Check className="w-10 h-10 text-accent" />
              </div>
              
              <h3 className="text-2xl font-bold text-white mb-3">Setup Complete</h3>
              
              <p className="text-text-muted max-w-md mx-auto mb-8">
                EU-Utility is now configured to read screen elements. 
                You can adjust these settings anytime in Settings {`->`} OCR.
              </p>

              <button
                onClick={saveCalibration}
                className="px-8 py-3 bg-primary hover:bg-primary-hover text-white rounded-lg font-medium transition-colors"
              >
                Finish Setup
              </button>
            </div>
          )}
        </div>

        {/* Navigation */}
        <div className="p-6 border-t border-border flex justify-between">
          <button
            onClick={() => setStep(Math.max(0, step - 1))}
            disabled={step === 0}
            className="flex items-center gap-2 px-4 py-2 text-text-muted hover:text-white disabled:opacity-30 transition-colors"
          >
            <ChevronLeft className="w-4 h-4" />
            Back
          </button>

          <div className="flex gap-2">
            {REGIONS.map((_, i) => (
              <div
                key={i}
                className={`w-2 h-2 rounded-full ${
                  i <= step ? 'bg-primary' : 'bg-surface-light'
                }`}
              />
            ))}
          </div>

          <button
            onClick={() => setStep(Math.min(3, step + 1))}
            disabled={step === 3 || (step === 1 && Object.keys(detections).length === 0)}
            className="flex items-center gap-2 px-4 py-2 bg-primary hover:bg-primary-hover disabled:opacity-30 text-white rounded-lg transition-colors"
          >
            {step === 2 ? 'Complete' : 'Next'}
            <ChevronRight className="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  )
}

interface RegionCalibratorProps {
  regions: CalibrationRegion[]
  onComplete: (calibration: any) => void
}

function RegionCalibrator({ regions, onComplete }: RegionCalibratorProps) {
  const [activeRegion, setActiveRegion] = useState(0)
  const [regions_, _setRegions] = useState<Record<string, any>>({})
  const canvasRef = useRef<HTMLCanvasElement>(null)

  const captureScreen = async () => {
    try {
      const screenshot = await invoke<string>('capture_screen')
      return screenshot
    } catch (e) {
      console.error('Capture failed:', e)
      return null
    }
  }

  return (
    <div className="space-y-4">
      <p className="text-center text-text-muted mb-4">
        Click and drag on the screenshot to define each region
      </p>

      <div className="flex gap-2 mb-4">
        {regions.map((region, i) => (
          <button
            key={region.key}
            onClick={() => setActiveRegion(i)}
            className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
              activeRegion === i
                ? 'bg-primary text-white'
                : regions_[region.key]
                  ? 'bg-accent/20 text-accent'
                  : 'bg-surface-light text-text-muted'
            }`}
          >
            {region.name}
            {regions_[region.key] && <Check className="w-3 h-3 inline ml-1" />}
          </button>
        ))}
      </div>

      <div className="relative bg-black rounded-lg overflow-hidden aspect-video">
        <canvas
          ref={canvasRef}
          className="w-full h-full cursor-crosshair"
        />
        
        <div className="absolute inset-0 flex items-center justify-center">
          <button
            onClick={captureScreen}
            className="px-4 py-2 bg-primary/80 hover:bg-primary text-white rounded-lg"
          >
            Capture Screen
          </button>
        </div>
      </div>

      <button
        onClick={() => onComplete({ regions: regions_ })}
        disabled={Object.keys(regions_).length === 0}
        className="w-full py-3 bg-accent hover:bg-accent-hover disabled:opacity-50 text-white rounded-lg font-medium transition-colors"
      >
        Save Calibration
      </button>
    </div>
  )
}