"use client";

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { XCircle } from 'lucide-react';
import { format, differenceInMinutes } from 'date-fns';

interface Host {
  hostname: string;
  lastUpdate: string;
}

export default function Home() {
  const router = useRouter();
  const [hosts, setHosts] = useState<Host[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const fetchHosts = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/hosts');
      if (!response.ok) throw new Error('获取主机列表失败');
      const data = await response.json();
      setHosts(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : '未知错误');
    } finally {
      setLoading(false);
    }
  };

  const formatDate = (date: string) => {
    return format(new Date(date), 'yyyy-MM-dd HH:mm:ss');
  };

  const isRecent = (date: string) => {
    const diffMinutes = differenceInMinutes(new Date(), new Date(date));
    return diffMinutes <= 60; // 1小时内
  };

  const navigateToHost = (hostname: string) => {
    router.push(`/hosts/${hostname}`);
  };

  useEffect(() => {
    fetchHosts();
  }, []);

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div className="px-4 py-6 sm:px-0">
          <h1 className="text-3xl font-semibold text-gray-900 mb-8">屏幕截图监控系统</h1>

          {/* 主机列表卡片网格 */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {hosts.map((host) => (
              <div
                key={host.hostname}
                className="bg-white shadow-sm rounded-lg overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
                onClick={() => navigateToHost(host.hostname)}
              >
                <div className="px-4 py-5 sm:p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <h3 className="text-lg font-medium text-gray-900">
                        {host.hostname}
                      </h3>
                      <p className="mt-1 text-sm text-gray-500">
                        最后更新: {formatDate(host.lastUpdate)}
                      </p>
                    </div>
                    <div className="flex items-center">
                      <div
                        className={`h-3 w-3 rounded-full ${
                          isRecent(host.lastUpdate) ? 'bg-green-500' : 'bg-gray-300'
                        }`}
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* 加载状态 */}
          {loading && (
            <div className="flex justify-center items-center mt-8">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
            </div>
          )}

          {/* 错误提示 */}
          {error && (
            <div className="mt-8 bg-red-50 p-4 rounded-md">
              <div className="flex">
                <div className="flex-shrink-0">
                  <XCircle className="h-5 w-5 text-red-400" />
                </div>
                <div className="ml-3">
                  <h3 className="text-sm font-medium text-red-800">
                    加载失败
                  </h3>
                  <div className="mt-2 text-sm text-red-700">
                    <p>{error}</p>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}