src/components/projects/ProjectCommunicationTrailSection.tsx

import React, { useState, useRef } from "react";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { 
  MessageCircle, 
  Calendar, 
  Users, 
  Info, 
  MessageSquare, 
  Video, 
  Phone, 
  Briefcase, 
  Plus, 
  ChevronDown, 
  Loader2,
  ArrowDownUp,
  Printer,
  Building2
} from "lucide-react";
import { format, parseISO } from "date-fns";
import { Badge } from "@/components/ui/badge";
import { Communication, ProjectApi, CommunicationCreateRequest } from "@/types";
import { getCommunicationsByProjectId, createCommunication } from "@/services/communicationApi";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { cn } from "@/lib/utils";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { useNavigate } from "react-router-dom";
import { projectService } from "@/lib/api";
import CustomDialog from "@/components/CustomDialog";
import { toast } from "@/lib/custom-toast";
import SlateRichTextEditor from "@/components/custom/SlateRichTextEditor";

interface ProjectCommunicationTrailSectionProps {
  projectId: number;
}

const ProjectCommunicationTrailSection: React.FC<ProjectCommunicationTrailSectionProps> = ({ 

  projectId

}) => {
  const [sortOrder, setSortOrder] = useState<"desc" | "asc">("desc"); // Newest first by default
  const [printMode, setPrintMode] = useState(false);
  const printRef = useRef<HTMLDivElement>(null);
  const navigate = useNavigate();
  const queryClient = useQueryClient();

  // Add dialog state
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
  const [submitLoading, setSubmitLoading] = useState(false);
  const [formData, setFormData] = useState<Partial<Communication>>({
    topic: '',
    details: '',
    decisionMade: '',
    mode: 'In-person',
    participants: '',
    communicationDate: new Date().toISOString(),
    projectId: projectId,
  });
  
  // Fetch project details to get the project name
  const { data: project } = useQuery({
    queryKey: ['project', projectId],
    queryFn: () => projectService.getById(projectId),
    enabled: !!projectId
  });

  // Get project name
  const projectName = project?.projectName || `Project #${projectId}`;
  
  // Fetch communications
  const {
    data: communicationsResponse = { data: [], success: true },
    isLoading,
    isError,
    refetch
  } = useQuery({
    queryKey: ["communications", projectId],
    queryFn: () => getCommunicationsByProjectId(projectId),
  });

  // Add debug logs
  console.log("Communications response:", communicationsResponse);
  
  // Extract communications array from response with defensive coding
  const communications = 
    // If response has data property and it's an array
    (communicationsResponse && 'data' in communicationsResponse && Array.isArray(communicationsResponse.data))
      ? communicationsResponse.data
      // If response is directly an array (unexpected format but handle it)
      : Array.isArray(communicationsResponse)
        ? communicationsResponse
        // Default to empty array for safety
        : [];
  
  console.log("Extracted communications array:", communications);

  // Get communication icon based on mode
  const getCommunicationIcon = (mode: string) => {
    const m = mode.toLowerCase();
    if (m.includes('virtual') || m.includes('online') || m.includes('video')) {
      return <Video className="h-5 w-5 text-blue-500" />;
    } else if (m.includes('call') || m.includes('phone')) {
      return <Phone className="h-5 w-5 text-green-500" />;
    } else if (m.includes('person') || m.includes('meeting')) {
      return <Users className="h-5 w-5 text-purple-500" />;
    } else {
      return <MessageCircle className="h-5 w-5 text-gray-500" />;
    }
  };

  // Format date
  const formatDate = (dateString: string) => {
    try {
      return format(parseISO(dateString), 'MMM dd, yyyy h:mm a');
    } catch (error) {
      return 'Invalid date';
    }
  };

  // Sort communications by date
  const sortedCommunications = Array.isArray(communications) 
    ? [...communications].sort((a, b) => {
        if (!a || !b) return 0;
        if (!a.communicationDate) return 1; // items without dates go last
        if (!b.communicationDate) return -1;
        
        try {
          const dateA = new Date(a.communicationDate).getTime();
          const dateB = new Date(b.communicationDate).getTime();
          
          if (isNaN(dateA) && isNaN(dateB)) return 0;
          if (isNaN(dateA)) return 1;
          if (isNaN(dateB)) return -1;
          
          return sortOrder === "desc" ? dateB - dateA : dateA - dateB;
        } catch (error) {
          console.error("Error sorting dates:", error);
          return 0;
        }
      })
    : [];

  // Handle form input changes
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData((prev) => ({ ...prev, communicationDate: new Date(e.target.value).toISOString() }));
  };

  const handleModeChange = (value: string) => {
    setFormData((prev) => ({ 
      ...prev, 
      mode: value 
    }));
  };

  // Handle dialog open/close
  const handleOpenAddDialog = () => {
    setFormData({
      topic: '',
      details: '',
      decisionMade: '',
      mode: 'In-person',
      participants: '',
      communicationDate: new Date().toISOString(),
      projectId: projectId,
    });
    setIsAddDialogOpen(true);
  };

  const handleCloseAddDialog = () => {
    setIsAddDialogOpen(false);
  };

  // Handle form submission
  const handleAddSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    e.stopPropagation();
    
    setSubmitLoading(true);
    try {
      const createData: CommunicationCreateRequest = {
        topic: formData.topic || '',
        details: formData.details || '',
        decisionMade: formData.decisionMade || '',
        mode: formData.mode || 'In-person',
        participants: formData.participants || '',
        communicationDate: formData.communicationDate || new Date().toISOString(),
        projectId: projectId,
      };
      
      console.log('Creating communication with data:', createData);
      
      // Create new communication
      await createCommunication(createData);
      
      toast.success('Communication added successfully');
      handleCloseAddDialog();
      // Refetch communications to update the list
      refetch();
    } catch (err: any) {
      console.error('Error creating communication:', err);
      const errorMessage = err.response?.data?.message || err.message || 'Failed to create communication';
      toast.error(errorMessage);
    } finally {
      setSubmitLoading(false);
    }
  };

  // Handle print button click
  const handlePrint = () => {
    setPrintMode(true);
    
    // Create a new window for printing
    const printWindow = window.open('', '_blank');
    
    if (printWindow && printRef.current) {
      // Get the HTML content directly
      const printContents = printRef.current.innerHTML;
      const totalItems = sortedCommunications.length;
      
      printWindow.document.write(`

        <!DOCTYPE html>

        <html>

          <head>

            <title>${projectName} - Communication Trail</title>

            <style>

              @page { margin: 1cm; }

              body { 

                font-family: Arial, sans-serif; 

                margin: 0; 

                padding: 0;

              }

              .print-container {

                width: 100%;

                padding: 20px;

              }

              .header { 

                display: flex; 

                flex-direction: column;

                margin-bottom: 20px;

                border-bottom: 1px solid #ccc;

                padding-bottom: 10px;

              }

              .header h1 { 

                margin: 0 0 10px 0; 

              }

              .header .project-name {

                font-size: 16px;

                font-weight: 500;

                color: #555;

                margin-bottom: 5px;

                word-break: break-word;

              }

              .content-info {

                margin-bottom: 20px;

                font-style: italic;

                color: #666;

              }

              .communication-item { 

                margin-bottom: 25px; 

                page-break-inside: avoid; 

                border-bottom: 1px solid #eee;

                padding-bottom: 20px;

              }

              .communication-item h3 { 

                margin-bottom: 10px; 

                color: #333;

              }

              .mode-badge {

                display: inline-block;

                padding: 3px 8px;

                background-color: #f3f4f6;

                border: 1px solid #e5e7eb;

                border-radius: 4px;

                font-size: 12px;

                margin-bottom: 10px;

              }

              .details { 

                margin-bottom: 15px; 

                white-space: pre-wrap; 

              }

              .decision {

                background-color: #f9fafb;

                padding: 10px;

                border-radius: 4px;

                margin-bottom: 15px;

              }

              .decision-label {

                font-weight: bold;

                margin-bottom: 5px;

              }

              .meta-info {

                color: #666;

                font-size: 12px;

                margin-bottom: 5px;

              }

              .meta-info-label {

                font-weight: bold;

                display: inline-block;

                width: 100px;

              }

              @media print { 

                .no-print { display: none; }

              }

            </style>

          </head>

          <body>

            <div class="print-container">

              <div class="header">

                <h1>Project Communication Trail</h1>

                <div class="project-name">${projectName}</div>

              </div>

              

              <div class="content-info">

                Total communications: ${totalItems}

              </div>

              

              <div class="print-content">

                ${printContents}

              </div>

              

              <div class="no-print" style="margin-top: 30px; text-align: center;">

                <button onclick="window.print()" style="padding: 8px 16px; margin-right: 10px;">Print</button>

                <button onclick="window.close()" style="padding: 8px 16px;">Close</button>

              </div>

            </div>

          </body>

        </html>

      `);
      
      printWindow.document.close();
      
      // Add event listeners
      printWindow.onafterprint = () => {
        setPrintMode(false);
      };
      
      printWindow.onunload = () => {
        setPrintMode(false);
      };
      
      // Use a longer delay to ensure content is properly rendered
      setTimeout(() => {
        // Log to debug
        console.log(`Preparing to print ${totalItems} communications`);
        try {
          printWindow.focus();
          printWindow.print();
        } catch (error) {
          console.error("Print error:", error);
          setPrintMode(false);
        }
      }, 1200);
    } else {
      // If window couldn't be opened, reset the state
      setPrintMode(false);
      alert("Could not open print window. Please check your popup blocker settings.");
    }
  };

  // Add a utility function to safely render HTML
  const HtmlContent: React.FC<{ html: string }> = ({ html }) => {
    return (
      <div dangerouslySetInnerHTML={{ __html: html }} />
    );
  };

  return (
    <Card className="shadow-sm">

      <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">

        <div>

          <CardTitle className="text-xl flex items-center gap-2">

            <MessageCircle className="h-5 w-5" />

            Communication Trail

          </CardTitle>

          <CardDescription>

            Project communications and meeting notes

          </CardDescription>

        </div>

        <div className="flex items-center gap-2">

          <Button 

            variant="outline" 

            size="sm" 

            className={cn(

              "flex items-center gap-1 text-xs sm:text-sm h-8",

              sortOrder === "desc" ? "bg-slate-50" : ""

            )}

            onClick={() => setSortOrder(sortOrder === "desc" ? "asc" : "desc")}

          >

            <ArrowDownUp className="h-3 w-3 sm:h-3.5 sm:w-3.5 mr-1" />

            {sortOrder === "desc" ? "Newest first" : "Oldest first"}

          </Button>

          <Button

            variant="outline"

            size="sm"

            className="flex items-center gap-1 h-8"

            onClick={handlePrint}

            disabled={!Array.isArray(sortedCommunications) || sortedCommunications.length === 0}

          >

            <Printer className="h-3.5 w-3.5 mr-1" />

            Print

          </Button>

          <Button 

            size="sm" 

            className="flex items-center gap-1"

            onClick={handleOpenAddDialog}

          >

            <Plus className="h-3.5 w-3.5" />

            <span>Add</span>

          </Button>

        </div>

      </CardHeader>

      

      <CardContent>

        {isLoading ? (

          <div className="flex justify-center items-center py-12">

            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />

          </div>

        ) : isError ? (

          <div className="text-center bg-red-50 text-red-700 py-6 px-4 rounded-md border border-red-100">

            <p className="text-sm font-medium">Unable to load communication trail</p>

          </div>

        ) : !Array.isArray(sortedCommunications) || sortedCommunications.length === 0 ? (

          <div className="text-center py-12 border border-dashed rounded-lg flex flex-col items-center">

            <MessageCircle className="h-12 w-12 text-muted-foreground mb-2" />

            <p className="text-base font-medium text-muted-foreground mb-2">No communications yet</p>

            <p className="text-sm text-muted-foreground mb-4">

              Record important communications and meeting decisions for this project

            </p>

            <Button onClick={handleOpenAddDialog}>

              Add Communication

            </Button>

          </div>

        ) : (

          <>

            <div className="space-y-4">

              {sortedCommunications.map((communication) => (

                <div 

                  key={communication.communicationId} 

                  className="border rounded-lg p-4 hover:bg-accent/20 transition-colors"

                >

                  <div className="flex items-start gap-3">

                    <div className="p-2 bg-slate-100 rounded-full flex-shrink-0">

                      {getCommunicationIcon(communication.mode)}

                    </div>

                    

                    <div className="flex-1 min-w-0">

                      <div className="flex items-center justify-between mb-2 flex-wrap gap-2">

                        <h3 className="font-medium">{communication.topic}</h3>

                        <Badge variant="outline" className="text-xs font-normal">

                          {communication.mode}

                        </Badge>

                      </div>

                      

                      <p className="text-sm text-muted-foreground mb-3 whitespace-pre-wrap">

                        {communication.details}

                      </p>

                      

                      {communication.decisionMade && (

                        <div className="mb-3 bg-slate-50 p-2 rounded-md">

                          <p className="text-xs font-medium text-slate-500 mb-1">Decision:</p>

                          <p className="text-sm">{communication.decisionMade}</p>

                        </div>

                      )}

                      

                      <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-500">

                        <div className="flex items-center gap-1">

                          <Calendar className="h-3.5 w-3.5" />

                          <span>{formatDate(communication.communicationDate)}</span>

                        </div>

                        

                        <div className="flex items-center gap-1">

                          <Users className="h-3.5 w-3.5" />

                          <span>

                            {communication.participants}

                          </span>

                        </div>

                        

                        {communication.createdByName && (

                          <div className="flex items-center gap-1">

                            <Info className="h-3.5 w-3.5" />

                            <span>Added by {communication.createdByName}</span>

                          </div>

                        )}

                      </div>

                    </div>

                  </div>

                </div>

              ))}

            </div>

            

            {/* Printable version - hidden from normal view */}

            <div className="hidden">

              <div ref={printRef} className="print-content">

                {sortedCommunications.map((communication, index) => (

                  <div key={communication.communicationId} className="communication-item" data-index={index}>

                    <h3>{communication.topic}</h3>

                    <div className="mode-badge">{communication.mode}</div>

                    

                    <div className="details">

                      <strong>Details:</strong><br />

                      <HtmlContent html={communication.details || "No details provided."} />

                    </div>

                    

                    {communication.decisionMade && (

                      <div className="decision">

                        <div className="decision-label">Decision:</div>

                        <HtmlContent html={communication.decisionMade} />

                      </div>

                    )}

                    

                    <div className="meta-info">

                      <span className="meta-info-label">Date/Time:</span>

                      {formatDate(communication.communicationDate)}

                    </div>

                    

                    <div className="meta-info">

                      <span className="meta-info-label">Participants:</span>

                      {communication.participants}

                    </div>

                    

                    {communication.createdByName && (

                      <div className="meta-info">

                        <span className="meta-info-label">Added by:</span>

                        {communication.createdByName}

                      </div>

                    )}

                  </div>

                ))}

              </div>

            </div>

          </>

        )}

      </CardContent>

      {/* Add Communication Dialog */}
      <CustomDialog 
        isOpen={isAddDialogOpen}
        onClose={handleCloseAddDialog}
        title="Add Communication"
        description={`Add a new communication record for ${projectName}`}
        isPending={submitLoading}
      >
        <form onSubmit={handleAddSubmit}>

          <div className="grid gap-4 py-4">

            <div className="grid grid-cols-1 gap-2">

              <Label htmlFor="topic">Topic</Label>

              <Input

                id="topic"

                name="topic"

                placeholder="Enter communication topic"

                value={formData.topic || ''}

                onChange={handleInputChange}

                required

              />

            </div>

            

            <div className="grid grid-cols-1 gap-2">

              <Label htmlFor="details">Details</Label>

              <SlateRichTextEditor

                initialValue={formData.details || ''}

                onChange={(value) => {

                  setFormData(prev => ({

                    ...prev,

                    details: value

                  }));

                }}

                placeholder="Enter communication details"

                minHeight="150px"

              />

            </div>

            

            <div className="grid grid-cols-1 gap-2">

              <Label htmlFor="decisionMade">Decision Made</Label>

              <SlateRichTextEditor

                initialValue={formData.decisionMade || ''}

                onChange={(value) => {

                  setFormData(prev => ({

                    ...prev,

                    decisionMade: value

                  }));

                }}

                placeholder="Enter decisions made during this communication"

                minHeight="150px"

              />

            </div>

            

            <div className="grid grid-cols-2 gap-4">

              <div className="grid grid-cols-1 gap-2">

                <Label htmlFor="mode">Mode</Label>

                <div className="relative">

                  <Button 

                    type="button"

                    variant="outline" 

                    className="w-full justify-between"

                    onClick={(e) => {

                      e.preventDefault();

                      const dropdown = document.getElementById('add-mode-dropdown');

                      if (dropdown) {

                        dropdown.classList.toggle('hidden');

                        

                        // Add click outside handler

                        const clickHandler = (evt: any) => {

                          if (!dropdown.contains(evt.target) && 

                              !(e.target as HTMLElement).contains(evt.target)) {

                            dropdown.classList.add('hidden');

                            document.removeEventListener('click', clickHandler);

                          }

                        };

                        

                        // Delay to avoid immediate triggering

                        setTimeout(() => {

                          document.addEventListener('click', clickHandler);

                        }, 0);

                      }

                    }}

                  >

                    <span className="flex items-center gap-2">

                      {getCommunicationIcon(formData.mode || 'In-person')}

                      {formData.mode || 'Select Mode'}

                    </span>

                    <ChevronDown className="h-4 w-4 opacity-50" />

                  </Button>

                  <div 

                    id="add-mode-dropdown"

                    className="absolute left-0 right-0 top-full mt-1 z-50 bg-white shadow-lg border rounded-md p-1 hidden"

                  >

                    <button 

                      type="button"

                      className="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-slate-100 text-slate-700"

                      onClick={(e) => {

                        e.preventDefault();

                        handleModeChange('In-person');

                        document.getElementById('add-mode-dropdown')?.classList.add('hidden');

                      }}

                    >

                      <Building2 className="h-4 w-4 mr-2 text-primary" />

                      <span>In-person</span>

                    </button>

                    <button 

                      type="button"

                      className="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-slate-100 text-slate-700"

                      onClick={(e) => {

                        e.preventDefault();

                        handleModeChange('Virtual');

                        document.getElementById('add-mode-dropdown')?.classList.add('hidden');

                      }}

                    >

                      <Video className="h-4 w-4 mr-2 text-purple-500" />

                      <span>Virtual</span>

                    </button>

                    <button 

                      type="button"

                      className="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-slate-100 text-slate-700"

                      onClick={(e) => {

                        e.preventDefault();

                        handleModeChange('Phone');

                        document.getElementById('add-mode-dropdown')?.classList.add('hidden');

                      }}

                    >

                      <Phone className="h-4 w-4 mr-2 text-orange-500" />

                      <span>Phone</span>

                    </button>

                    <button 

                      type="button"

                      className="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-slate-100 text-slate-700"

                      onClick={(e) => {

                        e.preventDefault();

                        handleModeChange('Email');

                        document.getElementById('add-mode-dropdown')?.classList.add('hidden');

                      }}

                    >

                      <MessageSquare className="h-4 w-4 mr-2 text-blue-500" />

                      <span>Email</span>

                    </button>

                  </div>

                </div>

              </div>

              

              <div className="grid grid-cols-1 gap-2">

                <Label htmlFor="communicationDate">Date</Label>

                <Input

                  id="communicationDate"

                  name="communicationDate"

                  type="datetime-local"

                  value={formData.communicationDate ? new Date(formData.communicationDate).toISOString().slice(0, 16) : ''}

                  onChange={handleDateChange}

                  required

                />

              </div>

            </div>

            

            <div className="grid grid-cols-1 gap-2">

              <Label htmlFor="participants">Participants</Label>

              <Input

                id="participants"

                name="participants"

                placeholder="Enter participant names (comma separated)"

                value={formData.participants || ''}

                onChange={handleInputChange}

                required

              />

            </div>

          </div>

          <div className="flex justify-end gap-2 mt-4">

            <Button type="button" variant="outline" onClick={handleCloseAddDialog} disabled={submitLoading}>

              Cancel

            </Button>

            <Button type="submit" disabled={submitLoading}>

              {submitLoading ? (

                <>

                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />

                  Adding...

                </>

              ) : (

                'Add Communication'

              )}

            </Button>

          </div>
        </form>
      </CustomDialog>
    </Card>
  );
};

export default ProjectCommunicationTrailSection;