'use client';

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

export default function HomePage() {
  const { address, isConnected } = useAccount();
  const { data: walletClient } = useWalletClient();
  const [status, setStatus] = useState<AgentStatus | null>(null);
  const [loading, setLoading] = useState(false);

  const supports7702 = useMemo(
    () => walletSupports7702(walletClient),
    [walletClient],
  );

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

  return (
    <main>
      <Header />

      <div className="mb-8">
        <h1 className="text-3xl font-bold mb-2 leading-tight">
          Know Your Agent
        </h1>
        <p className="text-muted text-sm leading-relaxed">
          Register your AI agent on-chain. Stake bonds. Build real, verifiable
          trust in the agent economy.
        </p>
      </div>

      {!isConnected && (
        <div className="card mb-4">
          <p className="text-sm text-muted mb-3">
            Connect your wallet to get started.
          </p>
          <div className="text-xs text-muted">
            Use the Connect button at the top right. Base network.
          </div>
        </div>
      )}

      {isConnected && loading && (
        <div className="card mb-4">
          <p className="text-sm text-muted">Checking agent status…</p>
        </div>
      )}

      {isConnected && !loading && status && !status.registered && (
        <div className="card mb-4 border-accent">
          <div className="label mb-2">Wallet connected</div>
          <p className="text-sm text-white mb-4">
            This wallet is not yet registered as a Vaultfire agent.
          </p>
          {supports7702 ? (
            <>
              <Link
                href="/onboard"
                className="btn-primary block text-center mb-2"
              >
                One-tap onboard
              </Link>
              <Link
                href="/register"
                className="btn-secondary block text-center"
              >
                Classic 2-step flow
              </Link>
              <p className="text-xs text-muted mt-3">
                One-tap: register + bond in a single EIP-7702 signature.
              </p>
            </>
          ) : (
            <Link href="/register" className="btn-primary block text-center">
              Register as Agent
            </Link>
          )}
        </div>
      )}

      {isConnected && !loading && status && status.registered && (
        <div className="card mb-4">
          <div className="label mb-2">Your Agent</div>
          <div className="text-xl font-bold text-white mb-1">
            {status.vnsName ?? status.name ?? 'agent'}
          </div>
          <div className="text-xs font-mono text-muted mb-4">
            {address?.slice(0, 6)}…{address?.slice(-4)}
          </div>
          <div className="flex gap-2 mb-2">
            <Link href="/status" className="btn-secondary text-center flex-1">
              View details
            </Link>
            <Link href="/bonds" className="btn-primary text-center flex-1">
              Bonds
            </Link>
          </div>
          <Link href="/streetcred" className="btn-secondary block text-center">
            Street Cred badge →
          </Link>
        </div>
      )}

      <div className="mt-8 space-y-3">
        <div className="card">
          <div className="label mb-1">Built on</div>
          <p className="text-sm text-white">
            Base mainnet · ERC-8004 identity · Four bond types · Open protocol
          </p>
        </div>
        <div className="card">
          <div className="label mb-1">The principle</div>
          <p className="text-sm text-white leading-relaxed">
            Human thriving over extraction. AI and humans grow together, never
            above.
          </p>
        </div>
      </div>

      <footer className="mt-10 text-center text-xs text-muted">
        <a
          href="https://theloopbreaker.com"
          className="hover:text-white transition-colors"
        >
          theloopbreaker.com
        </a>
      </footer>
    </main>
  );
}
