Mom-Portal/frontend/src/routes/_authenticated/transcripts.$id.tsx

import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { ArrowLeft, Copy, Download, Loader2, Save, Send, Sparkles, Trash2, X } from "lucide-react";
import { toast } from "sonner";
import { transcriptService } from "@/services/transcripts";
import { userService } from "@/services/users";
import { useAuth } from "@/context/auth";
import type { UserSummary } from "@/services/types";

export const Route = createFileRoute("/_authenticated/transcripts/$id")({
  head: () => ({ meta: [{ title: "Transcript — Orphion" }] }),
  component: TranscriptDetailPage,
});

function TranscriptDetailPage() {
  const { id } = Route.useParams();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { user } = useAuth();
  const [text, setText] = useState("");
  const [title, setTitle] = useState("");
  const [saving, setSaving] = useState(false);
  const [showSend, setShowSend] = useState(false);
  const [users, setUsers] = useState<UserSummary[]>([]);
  const [searchQ, setSearchQ] = useState("");
  const [sending, setSending] = useState(false);

  const { data, isLoading } = useQuery({
    queryKey: ["transcript", id],
    queryFn: () => transcriptService.get(id),
  });
  const transcript = data?.transcript ?? null;

  useEffect(() => {
    if (!transcript) return;
    setText(transcript.transcriptText);
    setTitle(transcript.title ?? "");
  }, [transcript]);

  useEffect(() => {
    if (!showSend) return;
    const handle = window.setTimeout(async () => {
      const data = await userService.search(searchQ).catch(() => ({ users: [] }));
      setUsers(data.users);
    }, 160);
    return () => window.clearTimeout(handle);
  }, [showSend, searchQ]);

  async function save() {
    if (!transcript) return;
    setSaving(true);
    try {
      await transcriptService.update(transcript.id, { title, transcriptText: text });
      await queryClient.invalidateQueries({ queryKey: ["transcript", id] });
      await queryClient.invalidateQueries({ queryKey: ["transcripts"] });
      toast.success("Saved");
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Unable to save");
    } finally {
      setSaving(false);
    }
  }

  async function remove() {
    if (!transcript || !confirm("Delete this transcript?")) return;
    try {
      await transcriptService.remove(transcript.id);
      await queryClient.invalidateQueries({ queryKey: ["transcripts"] });
      toast.success("Deleted");
      navigate({ to: "/transcripts" });
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Unable to delete");
    }
  }

  async function copy() {
    await navigator.clipboard.writeText(text);
    toast.success("Transcript copied");
  }

  async function send(receiverId: number) {
    if (!transcript) return;
    setSending(true);
    try {
      await transcriptService.send({ transcriptId: transcript.id, receiverId });
      await queryClient.invalidateQueries({ queryKey: ["transcript", id] });
      await queryClient.invalidateQueries({ queryKey: ["transcripts"] });
      toast.success("Transcript delivered");
      setShowSend(false);
      navigate({ to: "/sent" });
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Failed to send");
    } finally {
      setSending(false);
    }
  }

  if (isLoading || !transcript)
    return <div className="text-sm text-muted-foreground">Loading transcript...</div>;

  const isReceived = transcript.receiverId === user?.id && transcript.senderId !== user?.id;

  return (
    <div className="mx-auto max-w-4xl space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <Link
          to="/transcripts"
          className="inline-flex items-center gap-2 text-sm text-muted-foreground transition hover:text-foreground"
        >
          <ArrowLeft className="h-4 w-4" /> Back
        </Link>
        <div className="flex flex-wrap items-center gap-2">
          <button
            onClick={copy}
            className="flex items-center gap-1.5 rounded-lg border border-border bg-secondary/30 px-3 py-2 text-xs transition hover:border-primary/50"
          >
            <Copy className="h-3.5 w-3.5" /> Copy
          </button>
          <a
            href={transcriptService.transcriptDownloadUrl(transcript.id)}
            className="flex items-center gap-1.5 rounded-lg border border-border bg-secondary/30 px-3 py-2 text-xs transition hover:border-primary/50"
          >
            <Download className="h-3.5 w-3.5" /> .txt
          </a>
          <a
            href={transcriptService.audioUrl(transcript.id)}
            download
            className="flex items-center gap-1.5 rounded-lg border border-border bg-secondary/30 px-3 py-2 text-xs transition hover:border-primary/50"
          >
            <Download className="h-3.5 w-3.5" /> Audio
          </a>
          {!isReceived && (
            <button
              onClick={() => setShowSend(true)}
              className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-xs font-semibold text-primary-foreground shadow-[var(--shadow-glow)] transition hover:scale-[1.02]"
            >
              <Send className="h-3.5 w-3.5" /> Send
            </button>
          )}
          {!isReceived && (
            <button
              onClick={remove}
              className="rounded-lg border border-destructive/30 bg-secondary/30 px-3 py-2 text-xs text-destructive transition hover:bg-destructive/10"
            >
              <Trash2 className="h-3.5 w-3.5" />
            </button>
          )}
        </div>
      </div>

      <div className="glass-strong rounded-2xl p-6 space-y-4">
        <input
          value={title}
          onChange={(event) => setTitle(event.target.value)}
          placeholder="Untitled transcript"
          disabled={isReceived}
          className="w-full bg-transparent font-display text-2xl font-semibold outline-none disabled:opacity-80"
        />
        <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
          <span>{new Date(transcript.createdAt).toLocaleString()}</span>
          {transcript.metadata?.duration ? (
            <>
              <span>•</span>
              <span>{Math.round(transcript.metadata.duration)}s</span>
            </>
          ) : null}
          {transcript.language ? (
            <>
              <span>•</span>
              <span className="uppercase">{transcript.language}</span>
            </>
          ) : null}
          <span>•</span>
          <span className="rounded-full bg-primary/10 px-2 py-0.5 text-primary">
            {transcript.receiverId ? "sent" : "saved"}
          </span>
        </div>
        <audio src={transcriptService.audioUrl(transcript.id)} controls className="w-full" />
      </div>

      <div className="glass rounded-2xl p-6">
        <div className="mb-3 flex items-center justify-between">
          <h2 className="font-display text-lg font-semibold flex items-center gap-2">
            <Sparkles className="h-4 w-4 text-primary" /> Transcript
          </h2>
          {!isReceived && (
            <button
              onClick={save}
              disabled={saving}
              className="flex items-center gap-1.5 rounded-lg bg-primary/15 px-3 py-1.5 text-xs font-semibold text-primary transition hover:bg-primary/25 disabled:opacity-60"
            >
              {saving ? (
                <Loader2 className="h-3.5 w-3.5 animate-spin" />
              ) : (
                <Save className="h-3.5 w-3.5" />
              )}{" "}
              Save
            </button>
          )}
        </div>
        <textarea
          value={text}
          onChange={(event) => setText(event.target.value)}
          rows={18}
          readOnly={isReceived}
          className="w-full resize-none bg-transparent text-sm leading-relaxed outline-none read-only:text-muted-foreground"
        />
      </div>

      {transcript.timestamps.length > 0 && (
        <div className="glass rounded-2xl p-6">
          <h2 className="font-display text-lg font-semibold">Timestamps</h2>
          <div className="mt-4 max-h-72 space-y-2 overflow-y-auto">
            {transcript.timestamps.map((segment, index) => (
              <div
                key={`${segment.start}-${index}`}
                className="grid gap-3 rounded-xl border border-border bg-secondary/20 p-3 text-sm md:grid-cols-[120px_1fr]"
              >
                <span className="font-mono text-xs text-primary">
                  {formatStamp(segment.start)} - {formatStamp(segment.end)}
                </span>
                <span className="text-muted-foreground">{segment.text}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {showSend && (
        <SendDialog
          users={users}
          query={searchQ}
          sending={sending}
          onQuery={setSearchQ}
          onClose={() => setShowSend(false)}
          onSend={send}
        />
      )}
    </div>
  );
}

function SendDialog({
  users,
  query,
  sending,
  onQuery,
  onClose,
  onSend,
}: {
  users: UserSummary[];
  query: string;
  sending: boolean;
  onQuery: (value: string) => void;
  onClose: () => void;
  onSend: (id: number) => void;
}) {
  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-background/75 p-4 backdrop-blur-sm"
      onClick={onClose}
    >
      <div
        onClick={(event) => event.stopPropagation()}
        className="glass-strong w-full max-w-md rounded-2xl p-6"
      >
        <div className="flex items-center justify-between">
          <div>
            <h3 className="font-display text-lg font-semibold">Send transcript</h3>
            <p className="mt-1 text-sm text-muted-foreground">Choose a recipient.</p>
          </div>
          <button
            onClick={onClose}
            className="rounded-lg p-2 text-muted-foreground transition hover:bg-secondary hover:text-foreground"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
        <input
          value={query}
          onChange={(event) => onQuery(event.target.value)}
          placeholder="Search users..."
          className="mt-4 w-full rounded-xl border border-border bg-input/40 px-4 py-2.5 text-sm outline-none transition focus:border-primary/60"
        />
        <div className="mt-3 max-h-72 space-y-1 overflow-y-auto">
          {users.length === 0 && (
            <p className="py-4 text-center text-sm text-muted-foreground">No users found.</p>
          )}
          {users.map((recipient) => (
            <button
              key={recipient.id}
              disabled={sending}
              onClick={() => onSend(recipient.id)}
              className="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left transition hover:bg-secondary disabled:opacity-60"
            >
              <div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-sm font-semibold text-primary-foreground">
                {recipient.fullName.charAt(0).toUpperCase()}
              </div>
              <div className="min-w-0">
                <div className="truncate text-sm font-medium">{recipient.fullName}</div>
                <div className="truncate text-xs text-muted-foreground">@{recipient.username}</div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function formatStamp(seconds: number) {
  const minutes = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${minutes}:${String(secs).padStart(2, "0")}`;
}