import { useStsStore } from '../stores/stsStore'
import { STS_LIMITS } from '../types/sts.types'
import StsContactList from './StsContactList'

export default function StsAnalysisTab() {
  const minDuration = useStsStore((s) => s.minContactDurationMinutes)
  const maxDistance = useStsStore((s) => s.maxContactDistanceMeters)
  const setMinDuration = useStsStore((s) => s.setMinContactDuration)
  const setMaxDistance = useStsStore((s) => s.setMaxContactDistance)
  const summary = useStsStore((s) => s.summary)
  const queryCompleted = useStsStore((s) => s.queryCompleted)

  return (
    <div className="space-y-3">
      {/* 파라미터 슬라이더 */}
      <div className="space-y-2">
        <label className="block text-xs font-medium text-muted">STS 탐지 조건</label>

        {/* 최소 접촉 시간 */}
        <div>
          <div className="flex items-center justify-between text-[11px]">
            <span className="text-foreground/70">최소 접촉 시간</span>
            <span className="font-mono font-medium text-primary">{minDuration}분</span>
          </div>
          <input
            type="range"
            min={STS_LIMITS.DURATION_MIN}
            max={STS_LIMITS.DURATION_MAX}
            step={10}
            value={minDuration}
            onChange={(e) => setMinDuration(Number(e.target.value))}
            className="w-full accent-primary"
          />
          <div className="flex justify-between text-[9px] text-muted">
            <span>{STS_LIMITS.DURATION_MIN}분</span>
            <span>{STS_LIMITS.DURATION_MAX}분</span>
          </div>
        </div>

        {/* 최대 접촉 거리 */}
        <div>
          <div className="flex items-center justify-between text-[11px]">
            <span className="text-foreground/70">최대 접촉 거리</span>
            <span className="font-mono font-medium text-primary">{maxDistance}m</span>
          </div>
          <input
            type="range"
            min={STS_LIMITS.DISTANCE_MIN}
            max={STS_LIMITS.DISTANCE_MAX}
            step={50}
            value={maxDistance}
            onChange={(e) => setMaxDistance(Number(e.target.value))}
            className="w-full accent-primary"
          />
          <div className="flex justify-between text-[9px] text-muted">
            <span>{STS_LIMITS.DISTANCE_MIN}m</span>
            <span>{STS_LIMITS.DISTANCE_MAX}m</span>
          </div>
        </div>
      </div>

      {/* 결과 요약 */}
      {summary && (
        <div className="flex items-center gap-3 rounded-md bg-primary/5 px-2 py-1.5 text-xs">
          <span className="font-medium text-primary">{summary.totalContactPairs}쌍 발견</span>
          <span className="text-muted">{summary.totalVesselsInvolved}척 관련</span>
          {summary.processingTimeMs != null && (
            <span className="ml-auto text-muted">{summary.processingTimeMs}ms</span>
          )}
        </div>
      )}

      {/* 접촉 쌍 리스트 */}
      {queryCompleted && <StsContactList />}
    </div>
  )
}