'use client'

import { useState, useCallback, useEffect } from 'react'
import { RouteState, Delivery, Driver } from '@/lib/types'
import { initialDriver } from '@/lib/data'
import { findNearestDelivery, calcDistance } from '@/lib/algorithm'
import DeliveryMap from '@/components/DeliveryMap'
import DeliveryList from '@/components/DeliveryList'
import RouteStats from '@/components/RouteStats'
import DeliveryForm from '@/components/DeliveryForm'
import { useGeolocation } from '@/lib/useGeolocation'

export default function Home() {
  const { lat, lng, getCurrentPosition, startWatching, stopWatching } = useGeolocation(true)
  const [isLocationLoading, setIsLocationLoading] = useState(true)

  // Update driver position when geolocation is available
  useEffect(() => {
    if (lat !== null && lng !== null) {
      setIsLocationLoading(false)
    }
  }, [lat, lng])

  const [state, setState] = useState<RouteState>(() => ({
    driver: { ...initialDriver },
    deliveries: [],
    currentTarget: null,
    routeHistory: [{ lat: initialDriver.lat, lng: initialDriver.lng }],
    completedCount: 0,
    totalDistance: 0,
    isFinished: false,
  }))

  // Update state driver position when geolocation changes (only when no deliveries yet)
  useEffect(() => {
    if (lat !== null && lng !== null && state.deliveries.length === 0 && !state.currentTarget) {
      setState(prev => ({
        ...prev,
        driver: { lat, lng, name: initialDriver.name },
        routeHistory: [{ lat, lng }],
      }))
    }
  }, [lat, lng, state.deliveries.length, state.currentTarget])

  const handleCompleteDelivery = useCallback(() => {
    setState((prev) => {
      if (!prev.currentTarget) return prev

      const target = prev.currentTarget
      const distanceTraveled = calcDistance(prev.driver, target)
      const newCompletedCount = prev.completedCount + 1

      const updatedDeliveries = prev.deliveries.map((d) => {
        if (d.id === target.id) {
          return { ...d, status: 'completed' as const, completedAt: newCompletedCount }
        }
        return d
      })

      const newDriverPos = { lat: target.lat, lng: target.lng }
      const newHistory = [...prev.routeHistory, newDriverPos]

      const nextTarget = findNearestDelivery(newDriverPos, updatedDeliveries)

      const finalDeliveries = updatedDeliveries.map((d) => {
        if (nextTarget && d.id === nextTarget.id) {
          return { ...d, status: 'in-progress' as const }
        }
        return d
      })

      return {
        driver: { ...prev.driver, lat: newDriverPos.lat, lng: newDriverPos.lng },
        deliveries: finalDeliveries,
        currentTarget: nextTarget,
        routeHistory: newHistory,
        completedCount: newCompletedCount,
        totalDistance: prev.totalDistance + distanceTraveled,
        isFinished: nextTarget === null,
      }
    })
  }, [])

  const handleReset = useCallback(() => {
    // Get current location again on reset
    getCurrentPosition()
    // Use callback form to get latest lat/lng
    setState(prev => ({
      driver: { lat: prev.driver.lat, lng: prev.driver.lng, name: initialDriver.name },
      deliveries: [],
      currentTarget: null,
      routeHistory: [{ lat: prev.driver.lat, lng: prev.driver.lng }],
      completedCount: 0,
      totalDistance: 0,
      isFinished: false,
    }))
  }, [getCurrentPosition])

  const handleRefreshLocation = useCallback(() => {
    setIsLocationLoading(true)
    getCurrentPosition()
  }, [getCurrentPosition])

  const handleAddDelivery = useCallback((newDelivery: { recipient: string; address: string; lat: number; lng: number }) => {
    setState((prev) => {
      const id = String(prev.deliveries.length + 1)
      const delivery: Delivery = {
        id,
        recipient: newDelivery.recipient,
        address: newDelivery.address,
        lat: newDelivery.lat,
        lng: newDelivery.lng,
        status: 'pending',
      }

      const newDeliveries = [...prev.deliveries, delivery]

      // If no current target and this is the first delivery, set it as the target
      if (!prev.currentTarget && newDeliveries.length === 1) {
        return {
          ...prev,
          deliveries: [{ ...delivery, status: 'in-progress' as const }],
          currentTarget: { ...delivery, status: 'in-progress' as const },
          isFinished: false,
        }
      }

      // If there's already a current target, check if the new delivery is closer to driver
      if (prev.currentTarget) {
        const nearestDelivery = findNearestDelivery(prev.driver, newDeliveries)
        
        // If the nearest delivery is different from current target, update the target
        if (nearestDelivery && nearestDelivery.id !== prev.currentTarget.id) {
          const updatedDeliveries = newDeliveries.map((d) => {
            if (d.id === nearestDelivery.id) {
              return { ...d, status: 'in-progress' as const }
            }
            // Demote the old current target back to pending
            if (d.id === prev.currentTarget!.id) {
              return { ...d, status: 'pending' as const }
            }
            return d
          })

          return {
            ...prev,
            deliveries: updatedDeliveries,
            currentTarget: nearestDelivery,
            isFinished: false,
          }
        }
      }

      return {
        ...prev,
        deliveries: newDeliveries,
        isFinished: false,
      }
    })
  }, [])

  const handleDeleteDelivery = useCallback((id: string) => {
    setState((prev) => {
      const deliveryToDelete = prev.deliveries.find((d) => d.id === id)
      
      // Prevent deleting completed deliveries
      if (deliveryToDelete?.status === 'completed') {
        return prev
      }

      const newDeliveries = prev.deliveries.filter((d) => d.id !== id)

      // If we're deleting the current target, find a new one
      if (prev.currentTarget?.id === id) {
        const nextTarget = findNearestDelivery(prev.driver, newDeliveries)
        const updatedDeliveries = newDeliveries.map((d) => {
          if (nextTarget && d.id === nextTarget.id) {
            return { ...d, status: 'in-progress' as const }
          }
          return d
        })

        return {
          ...prev,
          deliveries: updatedDeliveries,
          currentTarget: nextTarget,
          isFinished: newDeliveries.length === 0,
        }
      }

      return {
        ...prev,
        deliveries: newDeliveries,
      }
    })
  }, [])

  const handleEditDelivery = useCallback((id: string, updated: { recipient: string; address: string; lat: number; lng: number }) => {
    setState((prev) => {
      const deliveryToEdit = prev.deliveries.find((d) => d.id === id)
      
      // Prevent editing completed deliveries
      if (deliveryToEdit?.status === 'completed') {
        return prev
      }

      const updatedDeliveries = prev.deliveries.map((d) => {
        if (d.id === id) {
          return {
            ...d,
            recipient: updated.recipient,
            address: updated.address,
            lat: updated.lat,
            lng: updated.lng,
          }
        }
        return d
      })

      const newCurrentTarget = prev.currentTarget?.id === id
        ? updatedDeliveries.find((d) => d.id === id) || null
        : prev.currentTarget

      return {
        ...prev,
        deliveries: updatedDeliveries,
        currentTarget: newCurrentTarget,
      }
    })
  }, [])

  return (
    <div className="min-h-screen bg-gray-950 text-white flex flex-col">
      {/* Header */}
      <header className="border-b border-gray-800 px-3 py-3 sm:px-6 sm:py-4">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <div>
            <h1 className="text-lg sm:text-xl font-bold text-white">RouteFlow</h1>
            <p className="text-[10px] sm:text-xs text-gray-400 mt-0.5">
              Rute pengantaran dioptimalkan secara otomatis dari posisi Anda
            </p>
          </div>
          <div className="flex items-center gap-2">
            {/* Location status indicator */}
            <div className="flex items-center gap-2 px-2 py-1 sm:px-3 sm:py-1.5 bg-gray-800 rounded-lg border border-gray-700">
              {isLocationLoading ? (
                <>
                  <div className="w-2 h-2 bg-yellow-400 rounded-full animate-pulse" />
                  <span className="text-[10px] sm:text-xs text-gray-400 hidden sm:inline">Mendeteksi lokasi...</span>
                </>
              ) : lat !== null && lng !== null ? (
                <>
                  <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
                  <span className="text-[10px] sm:text-xs text-gray-400 hidden sm:inline">Lokasi live aktif</span>
                </>
              ) : (
                <>
                  <div className="w-2 h-2 bg-red-400 rounded-full" />
                  <span className="text-[10px] sm:text-xs text-gray-400 hidden sm:inline">Lokasi tidak tersedia</span>
                </>
              )}
            </div>
            <button
              onClick={handleRefreshLocation}
              disabled={isLocationLoading}
              className="px-2 py-1 sm:px-3 sm:py-1.5 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-700 text-white rounded-lg transition-colors text-[10px] sm:text-xs font-semibold flex items-center gap-1"
              title="Refresh lokasi"
            >
              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
              </svg>
              <span className="hidden sm:inline">Refresh</span>
            </button>
          </div>
        </div>
      </header>

      {/* Main content */}
      <main className="flex-1 max-w-7xl mx-auto w-full px-3 sm:px-4 py-4 sm:py-6">
        {/* Mobile layout (single column) */}
        <div className="lg:hidden flex flex-col gap-4">
          {/* Map first on mobile */}
          <DeliveryMap
            driver={state.driver}
            deliveries={state.deliveries}
            currentTarget={state.currentTarget}
            routeHistory={state.routeHistory}
          />

          {/* Step info bar */}
          <div className="bg-gray-800 rounded-xl border border-gray-700 px-3 py-3 flex items-center justify-between">
            {state.deliveries.length === 0 ? (
              <p className="text-xs sm:text-sm text-blue-400 font-semibold">
                Tambahkan pengantaran pertama dengan form di bawah 👇
              </p>
            ) : state.isFinished ? (
              <p className="text-xs sm:text-sm text-green-400 font-semibold">
                Semua pengantaran selesai! Total {state.totalDistance.toFixed(2)} km jarak ditempuh.
              </p>
            ) : state.currentTarget ? (
              <p className="text-xs sm:text-sm text-gray-300">
                Langkah{' '}
                <span className="text-yellow-300 font-semibold">{state.completedCount + 1}</span>
                {' '}dari {state.deliveries.length}: Menuju{' '}
                <span className="text-yellow-300 font-semibold">{state.currentTarget.recipient}</span>
                {' '}— {state.currentTarget.address}
              </p>
            ) : (
              <p className="text-xs sm:text-sm text-gray-400">Memuat rute...</p>
            )}
            <span className="text-[10px] sm:text-xs text-gray-500 shrink-0 ml-2 sm:ml-4">
              {state.completedCount}/{state.deliveries.length} paket
            </span>
          </div>

          {/* Stats and controls */}
          <RouteStats
            completedCount={state.completedCount}
            totalDeliveries={state.deliveries.length}
            totalDistance={state.totalDistance}
            currentTarget={state.currentTarget}
            driver={state.driver}
            isFinished={state.isFinished}
            onComplete={handleCompleteDelivery}
            onReset={handleReset}
          />

          {/* Form */}
          <DeliveryForm onAddDelivery={handleAddDelivery} />

          {/* Delivery list */}
          <div className="max-h-[400px] overflow-hidden">
            <DeliveryList
              deliveries={state.deliveries}
              currentTarget={state.currentTarget}
              driver={state.driver}
              onDelete={handleDeleteDelivery}
              onEdit={handleEditDelivery}
            />
          </div>
        </div>

        {/* Desktop layout (3 columns) */}
        <div className="hidden lg:grid grid-cols-[280px_1fr_260px] gap-4" style={{ minHeight: 'calc(100vh - 120px)' }}>
          {/* Left sidebar: Form + Delivery List */}
          <div className="flex flex-col gap-3">
            <DeliveryForm onAddDelivery={handleAddDelivery} />
            <div className="flex-1 overflow-hidden">
              <DeliveryList
                deliveries={state.deliveries}
                currentTarget={state.currentTarget}
                driver={state.driver}
                onDelete={handleDeleteDelivery}
                onEdit={handleEditDelivery}
              />
            </div>
          </div>

          {/* Center: Map + Step info */}
          <div className="flex flex-col gap-3">
            <DeliveryMap
              driver={state.driver}
              deliveries={state.deliveries}
              currentTarget={state.currentTarget}
              routeHistory={state.routeHistory}
            />

            <div className="bg-gray-800 rounded-xl border border-gray-700 px-4 py-3 flex items-center justify-between">
              {state.deliveries.length === 0 ? (
                <p className="text-sm text-blue-400 font-semibold">
                  Tambahkan pengantaran pertama dengan form di samping 👈
                </p>
              ) : state.isFinished ? (
                <p className="text-sm text-green-400 font-semibold">
                  Semua pengantaran selesai! Total {state.totalDistance.toFixed(2)} km jarak ditempuh.
                </p>
              ) : state.currentTarget ? (
                <p className="text-sm text-gray-300">
                  Langkah{' '}
                  <span className="text-yellow-300 font-semibold">{state.completedCount + 1}</span>
                  {' '}dari {state.deliveries.length}: Menuju{' '}
                  <span className="text-yellow-300 font-semibold">{state.currentTarget.recipient}</span>
                  {' '}— {state.currentTarget.address}
                </p>
              ) : (
                <p className="text-sm text-gray-400">Memuat rute...</p>
              )}
              <span className="text-xs text-gray-500 shrink-0 ml-4">
                {state.completedCount}/{state.deliveries.length} paket
              </span>
            </div>
          </div>

          {/* Right sidebar: Stats + Controls */}
          <RouteStats
            completedCount={state.completedCount}
            totalDeliveries={state.deliveries.length}
            totalDistance={state.totalDistance}
            currentTarget={state.currentTarget}
            driver={state.driver}
            isFinished={state.isFinished}
            onComplete={handleCompleteDelivery}
            onReset={handleReset}
          />
        </div>
      </main>
    </div>
  )
}