SkateSpots/src/pages/MintsPage.tsx

import { useMemo, useState } from 'react';
import { useSeoMeta } from '@unhead/react';
import { Link } from 'react-router-dom';
import { Layout } from '@/components/Layout';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Skeleton } from '@/components/ui/skeleton';
import { useMintDirectory, type MintDirectoryEntry } from '@/hooks/useMintDirectory';
import { useCashu } from '@/hooks/wallet/useCashu';
import { useToast } from '@/hooks/useToast';
import { isNativePlatform } from '@/lib/platform';
import { cn } from '@/lib/utils';
import { Search, Coins, ExternalLink, Plus, Loader2, Check, ShieldAlert, Activity } from 'lucide-react';

function hostOf(url: string): string {
  try {
    return new URL(url).host;
  } catch {
    return url;
  }
}

function healthBadge(mint: MintDirectoryEntry) {
  if (mint.archived) {
    return { label: 'Archived', className: 'border-gray-600 bg-gray-800/60 text-gray-400' };
  }
  if (mint.degraded) {
    return { label: 'Degraded', className: 'border-amber-500/40 bg-amber-500/10 text-amber-400' };
  }
  if (mint.online === false) {
    return { label: 'Offline', className: 'border-red-500/40 bg-red-500/10 text-red-400' };
  }
  return { label: 'Online', className: 'border-[#ccff00]/40 bg-[#ccff00]/10 text-[#ccff00]' };
}

function MintRow({
  mint,
  added,
  canAdd,
  adding,
  onAdd,
}: {
  mint: MintDirectoryEntry;
  added: boolean;
  canAdd: boolean;
  adding: boolean;
  onAdd: () => void;
}) {
  const health = healthBadge(mint);
  return (
    <Card className="bg-black/90 border-2 border-white/10 hover:border-[#ccff00]/30 transition-colors">
      <CardContent className="p-4">
        <div className="flex items-start gap-3">
          {mint.iconUrl ? (
            <img
              src={mint.iconUrl}
              alt=""
              loading="lazy"
              className="h-10 w-10 rounded-xl object-cover border border-white/10 bg-white/5"
              onError={(e) => {
                (e.currentTarget as HTMLImageElement).style.display = 'none';
              }}
            />
          ) : (
            <div className="h-10 w-10 rounded-xl border border-white/10 bg-white/5 flex items-center justify-center">
              <Coins className="h-5 w-5 text-[#ccff00]/60" />
            </div>
          )}

          <div className="min-w-0 flex-1">
            <div className="flex items-center gap-2 flex-wrap">
              <h3 className="font-bold text-white truncate">{mint.name || hostOf(mint.url)}</h3>
              <Badge variant="outline" className={cn('text-[10px]', health.className)}>
                {health.label}
              </Badge>
              {typeof mint.latencyMs === 'number' && mint.online && (
                <span className="inline-flex items-center gap-1 text-[10px] text-gray-500">
                  <Activity className="h-3 w-3" /> {mint.latencyMs} ms
                </span>
              )}
            </div>
            <p className="text-xs text-gray-500 truncate">{hostOf(mint.url)}</p>
            {mint.descriptionLong && (
              <p className="mt-1 text-xs text-gray-400 line-clamp-2">{mint.descriptionLong}</p>
            )}
            <div className="mt-2 flex items-center gap-3 text-[11px] text-gray-500">
              {typeof mint.nutCount === 'number' && <span>{mint.nutCount} NUTs</span>}
              {mint.version && <span className="truncate max-w-40">{mint.version}</span>}
              {mint.tosUrl && (
                <a
                  href={mint.tosUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-1 text-gray-400 hover:text-white"
                >
                  Terms <ExternalLink className="h-3 w-3" />
                </a>
              )}
            </div>
          </div>

          <div className="shrink-0">
            {added ? (
              <Badge className="gap-1 bg-[#ccff00]/15 text-[#ccff00] border border-[#ccff00]/30">
                <Check className="h-3 w-3" /> Added
              </Badge>
            ) : canAdd ? (
              <Button
                size="sm"
                variant="outline"
                onClick={onAdd}
                disabled={adding}
                className="gap-1.5 border-[#ccff00]/40 text-[#ccff00] hover:bg-[#ccff00]/10"
              >
                {adding ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Plus className="h-3.5 w-3.5" />}
                Add
              </Button>
            ) : null}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

export default function MintsPage() {
  const { data, isLoading, error } = useMintDirectory();
  const { coco, mints, isInitialized, refreshMints } = useCashu();
  const { toast } = useToast();
  const [query, setQuery] = useState('');
  const [onlineOnly, setOnlineOnly] = useState(false);
  const [addingUrl, setAddingUrl] = useState<string | null>(null);

  useSeoMeta({
    title: 'Cashu Mints — SkateSpots',
    description: 'Browse Cashu mints, check their health, and add one to your wallet.',
  });

  const canAdd = isNativePlatform() && isInitialized && !!coco;
  const addedUrls = useMemo(
    () => new Set(mints.map((m) => m.url.toLowerCase())),
    [mints],
  );

  const filtered = useMemo(() => {
    const list = data ?? [];
    const q = query.trim().toLowerCase();
    return list
      .filter((m) => {
        if (onlineOnly && (m.archived || m.online === false)) return false;
        if (!q) return true;
        return (
          m.url.toLowerCase().includes(q) ||
          (m.name ?? '').toLowerCase().includes(q)
        );
      })
      .sort((a, b) => {
        const rank = (m: MintDirectoryEntry) =>
          m.archived ? 3 : m.online === false ? 2 : m.degraded ? 1 : 0;
        const r = rank(a) - rank(b);
        if (r !== 0) return r;
        return (a.latencyMs ?? 9999) - (b.latencyMs ?? 9999);
      });
  }, [data, query, onlineOnly]);

  const handleAdd = async (url: string) => {
    if (!coco) return;
    setAddingUrl(url);
    try {
      await coco.mint.addMint(url, { trusted: true });
      await refreshMints();
      toast({ title: 'Mint added', description: `${hostOf(url)} is now in your wallet.` });
    } catch (e) {
      toast({
        title: 'Could not add mint',
        description: e instanceof Error ? e.message : 'Something went wrong.',
        variant: 'destructive',
      });
    } finally {
      setAddingUrl(null);
    }
  };

  return (
    <Layout>
      <div className="container mx-auto max-w-3xl px-4 py-8">
        <div className="mb-6">
          <h1 className="flex items-center gap-3 text-3xl font-black uppercase text-white">
            <Coins className="h-8 w-8 text-[#ccff00]" /> Mints
          </h1>
          <p className="mt-1 text-sm text-gray-400">
            Browse Cashu mints and their health. Cashu wallet operations run in the
            SkateSpots app.
          </p>
        </div>

        <div className="mb-4 flex items-center gap-2">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
            <Input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Search mints by name or URL…"
              className="h-11 border-gray-700 bg-gray-900 pl-10 text-white"
            />
          </div>
          <Button
            variant={onlineOnly ? 'default' : 'outline'}
            onClick={() => setOnlineOnly((v) => !v)}
            className={cn(
              'h-11 shrink-0 gap-1.5',
              onlineOnly ? 'bg-[#ccff00] font-bold text-black hover:bg-[#ccff00]/90' : 'border-white/15',
            )}
          >
            <Activity className="h-4 w-4" /> Online only
          </Button>
        </div>

        {!isLoading && !error && (
          <p className="mb-3 text-xs text-gray-500">
            {filtered.length} of {data?.length ?? 0} mints
          </p>
        )}

        {isLoading && (
          <div className="space-y-3" aria-busy="true">
            {Array.from({ length: 6 }).map((_, i) => (
              <Skeleton key={i} className="h-24 w-full rounded-xl" />
            ))}
          </div>
        )}

        {error && !isLoading && (
          <Card className="border-dashed border-white/15 bg-black/60">
            <CardContent className="py-12 text-center space-y-3">
              <ShieldAlert className="mx-auto h-8 w-8 text-amber-400" />
              <p className="text-sm text-gray-300">
                {error instanceof Error ? error.message : 'Could not load the mint directory.'}
              </p>
              <p className="text-xs text-gray-500">
                The directory is community-run and rate-limited — it may be briefly
                unavailable.
              </p>
              <Button asChild variant="outline" className="border-white/15">
                <Link to="/wallet">Go to Wallet</Link>
              </Button>
            </CardContent>
          </Card>
        )}

        {!isLoading && !error && (
          <>
            {!canAdd && (
              <p className="mb-3 text-xs text-gray-500">
                Adding a mint happens in the SkateSpots app (Cashu is app-only).
              </p>
            )}
            <div className="space-y-3">
              {filtered.map((mint) => (
                <MintRow
                  key={mint.url}
                  mint={mint}
                  added={addedUrls.has(mint.url.toLowerCase())}
                  canAdd={canAdd}
                  adding={addingUrl === mint.url}
                  onAdd={() => handleAdd(mint.url)}
                />
              ))}
            </div>
            {filtered.length === 0 && (
              <p className="py-12 text-center text-sm text-gray-500">
                No mints match “{query}”.
              </p>
            )}
            <p className="mt-6 text-center text-[11px] text-gray-600">
              Health data from the community MintRadar project — unofficial and may be
              stale. Always review a mint&apos;s terms before trusting it with funds.
            </p>
          </>
        )}
      </div>
    </Layout>
  );
}