'use client';

import { Header } from '@/components/Header';
import { useAccount } from 'wagmi';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { getAgentStatus, type AgentStatus } from '@/lib/api';

export default function StatusPage() {
  const { address, isConnected } = useAccount();
  const [status, setStatus] = useState<AgentStatus | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!address) return;
    setLoading(true);
    setError(null);
    getAgentStatus(address)
      .then(setStatus)
      .catch((e) => setError(String(e?.message ?? e)))
      .finally(() => setLoading(false));
  }, [address]);

  if (!isConnected) {
    return (
      <main>
        <Header />
        <Link href="/" className="btn-secondary block text-center">
          Back
        </Link>
      </main>
    );
  }

  return (
    <main>
      <Header />

      <div className="mb-6">
        <Link
          href="/"
          className="text-sm text-muted hover:text-white transition-colors"
        >
          ← Back
        </Link>
      </div>

      <h1 className="text-2xl font-bold mb-6">Agent details</h1>

      {loading && (
        <div className="card">
          <p className="text-sm text-muted">Loading on-chain data…</p>
        </div>
      )}

      {error && (
        <div className="card border-danger">
          <div className="label text-danger mb-1">Error</div>
          <p className="text-sm text-white break-words">{error}</p>
        </div>
      )}

      {status && !status.registered && (
        <div className="card mb-4">
          <p className="text-sm text-white mb-4">
            This wallet isn't registered yet.
          </p>
          <Link href="/register" className="btn-primary block text-center">
            Register now
          </Link>
        </div>
      )}

      {status && status.registered && (
        <>
          <div className="card mb-4">
            <div className="label mb-2">Name</div>
            <div className="text-lg font-semibold text-white font-mono break-all">
              {status.vnsName ?? status.name ?? 'agent'}
            </div>
          </div>

          <div className="card mb-4">
            <div className="label mb-2">Wallet</div>
            <div className="text-sm font-mono text-white break-all">
              {address}
            </div>
          </div>

          <div className="card mb-4">
            <div className="label mb-2">Type</div>
            <div className="text-sm text-white">
              {status.identityType ?? 'unknown'}
            </div>
          </div>

          {status.capabilities && status.capabilities.length > 0 && (
            <div className="card mb-4">
              <div className="label mb-2">Capabilities</div>
              <div className="flex flex-wrap gap-2">
                {status.capabilities.map((c) => (
                  <span
                    key={c}
                    className="text-xs bg-bg border border-border rounded-lg px-3 py-1 text-white"
                  >
                    {c}
                  </span>
                ))}
              </div>
            </div>
          )}

          {status.registeredAt && (
            <div className="card mb-4">
              <div className="label mb-2">Registered</div>
              <div className="text-sm text-white">
                {new Date(status.registeredAt * 1000).toLocaleString()}
              </div>
            </div>
          )}

          <div className="card mb-4">
            <div className="label mb-2">Status</div>
            <div className="flex items-center gap-2">
              <span
                className={`w-2 h-2 rounded-full ${
                  status.active ? 'bg-success' : 'bg-danger'
                }`}
              />
              <span className="text-sm text-white">
                {status.active ? 'Active' : 'Inactive'}
              </span>
            </div>
          </div>

          <Link href="/bonds" className="btn-primary block text-center">
            Manage bonds →
          </Link>
        </>
      )}
    </main>
  );
}
