import { useHealth } from '@/hooks/useHealth';
import { useLoginStatus } from '@/hooks/useLoginStatus';
import { Card } from '@/components/ui/Card';
import { Badge } from '@/components/ui/Badge';
import { Spinner } from '@/components/ui/Spinner';
import { Button } from '@/components/ui/Button';
import { formatUptime } from '@/lib/formatters';
import { useNavigate } from 'react-router-dom';

export function DashboardPage() {
  const { health, loading: healthLoading, refresh: refreshHealth } = useHealth(10_000);
  const { status: loginStatus, loading: loginLoading, refresh: refreshLogin } = useLoginStatus();
  const navigate = useNavigate();

  return (
    <div className="space-y-6 max-w-5xl">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">仪表盘</h1>
        <Button variant="ghost" size="sm" onClick={() => void refreshHealth()}>
          刷新
        </Button>
      </div>

      {/* Status cards row */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {/* Server Status */}
        <Card>
          <div className="text-xs text-dark-muted uppercase tracking-wider mb-2">服务器</div>
          {healthLoading ? (
            <Spinner size="sm" />
          ) : health ? (
            <div className="space-y-1">
              <Badge variant={health.healthy ? 'success' : 'danger'}>
                {health.healthy ? '正常' : '异常'}
              </Badge>
              <p className="text-sm text-dark-muted">v{health.version}</p>
            </div>
          ) : (
            <Badge variant="danger">离线</Badge>
          )}
        </Card>

        {/* Uptime */}
        <Card>
          <div className="text-xs text-dark-muted uppercase tracking-wider mb-2">运行时间</div>
          {health ? (
            <p className="text-xl font-mono font-bold text-dark-text">{formatUptime(health.uptime)}</p>
          ) : (
            <p className="text-dark-muted">-</p>
          )}
        </Card>

        {/* Login Status */}
        <Card>
          <div className="text-xs text-dark-muted uppercase tracking-wider mb-2">小红书登录</div>
          {loginLoading ? (
            <Spinner size="sm" />
          ) : loginStatus ? (
            <div className="space-y-1">
              <Badge variant={loginStatus.loggedIn ? 'success' : 'warning'}>
                {loginStatus.loggedIn ? '已登录' : '未登录'}
              </Badge>
              {loginStatus.username && (
                <p className="text-sm text-dark-muted">{loginStatus.username}</p>
              )}
            </div>
          ) : (
            <button
              onClick={() => void refreshLogin()}
              className="text-xs text-dark-accent hover:underline"
            >
              点击检查
            </button>
          )}
        </Card>

        {/* Memory */}
        <Card>
          <div className="text-xs text-dark-muted uppercase tracking-wider mb-2">内存</div>
          {health ? (
            <div className="space-y-1">
              <p className="text-xl font-mono font-bold text-dark-text">{health.memory.heapUsed} MB</p>
              <p className="text-xs text-dark-muted">共 {health.memory.heapTotal} MB 堆内存</p>
            </div>
          ) : (
            <p className="text-dark-muted">-</p>
          )}
        </Card>
      </div>

      {/* Plugin Health */}
      {health && Object.keys(health.plugins).length > 0 && (
        <Card>
          <h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-3">插件</h2>
          <div className="space-y-2">
            {Object.entries(health.plugins).map(([name, info]) => (
              <div key={name} className="flex items-center justify-between py-1">
                <span className="text-sm">{name}</span>
                <Badge variant={info.healthy ? 'success' : 'danger'}>
                  {info.healthy ? '正常' : info.message || '异常'}
                </Badge>
              </div>
            ))}
          </div>
        </Card>
      )}

      {/* Quick actions */}
      <Card>
        <h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-3">快捷操作</h2>
        <div className="flex flex-wrap gap-3">
          <Button variant="secondary" size="sm" onClick={() => navigate('/login')}>
            管理登录
          </Button>
          <Button variant="secondary" size="sm" onClick={() => navigate('/browser')}>
            浏览内容
          </Button>
          <Button variant="secondary" size="sm" onClick={() => navigate('/publish')}>
            发布笔记
          </Button>
          <Button variant="secondary" size="sm" onClick={() => navigate('/api-tester')}>
            API 测试
          </Button>
        </div>
      </Card>

      {/* Raw health data */}
      {health && (
        <Card>
          <h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-3">
            原始健康数据
          </h2>
          <pre className="bg-dark-bg border border-dark-border rounded-lg p-4 text-xs text-dark-text overflow-auto font-mono max-h-64">
            {JSON.stringify(health, null, 2)}
          </pre>
        </Card>
      )}
    </div>
  );
}