'use client'

import { Delivery, Driver } from '@/lib/types'
import { calcDistance } from '@/lib/algorithm'

interface Props {
  completedCount: number
  totalDeliveries: number
  totalDistance: number
  currentTarget: Delivery | null
  driver: Driver
  isFinished: boolean
  onComplete: () => void
  onReset: () => void
}

export default function RouteStats({
  completedCount,
  totalDeliveries,
  totalDistance,
  currentTarget,
  driver,
  isFinished,
  onComplete,
  onReset,
}: Props) {
  const progressPct = (completedCount / totalDeliveries) * 100
  const distToTarget = currentTarget ? calcDistance(driver, currentTarget) : null

  return (
    <div className="bg-gray-800 rounded-xl border border-gray-700 flex flex-col gap-3 sm:gap-4 p-3 sm:p-4">
      {/* Progress */}
      <div>
        <div className="flex justify-between text-xs text-gray-400 mb-1.5">
          <span>Progress Pengantaran</span>
          <span className="font-semibold text-gray-200">{completedCount}/{totalDeliveries}</span>
        </div>
        <div className="h-2 sm:h-2.5 bg-gray-700 rounded-full overflow-hidden">
          <div
            className="h-full bg-green-500 rounded-full transition-all duration-500"
            style={{ width: `${progressPct}%` }}
          />
        </div>
        <p className="text-xs text-gray-500 mt-1">{progressPct.toFixed(0)}% selesai</p>
      </div>

      {/* Total distance */}
      <div className="bg-gray-700/50 rounded-lg p-2.5 sm:p-3">
        <p className="text-xs text-gray-400">Total Jarak Ditempuh</p>
        <p className="text-xl sm:text-2xl font-bold text-white mt-0.5">{totalDistance.toFixed(2)}</p>
        <p className="text-xs text-gray-400">kilometer</p>
      </div>

      {/* Next destination */}
      {!isFinished && currentTarget && (
        <div className="bg-yellow-950/40 border border-yellow-700/50 rounded-lg p-2.5 sm:p-3">
          <p className="text-xs text-yellow-400 font-semibold mb-1">Tujuan Berikutnya</p>
          <p className="text-sm font-semibold text-yellow-200">{currentTarget.recipient}</p>
          <p className="text-xs text-gray-400 mt-0.5">{currentTarget.address}</p>
          <div className="flex items-center gap-1.5 mt-2">
            <span className="text-xs text-gray-400">Jarak:</span>
            <span className="text-sm font-bold text-yellow-300">{distToTarget?.toFixed(2)} km</span>
          </div>
        </div>
      )}

      {/* Finished state */}
      {isFinished && (
        <div className="bg-green-950/40 border border-green-700/50 rounded-lg p-3 sm:p-4 text-center">
          <div className="text-2xl sm:text-3xl mb-2">🎉</div>
          <p className="text-sm font-bold text-green-300">Semua Pengantaran Selesai!</p>
          <p className="text-xs text-gray-400 mt-1">
            Total {totalDeliveries} paket diantar dalam {totalDistance.toFixed(2)} km
          </p>
        </div>
      )}

      {/* Controls */}
      <div className="flex flex-col gap-2 mt-auto">
        {!isFinished && (
          <button
            onClick={onComplete}
            disabled={!currentTarget}
            className="w-full py-2.5 sm:py-3 px-4 bg-yellow-400 hover:bg-yellow-300 disabled:bg-gray-600 disabled:cursor-not-allowed text-black font-semibold rounded-lg text-sm transition-colors"
          >
            Antar ke {currentTarget?.recipient ?? '...'}
          </button>
        )}

        <button
          onClick={onReset}
          className="w-full py-2 sm:py-2.5 px-4 bg-gray-700 hover:bg-gray-600 text-gray-200 font-medium rounded-lg text-sm transition-colors"
        >
          Reset
        </button>
      </div>

    </div>
  )
}