import { useEffect, useMemo, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import { nip19 } from 'nostr-tools';
import { formatDistanceToNow } from '@/lib/dateFnsI18n';
import { Lock, Send, Loader2, ShieldCheck, MessageSquare, EyeOff } from 'lucide-react';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Skeleton } from '@/components/ui/skeleton';

import { useCurrentUser } from '@/hooks/useCurrentUser';
import { useTranslation } from '@/contexts/language';
import { useNostrLogin } from '@nostrify/react/login';
import { hasNip44 as checkNip44 } from '@/lib/signerCapabilities';
import { AmberApprovalHint } from '@/components/AmberApprovalHint';
import { useAuthor } from '@/hooks/useAuthor';
import { useToast } from '@/hooks/useToast';
import {
  useGroupConversation,
  useSendDirectMessage,
  type DirectMessage,
} from '@/hooks/useDirectMessages';
import { useCordnChat } from '@/hooks/useCordnChat';
import { useCrewChatRead } from '@/hooks/useCrewChatRead';
import { resolveCordnEndpoint } from '@/lib/cordn/endpoint';
import type { CordnMessage } from '@/lib/cordn/types';
import { genUserName } from '@/lib/genUserName';
import { useCrewModeration, useHideCrewPost } from '@/hooks/useCrewModeration';
import { cn } from '@/lib/utils';
import { Server } from 'lucide-react';
import type { SkateCrew } from '@/lib/types';

interface CrewChatProps {
  crewName: string;
  /** The crew founder pubkey. */
  founderPubkey: string;
  /** All listed member pubkeys (hex). */
  members: string[];
  /** Delegated admin pubkeys (subset of members). */
  admins?: string[];
  /** Crew addressable coordinate `kind:pubkey:d` (for moderation labels). */
  crewCoord?: string;
  /** Whether the viewer can moderate (founder or admin). */
  canModerate?: boolean;
  /**
   * Full crew — when present AND it has a `coordinator` configured, chat runs
   * over the Cordn coordinator (encrypted, coordinator-routed). Otherwise it
   * falls back to the built-in NIP-17 group DM.
   */
  crew?: SkateCrew;
}

/** Normalise a Cordn message into the shared DirectMessage bubble shape. */
function cordnToDirect(m: CordnMessage, groupId: string): DirectMessage {
  return {
    id: m.id,
    pubkey: m.pubkey,
    content: m.content,
    createdAt: m.createdAt,
    conversationWith: groupId,
  };
}

/** One message bubble, resolving the author's profile. */
function CrewMessageBubble({
  message,
  isOwn,
  isHidden,
  canModerate,
  onHide,
}: {
  message: DirectMessage;
  isOwn: boolean;
  isHidden?: boolean;
  canModerate?: boolean;
  onHide?: (message: DirectMessage) => void;
}) {
  const { t } = useTranslation();
  const author = useAuthor(message.pubkey);
  const meta = author.data?.metadata;
  const name = meta?.name ?? genUserName(message.pubkey);
  const npub = useMemo(() => nip19.npubEncode(message.pubkey), [message.pubkey]);
  const timeAgo = formatDistanceToNow(new Date(message.createdAt * 1000), { addSuffix: true });

  return (
    <div className={cn('group flex gap-2.5', isOwn && 'flex-row-reverse', isHidden && 'opacity-50')}>
      <Link to={`/${npub}`} className="shrink-0">
        <Avatar className="h-8 w-8">
          <AvatarImage src={meta?.picture} alt={name} />
          <AvatarFallback className="text-xs bg-teal-900/40 text-teal-300">
            {name.slice(0, 2).toUpperCase()}
          </AvatarFallback>
        </Avatar>
      </Link>
      <div className={cn('flex max-w-[78%] flex-col gap-0.5', isOwn && 'items-end')}>
        <div className={cn('flex items-baseline gap-2', isOwn && 'flex-row-reverse')}>
          <Link to={`/${npub}`} className="text-xs font-semibold hover:underline truncate max-w-[10rem]">
            {name}
          </Link>
          <span className="text-[10px] text-muted-foreground shrink-0">{timeAgo}</span>
          {isHidden && (
            <span className="flex items-center gap-0.5 text-[10px] font-bold uppercase text-red-400">
              <EyeOff className="h-2.5 w-2.5" /> {t('socialUi.chat.hidden')}
            </span>
          )}
          {canModerate && !isHidden && onHide && (
            <button
              type="button"
              onClick={() => onHide(message)}
              className="text-muted-foreground opacity-0 transition-opacity hover:text-red-400 group-hover:opacity-100"
              aria-label={t('socialUi.chat.hideMessageAria')}
              title={t('socialUi.chat.hideMessageTitle')}
            >
              <EyeOff className="h-3 w-3" />
            </button>
          )}
        </div>
        <div
          className={cn(
            'rounded-2xl px-3 py-2 text-sm break-words whitespace-pre-wrap',
            isOwn ? 'bg-teal-500 text-black rounded-tr-sm' : 'bg-muted rounded-tl-sm',
          )}
        >
          {message.content}
        </div>
      </div>
    </div>
  );
}

export function CrewChat({
  crewName,
  founderPubkey,
  members,
  admins = [],
  crewCoord = '',
  canModerate = false,
  crew,
}: CrewChatProps) {
  const { t } = useTranslation();
  const { user } = useCurrentUser();
  const { logins } = useNostrLogin();
  const { toast } = useToast();
  const [draft, setDraft] = useState('');
  const scrollRef = useRef<HTMLDivElement>(null);

  // Cordn transport when the crew advertises a coordinator; else NIP-17.
  const cordnEndpoint = useMemo(
    () => (crew ? resolveCordnEndpoint(crew) : null),
    [crew],
  );
  const usingCordn = !!cordnEndpoint;

  // Moderation — founder + admins can hide chat messages (client-side, since
  // NIP-17 messages are E2EE and can't be deleted from relays).
  const moderators = useMemo(
    () => Array.from(new Set([founderPubkey, ...admins])),
    [founderPubkey, admins],
  );
  const { data: hiddenIds } = useCrewModeration({
    crewCoord,
    moderators,
    enabled: !!crewCoord && moderators.length > 0,
  });
  const { mutateAsync: hideMessage } = useHideCrewPost(crewCoord);

  const handleHideMessage = async (m: DirectMessage) => {
    try {
      await hideMessage({ postId: m.id, postAuthor: m.pubkey });
      toast({ title: t('socialUi.chat.messageHidden'), description: t('socialUi.chat.messageHiddenDesc') });
    } catch (err) {
      toast({
        title: t('socialUi.chat.messageHideFailed'),
        description: err instanceof Error ? err.message : t('common.tryAgain'),
        variant: 'destructive',
      });
    }
  };

  // The chat participants = founder + all listed members (deduped).
  const participants = useMemo(
    () => Array.from(new Set([founderPubkey, ...members])),
    [founderPubkey, members],
  );

  // Only crew members (founder or a listed member) can read/write the chat,
  // because group messages are end-to-end encrypted to the participants.
  const isMember = !!user && participants.includes(user.pubkey);

  // ── NIP-17 fallback transport ──
  const { data: nip17Messages, isLoading: nip17Loading } = useGroupConversation(
    !usingCordn && isMember ? participants : [],
  );
  const { mutateAsync: sendNip17, isPending: nip17Sending } = useSendDirectMessage();

  // ── Cordn coordinator transport ──
  const cordn = useCordnChat({
    endpoint: cordnEndpoint,
    roster: participants,
    enabled: isMember,
  });

  // Unify whichever transport is active into one message list + send + state.
  // Memoised so its identity is stable for the useMemo/useEffect deps below.
  const messages: DirectMessage[] = useMemo(
    () =>
      usingCordn
        ? cordn.messages.map((m) => cordnToDirect(m, cordnEndpoint!.groupId))
        : (nip17Messages ?? []),
    [usingCordn, cordn.messages, cordnEndpoint, nip17Messages],
  );
  const isLoading = usingCordn ? cordn.isLoading : nip17Loading;
  const isPending = usingCordn ? cordn.isSending : nip17Sending;

  // ── "New messages" divider ──
  // Snapshot the last-seen time ONCE per open so the divider stays put while the
  // member reads, instead of jumping as fresh messages stream in. Anything after
  // that timestamp (and not authored by me) is "new since your last visit".
  const { lastSeen, markSeen } = useCrewChatRead(crewCoord);
  const seenAtOpenRef = useRef<number | null>(null);
  if (seenAtOpenRef.current === null && lastSeen !== undefined) {
    seenAtOpenRef.current = lastSeen;
  }
  const seenAtOpen = seenAtOpenRef.current ?? 0;

  // The first message id that falls after the snapshot — the divider sits above
  // it. Skip when there's nothing older (a brand-new reader sees no divider).
  const firstUnreadId = useMemo(() => {
    if (!user || seenAtOpen <= 0) return null;
    const hasOlder = messages.some((m) => m.createdAt <= seenAtOpen);
    if (!hasOlder) return null;
    const firstNew = messages.find(
      (m) => m.createdAt > seenAtOpen && m.pubkey !== user.pubkey,
    );
    return firstNew?.id ?? null;
  }, [messages, seenAtOpen, user]);

  // Keep the stored "last seen" caught up to the newest message we've rendered,
  // so the next visit only flags genuinely newer messages.
  useEffect(() => {
    if (messages.length === 0) return;
    const newest = messages.reduce((max, m) => Math.max(max, m.createdAt), 0);
    if (newest > (lastSeen ?? 0)) markSeen(newest);
  }, [messages, lastSeen, markSeen]);

  // Auto-scroll to newest message when the list grows.
  const lastCount = useRef(0);
  useEffect(() => {
    const count = messages?.length ?? 0;
    if (count !== lastCount.current) {
      lastCount.current = count;
      scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' });
    }
  }, [messages]);

  const canSendNip44 = checkNip44(user, logins);

  // How many signer approvals one Send will cost — used to warn Amber users so
  // the repeated Approve screens don't look like a bug. Roster = founder + all
  // members (deduped, includes self). Cordn v2: one author-proof signature plus
  // one encryption per roster member. NIP-17: each target (others + self) is an
  // encrypt + a seal signature, i.e. two ops per member.
  const rosterSize = Math.max(participants.length, 1);
  const approvalCount = usingCordn ? rosterSize + 1 : rosterSize * 2;

  const handleSend = async (e: React.FormEvent) => {
    e.preventDefault();
    const text = draft.trim();
    if (!text || !user) return;

    if (!canSendNip44) {
      toast({
        title: t('socialUi.chat.encryptionUnavailable'),
        description: t('socialUi.chat.encryptionUnavailableDesc'),
        variant: 'destructive',
      });
      return;
    }

    // Cordn transport: seal to the roster and route via the coordinator.
    if (usingCordn) {
      try {
        await cordn.send(text);
        setDraft('');
      } catch (err) {
        toast({
          title: t('socialUi.chat.messageFailed'),
          description: err instanceof Error ? err.message : t('socialUi.chat.couldNotSend'),
          variant: 'destructive',
        });
      }
      return;
    }

    // NIP-17 fallback: recipients = everyone except yourself (hook wraps self too).
    const recipients = participants.filter((p) => p !== user.pubkey);
    if (recipients.length === 0) {
      toast({
        title: t('socialUi.chat.noOneToMessage'),
        description: t('socialUi.chat.noOneToMessageDesc'),
      });
      return;
    }

    try {
      await sendNip17({
        recipients,
        content: text,
        subject: t('socialUi.chat.subject', { crew: crewName }),
      });
      setDraft('');
    } catch (err) {
      toast({
        title: t('socialUi.chat.messageFailed'),
        description: err instanceof Error ? err.message : t('socialUi.chat.couldNotSend'),
        variant: 'destructive',
      });
    }
  };

  return (
    <Card className="bg-black/90 border-2 border-teal-500/20 flex flex-col overflow-hidden">
      <CardHeader className="pb-3 border-b border-white/5">
        <div className="flex items-center justify-between gap-3">
          <CardTitle className="flex items-center gap-2 text-lg font-black uppercase text-white">
            <MessageSquare className="h-5 w-5 text-teal-400" /> {t('socialUi.chat.title')}
          </CardTitle>
          {usingCordn ? (
            <Badge
              variant="outline"
              className="gap-1 border-emerald-500/40 bg-emerald-500/10 text-emerald-300 text-[10px] font-bold uppercase tracking-wide"
              title={t('socialUi.chat.cordnBadgeTitle')}
            >
              <Server className="h-3 w-3" />
              Cordn
            </Badge>
          ) : (
            <Badge
              variant="outline"
              className="gap-1 border-teal-500/40 bg-teal-500/10 text-teal-400 text-[10px] font-bold uppercase tracking-wide"
              title={t('socialUi.chat.privateBadgeTitle')}
            >
              <Lock className="h-3 w-3" />
              {t('socialUi.chat.private')}
            </Badge>
          )}
        </div>
        <p className="text-xs text-muted-foreground flex items-center gap-1 pt-0.5">
          <ShieldCheck className="h-3 w-3 text-teal-400 shrink-0" />
          {usingCordn
            ? t('socialUi.chat.encryptedCordn')
            : t('socialUi.chat.encryptedNip17')}
          {canModerate && t('socialUi.chat.moderatorNote')}
        </p>
      </CardHeader>

      <CardContent className="p-0 flex flex-col flex-1 min-h-0">
        {!user ? (
          <div className="flex flex-col items-center justify-center gap-2 py-10 px-6 text-center">
            <Lock className="h-8 w-8 text-teal-400/40" />
            <p className="text-sm text-muted-foreground">{t('socialUi.chat.loginToSee')}</p>
          </div>
        ) : !isMember ? (
          <div className="flex flex-col items-center justify-center gap-2 py-10 px-6 text-center">
            <Lock className="h-8 w-8 text-teal-400/40" />
            <p className="text-sm text-muted-foreground max-w-xs">
              {t('socialUi.chat.membersOnly')}
            </p>
          </div>
        ) : (
          <>
            <div
              ref={scrollRef}
              className="flex-1 overflow-y-auto px-4 py-3 space-y-3 min-h-[280px] max-h-[440px]"
            >
              {isLoading &&
                Array.from({ length: 3 }).map((_, i) => (
                  <div key={i} className="flex gap-2.5">
                    <Skeleton className="h-8 w-8 rounded-full" />
                    <div className="space-y-1.5">
                      <Skeleton className="h-3 w-24" />
                      <Skeleton className="h-8 w-40 rounded-2xl" />
                    </div>
                  </div>
                ))}
              {!isLoading && (!messages || messages.length === 0) && (
                <div className="flex h-full flex-col items-center justify-center text-center gap-2 py-8">
                  <MessageSquare className="h-8 w-8 text-muted-foreground/40" />
                  <p className="text-sm text-muted-foreground max-w-[16rem]">
                    {t('socialUi.chat.noMessages')}
                  </p>
                </div>
              )}
              {messages
                ?.filter((m) => canModerate || !hiddenIds?.has(m.id))
                .map((m) => (
                  <div key={m.id}>
                    {m.id === firstUnreadId && (
                      <div className="flex items-center gap-2 py-1.5" aria-label={t('socialUi.chat.newMessages')}>
                        <span className="h-px flex-1 bg-teal-500/30" />
                        <span className="text-[10px] font-bold uppercase tracking-wide text-teal-400">
                          {t('socialUi.chat.new')}
                        </span>
                        <span className="h-px flex-1 bg-teal-500/30" />
                      </div>
                    )}
                    <CrewMessageBubble
                      message={m}
                      isOwn={m.pubkey === user.pubkey}
                      isHidden={hiddenIds?.has(m.id)}
                      canModerate={canModerate}
                      onHide={handleHideMessage}
                    />
                  </div>
                ))}
            </div>

            <div className="border-t border-white/5 p-3">
              <form onSubmit={handleSend} className="flex items-end gap-2">
                <Textarea
                  value={draft}
                  onChange={(e) => setDraft(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' && !e.shiftKey) {
                      e.preventDefault();
                      handleSend(e);
                    }
                  }}
                  placeholder={t('socialUi.chat.placeholder')}
                  maxLength={2000}
                  rows={1}
                  className="flex-1 resize-none min-h-[40px] max-h-32"
                />
                <Button
                  type="submit"
                  size="icon"
                  disabled={isPending || !draft.trim()}
                  aria-label={t('socialUi.chat.sendAria')}
                  className="bg-teal-500 hover:bg-teal-600 text-black shrink-0"
                >
                  {isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
                </Button>
              </form>
              <AmberApprovalHint
                approvals={approvalCount}
                action="send to your crew"
                className="mt-2"
              />
            </div>
          </>
        )}
      </CardContent>
    </Card>
  );
}