import React, { useState, useEffect } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { api } from '../lib/api'
import { Loader2, Play, Square, ExternalLink } from 'lucide-react'

export const ActiveTimer = () => {
  const queryClient = useQueryClient()
  const [description, setDescription] = useState('')
  const [isInputVisible, setIsInputVisible] = useState(false)
  const [elapsed, setElapsed] = useState(0)

  const { data: runningEntry, isLoading } = useQuery({
    queryKey: ['running-entry'],
    queryFn: () => api.getRunningTimeEntry(),
    refetchInterval: 30000,
  })

  const startMutation = useMutation({
    mutationFn: (desc: string) => api.createTimeEntry({ description, startTime: new Date().toISOString() }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['running-entry'] })
      setIsInputVisible(false)
      setDescription('')
    },
  })

  const stopMutation = useMutation({
    mutationFn: (id: string) => api.stopTimeEntry(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['running-entry'] })
    },
  })

  useEffect(() => {
    let interval: NodeJS.Timeout
    if (runningEntry?.startTime) {
      const update = () => {
        const start = new Date(runningEntry.startTime).getTime()
        const now = Date.now()
        setElapsed(Math.floor((now - start) / 1000))
      }
      update()
      interval = setInterval(update, 1000)
    } else {
      setElapsed(0)
    }
    return () => clearInterval(interval)
  }, [runningEntry])

  const formatTime = (seconds: number) => {
    const h = Math.floor(seconds / 3600)
    const m = Math.floor((seconds % 3600) / 60)
    const s = seconds % 60
    return h > 0 
      ? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
      : `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
  }

  const handlePopout = () => {
    window.open('/tracker-popout', 'tracker', 'width=320,height=220')
  }

  if (isLoading) return <div className="h-10 w-10 flex items-center justify-center"><Loader2 className="w-4 h-4 animate-spin" /></div>

  if (runningEntry) {
    return (
      <div className="h-10 inline-flex items-center gap-3 px-3 py-1 bg-slate-100 dark:bg-slate-800 rounded-full border border-slate-200 dark:border-slate-700 text-sm font-medium">
        <span className="text-slate-500 dark:text-slate-400 truncate max-w-[120px]">
          {runningEntry.description || 'No description'}
        </span>
        <span className="tabular-nums font-mono text-blue-600 dark:text-blue-400">
          {formatTime(elapsed)}
        </span>
        <div className="flex items-center gap-1">
          <button 
            onClick={handlePopout}
            title="Pop out timer"
            className="p-1 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-500 dark:text-slate-400 rounded-full transition-colors"
          >
            <ExternalLink className="w-4 h-4" />
          </button>
          <button 
            onClick={() => stopMutation.mutate(runningEntry.id)}
            disabled={stopMutation.isPending}
            className="p-1 hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 rounded-full transition-colors"
          >
            <Square className="w-4 h-4 fill-current" />
          </button>
        </div>
      </div>
    )
  }

  return (
    <div className="h-10 inline-flex items-center gap-2">
      {isInputVisible && (
        <input
          autoFocus
          className="h-8 px-2 text-sm border rounded-md bg-white dark:bg-slate-900 dark:border-slate-700 outline-none focus:ring-1 ring-blue-500 w-40"
          placeholder="What are you working on?"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && startMutation.mutate(description)}
        />
      )}
      <button
        onClick={() => isInputVisible ? startMutation.mutate(description) : setIsInputVisible(true)}
        disabled={startMutation.isPending}
        className="h-8 px-3 flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition-colors"
      >
        {startMutation.isPending ? <Loader2 className="w-3 h-3 animate-spin" /> : <Play className="w-3 h-3 fill-current" />}
        <span>{isInputVisible ? 'Start' : 'Start Timer'}</span>
      </button>
    </div>
  )
}

export const PopoutTrackerView = () => {
  const queryClient = useQueryClient()
  const [description, setDescription] = useState('')
  const [isInputVisible, setIsInputVisible] = useState(false)
  const [elapsed, setElapsed] = useState(0)

  const { data: runningEntry, isLoading } = useQuery({
    queryKey: ['running-entry'],
    queryFn: () => api.getRunningTimeEntry(),
    refetchInterval: 10000,
  })

  const startMutation = useMutation({
    mutationFn: (desc: string) => api.createTimeEntry({ description, startTime: new Date().toISOString() }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['running-entry'] })
      setIsInputVisible(false)
      setDescription('')
    },
  })

  const stopMutation = useMutation({
    mutationFn: (id: string) => api.stopTimeEntry(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['running-entry'] })
    },
  })

  useEffect(() => {
    let interval: NodeJS.Timeout
    if (runningEntry?.startTime) {
      const update = () => {
        const start = new Date(runningEntry.startTime).getTime()
        const now = Date.now()
        setElapsed(Math.floor((now - start) / 1000))
      }
      update()
      interval = setInterval(update, 1000)
    } else {
      setElapsed(0)
    }
    return () => clearInterval(interval)
  }, [runningEntry])

  const formatTime = (seconds: number) => {
    const h = Math.floor(seconds / 3600)
    const m = Math.floor((seconds % 3600) / 60)
    const s = seconds % 60
    return h > 0 
      ? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
      : `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
  }

  if (isLoading) return <div className="flex items-center justify-center h-full"><Loader2 className="w-6 h-6 animate-spin" /></div>

  return (
    <div className="p-4 flex flex-col items-center justify-center h-full gap-4 text-center">
      {runningEntry ? (
        <>
          <div className="text-slate-500 dark:text-slate-400 text-sm truncate w-full max-w-[200px]">
            {runningEntry.description || 'No description'}
          </div>
          <div className="text-4xl font-mono font-bold tabular-nums text-blue-600 dark:text-blue-400">
            {formatTime(elapsed)}
          </div>
          <button 
            onClick={() => stopMutation.mutate(runningEntry.id)}
            disabled={stopMutation.isPending}
            className="flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors font-medium"
          >
            <Square className="w-4 h-4 fill-current" />
            Stop Timer
          </button>
        </>
      ) : (
        <>
          <div className="text-slate-500 dark:text-slate-400 text-sm">No active timer</div>
          {isInputVisible ? (
            <div className="flex flex-col gap-2 w-full max-w-[200px]">
              <input
                autoFocus
                className="px-2 py-1 text-sm border rounded-md bg-white dark:bg-slate-900 dark:border-slate-700 outline-none focus:ring-1 ring-blue-500"
                placeholder="What are you working on?"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && startMutation.mutate(description)}
              />
              <div className="flex gap-2">
                <button 
                  onClick={() => startMutation.mutate(description)}
                  disabled={startMutation.isPending}
                  className="flex-1 px-3 py-1 bg-blue-600 text-white text-xs rounded-md"
                >
                  Start
                </button>
                <button 
                  onClick={() => setIsInputVisible(false)}
                  className="flex-1 px-3 py-1 bg-slate-200 dark:bg-slate-700 text-xs rounded-md"
                >
                  Cancel
                </button>
              </div>
            </div>
          ) : (
            <button
              onClick={() => setIsInputVisible(true)}
              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors font-medium flex items-center gap-2"
            >
              <Play className="w-4 h-4 fill-current" />
              Start Timer
            </button>
          )}
        </>
      )}
    </div>
  )
}