"use client";

import { useState, useEffect } from "react";
import { Activity, Plus, RefreshCw, Trash2, ExternalLink } from "lucide-react";

interface App {
  id: string;
  name: string;
  description: string;
  url: string;
  port: number;
  path: string;
  command: string;
  category: string;
  color: string;
  enabled: boolean;
}

interface StatusEntry {
  appId: string;
  timestamp: string;
  status: "up" | "down";
  responseTime?: number;
}

export default function HeartbeatMonitor() {
  const [apps, setApps] = useState<App[]>([]);
  const [status, setStatus] = useState<StatusEntry[]>([]);
  const [loading, setLoading] = useState(true);
  const [checking, setChecking] = useState<string | null>(null);
  const [showAddApp, setShowAddApp] = useState(false);
  const [newApp, setNewApp] = useState<Partial<App>>({
    name: "",
    description: "",
    url: "http://localhost:",
    port: 3000,
    path: "",
    command: "npm run dev",
    category: "Other",
    color: "#22C55E",
    enabled: true,
  });

  useEffect(() => {
    fetchData();
    const interval = setInterval(fetchData, 30000);
    return () => clearInterval(interval);
  }, []);

  async function fetchData() {
    try {
      const res = await fetch("/api/monitor");
      const data = await res.json();
      setApps(data.apps || []);
      setStatus(data.status || []);
    } catch (err) {
      console.error("Failed to fetch data:", err);
    } finally {
      setLoading(false);
    }
  }

  async function checkApp(app: App) {
    setChecking(app.id);
    try {
      const start = Date.now();
      await fetch(app.url, { method: "HEAD", mode: "no-cors" });
      const responseTime = Date.now() - start;
      
      const entry: StatusEntry = {
        appId: app.id,
        timestamp: new Date().toISOString(),
        status: "up",
        responseTime,
      };

      await fetch("/api/monitor", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "recordStatus", entry }),
      });

      fetchData();
    } catch {
      const entry: StatusEntry = {
        appId: app.id,
        timestamp: new Date().toISOString(),
        status: "down",
      };

      await fetch("/api/monitor", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "recordStatus", entry }),
      });

      fetchData();
    } finally {
      setChecking(null);
    }
  }

  async function addApp(e: React.FormEvent) {
    e.preventDefault();
    if (!newApp.name || !newApp.url) return;

    await fetch("/api/monitor", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ action: "addApp", app: newApp }),
    });

    setNewApp({
      name: "",
      description: "",
      url: "http://localhost:",
      port: 3000,
      path: "",
      command: "npm run dev",
      category: "Other",
      color: "#22C55E",
      enabled: true,
    });
    setShowAddApp(false);
    fetchData();
  }

  async function deleteApp(id: string) {
    if (!confirm("Delete this app from monitoring?")) return;
    await fetch("/api/monitor", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ action: "deleteApp", id }),
    });
    fetchData();
  }

  function getAppStatus(appId: string) {
    const appStatus = status.filter((s) => s.appId === appId);
    const latest = appStatus[appStatus.length - 1];
    const isUp = latest?.status === "up";
    const uptime = appStatus.length > 0 
      ? Math.round((appStatus.filter(s => s.status === "up").length / appStatus.length) * 100)
      : 100;
    
    return { latest, isUp, uptime };
  }

  const totalApps = apps.length;
  const onlineApps = apps.filter((app) => getAppStatus(app.id).isUp).length;

  if (loading) {
    return (
      <div className="min-h-screen bg-slate-950 flex items-center justify-center">
        <div className="text-slate-400">Loading...</div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 p-6">
      {/* Header */}
      <div className="max-w-6xl mx-auto mb-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Activity className="w-8 h-8 text-emerald-500" />
            <div>
              <h1 className="text-2xl font-bold">Heartbeat Monitor</h1>
              <p className="text-slate-400">{onlineApps} of {totalApps} services online</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <button
              onClick={fetchData}
              className="p-2 bg-slate-800 rounded-lg text-slate-400 hover:text-white"
            >
              <RefreshCw className="w-5 h-5" />
            </button>
            <button
              onClick={() => setShowAddApp(true)}
              className="flex items-center gap-2 bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2 rounded-lg"
            >
              <Plus className="w-4 h-4" />
              Add App
            </button>
          </div>
        </div>
      </div>

      {/* Table */}
      <div className="max-w-6xl mx-auto">
        <div className="bg-slate-900 rounded-lg border border-slate-800 overflow-hidden">
          <table className="w-full">
            <thead>
              <tr className="bg-slate-800 text-left">
                <th className="px-4 py-3 text-sm font-medium text-slate-400">Status</th>
                <th className="px-4 py-3 text-sm font-medium text-slate-400">Name</th>
                <th className="px-4 py-3 text-sm font-medium text-slate-400">URL</th>
                <th className="px-4 py-3 text-sm font-medium text-slate-400">Port</th>
                <th className="px-4 py-3 text-sm font-medium text-slate-400">Uptime</th>
                <th className="px-4 py-3 text-sm font-medium text-slate-400">Response</th>
                <th className="px-4 py-3 text-sm font-medium text-slate-400">Actions</th>
              </tr>
            </thead>
            <tbody>
              {apps.map((app) => {
                const { isUp, uptime, latest } = getAppStatus(app.id);
                
                return (
                  <tr key={app.id} className="border-t border-slate-800 hover:bg-slate-800/50">
                    <td className="px-4 py-3">
                      <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${
                        isUp 
                          ? "bg-emerald-500/20 text-emerald-400" 
                          : "bg-red-500/20 text-red-400"
                      }`}>
                        <span className={`w-1.5 h-1.5 rounded-full ${isUp ? "bg-emerald-400" : "bg-red-400"}`} />
                        {isUp ? "ONLINE" : "OFFLINE"}
                      </span>
                    </td>
                    <td className="px-4 py-3">
                      <div>
                        <p className="font-medium text-white">{app.name}</p>
                        <p className="text-sm text-slate-500">{app.description}</p>
                      </div>
                    </td>
                    <td className="px-4 py-3">
                      <a 
                        href={app.url} 
                        target="_blank" 
                        rel="noopener noreferrer"
                        className="text-emerald-400 hover:text-emerald-300 text-sm"
                      >
                        {app.url}
                      </a>
                    </td>
                    <td className="px-4 py-3 text-slate-300 font-mono">{app.port}</td>
                    <td className="px-4 py-3">
                      <span className={`font-mono ${uptime >= 90 ? "text-emerald-400" : "text-yellow-400"}`}>
                        {uptime}%
                      </span>
                    </td>
                    <td className="px-4 py-3 text-slate-300 font-mono">
                      {latest?.responseTime ? `${latest.responseTime}ms` : "--"}
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2">
                        <button
                          onClick={() => checkApp(app)}
                          disabled={checking === app.id}
                          className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-700 rounded"
                          title="Check now"
                        >
                          <RefreshCw className={`w-4 h-4 ${checking === app.id ? "animate-spin" : ""}`} />
                        </button>
                        <a
                          href={app.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-700 rounded"
                          title="Open app"
                        >
                          <ExternalLink className="w-4 h-4" />
                        </a>
                        <button
                          onClick={() => deleteApp(app.id)}
                          className="p-1.5 text-slate-400 hover:text-red-400 hover:bg-slate-700 rounded"
                          title="Delete"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {/* Add App Modal */}
      {showAddApp && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-slate-900 rounded-lg p-6 w-full max-w-md border border-slate-800">
            <h2 className="text-xl font-bold text-white mb-4">Add New App</h2>
            <form onSubmit={addApp} className="space-y-4">
              <div>
                <label className="block text-sm text-slate-400 mb-1">Name</label>
                <input
                  type="text"
                  value={newApp.name}
                  onChange={(e) => setNewApp({ ...newApp, name: e.target.value })}
                  className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white"
                  required
                />
              </div>
              <div>
                <label className="block text-sm text-slate-400 mb-1">Description</label>
                <input
                  type="text"
                  value={newApp.description}
                  onChange={(e) => setNewApp({ ...newApp, description: e.target.value })}
                  className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white"
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm text-slate-400 mb-1">URL</label>
                  <input
                    type="text"
                    value={newApp.url}
                    onChange={(e) => setNewApp({ ...newApp, url: e.target.value })}
                    className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm text-slate-400 mb-1">Port</label>
                  <input
                    type="number"
                    value={newApp.port}
                    onChange={(e) => setNewApp({ ...newApp, port: parseInt(e.target.value) })}
                    className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white"
                    required
                  />
                </div>
              </div>
              <div className="flex gap-3 pt-2">
                <button
                  type="button"
                  onClick={() => setShowAddApp(false)}
                  className="flex-1 bg-slate-800 hover:bg-slate-700 text-slate-300 py-2 rounded-lg"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="flex-1 bg-emerald-500 hover:bg-emerald-600 text-white py-2 rounded-lg font-medium"
                >
                  Add App
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}