import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

import { AttachmentPreviewList } from '@renderer/components/team/attachments/AttachmentPreviewList';
import { DropZoneOverlay } from '@renderer/components/team/attachments/DropZoneOverlay';
import { MemberBadge } from '@renderer/components/team/MemberBadge';
import { MentionableTextarea } from '@renderer/components/ui/MentionableTextarea';
import { Popover, PopoverContent, PopoverTrigger } from '@renderer/components/ui/popover';
import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
import { useAttachments } from '@renderer/hooks/useAttachments';
import { useChipDraftPersistence } from '@renderer/hooks/useChipDraftPersistence';
import { useDraftPersistence } from '@renderer/hooks/useDraftPersistence';
import { cn } from '@renderer/lib/utils';
import { useStore } from '@renderer/store';
import { serializeChipsWithText } from '@renderer/types/inlineChip';
import { formatAgentRole } from '@renderer/utils/formatAgentRole';
import { getModifierKeyName } from '@renderer/utils/keyboardUtils';
import { buildMemberColorMap } from '@renderer/utils/memberHelpers';
import { AlertCircle, Check, ChevronDown, ImagePlus, Mic, Search, Send } from 'lucide-react';

import type { MentionSuggestion } from '@renderer/types/mention';
import type { AttachmentPayload, LeadContextUsage, ResolvedTeamMember } from '@shared/types';

interface MessageComposerProps {
  teamName: string;
  members: ResolvedTeamMember[];
  isTeamAlive?: boolean;
  sending: boolean;
  sendError: string | null;
  onSend: (
    recipient: string,
    text: string,
    summary?: string,
    attachments?: AttachmentPayload[]
  ) => void;
}

const MAX_MESSAGE_LENGTH = 4000;

/** Circular progress indicator for lead context usage. */
const ContextRing = ({ ctx }: { ctx: LeadContextUsage }): React.JSX.Element => {
  const size = 26;
  const stroke = 2.5;
  const radius = (size - stroke) / 2;
  const circumference = 2 * Math.PI * radius;
  const pct = Math.min(ctx.percent, 100);
  const offset = circumference - (pct / 100) * circumference;
  const color = pct > 90 ? '#ef4444' : pct > 70 ? '#f59e0b' : '#3b82f6';

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <div className="relative flex shrink-0 cursor-default items-center justify-center" style={{ width: size, height: size }}>
          <svg width={size} height={size} className="-rotate-90">
            <circle
              cx={size / 2}
              cy={size / 2}
              r={radius}
              fill="none"
              stroke="var(--color-border)"
              strokeWidth={stroke}
            />
            <circle
              cx={size / 2}
              cy={size / 2}
              r={radius}
              fill="none"
              stroke={color}
              strokeWidth={stroke}
              strokeDasharray={circumference}
              strokeDashoffset={offset}
              strokeLinecap="round"
              className="transition-all duration-500"
            />
          </svg>
          <span className="absolute text-[8px] font-medium" style={{ color }}>
            {Math.round(pct)}
          </span>
        </div>
      </TooltipTrigger>
      <TooltipContent side="top">
        Context: {Math.round(pct)}% ({(ctx.currentTokens / 1000).toFixed(1)}k /{' '}
        {(ctx.contextWindow / 1000).toFixed(0)}k tokens)
      </TooltipContent>
    </Tooltip>
  );
};

export const MessageComposer = ({
  teamName,
  members,
  isTeamAlive,
  sending,
  sendError,
  onSend,
}: MessageComposerProps): React.JSX.Element => {
  const [recipient, setRecipient] = useState<string>(() => {
    const lead = members.find((m) => m.role === 'lead' || m.name === 'team-lead');
    return lead?.name ?? members[0]?.name ?? '';
  });
  const [recipientOpen, setRecipientOpen] = useState(false);
  const [recipientSearch, setRecipientSearch] = useState('');
  const recipientSearchRef = useRef<HTMLInputElement>(null);
  const [isDragOver, setIsDragOver] = useState(false);
  const dragCounterRef = useRef(0);
  const fileInputRef = useRef<HTMLInputElement>(null);

  // Members load async with team data; keep recipient stable if valid, otherwise default to lead/first.
  useEffect(() => {
    if (recipient && members.some((m) => m.name === recipient)) {
      return;
    }
    const lead = members.find((m) => m.role === 'lead' || m.name === 'team-lead');
    const next = lead?.name ?? members[0]?.name ?? '';
    if (next && next !== recipient) {
      setRecipient(next);
    }
  }, [members, recipient]);

  const projectPath = useStore((s) => s.selectedTeamData?.config.projectPath ?? null);
  const draft = useDraftPersistence({ key: `compose:${teamName}` });
  const chipDraft = useChipDraftPersistence(`compose:${teamName}:chips`);
  const {
    attachments,
    error: attachmentError,
    canAddMore,
    addFiles,
    removeAttachment,
    clearAttachments,
    handlePaste,
    handleDrop,
  } = useAttachments({ persistenceKey: `compose:${teamName}:attachments` });

  const colorMap = useMemo(() => buildMemberColorMap(members), [members]);

  const mentionSuggestions = useMemo<MentionSuggestion[]>(
    () =>
      members.map((m) => ({
        id: m.name,
        name: m.name,
        subtitle: formatAgentRole(m.role) ?? formatAgentRole(m.agentType) ?? undefined,
        color: colorMap.get(m.name),
      })),
    [members, colorMap]
  );

  const trimmed = draft.value.trim();

  const selectedMember = members.find((m) => m.name === recipient);
  const selectedResolvedColor = selectedMember ? colorMap.get(selectedMember.name) : undefined;
  const isLeadRecipient = selectedMember?.role === 'lead' || selectedMember?.name === 'team-lead';
  // TODO: lead context ring disabled — usage formula is inaccurate
  // const isLeadAgentRecipient = selectedMember?.agentType === 'team-lead';
  // const leadContext = useStore((s) =>
  //   isLeadAgentRecipient ? s.leadContextByTeam[teamName] : undefined
  // );
  const supportsAttachments = isLeadRecipient && !!isTeamAlive;
  const canAttach = supportsAttachments && canAddMore;
  const attachmentsBlocked = attachments.length > 0 && !supportsAttachments;
  const canSend =
    recipient.length > 0 &&
    trimmed.length > 0 &&
    trimmed.length <= MAX_MESSAGE_LENGTH &&
    !sending &&
    !attachmentsBlocked;

  // Track whether we initiated a send — clear draft only on confirmed success
  const pendingSendRef = useRef(false);

  const handleSend = useCallback(() => {
    if (!canSend) return;
    pendingSendRef.current = true;
    const serialized = serializeChipsWithText(trimmed, chipDraft.chips);
    // Summary should stay compact (no expanded chip markdown)
    onSend(recipient, serialized, trimmed, attachments.length > 0 ? attachments : undefined);
  }, [canSend, recipient, trimmed, onSend, attachments, chipDraft.chips]);

  // Clear draft only after send completes successfully (sending: true → false, no error)
  useEffect(() => {
    if (!sending && pendingSendRef.current) {
      pendingSendRef.current = false;
      if (!sendError) {
        draft.clearDraft();
        chipDraft.clearChipDraft();
        clearAttachments();
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps -- clearChipDraft is stable (useCallback with [])
  }, [sending, sendError, draft, clearAttachments, chipDraft.clearChipDraft]);

  const handleKeyDownCapture = useCallback(
    (e: React.KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
        e.preventDefault();
        e.stopPropagation();
        handleSend();
      }
    },
    [handleSend]
  );

  const handleFileInputChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const input = e.target;
      if (input.files?.length) {
        void addFiles(input.files);
      }
      input.value = '';
    },
    [addFiles]
  );

  const handleDragEnter = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    dragCounterRef.current += 1;
    if (dragCounterRef.current === 1) setIsDragOver(true);
  }, []);

  const handleDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    dragCounterRef.current -= 1;
    if (dragCounterRef.current <= 0) {
      dragCounterRef.current = 0;
      setIsDragOver(false);
    }
  }, []);

  const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault();
  }, []);

  const handleDropWrapper = useCallback(
    (e: React.DragEvent) => {
      dragCounterRef.current = 0;
      setIsDragOver(false);
      if (canAttach) handleDrop(e);
    },
    [canAttach, handleDrop]
  );

  const handlePasteWrapper = useCallback(
    (e: React.ClipboardEvent) => {
      if (canAttach) handlePaste(e);
    },
    [canAttach, handlePaste]
  );

  const remaining = MAX_MESSAGE_LENGTH - trimmed.length;

  return (
    <div
      className="relative mb-3 p-3"
      role="group"
      onKeyDownCapture={handleKeyDownCapture}
      onDragEnter={canAttach ? handleDragEnter : undefined}
      onDragLeave={canAttach ? handleDragLeave : undefined}
      onDragOver={canAttach ? handleDragOver : undefined}
      onDrop={canAttach ? handleDropWrapper : undefined}
      onPaste={canAttach ? handlePasteWrapper : undefined}
    >
      <DropZoneOverlay active={isDragOver && !!canAttach} />

      <div className="mb-2 flex items-center gap-2">
        <Popover open={recipientOpen} onOpenChange={setRecipientOpen}>
          <PopoverTrigger asChild>
            <button
              type="button"
              className="inline-flex items-center gap-1.5 rounded-full border border-[var(--color-border)] px-2.5 py-1 text-xs transition-colors hover:border-[var(--color-border-emphasis)] hover:bg-[var(--color-surface-raised)]"
            >
              {recipient ? (
                <MemberBadge
                  name={recipient}
                  color={selectedResolvedColor}
                  size="sm"
                  hideAvatar={recipient === 'user'}
                />
              ) : (
                <span className="text-[var(--color-text-muted)]">Select...</span>
              )}
              <ChevronDown size={12} className="shrink-0 text-[var(--color-text-muted)]" />
            </button>
          </PopoverTrigger>
          <PopoverContent
            align="start"
            className="w-56 p-1.5"
            onOpenAutoFocus={(e) => {
              e.preventDefault();
              setRecipientSearch('');
              setTimeout(() => recipientSearchRef.current?.focus(), 0);
            }}
          >
            {members.length > 5 && (
              <div className="relative mb-1">
                <Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]" />
                <input
                  ref={recipientSearchRef}
                  type="text"
                  className="w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] py-1 pl-6 pr-2 text-xs text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-border-emphasis)] focus:outline-none"
                  placeholder="Search..."
                  value={recipientSearch}
                  onChange={(e) => setRecipientSearch(e.target.value)}
                />
              </div>
            )}
            <div className="max-h-48 space-y-0.5 overflow-y-auto">
              {(() => {
                const query = recipientSearch.toLowerCase().trim();
                const filtered = query
                  ? members.filter((m) => m.name.toLowerCase().includes(query))
                  : members;
                if (filtered.length === 0) {
                  return (
                    <div className="px-2 py-3 text-center text-xs text-[var(--color-text-muted)]">
                      No results
                    </div>
                  );
                }
                return filtered.map((m) => {
                  const resolvedColor = colorMap.get(m.name);
                  const role = formatAgentRole(m.role) ?? formatAgentRole(m.agentType);
                  const isSelected = m.name === recipient;
                  return (
                    <button
                      key={m.name}
                      type="button"
                      className={cn(
                        'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors hover:bg-[var(--color-surface-raised)]',
                        isSelected && 'bg-[var(--color-surface-raised)]'
                      )}
                      onClick={() => {
                        setRecipient(m.name);
                        setRecipientOpen(false);
                        setRecipientSearch('');
                      }}
                    >
                      <MemberBadge
                        name={m.name}
                        color={resolvedColor}
                        size="sm"
                        hideAvatar={m.name === 'user'}
                      />
                      {role ? (
                        <span className="shrink-0 text-[10px] text-[var(--color-text-muted)]">
                          {role}
                        </span>
                      ) : null}
                      {isSelected ? (
                        <Check size={12} className="ml-auto shrink-0 text-blue-400" />
                      ) : null}
                    </button>
                  );
                });
              })()}
            </div>
          </PopoverContent>
        </Popover>

        {isLeadRecipient ? (
          <>
            <input
              ref={fileInputRef}
              type="file"
              accept="image/png,image/jpeg,image/gif,image/webp"
              multiple
              className="hidden"
              onChange={handleFileInputChange}
            />
            <Tooltip>
              <TooltipTrigger asChild>
                <button
                  type="button"
                  className={cn(
                    'inline-flex items-center gap-1 rounded p-1 transition-colors',
                    canAttach
                      ? 'text-[var(--color-text-secondary)] hover:text-[var(--color-text)]'
                      : 'text-[var(--color-text-muted)] opacity-40'
                  )}
                  disabled={!canAttach}
                  onClick={() => fileInputRef.current?.click()}
                >
                  <ImagePlus size={14} />
                </button>
              </TooltipTrigger>
              <TooltipContent side="top">
                {!isTeamAlive
                  ? 'Team must be online to attach images'
                  : !canAddMore
                    ? 'Maximum attachments reached'
                    : 'Attach images (paste or drag & drop)'}
              </TooltipContent>
            </Tooltip>
          </>
        ) : null}

        {!isTeamAlive ? (
          <span className="ml-auto text-[10px]" style={{ color: 'var(--warning-text)' }}>Team offline</span>
        ) : null}
      </div>

      <AttachmentPreviewList
        attachments={attachments}
        onRemove={removeAttachment}
        error={attachmentError}
        disabled={attachmentsBlocked}
        disabledHint="Image attachments are only supported when sending to the team lead while the team is online. Remove attachments or switch recipient."
      />

      <MentionableTextarea
        id={`compose-${teamName}`}
        placeholder={`Write a message... (${getModifierKeyName()}+Enter to send)`}
        value={draft.value}
        onValueChange={draft.setValue}
        suggestions={mentionSuggestions}
        chips={chipDraft.chips}
        onChipRemove={chipDraft.removeChip}
        projectPath={projectPath}
        onFileChipInsert={chipDraft.addChip}
        onModEnter={handleSend}
        minRows={2}
        maxRows={6}
        maxLength={MAX_MESSAGE_LENGTH}
        disabled={sending}
        cornerAction={
          <div className="flex items-center gap-2">
            {/* TODO: ContextRing disabled — usage formula is inaccurate */}
            <Tooltip>
              <TooltipTrigger asChild>
                <button
                  type="button"
                  className="inline-flex shrink-0 items-center rounded-full p-1.5 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text-secondary)]"
                  onClick={() => void window.electronAPI.openExternal('https://voicetext.site')}
                >
                  <Mic size={14} />
                </button>
              </TooltipTrigger>
              <TooltipContent side="top">Voice to text</TooltipContent>
            </Tooltip>
            <button
              type="button"
              className="inline-flex shrink-0 items-center gap-1 rounded-full bg-blue-600 px-3 py-1.5 text-[11px] font-medium text-white shadow-sm transition-colors hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
              disabled={!canSend}
              onClick={handleSend}
            >
              <Send size={12} />
              Send
            </button>
          </div>
        }
        footerRight={
          <div className="flex items-center gap-2">
            <span className="text-[10px] text-[var(--color-text-muted)] opacity-70">
              Mention &quot;create a task&quot; to add it to the board
            </span>
            {sendError ? (
              <span className="inline-flex items-center gap-1 rounded bg-red-500/10 px-1.5 py-0.5 text-[10px] text-red-400">
                <AlertCircle size={10} className="shrink-0" />
                {sendError}
              </span>
            ) : null}
            {remaining < 200 ? (
              <span
                className={`text-[10px] ${remaining < 100 ? 'text-yellow-400' : 'text-[var(--color-text-muted)]'}`}
              >
                {remaining} chars left
              </span>
            ) : null}
            {draft.isSaved ? (
              <span className="text-[10px] text-[var(--color-text-muted)]">Draft saved</span>
            ) : null}
          </div>
        }
      />
    </div>
  );
};