Approve database migration

src/pages/admin/AdminContact.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { format } from 'date-fns';
 import {
@@ -10,6 +10,10 @@ import {
   Search,
   ChevronDown,
   AlertCircle,
+  Send,
+  ArrowUpRight,
+  ArrowDownLeft,
+  Loader2,
 } from 'lucide-react';
 import { supabase } from '@/integrations/supabase/client';
 import { Button } from '@/components/ui/button';
@@ -38,9 +42,14 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { Badge } from '@/components/ui/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { useTheme } from '@/components/theme/ThemeProvider';
+import { useUserRole } from '@/hooks/useUserRole';
 import { handleError, handleSuccess } from '@/lib/errorHandler';
 import { logger } from '@/lib/logger';
 import { contactCategories } from '@/lib/contactValidation';
+import { invokeWithTracking } from '@/lib/edgeFunctionTracking';
 
 interface ContactSubmission {
   id: string;
@@ -57,15 +66,53 @@ interface ContactSubmission {
   admin_notes: string | null;
   resolved_at: string | null;
   resolved_by: string | null;
+  thread_id: string;
+  last_admin_response_at: string | null;
+  response_count: number;
+}
+
+interface EmailThread {
+  id: string;
+  created_at: string;
+  message_id: string;
+  from_email: string;
+  to_email: string;
+  subject: string;
+  body_text: string;
+  direction: 'inbound' | 'outbound';
+  sent_by: string | null;
 }
 
 export default function AdminContact() {
   const queryClient = useQueryClient();
+  const { theme } = useTheme();
+  const { isAdmin } = useUserRole();
   const [statusFilter, setStatusFilter] = useState<string>('all');
   const [categoryFilter, setCategoryFilter] = useState<string>('all');
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedSubmission, setSelectedSubmission] = useState<ContactSubmission | null>(null);
   const [adminNotes, setAdminNotes] = useState('');
+  const [replyBody, setReplyBody] = useState('');
+  const [showReplyForm, setShowReplyForm] = useState(false);
+  const [emailThreads, setEmailThreads] = useState<EmailThread[]>([]);
+  const [loadingThreads, setLoadingThreads] = useState(false);
+
+  // Admin-only access check
+  if (!isAdmin()) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Card className="max-w-md">
+          <CardContent className="pt-6 text-center">
+            <AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
+            <h2 className="text-xl font-semibold mb-2">Access Denied</h2>
+            <p className="text-muted-foreground">
+              Email response features are only available to administrators.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
 
   // Fetch contact submissions
   const { data: submissions, isLoading } = useQuery({
@@ -101,6 +148,62 @@ export default function AdminContact() {
     },
   });
 
+  // Fetch email threads when submission selected
+  useEffect(() => {
+    if (selectedSubmission) {
+      setLoadingThreads(true);
+      supabase
+        .from('contact_email_threads')
+        .select('*')
+        .eq('submission_id', selectedSubmission.id)
+        .order('created_at', { ascending: true })
+        .then(({ data, error }) => {
+          if (error) {
+            logger.error('Failed to fetch email threads', { error });
+            setEmailThreads([]);
+          } else {
+            setEmailThreads((data as EmailThread[]) || []);
+          }
+          setLoadingThreads(false);
+        });
+      
+      setAdminNotes(selectedSubmission.admin_notes || '');
+      setReplyBody('');
+      setShowReplyForm(false);
+    }
+  }, [selectedSubmission]);
+
+  // Send reply mutation
+  const sendReplyMutation = useMutation({
+    mutationFn: async ({ submissionId, body }: { submissionId: string, body: string }) => {
+      const { data, error } = await invokeWithTracking(
+        'send-admin-email-reply',
+        { submissionId, replyBody: body },
+        undefined
+      );
+      if (error) throw error;
+      return data;
+    },
+    onSuccess: () => {
+      handleSuccess('Reply Sent', 'Your email response has been sent successfully');
+      setReplyBody('');
+      setShowReplyForm(false);
+      // Refetch threads
+      if (selectedSubmission) {
+        supabase
+          .from('contact_email_threads')
+          .select('*')
+          .eq('submission_id', selectedSubmission.id)
+          .order('created_at', { ascending: true })
+          .then(({ data }) => setEmailThreads((data as EmailThread[]) || []));
+      }
+      queryClient.invalidateQueries({ queryKey: ['admin-contact-submissions'] });
+    },
+    onError: (error: Error) => {
+      handleError(error, { action: 'Send Email Reply' });
+    }
+  });
+
   // Update submission status
   const updateStatusMutation = useMutation({
     mutationFn: async ({
@@ -172,6 +275,46 @@ export default function AdminContact() {
     return cat?.label || category;
   };
 
+  // Theme-aware EmailThreadItem component
+  function EmailThreadItem({ thread }: { thread: EmailThread }) {
+    const isOutbound = thread.direction === 'outbound';
+    
+    return (
+      <div 
+        className={`
+          p-4 mb-3 rounded-lg border transition-all duration-200
+          ${isOutbound 
+            ? 'bg-primary/5 border-primary/20 dark:bg-primary/10 dark:border-primary/30' 
+            : 'bg-muted/50 border-border dark:bg-muted/30 dark:border-border/50'
+          }
+        `}
+      >
+        <div className="flex items-start justify-between mb-2">
+          <div className="flex items-center gap-2">
+            {isOutbound ? (
+              <ArrowUpRight className="h-4 w-4 text-primary" />
+            ) : (
+              <ArrowDownLeft className="h-4 w-4 text-muted-foreground" />
+            )}
+            <span className="font-medium text-sm">
+              {isOutbound ? 'Admin Reply' : thread.from_email}
+            </span>
+            {isOutbound && (
+              <Badge variant="secondary" className="text-xs">Sent</Badge>
+            )}
+          </div>
+          <span className="text-xs text-muted-foreground">
+            {format(new Date(thread.created_at), 'MMM d, yyyy h:mm a')}
+          </span>
+        </div>
+        
+        <div className="text-sm leading-relaxed whitespace-pre-wrap break-words">
+          {thread.body_text}
+        </div>
+      </div>
+    );
+  }
+
   const stats = {
     pending: submissions?.filter((s) => s.status === 'pending').length || 0,
     inProgress: submissions?.filter((s) => s.status === 'in_progress').length || 0,
@@ -296,6 +439,11 @@ export default function AdminContact() {
                       <h3 className="font-semibold text-lg">{submission.subject}</h3>
                       {getStatusBadge(submission.status)}
                       <Badge variant="outline">{getCategoryLabel(submission.category)}</Badge>
+                      {submission.response_count > 0 && (
+                        <Badge variant="secondary" className="text-xs">
+                          📧 {submission.response_count} {submission.response_count === 1 ? 'reply' : 'replies'}
+                        </Badge>
+                      )}
                     </div>
                     <div className="flex items-center gap-4 text-sm text-muted-foreground flex-wrap">
                       <span className="flex items-center gap-1">
@@ -306,6 +454,12 @@ export default function AdminContact() {
                         <Clock className="h-3 w-3" />
                         {format(new Date(submission.created_at), 'MMM d, yyyy h:mm a')}
                       </span>
+                      {submission.last_admin_response_at && (
+                        <span className="flex items-center gap-1 text-primary">
+                          <ArrowUpRight className="h-3 w-3" />
+                          Last reply {format(new Date(submission.last_admin_response_at), 'MMM d')}
+                        </span>
+                      )}
                     </div>
                     <p className="text-sm line-clamp-2">{submission.message}</p>
                   </div>
@@ -336,118 +490,187 @@ export default function AdminContact() {
           }
         }}
       >
-        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+        <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
           {selectedSubmission && (
             <>
               <DialogHeader>
-                <DialogTitle className="text-2xl">
+                <DialogTitle className="flex items-center gap-2">
+                  <Mail className="h-5 w-5" />
                   {selectedSubmission.subject}
+                  {selectedSubmission.response_count > 0 && (
+                    <Badge variant="secondary" className="ml-2 text-xs">
+                      📧 {selectedSubmission.response_count} {selectedSubmission.response_count === 1 ? 'reply' : 'replies'}
+                    </Badge>
+                  )}
                 </DialogTitle>
                 <DialogDescription>
                   Submitted {format(new Date(selectedSubmission.created_at), 'PPpp')}
                 </DialogDescription>
               </DialogHeader>
 
-              <div className="space-y-6">
-                {/* Sender Info */}
-                <div className="space-y-2">
-                  <Label>From</Label>
-                  <div className="flex items-center gap-2">
-                    <span className="font-medium">{selectedSubmission.name}</span>
-                    <span className="text-muted-foreground">
-                      ({selectedSubmission.email})
-                    </span>
-                  </div>
-                </div>
+              <Tabs defaultValue="details" className="flex-1 overflow-hidden flex flex-col">
+                <TabsList className="w-full justify-start">
+                  <TabsTrigger value="details" className="flex-1">
+                    Details
+                  </TabsTrigger>
+                  <TabsTrigger value="thread" className="flex-1">
+                    Email Thread ({emailThreads.length})
+                  </TabsTrigger>
+                </TabsList>
 
-                {/* Category & Status */}
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="space-y-2">
-                    <Label>Category</Label>
-                    <div>{getCategoryLabel(selectedSubmission.category)}</div>
-                  </div>
-                  <div className="space-y-2">
-                    <Label>Status</Label>
-                    <div>{getStatusBadge(selectedSubmission.status)}</div>
-                  </div>
-                </div>
+                <TabsContent value="details" className="flex-1 overflow-y-auto">
+                  <div className="space-y-4 p-4">
+                    {/* Sender Info */}
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <Label>Name</Label>
+                        <p className="mt-1">{selectedSubmission.name}</p>
+                      </div>
+                      <div>
+                        <Label>Email</Label>
+                        <p className="mt-1">{selectedSubmission.email}</p>
+                      </div>
+                    </div>
 
-                {/* Message */}
-                <div className="space-y-2">
-                  <Label>Message</Label>
-                  <div className="p-4 bg-muted rounded-lg whitespace-pre-wrap">
-                    {selectedSubmission.message}
-                  </div>
-                </div>
+                    {/* Subject & Category */}
+                    <div className="space-y-2">
+                      <Label>Category</Label>
+                      <div className="mt-1">
+                        <Badge>{getCategoryLabel(selectedSubmission.category)}</Badge>
+                      </div>
+                    </div>
 
-                {/* Existing Admin Notes */}
-                {selectedSubmission.admin_notes && (
-                  <div className="space-y-2">
-                    <Label>Previous Admin Notes</Label>
-                    <div className="p-4 bg-muted rounded-lg whitespace-pre-wrap">
-                      {selectedSubmission.admin_notes}
+                    {/* Message */}
+                    <div>
+                      <Label>Message</Label>
+                      <ScrollArea className="h-40 mt-1 p-3 rounded-md border bg-muted/30">
+                        <p className="whitespace-pre-wrap text-sm">{selectedSubmission.message}</p>
+                      </ScrollArea>
+                    </div>
+
+                    {/* Admin Notes */}
+                    <div>
+                      <Label htmlFor="admin-notes">Admin Notes (Internal)</Label>
+                      <Textarea
+                        id="admin-notes"
+                        value={adminNotes}
+                        onChange={(e) => setAdminNotes(e.target.value)}
+                        placeholder="Add internal notes about this submission..."
+                        rows={4}
+                        className="mt-1"
+                      />
+                    </div>
+
+                    {/* Status Update */}
+                    <div className="flex items-center gap-4 pt-4 border-t">
+                      <div className="flex-1">
+                        <Label>Status</Label>
+                        <Select
+                          value={selectedSubmission.status}
+                          onValueChange={(value) => {
+                            handleUpdateStatus(value as 'pending' | 'in_progress' | 'resolved' | 'closed');
+                          }}
+                        >
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="pending">Pending</SelectItem>
+                            <SelectItem value="in_progress">In Progress</SelectItem>
+                            <SelectItem value="resolved">Resolved</SelectItem>
+                            <SelectItem value="closed">Closed</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+
+                      <Button
+                        onClick={() => handleUpdateStatus(selectedSubmission.status)}
+                        disabled={updateStatusMutation.isPending}
+                      >
+                        {updateStatusMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                        Save Notes & Status
+                      </Button>
                     </div>
                   </div>
-                )}
+                </TabsContent>
 
-                {/* Admin Notes Input */}
-                <div className="space-y-2">
-                  <Label>Add/Update Admin Notes</Label>
-                  <Textarea
-                    value={adminNotes}
-                    onChange={(e) => setAdminNotes(e.target.value)}
-                    placeholder="Add internal notes about this submission..."
-                    rows={4}
-                  />
-                </div>
+                <TabsContent value="thread" className="flex-1 overflow-hidden flex flex-col">
+                  <div className="flex-1 overflow-y-auto p-4">
+                    {loadingThreads ? (
+                      <div className="flex items-center justify-center py-8">
+                        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                      </div>
+                    ) : emailThreads.length === 0 ? (
+                      <div className="text-center py-8 text-muted-foreground">
+                        <Mail className="h-12 w-12 mx-auto mb-3 opacity-50" />
+                        <p>No email thread yet. Send the first reply below.</p>
+                      </div>
+                    ) : (
+                      <div className="space-y-2">
+                        {emailThreads.map(thread => (
+                          <EmailThreadItem key={thread.id} thread={thread} />
+                        ))}
+                      </div>
+                    )}
+                  </div>
 
-                {/* Actions */}
-                <div className="flex gap-2 flex-wrap">
-                  <Button
-                    variant="secondary"
-                    onClick={() => handleUpdateStatus('in_progress')}
-                    disabled={
-                      updateStatusMutation.isPending ||
-                      selectedSubmission.status === 'in_progress'
-                    }
-                  >
-                    <Clock className="mr-2 h-4 w-4" />
-                    Mark In Progress
-                  </Button>
-                  <Button
-                    variant="default"
-                    onClick={() => handleUpdateStatus('resolved')}
-                    disabled={
-                      updateStatusMutation.isPending ||
-                      selectedSubmission.status === 'resolved'
-                    }
-                  >
-                    <CheckCircle2 className="mr-2 h-4 w-4" />
-                    Mark Resolved
-                  </Button>
-                  <Button
-                    variant="outline"
-                    onClick={() => handleUpdateStatus('closed')}
-                    disabled={
-                      updateStatusMutation.isPending ||
-                      selectedSubmission.status === 'closed'
-                    }
-                  >
-                    <XCircle className="mr-2 h-4 w-4" />
-                    Close
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    asChild
-                    className="ml-auto"
-                  >
-                    <a href={`mailto:${selectedSubmission.email}`}>
-                      <Mail className="mr-2 h-4 w-4" />
-                      Email Sender
-                    </a>
-                  </Button>
-                </div>
-              </div>
+                  {/* Reply Form */}
+                  <div className="border-t p-4 bg-background">
+                    {!showReplyForm ? (
+                      <Button 
+                        onClick={() => setShowReplyForm(true)}
+                        className="w-full"
+                        variant="default"
+                      >
+                        <Send className="mr-2 h-4 w-4" />
+                        Reply via Email
+                      </Button>
+                    ) : (
+                      <Card className="border-primary/20">
+                        <CardContent className="pt-4">
+                          <Label className="text-sm font-medium mb-2 block">
+                            Reply to {selectedSubmission.name} ({selectedSubmission.email})
+                          </Label>
+                          <Textarea
+                            value={replyBody}
+                            onChange={(e) => setReplyBody(e.target.value)}
+                            placeholder="Type your response here... (Min 10 characters)"
+                            rows={6}
+                            className="mb-3 resize-none"
+                          />
+                          <div className="flex gap-2">
+                            <Button
+                              onClick={() => sendReplyMutation.mutate({
+                                submissionId: selectedSubmission.id,
+                                body: replyBody
+                              })}
+                              disabled={sendReplyMutation.isPending || replyBody.length < 10}
+                              className="flex-1"
+                            >
+                              {sendReplyMutation.isPending ? (
+                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                              ) : (
+                                <Send className="mr-2 h-4 w-4" />
+                              )}
+                              Send Reply
+                            </Button>
+                            <Button
+                              variant="outline"
+                              onClick={() => {
+                                setShowReplyForm(false);
+                                setReplyBody('');
+                              }}
+                              disabled={sendReplyMutation.isPending}
+                            >
+                              Cancel
+                            </Button>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    )}
+                  </div>
+                </TabsContent>
+              </Tabs>
             </>
           )}
         </DialogContent>