File size: 5,278 Bytes
a64b653
 
 
8ec33d8
a64b653
 
 
 
 
 
 
8ec33d8
 
a64b653
8ec33d8
 
 
 
 
 
a64b653
 
 
 
 
8ec33d8
 
a64b653
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8ec33d8
a64b653
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8ec33d8
a64b653
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8ec33d8
 
a64b653
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
import { useState, useEffect } from "react";
import { supabase } from "@/integrations/supabase/client";
import { Eye } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { useTranslation } from "@/hooks/useTranslation";
import { GuessDescription } from "@/components/game/guess-display/GuessDescription";

interface GameResult {
  id: string;
  target_word: string;
  description: string;
  ai_guess: string;
  is_correct: boolean;
}

interface ComparisonDialogProps {
  isOpen: boolean;
  onClose: () => void;
  currentResult: GameResult | null;
  friendResult: GameResult | null;
}

const ComparisonDialog = ({ isOpen, onClose, currentResult, friendResult }: ComparisonDialogProps) => {
  const t = useTranslation();

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
            {currentResult?.target_word}
          </DialogTitle>
        </DialogHeader>
        <div className="space-y-6 mt-4">
          <div>
            {friendResult && (
              <h3 className="font-semibold mb-2">{t.game.review.yourDescription}</h3>
            )}
            <GuessDescription
              sentence={currentResult?.description?.split(' ') || []}
              aiGuess={currentResult?.ai_guess || ''}
            />
            <p className="text-sm text-gray-600 mt-2">
              {t.guess.aiGuessedDescription}: <span className="font-medium">{currentResult?.ai_guess}</span>
            </p>
          </div>
          {friendResult && (
            <div>
              <h3 className="font-semibold mb-2">{t.game.review.friendDescription}</h3>
              <GuessDescription
                sentence={friendResult.description?.split(' ') || []}
                aiGuess={friendResult.ai_guess || ''}
              />
              <p className="text-sm text-gray-600 mt-2">
                {t.guess.aiGuessedDescription}: <span className="font-medium">{friendResult.ai_guess}</span>
              </p>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
};

export const GameDetailsView = ({ gameResults = [], fromSession }: { gameResults: GameResult[], fromSession?: string | null }) => {
  const [friendResults, setFriendResults] = useState<GameResult[]>([]);
  const [selectedResult, setSelectedResult] = useState<GameResult | null>(null);
  const t = useTranslation();

  useEffect(() => {
    const fetchFriendResults = async () => {
      if (!fromSession) return;

      const { data, error } = await supabase
        .from('game_results')
        .select('*')
        .eq('session_id', fromSession)
        .order('created_at', { ascending: true });

      if (!error && data) {
        console.log('Friend results:', data);
        setFriendResults(data);
      }
    };

    fetchFriendResults();
  }, [fromSession]);

  const getFriendResult = (targetWord: string) => {
    return friendResults.find(r => r.target_word === targetWord) || null;
  };

  const getWordCount = (description?: string) => {
    return description?.split(' ').length || 0;
  };

  return (
    <div className="relative overflow-x-auto rounded-lg border">
      <table className="w-full text-sm text-left">
        <thead className="text-xs uppercase bg-gray-50">
          <tr>
            <th className="px-6 py-3">
              {t.game.round}
            </th>
            <th className="px-6 py-3">
              {friendResults.length > 0 ? t.game.review.yourWords : t.game.review.words}
            </th>
            {friendResults.length > 0 && (
              <th className="px-6 py-3">
                {t.game.review.friendWords}
              </th>
            )}
            <th className="px-6 py-3">
              <span className="sr-only">{t.game.review.details}</span>
            </th>
          </tr>
        </thead>
        <tbody>
          {gameResults.map((result) => {
            const friendResult = getFriendResult(result.target_word);
            return (
              <tr
                key={result.id}
                className="bg-white border-b hover:bg-gray-50 cursor-pointer"
                onClick={() => setSelectedResult(result)}
              >
                <td className="px-6 py-4 font-medium">
                  {result.target_word}
                </td>
                <td className="px-6 py-4">
                  {result.is_correct ? '✅' : '❌'} {getWordCount(result.description)}
                </td>
                {friendResults.length > 0 && (
                  <td className="px-6 py-4">
                    {friendResult ? `${friendResult.is_correct ? '✅' : '❌'} ${getWordCount(friendResult.description)}` : '-'}
                  </td>
                )}
                <td className="px-6 py-4">
                  <Eye className="h-4 w-4 text-gray-500" />
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>

      <ComparisonDialog
        isOpen={!!selectedResult}
        onClose={() => setSelectedResult(null)}
        currentResult={selectedResult}
        friendResult={selectedResult ? getFriendResult(selectedResult.target_word) : null}
      />
    </div>
  );
};