import { useRef, useState, useCallback, useEffect } from "react";
import { useParams, Link } from "react-router-dom";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { api } from "../api/client";
import { listAnnotations, addReaction } from "../api/annotations";
import { useVersionWebSocket } from "../hooks/useWebSocket";
import { useWaveform } from "../hooks/useWaveform";
import type { Annotation } from "../api/annotations";

interface SongComment {
  id: string;
  song_id: string;
  body: string;
  author_id: string;
  author_name: string;
  author_avatar_url: string | null;
  created_at: string;
  timestamp: number | null; // Timestamp in seconds
}

export function SongPage() {
  const { bandId, songId } = useParams<{ bandId: string; songId: string }>();
  const qc = useQueryClient();
  const waveformRef = useRef<HTMLDivElement>(null);
  const [selectedVersionId, setSelectedVersionId] = useState<string | null>(null);
  const [commentBody, setCommentBody] = useState("");

  const { data: versions } = useQuery({
    queryKey: ["versions", songId],
    queryFn: () => api.get<{ id: string; version_number: number; label: string | null; analysis_status: string }[]>(`/songs/${songId}/versions`),
    enabled: !!songId,
  });

  const activeVersion = selectedVersionId ?? versions?.[0]?.id ?? null;

  const { data: annotations } = useQuery({
    queryKey: ["annotations", activeVersion],
    queryFn: () => listAnnotations(activeVersion!),
    enabled: !!activeVersion,
  });

  const { isPlaying, currentTime, play, pause, seekTo, addMarker, clearMarkers } = useWaveform(waveformRef, {
    url: activeVersion ? `/api/v1/versions/${activeVersion}/stream` : null,
    peaksUrl: activeVersion ? `/api/v1/versions/${activeVersion}/waveform` : null,
  });

  // Add space key shortcut for play/pause
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.code === "Space") {
        e.preventDefault();
        if (isPlaying) {
          pause();
        } else {
          play();
        }
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [isPlaying, play, pause]);

  const { data: comments } = useQuery<SongComment[]>({
    queryKey: ["comments", songId],
    queryFn: () => api.get<SongComment[]>(`/songs/${songId}/comments`),
    enabled: !!songId,
  });

  // Scroll to comment when a marker is clicked
  const scrollToComment = (commentId: string) => {
    const commentElement = document.getElementById(`comment-${commentId}`);
    if (commentElement) {
      commentElement.scrollIntoView({ behavior: "smooth", block: "center" });
      commentElement.style.backgroundColor = "var(--accent-bg)";
      setTimeout(() => {
        commentElement.style.backgroundColor = "var(--bg-subtle)";
      }, 2000);
    }
  };

  useEffect(() => {
    if (comments) {
      console.log('Comments data:', comments);
      clearMarkers();
      comments.forEach((comment) => {
        console.log('Processing comment:', comment.id, 'timestamp:', comment.timestamp, 'avatar:', comment.author_avatar_url);
        if (comment.timestamp !== undefined && comment.timestamp !== null) {
          console.log('Adding marker at time:', comment.timestamp);
          addMarker({
            id: comment.id,
            time: comment.timestamp,
            onClick: () => scrollToComment(comment.id),
            icon: comment.author_avatar_url || "https://via.placeholder.com/20",
          });
        } else {
          console.log('Skipping comment without timestamp:', comment.id);
        }
      });
    }
  }, [comments, addMarker, clearMarkers]);

  const addCommentMutation = useMutation({
    mutationFn: ({ body, timestamp }: { body: string; timestamp: number }) => {
      console.log('Creating comment with timestamp:', timestamp);
      return api.post(`/songs/${songId}/comments`, { body, timestamp });
    },
    onSuccess: () => {
      console.log('Comment created successfully');
      qc.invalidateQueries({ queryKey: ["comments", songId] });
      setCommentBody("");
    },
    onError: (error) => {
      console.error('Error creating comment:', error);
    }
  });

  const deleteCommentMutation = useMutation({
    mutationFn: (commentId: string) => api.delete(`/comments/${commentId}`),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["comments", songId] }),
  });

  const invalidateAnnotations = useCallback(
    () => qc.invalidateQueries({ queryKey: ["annotations", activeVersion] }),
    [qc, activeVersion]
  );

  useVersionWebSocket(activeVersion, {
    "annotation.created": invalidateAnnotations,
    "annotation.updated": invalidateAnnotations,
    "annotation.deleted": invalidateAnnotations,
    "reaction.added": invalidateAnnotations,
  });

  return (
    <div style={{ background: "var(--bg)", minHeight: "100vh", color: "var(--text)", padding: 24 }}>
      <Link to={`/bands/${bandId}`} style={{ color: "var(--text-muted)", fontSize: 12, textDecoration: "none", display: "inline-block", marginBottom: 16 }}>
        ← Back to Band
      </Link>

      {/* Version selector */}
      <div style={{ display: "flex", gap: 8, marginBottom: 20 }}>
        {versions?.map((v) => (
          <button
            key={v.id}
            onClick={() => setSelectedVersionId(v.id)}
            style={{
              background: v.id === activeVersion ? "var(--accent-bg)" : "var(--bg-inset)",
              border: `1px solid ${v.id === activeVersion ? "var(--accent)" : "var(--border)"}`,
              borderRadius: 6, padding: "6px 14px",
              color: v.id === activeVersion ? "var(--accent)" : "var(--text-muted)",
              cursor: "pointer", fontSize: 12, fontFamily: "monospace",
            }}
          >
            v{v.version_number} {v.label ?? ""} · {v.analysis_status}
          </button>
        ))}
      </div>

      {/* Waveform */}
      <div style={{ background: "var(--bg-subtle)", border: "1px solid var(--border)", borderRadius: 8, padding: "16px 16px 8px", marginBottom: 16 }}>
        <div ref={waveformRef} />
        <div style={{ display: "flex", gap: 12, marginTop: 8 }}>
          <button
            onClick={isPlaying ? pause : play}
            style={{ background: "var(--accent)", border: "none", borderRadius: 6, padding: "6px 18px", cursor: "pointer", fontWeight: 600, color: "var(--accent-fg)" }}
          >
            {isPlaying ? "⏸ Pause" : "▶ Play"}
          </button>
          <span style={{ color: "var(--text-muted)", fontSize: 12, alignSelf: "center" }}>
            {formatTime(currentTime)}
          </span>
        </div>
      </div>

      {/* Current Play Time Display */}
      <div style={{ marginBottom: 16, textAlign: "center" }}>
        <span style={{ color: "var(--text-muted)", fontSize: 14, fontFamily: "monospace" }}>
          Current Time: {formatTime(currentTime)}
        </span>
      </div>

      {/* Annotations */}
      <div style={{ display: "grid", gap: 8, marginBottom: 32 }}>
        {annotations?.map((a) => (
          <AnnotationCard key={a.id} annotation={a} onSeek={seekTo} versionId={activeVersion!} />
        ))}
      </div>

      {/* Comments */}
      <div>
        <h2 style={{ fontSize: 14, color: "var(--text-muted)", fontFamily: "monospace", letterSpacing: 1, marginBottom: 14 }}>COMMENTS</h2>

        <div style={{ display: "grid", gap: 8, marginBottom: 16 }}>
          {comments?.map((c) => (
            <div id={`comment-${c.id}`} key={c.id} style={{ background: "var(--bg-subtle)", border: "1px solid var(--border)", borderRadius: 8, padding: "12px 16px" }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                <span style={{ fontWeight: 600, fontSize: 13, color: "var(--text)" }}>{c.author_name}</span>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ color: "var(--text-subtle)", fontSize: 11 }}>{new Date(c.created_at).toLocaleString()}</span>
                  <button
                    onClick={() => deleteCommentMutation.mutate(c.id)}
                    style={{ background: "none", border: "none", color: "var(--text-subtle)", cursor: "pointer", fontSize: 11, padding: 0 }}
                  >
                    Delete
                  </button>
                </div>
              </div>
              {c.timestamp !== undefined && c.timestamp !== null && (
                <div style={{ display: "flex", gap: 8, marginBottom: 6 }}>
                  <button
                    onClick={() => seekTo(c.timestamp!)}
                    style={{ background: "var(--accent-bg)", border: "1px solid var(--accent)", borderRadius: 4, color: "var(--accent)", cursor: "pointer", fontSize: 10, padding: "2px 8px", fontFamily: "monospace" }}
                  >
                    {formatTime(c.timestamp)}
                  </button>
                </div>
              )}
              <p style={{ margin: 0, fontSize: 13, color: "var(--text)", lineHeight: 1.5 }}>{c.body}</p>
            </div>
          ))}
          {comments?.length === 0 && (
            <p style={{ color: "var(--text-subtle)", fontSize: 13 }}>No comments yet. Be the first.</p>
          )}
        </div>

        <div style={{ display: "flex", gap: 8 }}>
          <textarea
            value={commentBody}
            onChange={(e) => setCommentBody(e.target.value)}
            placeholder="Add a comment…"
            rows={2}
            style={{ flex: 1, padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, resize: "vertical", fontFamily: "inherit" }}
          />
          <button
            onClick={() => commentBody.trim() && addCommentMutation.mutate({ body: commentBody.trim(), timestamp: currentTime })}
            disabled={!commentBody.trim() || addCommentMutation.isPending}
            style={{ background: "var(--accent)", border: "none", borderRadius: 6, color: "var(--accent-fg)", cursor: "pointer", padding: "0 18px", fontWeight: 600, fontSize: 13, alignSelf: "stretch" }}
          >
            Post
          </button>
        </div>
      </div>
    </div>
  );
}

function AnnotationCard({ annotation: a, onSeek, versionId }: { annotation: Annotation; onSeek: (t: number) => void; versionId: string }) {
  const qc = useQueryClient();
  const reactionMutation = useMutation({
    mutationFn: (emoji: string) => addReaction(a.id, emoji),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["annotations", versionId] }),
  });

  return (
    <div style={{ background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 8, padding: 14 }}>
      <div style={{ display: "flex", gap: 8, marginBottom: 6 }}>
        <button
          onClick={() => onSeek(a.timestamp_ms / 1000)}
          style={{ background: "var(--accent-bg)", border: "1px solid var(--accent)", borderRadius: 4, color: "var(--accent)", cursor: "pointer", fontSize: 10, padding: "2px 8px", fontFamily: "monospace" }}
        >
          {formatTime(a.timestamp_ms / 1000)}
          {a.range_end_ms != null && ` → ${formatTime(a.range_end_ms / 1000)}`}
        </button>
        <span style={{ color: "var(--text-muted)", fontSize: 11 }}>{a.type}</span>
        {a.label && <span style={{ color: "var(--teal)", fontSize: 11 }}>{a.label}</span>}
        {a.tags.map((t) => (
          <span key={t} style={{ background: "var(--teal-bg)", color: "var(--teal)", fontSize: 9, padding: "1px 6px", borderRadius: 3, fontFamily: "monospace" }}>{t}</span>
        ))}
      </div>
      {a.body && <p style={{ color: "var(--text)", margin: 0, fontSize: 13 }}>{a.body}</p>}
      {a.range_analysis && (
        <div style={{ marginTop: 8, display: "flex", gap: 12, fontSize: 11, color: "var(--text-muted)" }}>
          {a.range_analysis.bpm && <span>♩ {a.range_analysis.bpm.toFixed(1)} BPM</span>}
          {a.range_analysis.key && <span>🎵 {a.range_analysis.key}</span>}
          {a.range_analysis.avg_loudness_lufs && <span>{a.range_analysis.avg_loudness_lufs.toFixed(1)} LUFS</span>}
        </div>
      )}
      <div style={{ marginTop: 8, display: "flex", gap: 4 }}>
        {["🔥", "💡", "✅", "❓"].map((emoji) => (
          <button
            key={emoji}
            onClick={() => reactionMutation.mutate(emoji)}
            style={{ background: "none", border: "1px solid var(--border)", borderRadius: 4, cursor: "pointer", padding: "2px 6px", fontSize: 14 }}
          >
            {emoji}{" "}
            <span style={{ fontSize: 10, color: "var(--text-muted)" }}>
              {a.reactions.filter((r) => r.emoji === emoji).length || ""}
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}

function formatTime(seconds: number): string {
  const m = Math.floor(seconds / 60);
  const s = Math.floor(seconds % 60);
  return `${m}:${String(s).padStart(2, "0")}`;
}