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

"use client";

import React, { useState } 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 { toast } from "sonner";
import { Copy, Check, Users, Calendar } from "lucide-react";

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);
    toast.success("Answer copied to clipboard!");
    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] || "";
          
          // Check if this specific question was edited by comparing current answer with old ones
          let wasEdited = false;
          let oldAnswerForQ = "";
          let lastEditedTime = "";

          if (editHistory.length > 0) {
            // Find the most recent edit where the answer was different
            for (let i = editHistory.length - 1; i >= 0; i--) {
              const oldAns = editHistory[i].oldAnswers[q.id] || "";
              if (oldAns !== ansValue) {
                wasEdited = true;
                oldAnswerForQ = oldAns;
                lastEditedTime = new Date(editHistory[i].editedAt).toLocaleString();
                break;
              }
            }
          }

          return (
            <Card key={q.id}>
              <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">
                      This section has been edited (last edit: {lastEditedTime})
                    </p>
                  )}
                </div>
                {q.imageUrl && (
                  <div className="relative max-w-full h-auto max-h-60 overflow-hidden rounded-md border inline-block shrink-0">
                    <img
                      src={q.imageUrl}
                      alt={q.label}
                      className="object-contain max-h-24 w-auto"
                    />
                  </div>
                )}
              </CardHeader>
              <CardContent className="space-y-4">
                {/* Current Answer */}
                {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>
                )}

                {/* Previous Answer if edited */}
                {wasEdited && (
                  <div className="flex items-start justify-between gap-4 p-3 bg-muted/50 rounded-md border border-dashed border-muted-foreground/30">
                    <div className="flex flex-col">
                      <span className="text-xs font-semibold text-muted-foreground mb-1">Previous Answer:</span>
                      <span className="text-sm whitespace-pre-wrap leading-relaxed text-muted-foreground opacity-80">
                        {oldAnswerForQ || <span className="italic">No previous response</span>}
                      </span>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          );
        })}
      </div>
    </div>
  );
}