import { useQuery } from '@tanstack/react-query'
import { useBreadcrumb } from '../hooks/useBreadcrumb'
import { breadcrumbConfig } from '../config/breadcrumbConfig'
import { Activity, Loader2, Clock } from 'lucide-react'
import { api } from '../lib/api'

export default function ScrapingMonitor() {
  useBreadcrumb(breadcrumbConfig['/scraping-monitor'])

  const { data: activity } = useQuery({
    queryKey: ['current-activity'],
    queryFn: () => api.getCurrentActivity(),
    refetchInterval: 3000,
  })

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-3 mb-2">
        <h1 className="text-2xl sm:text-3xl font-bold flex items-center gap-2 sm:gap-3">
          <Activity className="w-8 h-8 text-red-500" />
          Scraping Monitor
        </h1>
      </div>

      <section className="card-glass-hover rounded-xl p-5 border">
        <h2 className="text-lg font-semibold text-foreground mb-3 flex items-center gap-2">
          <Activity className="w-5 h-5 text-blue-500" />
          Current Activity
        </h2>
        {activity?.active ? (
          <div className="flex items-start gap-4">
            <div className="flex-shrink-0 mt-1">
              <Loader2 className="w-6 h-6 text-blue-500 animate-spin" />
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2 flex-wrap mb-1">
                <span className="inline-flex items-center px-2.5 py-1 rounded text-xs font-semibold border bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/30">
                  {activity.platform || 'Unknown'}
                </span>
                {activity.account && (
                  <span className="text-sm font-medium text-foreground">{activity.account}</span>
                )}
                {activity.start_time && (
                  <span className="text-xs text-muted-foreground flex items-center gap-1 ml-auto">
                    <Clock className="w-3 h-3" />
                    Started {new Date(activity.start_time).toLocaleTimeString()}
                  </span>
                )}
              </div>
              {activity.detailed_status && (
                <p className="text-sm text-muted-foreground mt-1">{activity.detailed_status}</p>
              )}
            </div>
          </div>
        ) : (
          <div className="text-sm text-muted-foreground py-3 text-center">
            No active scraping task
          </div>
        )}
      </section>
    </div>
  )
}
