"use client";

import React, { useEffect, useState, useCallback } from "react";
import { motion, AnimatePresence } from "motion/react";
import {
  Link2,
  Shield,
  Activity,
  Hash,
  Clock,
  FileText,
  CheckCircle2,
  Search,
  RefreshCw,
  ExternalLink,
  Blocks,
  Copy,
  Check,
  AlertCircle,
  Upload,
  Zap,
  Fingerprint,
  Radio,
  ChevronRight,
  Terminal,
  Lock,
  Globe,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  getBlockchainTransactions,
  getBlockchainStats,
  verifyDocumentHashOnBlockchain,
  registerContractOnBlockchain,
  generateContractCertificate,
} from "@/features/blockchain/api/blockchain.action";
import { getContracts } from "@/features/contracts/api/contract.action";
import type {
  BlockchainTransactionView,
  BlockchainStats,
} from "@/lib/services/blockchain.types";
import { toast } from "sonner";

// ═══════════════════════════════════════════════════════════════
// Blockchain Explorer — 2026 Edition
// ═══════════════════════════════════════════════════════════════

export default function BlockchainExplorerPage() {
  const [transactions, setTransactions] = useState<BlockchainTransactionView[]>(
    [],
  );
  const [stats, setStats] = useState<BlockchainStats | null>(null);
  const [loading, setLoading] = useState(true);
  const [verifyHash, setVerifyHash] = useState("");
  const [verifyResult, setVerifyResult] = useState<{
    exists: boolean;
    timestamp: number;
    depositor: string;
  } | null>(null);
  const [verifying, setVerifying] = useState(false);
  const [copiedTx, setCopiedTx] = useState<string | null>(null);
  const [unregisteredContracts, setUnregisteredContracts] = useState<
    Array<{ id: string; title: string | null; fileName: string }>
  >([]);
  const [registeringId, setRegisteringId] = useState<string | null>(null);
  const [downloadingCertificateId, setDownloadingCertificateId] = useState<
    string | null
  >(null);
  const [activeTab, setActiveTab] = useState<"all" | "verified" | "pending">(
    "all",
  );

  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      const [txResult, statsResult, contractsResult] = await Promise.all([
        getBlockchainTransactions(),
        getBlockchainStats(),
        getContracts({ status: "COMPLETED" }),
      ]);

      if (txResult.success && txResult.transactions) {
        setTransactions(txResult.transactions);
      }
      if (statsResult.success && statsResult.stats) {
        setStats(statsResult.stats);
      }

      if (contractsResult.success && contractsResult.contracts) {
        const registered = new Set(
          txResult.transactions?.map((tx) => tx.contractId) ?? [],
        );
        const unregistered = contractsResult.contracts
          .filter(
            (c: { id: string; txHash?: string | null; status: string }) =>
              !c.txHash && !registered.has(c.id) && c.status === "COMPLETED",
          )
          .map((c: { id: string; title: string | null; fileName: string }) => ({
            id: c.id,
            title: c.title,
            fileName: c.fileName,
          }));
        setUnregisteredContracts(unregistered);
      }
    } catch (error) {
      console.error("Failed to load blockchain data:", error);
    } finally {
      setLoading(false);
    }
  }, []);

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

  const handleVerify = async () => {
    if (!verifyHash.trim()) return;
    setVerifying(true);
    setVerifyResult(null);
    try {
      const result = await verifyDocumentHashOnBlockchain(verifyHash.trim());
      if (result.success && result.verification) {
        setVerifyResult(result.verification);
      } else {
        toast.error(result.error || "Verification failed");
      }
    } catch {
      toast.error("Failed to verify hash");
    } finally {
      setVerifying(false);
    }
  };

  const handleRegister = async (contractId: string) => {
    setRegisteringId(contractId);
    try {
      const result = await registerContractOnBlockchain(contractId);
      if (result.success) {
        toast.success("Contract registered on blockchain!");
        await loadData();
      } else {
        toast.error(result.error || "Registration failed");
      }
    } catch {
      toast.error("Failed to register on blockchain");
    } finally {
      setRegisteringId(null);
    }
  };

  const handleDownloadCertificate = async (
    contractId: string,
    contractTitle: string,
  ) => {
    setDownloadingCertificateId(contractId);
    try {
      const result = await generateContractCertificate(contractId);
      if (result.success && result.certificatePdfBase64) {
        const base64 = result.certificatePdfBase64;
        const binary = atob(base64);
        const bytes = new Uint8Array(binary.length);
        for (let i = 0; i < binary.length; i += 1) {
          bytes[i] = binary.charCodeAt(i);
        }
        const blob = new Blob([bytes], { type: "application/pdf" });
        const url = URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download =
          result.certificateFileName ||
          `certificate-${contractTitle || contractId}.pdf`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
        toast.success("Certificate downloaded successfully!");
      } else {
        toast.error(result.error || "Failed to generate certificate");
      }
    } catch {
      toast.error("Failed to download certificate");
    } finally {
      setDownloadingCertificateId(null);
    }
  };

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text);
    setCopiedTx(text);
    setTimeout(() => setCopiedTx(null), 2000);
  };

  const formatTimestamp = (iso: string) => {
    return new Date(iso).toLocaleString();
  };

  const truncateHash = (hash: string, chars = 8) => {
    if (!hash || hash.length <= chars * 2 + 3) return hash;
    return `${hash.slice(0, chars + 2)}...${hash.slice(-chars)}`;
  };

  const filteredTransactions = transactions.filter((tx) => {
    if (activeTab === "verified")
      return tx.status === "CONFIRMED" || tx.status === "SUCCESS";
    if (activeTab === "pending")
      return tx.status === "PENDING" || tx.status === "PROCESSING";
    return true;
  });

  return (
    <div className="relative min-h-screen bg-background overflow-hidden">
      {/* Ambient Background */}
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-[-10%] left-[-10%] w-[600px] h-[600px] rounded-full bg-primary/5 blur-[120px]" />
        <div className="absolute bottom-[-10%] right-[-10%] w-[700px] h-[700px] rounded-full bg-emerald-500/5 blur-[120px]" />
        <div className="absolute top-[40%] left-[60%] w-[400px] h-[400px] rounded-full bg-violet-500/5 blur-[100px]" />
        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_80%_80%_at_50%_50%,#000_20%,transparent_100%)]" />
      </div>

      <div className="relative z-10 p-6 lg:p-8 space-y-8 max-w-[1440px] mx-auto">
        {/* Page Header */}
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"
        >
          <div>
            <div className="flex items-center gap-3 mb-2">
              <motion.div
                whileHover={{ rotate: 180 }}
                transition={{ duration: 0.6 }}
                className="relative p-2.5 rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 border border-primary/20 shadow-lg shadow-primary/10"
              >
                <Blocks className="w-7 h-7 text-primary" />
                <div className="absolute inset-0 rounded-2xl bg-primary/20 blur-md -z-10" />
              </motion.div>
              <div>
                <h1 className="text-3xl font-bold tracking-tight bg-gradient-to-r from-foreground via-foreground to-muted-foreground bg-clip-text text-transparent">
                  Blockchain Explorer
                </h1>
              </div>
            </div>
            <p className="text-muted-foreground text-sm max-w-lg leading-relaxed">
              Immutable proof-of-existence registry. Verify document integrity,
              audit on-chain history, and register new contracts.
            </p>
          </div>
          <div className="flex items-center gap-3">
            <div className="hidden sm:flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 px-3 py-1.5 rounded-full border border-border/30">
              <Radio className="w-3 h-3 text-emerald-500" />
              <span className="relative flex h-1.5 w-1.5">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
                <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-emerald-500" />
              </span>
              Live
            </div>
            <Button
              variant="outline"
              size="sm"
              onClick={loadData}
              disabled={loading}
              className="gap-2 rounded-xl border-border/60 bg-background/50 backdrop-blur-xl hover:bg-background/80 transition-all"
            >
              <RefreshCw
                className={`w-4 h-4 ${loading ? "animate-spin" : ""}`}
              />
              Refresh
            </Button>
          </div>
        </motion.div>

        {/* Stats Bento Grid */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"
        >
          <BentoCard
            icon={<Shield className="w-5 h-5" />}
            label="Verified Documents"
            value={stats?.totalVerified?.toString() ?? "0"}
            subtitle="On-chain proofs"
            gradient="from-emerald-500/20 to-emerald-500/5"
            border="border-emerald-500/20"
            iconColor="text-emerald-500"
            delay={0}
          />
          <BentoCard
            icon={<Blocks className="w-5 h-5" />}
            label="Latest Block"
            value={
              stats?.latestBlockNumber
                ? `#${stats.latestBlockNumber.toLocaleString()}`
                : "—"
            }
            subtitle="Network height"
            gradient="from-blue-500/20 to-blue-500/5"
            border="border-blue-500/20"
            iconColor="text-blue-500"
            delay={0.05}
          />
          <BentoCard
            icon={<Globe className="w-5 h-5" />}
            label="Network Status"
            value={stats?.networkName || "Not Configured"}
            subtitle={
              stats?.chainId ? `Chain ID ${stats.chainId}` : "Disconnected"
            }
            gradient={
              stats?.networkStatus === "connected"
                ? "from-emerald-500/20 to-emerald-500/5"
                : "from-red-500/20 to-red-500/5"
            }
            border={
              stats?.networkStatus === "connected"
                ? "border-emerald-500/20"
                : "border-red-500/20"
            }
            iconColor={
              stats?.networkStatus === "connected"
                ? "text-emerald-500"
                : "text-red-500"
            }
            badge={
              stats?.networkStatus === "connected" ? (
                <span className="flex items-center gap-1.5 text-[10px] font-bold text-emerald-600 dark:text-emerald-400">
                  <span className="relative flex h-2 w-2">
                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
                    <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
                  </span>
                  LIVE
                </span>
              ) : (
                <span className="flex items-center gap-1.5 text-[10px] font-bold text-red-600 dark:text-red-400">
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500" />
                  OFFLINE
                </span>
              )
            }
            delay={0.1}
          />
          <BentoCard
            icon={<Fingerprint className="w-5 h-5" />}
            label="Wallet"
            value={
              stats?.walletAddress ? truncateHash(stats.walletAddress, 6) : "—"
            }
            subtitle="Connected address"
            gradient="from-violet-500/20 to-violet-500/5"
            border="border-violet-500/20"
            iconColor="text-violet-500"
            delay={0.15}
          />
        </motion.div>

        {/* Unregistered Contracts Alert */}
        <AnimatePresence>
          {unregisteredContracts.length > 0 && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: "auto" }}
              exit={{ opacity: 0, height: 0 }}
              className="overflow-hidden"
            >
              <div className="relative rounded-2xl border border-amber-500/20 bg-gradient-to-r from-amber-500/10 via-amber-500/5 to-transparent p-1">
                <div className="absolute inset-0 rounded-2xl bg-amber-500/5 blur-xl" />
                <div className="relative p-5">
                  <div className="flex items-center gap-2 mb-4">
                    <div className="p-1.5 rounded-lg bg-amber-500/20">
                      <Upload className="w-4 h-4 text-amber-500" />
                    </div>
                    <h3 className="text-sm font-bold text-amber-600 dark:text-amber-400 uppercase tracking-wider">
                      {unregisteredContracts.length} pending registration
                    </h3>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                    {unregisteredContracts.map((contract) => (
                      <motion.div
                        key={contract.id}
                        initial={{ opacity: 0, scale: 0.95 }}
                        animate={{ opacity: 1, scale: 1 }}
                        className="group flex items-center justify-between rounded-xl bg-background/60 backdrop-blur-md border border-border/40 px-4 py-3 hover:border-amber-500/30 hover:bg-background/80 transition-all"
                      >
                        <div className="flex items-center gap-3 min-w-0">
                          <div className="p-1.5 rounded-md bg-muted">
                            <FileText className="w-3.5 h-3.5 text-muted-foreground" />
                          </div>
                          <span className="text-sm truncate font-medium">
                            {contract.title || contract.fileName}
                          </span>
                        </div>
                        <Button
                          size="sm"
                          className="gap-1.5 text-xs rounded-lg bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20 hover:bg-amber-500/20 hover:text-amber-700 dark:hover:text-amber-300 shrink-0 ml-3"
                          disabled={registeringId === contract.id}
                          onClick={() => handleRegister(contract.id)}
                        >
                          {registeringId === contract.id ? (
                            <RefreshCw className="w-3 h-3 animate-spin" />
                          ) : (
                            <Zap className="w-3 h-3" />
                          )}
                          Register
                        </Button>
                      </motion.div>
                    ))}
                  </div>
                </div>
              </div>
            </motion.div>
          )}
        </AnimatePresence>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Transactions List */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            className="lg:col-span-2 rounded-2xl border border-border/40 bg-background/40 backdrop-blur-2xl overflow-hidden shadow-2xl shadow-black/5"
          >
            <div className="p-5 border-b border-border/40 flex items-center justify-between">
              <div>
                <h2 className="font-bold text-foreground flex items-center gap-2 text-lg">
                  <Link2 className="w-5 h-5 text-primary" />
                  Transaction History
                </h2>
                <p className="text-xs text-muted-foreground mt-1">
                  Immutable audit trail of all registered documents
                </p>
              </div>
              <div className="flex items-center gap-1 bg-muted/50 rounded-lg p-1 border border-border/30">
                {(["all", "verified", "pending"] as const).map((tab) => (
                  <button
                    key={tab}
                    onClick={() => setActiveTab(tab)}
                    className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
                      activeTab === tab
                        ? "bg-background shadow-sm text-foreground"
                        : "text-muted-foreground hover:text-foreground"
                    }`}
                  >
                    {tab.charAt(0).toUpperCase() + tab.slice(1)}
                  </button>
                ))}
              </div>
            </div>

            {loading ? (
              <div className="p-12">
                <div className="space-y-4">
                  {[1, 2, 3].map((i) => (
                    <div
                      key={i}
                      className="flex items-center gap-4 p-4 rounded-xl bg-muted/30 animate-pulse"
                    >
                      <div className="w-10 h-10 rounded-full bg-muted" />
                      <div className="space-y-2 flex-1">
                        <div className="h-3 bg-muted rounded w-1/3" />
                        <div className="h-2 bg-muted rounded w-1/2" />
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ) : filteredTransactions.length === 0 ? (
              <div className="p-16 text-center">
                <div className="relative inline-flex mb-4">
                  <div className="absolute inset-0 bg-primary/20 blur-xl rounded-full" />
                  <Blocks className="w-12 h-12 text-muted-foreground relative z-10" />
                </div>
                <p className="text-sm font-medium text-foreground">
                  No transactions found
                </p>
                <p className="text-xs mt-2 text-muted-foreground max-w-xs mx-auto">
                  {activeTab !== "all"
                    ? `No ${activeTab} transactions match your filter.`
                    : "Upload and analyze a contract to register it on-chain."}
                </p>
              </div>
            ) : (
              <div className="divide-y divide-border/30">
                <AnimatePresence mode="popLayout">
                  {filteredTransactions.map((tx, idx) => (
                    <motion.div
                      key={tx.id}
                      layout
                      initial={{ opacity: 0, x: -10 }}
                      animate={{ opacity: 1, x: 0 }}
                      exit={{ opacity: 0, scale: 0.98 }}
                      transition={{ delay: idx * 0.03 }}
                      className="group p-5 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent transition-all duration-300"
                    >
                      <div className="flex items-start justify-between gap-4">
                        <div className="min-w-0 flex-1 space-y-3">
                          {/* Title Row */}
                          <div className="flex items-center gap-3">
                            <div className="p-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20">
                              <CheckCircle2 className="w-4 h-4 text-emerald-500" />
                            </div>
                            <span className="text-sm font-semibold truncate">
                              {tx.contractTitle || tx.contractFileName}
                            </span>
                            <span className="shrink-0 text-[10px] font-bold px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20 uppercase tracking-wider">
                              {tx.status}
                            </span>
                          </div>

                          {/* Metadata Grid */}
                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 pl-[2.25rem]">
                            <div className="flex items-center gap-2 text-xs text-muted-foreground group/hash">
                              <Fingerprint className="w-3.5 h-3.5 shrink-0 text-primary/60" />
                              <span className="font-mono text-[11px] tracking-tight">
                                {truncateHash(tx.documentHash, 14)}
                              </span>
                              <button
                                onClick={() => copyToClipboard(tx.documentHash)}
                                className="opacity-0 group-hover/hash:opacity-100 transition-all hover:scale-110"
                              >
                                {copiedTx === tx.documentHash ? (
                                  <Check className="w-3 h-3 text-emerald-500" />
                                ) : (
                                  <Copy className="w-3 h-3" />
                                )}
                              </button>
                            </div>

                            <div className="flex items-center gap-2 text-xs text-muted-foreground group/hash">
                              <Hash className="w-3.5 h-3.5 shrink-0 text-primary/60" />
                              <span className="font-mono text-[11px] tracking-tight">
                                {truncateHash(tx.txHash, 14)}
                              </span>
                              <button
                                onClick={() => copyToClipboard(tx.txHash)}
                                className="opacity-0 group-hover/hash:opacity-100 transition-all hover:scale-110"
                              >
                                {copiedTx === tx.txHash ? (
                                  <Check className="w-3 h-3 text-emerald-500" />
                                ) : (
                                  <Copy className="w-3 h-3" />
                                )}
                              </button>
                            </div>

                            <div className="flex items-center gap-2 text-xs text-muted-foreground">
                              <Blocks className="w-3.5 h-3.5 shrink-0 text-primary/60" />
                              <span className="font-mono">
                                Block #{tx.blockNumber.toLocaleString()}
                              </span>
                            </div>

                            <div className="flex items-center gap-2 text-xs text-muted-foreground">
                              <Clock className="w-3.5 h-3.5 shrink-0 text-primary/60" />
                              <span>{formatTimestamp(tx.blockTimestamp)}</span>
                            </div>
                          </div>
                        </div>

                        {/* Right Side Actions */}
                        <div className="flex flex-col items-end gap-2 shrink-0">
                          <span className="text-[10px] font-bold px-2.5 py-1 rounded-md bg-muted border border-border/40 uppercase tracking-wider">
                            {tx.network === "sepolia" ? "Sepolia" : "Hardhat"}
                          </span>
                          <div className="flex gap-2">
                            <Button
                              size="sm"
                              variant="outline"
                              className="text-xs h-8 gap-1.5"
                              disabled={
                                downloadingCertificateId === tx.contractId
                              }
                              onClick={() =>
                                handleDownloadCertificate(
                                  tx.contractId,
                                  tx.contractTitle || tx.contractFileName,
                                )
                              }
                              title="Download cryptographic certificate"
                            >
                              {downloadingCertificateId === tx.contractId ? (
                                <RefreshCw className="w-3 h-3 animate-spin" />
                              ) : (
                                <Fingerprint className="w-3 h-3" />
                              )}
                              Certificate
                            </Button>
                            {tx.explorerUrl && (
                              <a
                                href={tx.explorerUrl}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="text-xs text-primary hover:text-primary/80 flex items-center gap-1 font-medium group/link"
                              >
                                Etherscan
                                <ExternalLink className="w-3 h-3 group-hover/link:translate-x-0.5 group-hover/link:-translate-y-0.5 transition-transform" />
                              </a>
                            )}
                          </div>
                        </div>
                      </div>
                    </motion.div>
                  ))}
                </AnimatePresence>
              </div>
            )}
          </motion.div>

          {/* Verification Panel */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
            className="space-y-6"
          >
            <div className="rounded-2xl border border-border/40 bg-background/40 backdrop-blur-2xl shadow-2xl shadow-black/5 overflow-hidden">
              <div className="p-5 border-b border-border/40 bg-gradient-to-r from-primary/5 to-transparent">
                <h2 className="font-bold text-foreground flex items-center gap-2 text-lg">
                  <Search className="w-5 h-5 text-primary" />
                  Verify Document
                </h2>
                <p className="text-xs text-muted-foreground mt-1">
                  Cryptographic on-chain verification
                </p>
              </div>

              <div className="p-5 space-y-5">
                <div className="relative">
                  <label className="text-xs font-bold text-muted-foreground mb-2 block uppercase tracking-wider">
                    Document Hash
                  </label>
                  <div className="relative">
                    <textarea
                      value={verifyHash}
                      onChange={(e) => setVerifyHash(e.target.value)}
                      placeholder="Paste SHA-256 hash (0x...)"
                      className="w-full rounded-xl border border-border/60 bg-muted/20 px-4 py-3.5 text-xs font-mono resize-none h-24 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/40 focus:bg-background/60 transition-all placeholder:text-muted-foreground/50"
                    />
                    <div className="absolute bottom-2 right-2 text-[10px] text-muted-foreground font-mono bg-background/80 px-2 py-0.5 rounded border border-border/30">
                      SHA-256
                    </div>
                  </div>
                </div>

                <Button
                  onClick={handleVerify}
                  disabled={!verifyHash.trim() || verifying}
                  className="w-full gap-2 rounded-xl h-10 font-semibold shadow-lg shadow-primary/20 hover:shadow-primary/30 transition-all"
                  size="sm"
                >
                  {verifying ? (
                    <RefreshCw className="w-4 h-4 animate-spin" />
                  ) : (
                    <Shield className="w-4 h-4" />
                  )}
                  Verify On-Chain
                </Button>

                {/* Verification Result */}
                <AnimatePresence mode="wait">
                  {verifyResult !== null && (
                    <motion.div
                      key={verifyResult.exists ? "found" : "notfound"}
                      initial={{ opacity: 0, y: 10, scale: 0.98 }}
                      animate={{ opacity: 1, y: 0, scale: 1 }}
                      exit={{ opacity: 0, scale: 0.98 }}
                      className={`relative overflow-hidden rounded-xl border p-5 ${
                        verifyResult.exists
                          ? "border-emerald-500/30 bg-gradient-to-br from-emerald-500/10 via-emerald-500/5 to-transparent"
                          : "border-red-500/30 bg-gradient-to-br from-red-500/10 via-red-500/5 to-transparent"
                      }`}
                    >
                      {verifyResult.exists && (
                        <div className="absolute top-0 right-0 p-3 opacity-10">
                          <Shield className="w-24 h-24 text-emerald-500" />
                        </div>
                      )}

                      <div className="relative z-10">
                        <div className="flex items-center gap-3 mb-4">
                          <div
                            className={`p-2 rounded-full ${
                              verifyResult.exists
                                ? "bg-emerald-500/20 text-emerald-500"
                                : "bg-red-500/20 text-red-500"
                            }`}
                          >
                            {verifyResult.exists ? (
                              <CheckCircle2 className="w-6 h-6" />
                            ) : (
                              <AlertCircle className="w-6 h-6" />
                            )}
                          </div>
                          <div>
                            <span
                              className={`text-sm font-bold block ${
                                verifyResult.exists
                                  ? "text-emerald-600 dark:text-emerald-400"
                                  : "text-red-600 dark:text-red-400"
                              }`}
                            >
                              {verifyResult.exists
                                ? "Document Verified"
                                : "Not Found On-Chain"}
                            </span>
                            <span className="text-[10px] text-muted-foreground uppercase tracking-wider font-bold">
                              {verifyResult.exists
                                ? "Cryptographic proof valid"
                                : "No matching hash in registry"}
                            </span>
                          </div>
                        </div>

                        {verifyResult.exists && (
                          <div className="space-y-3 text-xs">
                            <div className="flex items-center justify-between p-2.5 rounded-lg bg-background/40 border border-border/30">
                              <span className="text-muted-foreground flex items-center gap-2">
                                <Clock className="w-3 h-3" />
                                Timestamp
                              </span>
                              <span className="font-mono font-medium">
                                {new Date(
                                  verifyResult.timestamp * 1000,
                                ).toLocaleString()}
                              </span>
                            </div>
                            <div className="flex items-center justify-between p-2.5 rounded-lg bg-background/40 border border-border/30">
                              <span className="text-muted-foreground flex items-center gap-2">
                                <Fingerprint className="w-3 h-3" />
                                Depositor
                              </span>
                              <span className="font-mono font-medium">
                                {truncateHash(verifyResult.depositor, 8)}
                              </span>
                            </div>
                          </div>
                        )}
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            </div>

            {/* Quick Info Card */}
            <div className="rounded-2xl border border-border/40 bg-gradient-to-br from-primary/5 via-transparent to-violet-500/5 p-5 backdrop-blur-xl">
              <h3 className="text-sm font-bold mb-2 flex items-center gap-2">
                <Terminal className="w-4 h-4 text-primary" />
                How it works
              </h3>
              <ul className="space-y-2 text-xs text-muted-foreground">
                <li className="flex items-start gap-2">
                  <ChevronRight className="w-3 h-3 mt-0.5 text-primary shrink-0" />
                  Documents are hashed using SHA-256 before registration
                </li>
                <li className="flex items-start gap-2">
                  <ChevronRight className="w-3 h-3 mt-0.5 text-primary shrink-0" />
                  Proofs are permanently stored on the Ethereum blockchain
                </li>
                <li className="flex items-start gap-2">
                  <Lock className="w-3 h-3 mt-0.5 text-primary shrink-0" />
                  Anyone can verify integrity without revealing document content
                </li>
              </ul>
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────
// Bento Card Sub-Component
// ─────────────────────────────────────────────────

function BentoCard({
  icon,
  label,
  value,
  subtitle,
  gradient,
  border,
  iconColor,
  badge,
  delay,
}: {
  icon: React.ReactNode;
  label: string;
  value: string;
  subtitle: string;
  gradient: string;
  border: string;
  iconColor: string;
  badge?: React.ReactNode;
  delay: number;
}) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.1 + delay }}
      className={`group relative rounded-2xl border ${border} bg-gradient-to-br ${gradient} p-5 backdrop-blur-xl overflow-hidden hover:scale-[1.02] transition-transform duration-300`}
    >
      <div className="absolute inset-0 bg-background/40" />
      <div className="absolute -right-4 -top-4 w-24 h-24 bg-gradient-to-br from-white/10 to-transparent rounded-full blur-2xl group-hover:opacity-100 opacity-0 transition-opacity" />

      <div className="relative z-10">
        <div className="flex items-center justify-between mb-4">
          <div
            className={`p-2.5 rounded-xl bg-background/60 border border-border/40 shadow-sm ${iconColor}`}
          >
            {icon}
          </div>
          {badge && <div>{badge}</div>}
        </div>

        <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-[0.2em]">
          {label}
        </p>
        <p className="text-2xl font-bold text-foreground mt-1 truncate tracking-tight">
          {value}
        </p>
        <p className="text-[11px] text-muted-foreground mt-1">{subtitle}</p>
      </div>
    </motion.div>
  );
}