import { useCallback, useEffect, useEffectEvent, useRef, useState } from "react";
import { toast } from "sonner";
import { useAuthStore } from "@/stores/auth-store";
import { useCreateParticle, useCreateStreamParticle } from "@/hooks/use-create-particle";
import { QuotaExceededError } from "@/lib/errors";
import { isUsageExhausted, useInvalidateNetworkUsage, useNetworkUsage } from "@/hooks/use-network-usage";
import { useRecorder } from "@/features/compose/use-recorder";
import { useScreenRecorder } from "@/features/compose/use-screen-recorder";
import { particlePath, parseParticlePath } from "@/lib/particle-path";
import type { ParticlePath } from "@/lib/particle-path";
import { RecordingOverlay } from "@/features/compose/recording-overlay";
import { ScreenSourcePicker } from "@/components/screen-source-picker";
import { TextComposeStep } from "@/features/compose/text-compose-step";
import { ConfigureStreamStep } from "@/features/compose/configure-stream-step";
import { apiClient } from "@/api/client";
import { useMediaSettingsStore } from "@/stores/media-settings-store";
import { useMediaDevicesStore } from "@/stores/media-devices-store";
import { useMediaDevices } from "@/hooks/use-media-devices";
import { resolveEffectiveDeviceId } from "@/hooks/use-effective-device-id";
import { useFileInput } from "@/hooks/use-file-input";
import { createImageThumbnail } from "@/lib/image-thumbnail";
import { MAX_ATTACHMENT_SIZE_BYTES, MAX_ATTACHMENTS } from "@/lib/constants";
import type { PendingAttachment } from "@/features/compose/attachment-strip";
import { useSuspendPlayback } from "@/hooks/use-suspend-playback";

export type ComposeStep = "idle" | "picking" | "recording" | "reviewing" | "typing" | "configuring" | "submitting";

type RecordingSource = "media" | "screen";

interface ComposeOverlayProps {
  networkId: string;
  // Optional target path for reply mode. If not provided, compose creates a new stream.
  targetPath?: ParticlePath;
  onActiveChange?: (active: boolean) => void;
  onStepChange?: (step: ComposeStep) => void;
  onParticleCreated?: (particleId: string) => void;
  /** When true, composing is blocked (e.g. stream is closed). */
  disabled?: boolean;
}


const HOLD_THRESHOLD_MS = 250;

/**
 * Self-contained compose overlay. Each consumer renders its own instance
 * with props that determine the mode (new stream vs. reply).
 */
export function ComposeOverlay({
  networkId,
  targetPath,
  onActiveChange,
  onStepChange,
  onParticleCreated,
  disabled,
}: ComposeOverlayProps) {
  const [step, setStep] = useState<ComposeStep>("idle");
  const [error, setError] = useState<string | null>(null);
  const [textContent, setTextContent] = useState("");
  const [mediaStream, setMediaStream] = useState<MediaStream | null>(null);
  const [reviewBlob, setReviewBlob] = useState<Blob | null>(null);
  const [reviewDurationMs, setReviewDurationMs] = useState(0);
  const [reviewMimeType, setReviewMimeType] = useState<string | null>(null);

  const [attachments, setAttachments] = useState<PendingAttachment[]>([]);
  const [recordingSource, setRecordingSource] = useState<RecordingSource>("media");

  const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
  const savedMic = useMediaDevicesStore((s) => s.mic);
  const savedCamera = useMediaDevicesStore((s) => s.camera);
  const { audioInputs, videoInputs } = useMediaDevices();
  const micDeviceId = resolveEffectiveDeviceId(savedMic, audioInputs);
  const cameraDeviceId = resolveEffectiveDeviceId(savedCamera, videoInputs);
  const userId = useAuthStore((s) => s.user?.id);
  const createParticle = useCreateParticle();
  const createStream = useCreateStreamParticle();
  const { data: usage } = useNetworkUsage(networkId);
  const invalidateUsage = useInvalidateNetworkUsage();
  const quotaExhausted = isUsageExhausted(usage);

  // Refs for synchronous reads in keyboard handlers
  const stepRef = useRef(step);
  const recordStartRef = useRef(0);
  const disabledRef = useRef(disabled);
  disabledRef.current = disabled;
  const quotaExhaustedRef = useRef(quotaExhausted);
  quotaExhaustedRef.current = quotaExhausted;
  const recordingSourceRef = useRef(recordingSource);
  recordingSourceRef.current = recordingSource;

  const setStepSync = useCallback((next: ComposeStep) => {
    stepRef.current = next;
    setStep(next);
  }, []);

  useSuspendPlayback(step !== "idle", "compose");

  // Notify parent when active state changes
  useEffect(() => {
    onActiveChange?.(step !== "idle");
    onStepChange?.(step);
    // Refresh quota when the overlay activates — user is about to send, so
    // we want the most accurate count before the client-side gate kicks in.
    if (step !== "idle") {
      void invalidateUsage(networkId);
    }
  }, [step, onActiveChange, onStepChange, invalidateUsage, networkId]);

  const revokeAttachmentThumbnails = useCallback((items: PendingAttachment[]) => {
    for (const a of items) {
      if (a.thumbnailUrl) URL.revokeObjectURL(a.thumbnailUrl);
    }
  }, []);

  const cancel = useCallback(() => {
    setStepSync("idle");
    setError(null);
    setTextContent("");
    setMediaStream(null);
    setReviewBlob(null);
    setReviewDurationMs(0);
    setReviewMimeType(null);
    setRecordingSource("media");
    setAttachments((prev) => {
      revokeAttachmentThumbnails(prev);
      return [];
    });
  }, [setStepSync, revokeAttachmentThumbnails]);

  const addAttachments = useCallback(async (files: File[]) => {
    const currentCount = attachments.length;
    const available = MAX_ATTACHMENTS - currentCount;
    if (available <= 0) {
      toast.error(`Maximum ${MAX_ATTACHMENTS} attachments`);
      return;
    }

    const accepted = files.slice(0, available);
    if (accepted.length < files.length) {
      toast.error(`Maximum ${MAX_ATTACHMENTS} attachments — ${files.length - accepted.length} skipped`);
    }

    const newAttachments: PendingAttachment[] = [];
    for (const file of accepted) {
      if (file.size > MAX_ATTACHMENT_SIZE_BYTES) {
        toast.error(`${file.name} is too large (max 25 MB)`);
        continue;
      }
      const thumbnailUrl = await createImageThumbnail(file);
      newAttachments.push({
        id: crypto.randomUUID(),
        file,
        thumbnailUrl,
        status: "pending",
      });
    }

    if (newAttachments.length > 0) {
      setAttachments((prev) => [...prev, ...newAttachments]);
    }
  }, [attachments.length]);

  const removeAttachment = useCallback((id: string) => {
    setAttachments((prev) => {
      const removed = prev.find((a) => a.id === id);
      if (removed?.thumbnailUrl) URL.revokeObjectURL(removed.thumbnailUrl);
      return prev.filter((a) => a.id !== id);
    });
  }, []);

  const { openFilePicker, isDragging, dropZoneProps } = useFileInput({
    onFilesSelected: addAttachments,
    enabled: step === "typing" || step === "reviewing",
  });

  const { startRecording, stopRecording, cancelRecording } = useRecorder({
    mode: recordingMode,
    micDeviceId,
    cameraDeviceId,
    onStreamReady: (stream) => setMediaStream(stream),
    onStreamCleanup: () => setMediaStream(null),
    onFinish: (blob, durationMs, mimeType) => {
      setStepSync("reviewing");
      setReviewBlob(blob);
      setReviewDurationMs(durationMs);
      setReviewMimeType(mimeType);
    },
    onError: (message) => setError(message),
  });

  const {
    startRecording: startScreenRecording,
    stopRecording: stopScreenRecording,
    cancelRecording: cancelScreenRecording,
  } = useScreenRecorder({
    micDeviceId,
    onFinish: (blob, durationMs, mimeType) => {
      setStepSync("reviewing");
      setReviewBlob(blob);
      setReviewDurationMs(durationMs);
      setReviewMimeType(mimeType);
    },
    onError: (message) => {
      setError(message);
      cancel();
    },
  });

  // --- Submission ---

  const uploadMedia = useCallback(
    async (blob: Blob, mimeType: string) => {
      const ext = "webm";
      const fileName = `recording-${Date.now()}.${ext}`;

      const { object_id, upload_url, upload_headers } =
        await apiClient.prepareUpload({
          network_id: networkId,
          name: fileName,
          content_type: mimeType,
          content_length: blob.size,
        });

      await fetch(upload_url, {
        method: "PUT",
        headers: upload_headers,
        body: blob,
      });

      await apiClient.confirmUpload(object_id);

      return { object_id, size_bytes: blob.size };
    },
    [networkId],
  );

  const uploadFile = useCallback(
    async (file: File) => {
      const { object_id, upload_url, upload_headers } =
        await apiClient.prepareUpload({
          network_id: networkId,
          name: file.name,
          content_type: file.type || "application/octet-stream",
          content_length: file.size,
        });

      await fetch(upload_url, {
        method: "PUT",
        headers: upload_headers,
        body: file,
      });

      await apiClient.confirmUpload(object_id);

      return { object_id, size_bytes: file.size };
    },
    [networkId],
  );

  const uploadAttachments = useCallback(
    async (parentPath: ParticlePath, parentId: string) => {
      if (attachments.length === 0 || !userId) return;

      const { networkId: netId, segments } = parseParticlePath(parentPath);
      const childrenPath = particlePath(netId, [...segments, parentId]);

      const results = await Promise.allSettled(
        attachments.map(async (attachment) => {
          setAttachments((prev) =>
            prev.map((a) =>
              a.id === attachment.id ? { ...a, status: "uploading" as const } : a,
            ),
          );

          const { object_id } = await uploadFile(attachment.file);

          await createParticle.mutateAsync({
            path: childrenPath,
            type: "file",
            properties: {
              object_id,
              filename: attachment.file.name,
              mime_type: attachment.file.type || "application/octet-stream",
              size_bytes: attachment.file.size,
            },
            createdByHumanId: userId,
          });
        }),
      );

      const failed = results.filter((r) => r.status === "rejected");
      if (failed.length > 0) {
        toast.error(`${failed.length} attachment${failed.length > 1 ? "s" : ""} failed to upload`);
      }
    },
    [attachments, userId, uploadFile, createParticle],
  );

  const createChildParticle = useCallback(
    async (path: ParticlePath) => {
      if (!userId) return;

      let particleId: undefined | string;
      if (textContent.trim()) {
        particleId = await createParticle.mutateAsync({
          path,
          type: "text",
          properties: { content: textContent },
          createdByHumanId: userId,
        });
      } else if (reviewBlob && reviewMimeType) {
        const { object_id, size_bytes } = await uploadMedia(
          reviewBlob,
          reviewMimeType,
        );

        const isAudioOnly = reviewMimeType.startsWith("audio/");
        particleId = await createParticle.mutateAsync({
          path,
          type: "media",
          properties: {
            object_id,
            mime_type: reviewMimeType,
            duration_ms: reviewDurationMs,
            size_bytes,
            ...(!isAudioOnly && {
              source: recordingSource === "screen" ? "screen" as const : "camera" as const,
            }),
          },
          createdByHumanId: userId,
        });
      }

      if (particleId) {
        await uploadAttachments(path, particleId);
        onParticleCreated?.(particleId);
      }
    },
    [
      userId,
      textContent,
      reviewBlob,
      reviewMimeType,
      reviewDurationMs,
      recordingSource,
      createParticle,
      uploadMedia,
      uploadAttachments,
      onParticleCreated
    ],
  );

  const handleQuotaError = useCallback((err: unknown): boolean => {
    if (err instanceof QuotaExceededError) {
      toast.error("Daily message limit reached. Upgrade to Pro to keep sending.");
      cancel();
      return true;
    }
    return false;
  }, [cancel]);

  // Reply mode: create particle directly under targetPath
  const onSubmitReply = useEffectEvent(async () => {
    if (!targetPath || !userId || stepRef.current === "submitting") return;
    setStepSync("submitting");
    try {
      await createChildParticle(targetPath);
      cancel();
    } catch (err) {
      if (!handleQuotaError(err)) throw err;
    }
  });

  // New stream mode: create stream + first child
  const handleStreamSubmit = useCallback(
    async (streamName: string, visibleTo: string[]) => {
      if (!userId || stepRef.current === "submitting") return;
      setStepSync("submitting");

      try {
        const streamId = await createStream.mutateAsync({
          networkId,
          properties: {
            name: streamName,
          },
          createdByHumanId: userId,
          visibleTo,
        });

        const streamChildrenPath = particlePath(networkId, [streamId]);
        await createChildParticle(streamChildrenPath);

        cancel();
      } catch (err) {
        if (!handleQuotaError(err)) throw err;
      }
    },
    [networkId, userId, createStream, createChildParticle, cancel, handleQuotaError],
  );

  // --- Keyboard handling ---

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      const currentStep = stepRef.current;

      if (currentStep === "typing" || currentStep === "configuring" || currentStep === "picking") {
        if (e.key === "Escape") {
          e.preventDefault();
          cancel();
        }
        return;
      }

      const target = e.target as HTMLElement;
      if (
        target.tagName === "INPUT" ||
        target.tagName === "TEXTAREA" ||
        target.isContentEditable
      ) {
        return;
      }

      switch (currentStep) {
        case "idle": {
          if (disabledRef.current) {
            if ((e.key === "`" && !e.repeat) || e.key === "t" || e.key === "T" || e.key === "s" || e.key === "S") {
              e.preventDefault();
              toast.info("This stream is closed");
            }
            break;
          }
          if (quotaExhaustedRef.current) {
            if ((e.key === "`" && !e.repeat) || e.key === "t" || e.key === "T" || e.key === "s" || e.key === "S") {
              e.preventDefault();
              toast.info("Daily message limit reached. Upgrade to Pro to keep sending.");
            }
            break;
          }
          if (e.key === "`" && !e.repeat) {
            e.preventDefault();
            recordStartRef.current = Date.now();
            setRecordingSource("media");
            setStepSync("recording");
            startRecording();
          } else if (e.key === "s" || e.key === "S") {
            e.preventDefault();
            setRecordingSource("screen");
            setStepSync("picking");
          } else if (e.key === "t" || e.key === "T") {
            e.preventDefault();
            setStepSync("typing");
          }
          break;
        }

        case "recording": {
          if (e.key === "`" && !e.repeat) {
            // Second tap stops recording (toggle mode)
            e.preventDefault();
            stopRecording();
          } else if ((e.key === "s" || e.key === "S") && recordingSourceRef.current === "screen") {
            // S stops screen recording when main window is focused
            e.preventDefault();
            stopScreenRecording();
          } else if (e.key === "q" || e.key === "Q" || e.key === "Escape") {
            e.preventDefault();
            if (recordingSourceRef.current === "screen") {
              cancelScreenRecording();
            } else {
              cancelRecording();
            }
            cancel();
          }
          break;
        }

        case "reviewing": {
          if (e.key === "q" || e.key === "Q" || e.key === "Escape") {
            e.preventDefault();
            if (recordingSourceRef.current === "screen") {
              cancelScreenRecording();
            } else {
              cancelRecording();
            }
            cancel();
          } else if (e.key === "Enter") {
            e.preventDefault();
            if (targetPath) {
              onSubmitReply();
            } else {
              setStepSync("configuring");
            }
          }
          break;
        }
      }
    };

    const handleKeyUp = (e: KeyboardEvent) => {
      if (stepRef.current === "recording" && e.key === "`" && recordingSourceRef.current === "media") {
        e.preventDefault();
        // Only stop on release if held long enough (hold-to-record mode).
        // Quick taps are handled by the second keydown (toggle mode).
        if (recordStartRef.current > 0 && Date.now() - recordStartRef.current >= HOLD_THRESHOLD_MS) {
          stopRecording();
          recordStartRef.current = 0;
        }
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    window.addEventListener("keyup", handleKeyUp);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
      window.removeEventListener("keyup", handleKeyUp);
    };
  }, [targetPath, startRecording, stopRecording, cancelRecording, startScreenRecording, stopScreenRecording, cancelScreenRecording, cancel, setStepSync]);

  // --- Screen source selection handler ---

  const handleScreenSourceSelected = useCallback(
    (sourceId: string) => {
      setStepSync("recording");
      startScreenRecording(sourceId);
    },
    [setStepSync, startScreenRecording],
  );

  // --- Render ---

  if (step === "idle") return null;

  const handleTextAdvance = targetPath
    ? onSubmitReply
    : () => setStepSync("configuring");

  return (
    <>
      {step === "picking" && (
        <ScreenSourcePicker
          title="Record your screen"
          confirmLabel="Record"
          getSources={window.electronScreen.getScreenSources}
          onSelect={handleScreenSourceSelected}
          onCancel={cancel}
        />
      )}
      {(step === "recording" || step === "reviewing") && recordingSource === "media" && (
        <RecordingOverlay
          step={step}
          mediaStream={mediaStream}
          recordingMode={recordingMode}
          reviewBlob={reviewBlob}
          error={error}
          onClose={cancel}
          attachments={attachments}
          onRemoveAttachment={removeAttachment}
          onAddFiles={openFilePicker}
          isDragging={isDragging}
          dropZoneProps={dropZoneProps}
          mirror={true}
          objectFit="cover"
        />
      )}
      {step === "recording" && recordingSource === "screen" && (
        <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/90">
          <div className="absolute top-8 z-10">
            <div className="flex items-center gap-2">
              <span className="h-2.5 w-2.5 animate-pulse rounded-full bg-red-500" />
              <span className="text-sm text-white/80">Recording screen…</span>
            </div>
          </div>
          <div className="absolute bottom-4 z-10 flex items-center gap-4 text-sm text-white/50">
            <span>
              <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
                S
              </kbd>{" "}
              stop
            </span>
            <span>
              <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
                Q
              </kbd>{" "}
              cancel
            </span>
          </div>
        </div>
      )}
      {step === "reviewing" && recordingSource === "screen" && reviewBlob && (
        <RecordingOverlay
          step="reviewing"
          mediaStream={null}
          recordingMode="video"
          reviewBlob={reviewBlob}
          error={error}
          onClose={cancel}
          attachments={attachments}
          onRemoveAttachment={removeAttachment}
          onAddFiles={openFilePicker}
          isDragging={isDragging}
          dropZoneProps={dropZoneProps}
          mirror={false}
          objectFit="contain"
        />
      )}
      {step === "typing" && (
        <TextComposeStep
          textContent={textContent}
          onTextChange={setTextContent}
          onAdvance={handleTextAdvance}
          onCancel={cancel}
          attachments={attachments}
          onRemoveAttachment={removeAttachment}
          onAddFiles={openFilePicker}
          isDragging={isDragging}
          dropZoneProps={dropZoneProps}
        />
      )}
      {!targetPath && step === "configuring" && (
        <ConfigureStreamStep
          networkId={networkId}
          onCancel={cancel}
          onSubmit={handleStreamSubmit}
        />
      )}
      {step === "submitting" && (
        <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/90">
          <span className="animate-pulse text-sm text-white/60">Sending...</span>
        </div>
      )}
    </>
  );
}