'use client'

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

export default function DashboardPage() {
  const router = useRouter()
  const [showAddForm, setShowAddForm] = useState(false)
  const [newMonitor, setNewMonitor] = useState({
    url: '',
    name: '',
    frequency: 60,
  })

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

  const { data, isLoading, refetch } = useQuery({
    queryKey: ['monitors'],
    queryFn: async () => {
      const response = await monitorAPI.list()
      return response.monitors
    },
  })

  const handleLogout = () => {
    clearAuth()
    router.push('/login')
  }

  const handleAddMonitor = async (e: React.FormEvent) => {
    e.preventDefault()
    try {
      await monitorAPI.create(newMonitor)
      setNewMonitor({ url: '', name: '', frequency: 60 })
      setShowAddForm(false)
      refetch()
    } catch (err) {
      console.error('Failed to create monitor:', err)
    }
  }

  const handleCheckNow = async (id: string) => {
    try {
      await monitorAPI.check(id)
      alert('Check triggered! Results will appear shortly.')
      setTimeout(() => refetch(), 2000)
    } catch (err) {
      console.error('Failed to trigger check:', err)
    }
  }

  const handleDelete = async (id: string) => {
    if (!confirm('Are you sure you want to delete this monitor?')) return

    try {
      await monitorAPI.delete(id)
      refetch()
    } catch (err) {
      console.error('Failed to delete monitor:', err)
    }
  }

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

  const monitors = data || []

  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 justify-between">
            <h1 className="text-2xl font-bold">Website Monitor</h1>
            <button
              onClick={handleLogout}
              className="rounded-md border px-4 py-2 text-sm hover:bg-gray-50"
            >
              Logout
            </button>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        <div className="mb-6 flex items-center justify-between">
          <div>
            <h2 className="text-xl font-semibold">Your Monitors</h2>
            <p className="text-sm text-gray-600">
              {monitors.length} monitor{monitors.length !== 1 ? 's' : ''} active
            </p>
          </div>
          <button
            onClick={() => setShowAddForm(true)}
            className="rounded-md bg-primary px-4 py-2 text-white hover:bg-primary/90"
          >
            + Add Monitor
          </button>
        </div>

        {/* Add Monitor Form */}
        {showAddForm && (
          <div className="mb-6 rounded-lg bg-white p-6 shadow">
            <h3 className="mb-4 text-lg font-semibold">Add New Monitor</h3>
            <form onSubmit={handleAddMonitor} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700">
                  URL
                </label>
                <input
                  type="url"
                  value={newMonitor.url}
                  onChange={(e) =>
                    setNewMonitor({ ...newMonitor, url: e.target.value })
                  }
                  placeholder="https://example.com"
                  required
                  className="mt-1 block w-full rounded-md border px-3 py-2"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700">
                  Name (optional)
                </label>
                <input
                  type="text"
                  value={newMonitor.name}
                  onChange={(e) =>
                    setNewMonitor({ ...newMonitor, name: e.target.value })
                  }
                  placeholder="My Monitor"
                  className="mt-1 block w-full rounded-md border px-3 py-2"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700">
                  Check Frequency (minutes)
                </label>
                <select
                  value={newMonitor.frequency}
                  onChange={(e) =>
                    setNewMonitor({
                      ...newMonitor,
                      frequency: parseInt(e.target.value),
                    })
                  }
                  className="mt-1 block w-full rounded-md border px-3 py-2"
                >
                  <option value={5}>Every 5 minutes</option>
                  <option value={30}>Every 30 minutes</option>
                  <option value={60}>Every hour</option>
                  <option value={360}>Every 6 hours</option>
                  <option value={1440}>Every 24 hours</option>
                </select>
              </div>

              <div className="flex gap-2">
                <button
                  type="submit"
                  className="rounded-md bg-primary px-4 py-2 text-white hover:bg-primary/90"
                >
                  Create Monitor
                </button>
                <button
                  type="button"
                  onClick={() => setShowAddForm(false)}
                  className="rounded-md border px-4 py-2 hover:bg-gray-50"
                >
                  Cancel
                </button>
              </div>
            </form>
          </div>
        )}

        {/* Monitors List */}
        {monitors.length === 0 ? (
          <div className="rounded-lg bg-white p-12 text-center shadow">
            <p className="mb-4 text-gray-600">No monitors yet</p>
            <button
              onClick={() => setShowAddForm(true)}
              className="rounded-md bg-primary px-4 py-2 text-white hover:bg-primary/90"
            >
              Create Your First Monitor
            </button>
          </div>
        ) : (
          <div className="space-y-4">
            {monitors.map((monitor: any) => (
              <div
                key={monitor.id}
                className="rounded-lg bg-white p-6 shadow hover:shadow-md"
              >
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <h3 className="font-semibold">{monitor.name}</h3>
                    <p className="text-sm text-gray-600 break-all">{monitor.url}</p>
                    <div className="mt-2 flex gap-4 text-xs text-gray-500">
                      <span>Every {monitor.frequency} min</span>
                      <span className="capitalize">Status: {monitor.status}</span>
                      {monitor.last_checked_at && (
                        <span>
                          Last checked:{' '}
                          {new Date(monitor.last_checked_at).toLocaleString()}
                        </span>
                      )}
                    </div>
                  </div>

                  <div className="flex gap-2">
                    <button
                      onClick={() => handleCheckNow(monitor.id)}
                      className="rounded-md border px-3 py-1 text-sm hover:bg-gray-50"
                    >
                      Check Now
                    </button>
                    <button
                      onClick={() => router.push(`/monitors/${monitor.id}`)}
                      className="rounded-md border px-3 py-1 text-sm hover:bg-gray-50"
                    >
                      History
                    </button>
                    <button
                      onClick={() => handleDelete(monitor.id)}
                      className="rounded-md border border-red-200 px-3 py-1 text-sm text-red-600 hover:bg-red-50"
                    >
                      Delete
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </main>
    </div>
  )
}