'use client'

import { useEffect } from 'react'
import { useRouter, useParams } from 'next/navigation'
import { useQuery } from '@tanstack/react-query'
import { monitorAPI } from '@/lib/api'
import { isAuthenticated } from '@/lib/auth'

export default function MonitorHistoryPage() {
  const router = useRouter()
  const params = useParams()
  const id = params?.id as string

  useEffect(() => {
    if (!isAuthenticated()) {
      router.push('/login')
    }
  }, [router])

  const { data: monitorData } = useQuery({
    queryKey: ['monitor', id],
    queryFn: async () => {
      const response = await monitorAPI.get(id)
      return response.monitor
    },
  })

  const { data: historyData, isLoading } = useQuery({
    queryKey: ['history', id],
    queryFn: async () => {
      const response = await monitorAPI.history(id)
      return response.snapshots
    },
  })

  if (isLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <p>Loading...</p>
      </div>
    )
  }

  const snapshots = historyData || []
  const monitor = monitorData

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="border-b bg-white">
        <div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-4">
            <button
              onClick={() => router.push('/dashboard')}
              className="text-gray-600 hover:text-gray-900"
            >
              ← Back
            </button>
            <div>
              <h1 className="text-2xl font-bold">
                {monitor?.name || 'Monitor History'}
              </h1>
              {monitor && (
                <p className="text-sm text-gray-600 break-all">{monitor.url}</p>
              )}
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        <h2 className="mb-4 text-xl font-semibold">Check History</h2>

        {snapshots.length === 0 ? (
          <div className="rounded-lg bg-white p-12 text-center shadow">
            <p className="text-gray-600">No history yet</p>
            <p className="mt-2 text-sm text-gray-500">
              The first check will happen soon
            </p>
          </div>
        ) : (
          <div className="space-y-3">
            {snapshots.map((snapshot: any) => (
              <div
                key={snapshot.id}
                className={`rounded-lg bg-white p-4 shadow ${
                  snapshot.changed ? 'border-l-4 border-l-blue-500' : ''
                }`}
              >
                <div className="flex items-center justify-between">
                  <div className="flex-1">
                    <div className="flex items-center gap-3">
                      <span
                        className={`rounded px-2 py-1 text-xs font-medium ${
                          snapshot.changed
                            ? 'bg-blue-100 text-blue-800'
                            : 'bg-gray-100 text-gray-800'
                        }`}
                      >
                        {snapshot.changed ? 'Changed' : 'No Change'}
                      </span>
                      {snapshot.error_message && (
                        <span className="rounded bg-red-100 px-2 py-1 text-xs font-medium text-red-800">
                          Error
                        </span>
                      )}
                      <span className="text-sm text-gray-600">
                        {new Date(snapshot.created_at).toLocaleString()}
                      </span>
                    </div>

                    <div className="mt-2 flex gap-4 text-sm text-gray-600">
                      <span>HTTP {snapshot.http_status}</span>
                      <span>{snapshot.response_time}ms</span>
                      {snapshot.change_percentage && (
                        <span>{snapshot.change_percentage.toFixed(2)}% changed</span>
                      )}
                    </div>

                    {snapshot.error_message && (
                      <p className="mt-2 text-sm text-red-600">
                        {snapshot.error_message}
                      </p>
                    )}
                  </div>

                  {snapshot.html_content && (
                    <button
                      onClick={() =>
                        router.push(`/monitors/${id}/snapshot/${snapshot.id}`)
                      }
                      className="rounded-md border px-3 py-1 text-sm hover:bg-gray-50"
                    >
                      View Details
                    </button>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </main>
    </div>
  )
}