import { useMemo, useState } from 'react';
import { useSeoMeta } from '@unhead/react';
import { Link } from 'react-router-dom';
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 { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { useMintDirectory, type MintDirectoryEntry } from '@/hooks/useMintDirectory';
import { useCashu } from '@/hooks/wallet/useCashu';
import { useToast } from '@/hooks/useToast';
import { isNativePlatform } from '@/lib/platform';
import { useTranslation } from '@/contexts/language';
import { cn } from '@/lib/utils';
import { Search, Coins, ExternalLink, Plus, Loader2, Check, ShieldAlert, Activity, ChevronRight, Copy, Info, Star } 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: 'walletUi.mints.archived', className: 'border-gray-600 bg-gray-800/60 text-gray-400' };
  }
  if (mint.degraded) {
    return { label: 'walletUi.mints.degraded', className: 'border-amber-500/40 bg-amber-500/10 text-amber-400' };
  }
  if (mint.online === false) {
    return { label: 'walletUi.mints.offline', className: 'border-red-500/40 bg-red-500/10 text-red-400' };
  }
  return { label: 'walletUi.mints.online', className: 'border-[#ccff00]/40 bg-[#ccff00]/10 text-[#ccff00]' };
}

function MintRow({
  mint,
  added,
  canAdd,
  adding,
  onAdd,
  onSelect,
}: {
  mint: MintDirectoryEntry;
  added: boolean;
  canAdd: boolean;
  adding: boolean;
  onAdd: () => void;
  onSelect: () => void;
}) {
  const { t } = useTranslation();
  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">
                {/* A real button (not a card-wide role=button) so there are no
                    nested interactive elements — the Add button and the terms
                    link live alongside it. */}
                <button
                  type="button"
                  onClick={onSelect}
                  className="text-left transition-colors hover:text-[#ccff00]"
                >
                  {mint.name || hostOf(mint.url)}
                </button>
              </h3>
              <Badge variant="outline" className={cn('text-[10px]', health.className)}>
                {t(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"
                >
                  {t('walletUi.mints.terms')} <ExternalLink className="h-3 w-3" />
                </a>
              )}
            </div>

            {/* Community signal — ratings + reliability from MintRadar. */}
            {((typeof mint.reviewAvgRating === 'number' && (mint.reviewCount ?? 0) > 0) ||
              typeof mint.reliabilityScore === 'number' ||
              typeof mint.uptimePct24h === 'number') && (
              <div className="mt-1.5 flex flex-wrap items-center gap-x-2.5 gap-y-0.5 text-[11px]">
                {typeof mint.reviewAvgRating === 'number' && (mint.reviewCount ?? 0) > 0 && (
                  <span className="inline-flex items-center gap-1 font-bold text-amber-400">
                    <Star className="h-3 w-3 fill-current" />
                    {mint.reviewAvgRating.toFixed(1)}
                    <span className="font-normal text-gray-500">({mint.reviewCount})</span>
                  </span>
                )}
                {typeof mint.reliabilityScore === 'number' && (
                  <span className="text-gray-400">{t('walletUi.mints.reliability')} {mint.reliabilityScore}/100</span>
                )}
                {typeof mint.uptimePct24h === 'number' && (
                  <span className="text-gray-400">{Math.round(mint.uptimePct24h)}% up · 24h</span>
                )}
              </div>
            )}
          </div>

          <div className="shrink-0 flex items-center gap-1.5">
            {added ? (
              <Badge className="gap-1 bg-[#ccff00]/15 text-[#ccff00] border border-[#ccff00]/30">
                <Check className="h-3 w-3" /> {t('walletUi.mints.addedBadge')}
              </Badge>
            ) : canAdd ? (
              <Button
                size="sm"
                variant="outline"
                onClick={(e) => {
                  e.stopPropagation();
                  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" />}
                {t('walletUi.mints.add')}
              </Button>
            ) : null}
            <ChevronRight className="h-4 w-4 shrink-0 text-gray-600" />
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

export default function MintsPage() {
  const { t } = useTranslation();
  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);
  const [selected, setSelected] = useState<MintDirectoryEntry | null>(null);

  const copyUrl = async (url: string) => {
    try {
      await navigator.clipboard.writeText(url);
      toast({ title: t('walletUi.mints.urlCopied') });
    } catch {
      toast({ title: t('walletUi.share.copyFailed'), variant: 'destructive' });
    }
  };

  useSeoMeta({
    title: t('seoUi.mintsTitle'),
    description: t('seoUi.mintsDesc'),
  });

  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: t('walletUi.mints.added'), description: t('walletUi.mints.addedDesc', { host: hostOf(url) }) });
    } catch (e) {
      toast({
        title: t('walletUi.mints.couldNotAdd'),
        description: e instanceof Error ? e.message : t('walletUi.addToCollection.somethingWrong'),
        variant: 'destructive',
      });
    } finally {
      setAddingUrl(null);
    }
  };

  return (
    <>
      <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]" /> {t('walletUi.mints.title')}
          </h1>
          <p className="mt-1 text-sm text-gray-400">
            {t('walletUi.mints.subtitle')}
          </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={t('walletUi.mints.searchPlaceholder')}
              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" /> {t('walletUi.mints.onlineOnly')}
          </Button>
        </div>

        {!isLoading && !error && (
          <p className="mb-3 text-xs text-gray-500">
            {t('walletUi.mints.count', { filtered: filtered.length, total: data?.length ?? 0 })}
          </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 : t('walletUi.mints.directoryError')}
              </p>
              <p className="text-xs text-gray-500">
                {t('walletUi.mints.directoryHint')}
              </p>
              <Button asChild variant="outline" className="border-white/15">
                <Link to="/wallet">{t('walletUi.mints.goToWallet')}</Link>
              </Button>
            </CardContent>
          </Card>
        )}

        {!isLoading && !error && (
          <>
            {!canAdd && (
              <p className="mb-3 text-xs text-gray-500">
                {t('walletUi.mints.appOnly')}
              </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)}
                  onSelect={() => setSelected(mint)}
                />
              ))}
            </div>
            {filtered.length === 0 && (
              <p className="py-12 text-center text-sm text-gray-500">
                {t('walletUi.mints.noMatch', { query })}
              </p>
            )}
            <p className="mt-6 text-center text-[11px] text-gray-600">
              {t('walletUi.mints.footer')}
            </p>
          </>
        )}

        {/* Mint detail — everything the directory knows, plus what to watch for. */}
        <Sheet
          open={!!selected}
          onOpenChange={(o) => {
            if (!o) setSelected(null);
          }}
        >
          <SheetContent side="bottom" className="max-h-[88vh] overflow-y-auto rounded-t-2xl px-4 pb-8">
            {selected && (
              <>
                <SheetHeader className="pb-3 text-left">
                  <div className="flex items-center gap-3 pr-8">
                    {selected.iconUrl ? (
                      <img
                        src={selected.iconUrl}
                        alt=""
                        className="h-12 w-12 rounded-xl border border-white/10 bg-white/5 object-cover"
                        onError={(e) => {
                          (e.currentTarget as HTMLImageElement).style.display = 'none';
                        }}
                      />
                    ) : (
                      <div className="flex h-12 w-12 items-center justify-center rounded-xl border border-white/10 bg-white/5">
                        <Coins className="h-6 w-6 text-[#ccff00]/60" />
                      </div>
                    )}
                    <div className="min-w-0 flex-1">
                      <SheetTitle className="truncate text-lg">
                        {selected.name || hostOf(selected.url)}
                      </SheetTitle>
                      <SheetDescription className="truncate text-xs">
                        {hostOf(selected.url)}
                      </SheetDescription>
                    </div>
                    <Badge
                      variant="outline"
                      className={cn('shrink-0 text-[10px]', healthBadge(selected).className)}
                    >
                      {healthBadge(selected).label}
                    </Badge>
                  </div>
                </SheetHeader>

                {selected.descriptionLong && (
                  <p className="text-sm leading-relaxed text-gray-300">{selected.descriptionLong}</p>
                )}

                <div className="mt-4 grid grid-cols-2 gap-2">
                  {[
                    {
                      label: t('walletUi.mints.communityRating'),
                      value:
                        typeof selected.reviewAvgRating === 'number' && (selected.reviewCount ?? 0) > 0
                          ? `${selected.reviewAvgRating.toFixed(1)} / 5 · ${selected.reviewCount}`
                          : '—',
                    },
                    {
                      label: t('walletUi.mints.reliabilityLabel'),
                      value:
                        typeof selected.reliabilityScore === 'number'
                          ? `${selected.reliabilityScore} / 100`
                          : '—',
                    },
                    {
                      label: t('walletUi.mints.uptime'),
                      value:
                        typeof selected.uptimePct24h === 'number' && typeof selected.uptimePct7d === 'number'
                          ? `${Math.round(selected.uptimePct24h)}% / ${Math.round(selected.uptimePct7d)}%`
                          : '—',
                    },
                    { label: t('walletUi.mints.location'), value: selected.serverLocation ?? '—' },
                    {
                      label: t('walletUi.mints.latency'),
                      value:
                        selected.online && typeof selected.latencyMs === 'number'
                          ? `${selected.latencyMs} ms`
                          : '—',
                    },
                    {
                      label: t('walletUi.mints.nuts'),
                      value: typeof selected.nutCount === 'number' ? String(selected.nutCount) : '—',
                    },
                    {
                      label: t('walletUi.mints.units'),
                      value: selected.units?.length ? selected.units.join(', ') : '—',
                    },
                    { label: t('walletUi.mints.version'), value: selected.version ?? '—' },
                  ].map((f) => (
                    <div
                      key={f.label}
                      className="rounded-xl border border-white/8 bg-white/[0.03] px-3 py-2"
                    >
                      <p className="text-[10px] font-bold uppercase tracking-widest text-gray-500">
                        {f.label}
                      </p>
                      <p className="truncate text-sm font-bold text-white">{f.value}</p>
                    </div>
                  ))}
                </div>

                <div className="mt-3 space-y-1.5 text-[11px] leading-relaxed text-gray-500">
                  <p className="flex items-start gap-2">
                    <Star className="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-400" />
                    <span>
                      {typeof selected.reviewAvgRating === 'number' && (selected.reviewCount ?? 0) > 0
                        ? t('walletUi.mints.ratedBy', { rating: selected.reviewAvgRating.toFixed(1), count: selected.reviewCount ?? 0 })
                        : t('walletUi.mints.noRating')}{' '}
                      {t('walletUi.mints.reviewsNote1')}{' '}
                      <a
                        href="https://mintradar.org/"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-gray-300 underline underline-offset-2 hover:text-white"
                      >
                        {t('walletUi.mints.openMintRadar')}
                      </a>{' '}
                      {t('walletUi.mints.reviewsNote2')}
                    </span>
                  </p>
                  {typeof selected.auditNMints === 'number' && (
                    <p className="flex items-start gap-2">
                      <Activity className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[#ccff00]" />
                      <span>
                        {t('walletUi.mints.liveness', { mints: selected.auditNMints.toLocaleString(), melts: (selected.auditNMelts ?? 0).toLocaleString() })}
                        {selected.auditRecentTotal
                          ? t('walletUi.mints.livenessErrors', { errors: selected.auditRecentErrors ?? 0, total: selected.auditRecentTotal })
                          : ''}
                        .
                      </span>
                    </p>
                  )}
                </div>

                <div className="mt-4 flex flex-wrap gap-2">
                  {addedUrls.has(selected.url.toLowerCase()) ? (
                    <Badge className="gap-1 border border-[#ccff00]/30 bg-[#ccff00]/15 text-[#ccff00]">
                      <Check className="h-3 w-3" /> {t('walletUi.mints.inWallet')}
                    </Badge>
                  ) : canAdd ? (
                    <Button
                      size="sm"
                      onClick={() => handleAdd(selected.url)}
                      disabled={addingUrl === selected.url}
                      className="gap-1.5 bg-[#ccff00] font-bold text-black hover:bg-[#ccff00]/90"
                    >
                      {addingUrl === selected.url ? (
                        <Loader2 className="h-4 w-4 animate-spin" />
                      ) : (
                        <Plus className="h-4 w-4" />
                      )}
                      {t('walletUi.mints.addToWallet')}
                    </Button>
                  ) : null}
                  <Button
                    size="sm"
                    variant="outline"
                    className="gap-1.5 border-white/15"
                    onClick={() => void copyUrl(selected.url)}
                  >
                    <Copy className="h-3.5 w-3.5" /> {t('walletUi.mints.copyUrl')}
                  </Button>
                  <a href={selected.url} target="_blank" rel="noopener noreferrer">
                    <Button size="sm" variant="outline" className="gap-1.5 border-white/15">
                      <ExternalLink className="h-3.5 w-3.5" /> {t('walletUi.mints.openMint')}
                    </Button>
                  </a>
                  {selected.tosUrl && (
                    <a href={selected.tosUrl} target="_blank" rel="noopener noreferrer">
                      <Button size="sm" variant="outline" className="gap-1.5 border-white/15">
                        <ExternalLink className="h-3.5 w-3.5" /> {t('walletUi.mints.terms')}
                      </Button>
                    </a>
                  )}
                </div>

                <div className="mt-4 space-y-2 rounded-2xl border border-white/10 bg-white/[0.03] p-4">
                  <p className="flex items-center gap-2 text-xs font-bold text-white">
                    <Info className="h-4 w-4 text-[#ccff00]" /> {t('walletUi.mints.whatsAMint')}
                  </p>
                  <p className="text-xs leading-relaxed text-gray-400">
                    {t('walletUi.mints.whatsAMintDesc')}
                  </p>
                  <p className="flex items-start gap-2 text-xs leading-relaxed text-amber-400/90">
                    <ShieldAlert className="mt-0.5 h-3.5 w-3.5 shrink-0" />
                    {t('walletUi.mints.mintWarning')}
                  </p>
                  <p className="text-[11px] text-gray-600">
                    {t('walletUi.mints.healthDisclaimer')}
                  </p>
                </div>
              </>
            )}
          </SheetContent>
        </Sheet>
      </div>
    </>
  );
}