erika/app/form/admin/result/[id]/client.tsx

"use client";

import React, { useState, useEffect, useRef } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { 
  ContextMenu, 
  ContextMenuTrigger, 
  ContextMenuContent,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuItem,
  ContextMenuGroup 
} from "@/components/ui/context-menu";
import { Copy, Check, Users, Calendar, Clock } from "lucide-react";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import Image from 'next/image';

interface Question {
  id: string;
  label: string;
  type: string;
  imageUrl: string | null;
}

interface SubmissionDetailClientProps {
  submission: {
    id: string;
    userName: string | null;
    userDiscordId: string | null;
    submittedAt: Date;
    editHistory?: { editedAt: string; oldAnswers: Record<string, string> }[] | null;
  };
  questions: Question[];
  answers: Record<string, string>;
}

export default function SubmissionDetailClient({
  submission,
  questions,
  answers,
}: SubmissionDetailClientProps) {
  const [copiedId, setCopiedId] = useState<string | null>(null);

  const handleCopy = (text: string, id: string) => {
    if (!text) return;
    navigator.clipboard.writeText(text);
    setCopiedId(id);
    setTimeout(() => setCopiedId(null), 2000);
  };

  const userLabel = submission.userName
    ? `${submission.userName} (${submission.userDiscordId || "N/A"})`
    : submission.userDiscordId || "Anonymous";

  const editHistory = Array.isArray(submission.editHistory) ? submission.editHistory : [];



  return (
    <div className="space-y-6">
      {/* Submission Metadata Card */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-xl">Submission Info</CardTitle>
          <CardDescription>Details about this respondent.</CardDescription>
        </CardHeader>
        <CardContent className="grid gap-2 text-sm">
          <div className="flex items-center gap-2 text-muted-foreground">
            <Users className="w-4 h-4 shrink-0" />
            <span className="font-semibold text-foreground">Respondent:</span>
            <span>{userLabel}</span>
          </div>
          <div className="flex items-center gap-2 text-muted-foreground">
            <Calendar className="w-4 h-4 shrink-0" />
            <span className="font-semibold text-foreground">Initial Submission:</span>
            <span>{new Date(submission.submittedAt).toLocaleString()}</span>
          </div>
          {editHistory.length > 0 && (
            <div className="flex flex-col mt-2 pt-2 border-t">
              <span className="font-semibold text-foreground mb-1">Edit History:</span>
              <ul className="list-disc list-inside text-xs text-muted-foreground space-y-1">
                {editHistory.map((edit, idx) => (
                  <li key={idx}>Edited at {new Date(edit.editedAt).toLocaleString()}</li>
                ))}
              </ul>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Answers List */}
      <div className="space-y-4">
        {questions.map((q) => {
          const ansValue = answers[q.id] || "";

          const wasEdited = editHistory.some(
            (edit) => (edit.oldAnswers[q.id] ?? "") !== ansValue
          );

          const qAnswerHistory = editHistory.map((edit) => ({
            editedAt: edit.editedAt,
            answer: edit.oldAnswers[q.id] ?? "",
          }));

          return (
            <ContextMenu key={q.id}>
              <ContextMenuTrigger asChild>
                <Card
                  className={wasEdited ? "cursor-context-menu" : ""}
                >
              <CardHeader className="pb-3 flex flex-row items-start justify-between space-y-0 gap-4">
                <div className="space-y-1">
                  <Label className="text-base font-semibold leading-normal">
                    {q.label}
                  </Label>
                  {wasEdited && (
                    <p className="text-xs text-muted-foreground italic flex items-center gap-1">
                      edited
                    </p>
                  )}
                </div>
                {q.imageUrl && (
                  <div className="relative w-24 h-24 overflow-hidden rounded-md border shrink-0">
                    <Image
                      src={q.imageUrl}
                      alt="Question image"
                      fill
                      unoptimized
                      className="object-cover"
                    />
                  </div>
                )}
              </CardHeader>
              <CardContent className="space-y-4">
                {ansValue ? (
                  <div className="flex items-start justify-between gap-4 p-3 bg-muted rounded-md group">
                    <div className="flex flex-col">
                      {wasEdited && (
                        <span className="text-xs font-semibold text-muted-foreground mb-1">
                          Current Answer:
                        </span>
                      )}
                      <span className="text-sm whitespace-pre-wrap leading-relaxed">
                        {ansValue}
                      </span>
                    </div>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
                      onClick={() => handleCopy(ansValue, q.id)}
                    >
                      {copiedId === q.id ? (
                        <Check className="w-4 h-4 text-green-500" />
                      ) : (
                        <Copy className="w-4 h-4 text-muted-foreground" />
                      )}
                    </Button>
                  </div>
                ) : (
                  <span className="text-sm text-muted-foreground italic pl-3 border-l-2 border-muted block">
                    No response provided
                  </span>
                )}
              </CardContent>
            </Card>
              </ContextMenuTrigger>
              {wasEdited && (
                <ContextMenuContent className="w-72 max-w-sm">
                  <ContextMenuLabel className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                    History
                  </ContextMenuLabel>
                  <ContextMenuLabel className="text-sm font-medium text-foreground truncate pb-2">
                    {q.label}
                  </ContextMenuLabel>

                  <ContextMenuSeparator />
                  <ContextMenuLabel className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mt-1">
                    Previous Answers:
                  </ContextMenuLabel>
                  
                  {qAnswerHistory.length === 0 ? (
                    <ContextMenuItem disabled className="text-xs text-muted-foreground italic">
                      No edit history for this question.
                    </ContextMenuItem>
                  ) : (
                    <ScrollArea className="h-72">
                      <ContextMenuGroup>
                        {qAnswerHistory.map((entry, idx) => (
                          <ContextMenuItem 
                            key={idx} 
                            className="flex flex-col items-start gap-1 p-2 focus:bg-transparent cursor-default"
                          >
                            <div className="flex items-center gap-1 text-xs text-muted-foreground">
                              <Clock className="w-3 h-3 shrink-0" />
                              <span>{new Date(entry.editedAt).toLocaleString()}</span>
                            </div>
                            <span className="text-sm text-foreground/80 whitespace-pre-wrap leading-relaxed">
                              {entry.answer || <span className="italic text-muted-foreground">No response</span>}
                            </span>
                          </ContextMenuItem>
                        ))}
                      </ContextMenuGroup>
                    </ScrollArea>
                  )}
                </ContextMenuContent>
              )}
            </ContextMenu>
          );
        })}
      </div>


    </div>
  );
}