'use client';

import { useState, useCallback } from 'react';
import { Activity, CheckCircle, XCircle, AlertTriangle, RefreshCw, Clock } from 'lucide-react';
import { healthService, type HealthCheckResult } from '@/services/health.service';

export function HealthChecker() {
  const [results, setResults] = useState<HealthCheckResult | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const runHealthChecks = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const health = await healthService.runAllHealthChecks();
      setResults(health);
    } catch (err: any) {
      setError(err?.message ?? 'Health check failed');
    } finally {
      setLoading(false);
    }
  }, []);

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'ok':
        return <CheckCircle className="h-4 w-4 text-emerald-400" />;
      case 'error':
        return <XCircle className="h-4 w-4 text-red-400" />;
      case 'not-implemented':
      case 'not-ready':
        return <AlertTriangle className="h-4 w-4 text-amber-400" />;
      default:
        return <AlertTriangle className="h-4 w-4 text-slate-400" />;
    }
  };

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'ok':
        return 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20';
      case 'error':
        return 'bg-red-500/10 text-red-400 border-red-500/20';
      case 'not-implemented':
      case 'not-ready':
        return 'bg-amber-500/10 text-amber-400 border-amber-500/20';
      default:
        return 'bg-slate-500/10 text-slate-400 border-slate-500/20';
    }
  };

  const healthItems = results ? [
    { label: 'Frontend', status: results.frontend.status, latency: results.frontend.latency, message: results.frontend.message },
    { label: 'Backend', status: results.backend.status, latency: results.backend.latency, message: results.backend.message },
    { label: 'Database', status: results.database.status, latency: results.database.latency, message: results.database.message },
    { label: 'API', status: results.api.status, latency: results.api.latency, message: results.api.message },
    { label: 'Authentication', status: results.authentication.status, latency: results.authentication.latency, message: results.authentication.message },
    { label: 'Prisma', status: results.prisma.status, latency: results.prisma.latency, message: results.prisma.message },
    { label: 'Environment', status: results.environment.status, latency: results.environment.latency, message: results.environment.message },
    { label: 'Build', status: results.build.status, latency: results.build.latency, message: results.build.message },
  ] : [];

  const passCount = healthItems.filter((i) => i.status === 'ok').length;

  return (
    <div className="rounded-xl border border-white/5 bg-slate-900/50">
      <div className="flex items-center justify-between border-b border-white/5 px-4 py-3">
        <div className="flex items-center gap-2">
          <Activity className="h-4 w-4 text-indigo-400" />
          <h3 className="text-xs font-semibold text-white">Health Checker</h3>
        </div>
        <button
          onClick={runHealthChecks}
          disabled={loading}
          className="flex items-center gap-1.5 rounded-lg bg-indigo-500/10 px-3 py-1.5 text-xs font-medium text-indigo-400 hover:bg-indigo-500/20 transition-colors disabled:opacity-50"
        >
          <RefreshCw className={`h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} />
          {loading ? 'Running...' : 'Run Health Check'}
        </button>
      </div>

      <div className="p-4">
        {error && (
          <div className="mb-3 rounded-lg border border-red-500/20 bg-red-500/5 px-3 py-2">
            <p className="text-xs text-red-400">{error}</p>
          </div>
        )}

        {!results && !loading && (
          <div className="flex flex-col items-center gap-2 py-8">
            <Activity className="h-8 w-8 text-slate-600" />
            <p className="text-xs text-slate-500">Click "Run Health Check" to test all services</p>
          </div>
        )}

        {loading && !results && (
          <div className="flex items-center justify-center gap-2 py-8">
            <RefreshCw className="h-5 w-5 animate-spin text-indigo-400" />
            <span className="text-xs text-slate-400">Running health checks...</span>
          </div>
        )}

        {results && (
          <>
            <div className="mb-3 flex items-center gap-2 rounded-lg bg-white/5 px-3 py-2">
              <span className="text-xs text-slate-400">Results:</span>
              <span className="text-xs font-mono text-emerald-400">{passCount}/8 passing</span>
              {healthItems.map((item) => (
                <span
                  key={item.label}
                  className={`h-2 w-2 rounded-full ${
                    item.status === 'ok' ? 'bg-emerald-400' :
                    item.status === 'error' ? 'bg-red-400' :
                    'bg-amber-400'
                  }`}
                />
              ))}
            </div>

            <div className="grid gap-2">
              {healthItems.map((item) => (
                <div
                  key={item.label}
                  className="flex items-center justify-between rounded-lg border border-white/5 bg-white/[0.02] px-3 py-2"
                >
                  <div className="flex items-center gap-2">
                    {getStatusIcon(item.status)}
                    <span className="text-xs font-medium text-white">{item.label}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    {item.latency !== undefined && (
                      <span className="flex items-center gap-1 text-[10px] font-mono text-slate-500">
                        <Clock className="h-3 w-3" />
                        {item.latency}ms
                      </span>
                    )}
                    <span className={`rounded border px-1.5 py-0.5 text-[9px] font-mono font-medium uppercase ${getStatusBadge(item.status)}`}>
                      {item.status}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </>
        )}
      </div>
    </div>
  );
}