'use client';

import React, { useEffect, useState, useRef } from 'react';
import { X, Paperclip, ChevronDown, ChevronUp, SendHorizontal, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import DOMPurify from 'isomorphic-dompurify';

// Add a CSS style block to handle the direction properly
const forceLTRStyles = `
.force-ltr {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
  writing-mode: horizontal-tb !important;
}
.force-ltr * {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
}
[dir="rtl"] .force-ltr,
[dir="rtl"] .force-ltr * {
  direction: ltr !important;
  text-align: left !important;
}
.email-content {
  direction: ltr !important;
  text-align: left !important;
}
.email-content * {
  direction: ltr !important;
  text-align: left !important;
}
`;

// Nous simplifions l'interface car nous n'utilisons plus ces props
interface EmailObject {
  id?: string;
  from?: string;
  fromName?: string;
  to?: string;
  subject?: string;
  content?: string;
  html?: string;
  text?: string;
  body?: string;
  date?: string;
  read?: boolean;
  starred?: boolean;
  attachments?: { name: string; url: string }[];
  folder?: string;
  cc?: string;
  bcc?: string;
}

interface ComposeEmailProps {
  showCompose: boolean;
  setShowCompose: (show: boolean) => void;
  composeTo: string;
  setComposeTo: (to: string) => void;
  composeCc: string;
  setComposeCc: (cc: string) => void;
  composeBcc: string;
  setComposeBcc: (bcc: string) => void;
  composeSubject: string;
  setComposeSubject: (subject: string) => void;
  composeBody: string;
  setComposeBody: (body: string) => void;
  showCc: boolean;
  setShowCc: (show: boolean) => void;
  showBcc: boolean;
  setShowBcc: (show: boolean) => void;
  attachments: any[];
  setAttachments: (attachments: any[]) => void;
  handleSend: () => Promise<void>;
  originalEmail?: {
    content: string;
    type: 'reply' | 'reply-all' | 'forward';
  };
  onSend: (email: any) => Promise<void>;
  onCancel: () => void;
  // Nous laissons ces props pour la rétrocompatibilité mais nous ne les utilisons plus
  replyTo?: EmailObject | null;
  forwardFrom?: EmailObject | null;
}

export default function ComposeEmail({
  showCompose,
  setShowCompose,
  composeTo,
  setComposeTo,
  composeCc,
  setComposeCc,
  composeBcc,
  setComposeBcc,
  composeSubject,
  setComposeSubject,
  composeBody,
  setComposeBody,
  showCc,
  setShowCc,
  showBcc,
  setShowBcc,
  attachments,
  setAttachments,
  handleSend,
  originalEmail,
  // replyTo et forwardFrom ne sont plus utilisés
  replyTo,
  forwardFrom,
  onSend,
  onCancel
}: ComposeEmailProps) {
  const [isSending, setIsSending] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const contentEditableRef = useRef<HTMLDivElement>(null);
  // Si nous avons un contenu préformaté, nous utilisons toujours l'éditeur riche
  const [useRichEditor, setUseRichEditor] = useState(!!composeBody);
  const [userMessage, setUserMessage] = useState('');
  // Nous extrarons la partie de contenu citée du corps de l'email préformaté
  const [quotedContent, setQuotedContent] = useState('');
  const [hasStartedTyping, setHasStartedTyping] = useState(false);
  
  useEffect(() => {
    // Utiliser l'éditeur riche si nous avons du contenu HTML
    if (composeBody && composeBody.includes('<')) {
      setUseRichEditor(true);
      
      // Séparer le contenu de l'utilisateur (vide) et le contenu cité (préformaté)
      setUserMessage('');
      setQuotedContent(composeBody);
    }
  }, [composeBody]);

  // Nous n'avons plus besoin de ces effets qui initialisaient replyTo et forwardFrom
  // useEffect(() => {
  //   if (replyTo) {
  //     initializeReplyEmail(replyTo);
  //   }
  // }, [replyTo, setComposeTo, setComposeSubject, setComposeBody]);
  // 
  // useEffect(() => {
  //   if (forwardFrom) {
  //     initializeForwardedEmail(forwardFrom);
  //   }
  // }, [forwardFrom]);

  // Nous n'avons plus besoin de ces fonctions qui initialisaient le contenu 
  // via formatEmailForReply et formatEmailForForward
  // const initializeForwardedEmail = async (email: any) => {...};
  // const initializeReplyEmail = async (email: any, replyType: 'reply' | 'replyAll' = 'reply') => {...};

  // Handle file attachment selection
  const handleFileAttachment = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      const newFiles = Array.from(e.target.files);
      setAttachments([...attachments, ...newFiles]);
    }
  };

  // Handle contentEditable input changes
  const handleUserMessageChange = () => {
    if (contentEditableRef.current) {
      const content = contentEditableRef.current.innerHTML;
      
      // Check if this is the initial state or if the user has actually typed something
      if (content && content !== '<p>Write your message here...</p>') {
        setHasStartedTyping(true);
      }
      
      setUserMessage(content);
      
      // Combine user message with quoted content for the full email body
      const combined = `${content}${quotedContent ? `<div class="original-content">${quotedContent}</div>` : ''}`;
      setComposeBody(combined);
    }
  };

  // Handle sending email with combined content
  const handleSendWithCombinedContent = async () => {
    if (isSending) return;
    
    try {
      setIsSending(true);
      
      // For rich editor, combine user message with quoted content
      if (useRichEditor) {
        // Wrap the content with proper direction styles
        const userContent = userMessage ? `<div class="force-ltr user-message">${userMessage}</div>` : '';
        const quotedWithStyles = quotedContent ? `<div class="force-ltr quoted-content" style="margin-top: 20px; border-top: 1px solid #e2e2e2; padding-top: 10px;">${quotedContent}</div>` : '';
        const combinedContent = `${userContent}${quotedWithStyles}`;
        
        setComposeBody(combinedContent);
        
        // Wait for state update to complete
        await new Promise(resolve => setTimeout(resolve, 0));
      }
      
      // Call the provided onSend function
      await onSend({
        to: composeTo,
        cc: composeCc,
        bcc: composeBcc,
        subject: composeSubject,
        body: composeBody,
        attachments: attachments
      });
      
      // Reset the compose state
      setShowCompose(false);
      setComposeTo('');
      setComposeCc('');
      setComposeBcc('');
      setComposeSubject('');
      setComposeBody('');
      setShowCc(false);
      setShowBcc(false);
      setAttachments([]);
      setUserMessage('');
      setQuotedContent('');
      
    } catch (error) {
      console.error('Failed to send email:', error);
    } finally {
      setIsSending(false);
    }
  };

  return (
    <>
      {/* Compose Email Modal */}
      {showCompose && (
    <div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
          {/* Add global styles for email direction */}
          <style dangerouslySetInnerHTML={{ __html: forceLTRStyles }} />
          
          <div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
        {/* Modal Header */}
            <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
          <h3 className="text-lg font-semibold text-gray-900">
                {composeSubject.startsWith('Re:') ? 'Reply' : 
                 composeSubject.startsWith('Fwd:') ? 'Forward' : 'New Message'}
          </h3>
          <Button
            variant="ghost"
            size="icon"
            className="hover:bg-gray-100 rounded-full"
                onClick={() => {
                  setShowCompose(false);
                  setComposeTo('');
                  setComposeCc('');
                  setComposeBcc('');
                  setComposeSubject('');
                  setComposeBody('');
                  setShowCc(false);
                  setShowBcc(false);
                }}
          >
            <X className="h-5 w-5 text-gray-500" />
          </Button>
        </div>

        {/* Modal Body */}
            <div className="flex-1 overflow-y-auto">
              <div className="p-6 space-y-4">
            {/* To Field */}
                <div>
              <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
              <Input
                id="to"
                value={composeTo}
                onChange={(e) => setComposeTo(e.target.value)}
                placeholder="recipient@example.com"
                className="w-full mt-1 bg-white border-gray-300 text-gray-900"
              />
            </div>

            {/* CC/BCC Toggle Buttons */}
                <div className="flex items-center gap-4">
              <button
                type="button"
                className="text-blue-600 hover:text-blue-700 text-sm font-medium"
                onClick={() => setShowCc(!showCc)}
              >
                {showCc ? 'Hide Cc' : 'Add Cc'}
              </button>
              <button
                type="button"
                className="text-blue-600 hover:text-blue-700 text-sm font-medium"
                onClick={() => setShowBcc(!showBcc)}
              >
                {showBcc ? 'Hide Bcc' : 'Add Bcc'}
              </button>
            </div>

            {/* CC Field */}
            {showCc && (
                  <div>
                <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
                <Input
                  id="cc"
                  value={composeCc}
                  onChange={(e) => setComposeCc(e.target.value)}
                  placeholder="cc@example.com"
                  className="w-full mt-1 bg-white border-gray-300 text-gray-900"
                />
              </div>
            )}

            {/* BCC Field */}
            {showBcc && (
                  <div>
                <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
                <Input
                  id="bcc"
                  value={composeBcc}
                  onChange={(e) => setComposeBcc(e.target.value)}
                  placeholder="bcc@example.com"
                  className="w-full mt-1 bg-white border-gray-300 text-gray-900"
                />
              </div>
            )}

            {/* Subject Field */}
                <div>
              <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
              <Input
                id="subject"
                value={composeSubject}
                onChange={(e) => setComposeSubject(e.target.value)}
                placeholder="Enter subject"
                className="w-full mt-1 bg-white border-gray-300 text-gray-900"
              />
            </div>

                {/* Message Body - conditionally render either rich editor or textarea */}
                <div>
                  <Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
                  
                  {useRichEditor ? (
                    <div className="mt-1 border border-gray-300 rounded-md overflow-hidden flex flex-col">
                      {/* User input area - clearly separated from quoted content */}
                      <div
                        ref={contentEditableRef}
                        contentEditable="true"
                        className="w-full p-3 bg-white min-h-[150px] text-gray-900 email-editor"
                        onInput={handleUserMessageChange}
                        onFocus={() => {
                          // Clear placeholder text when user focuses if they haven't started typing
                          if (!hasStartedTyping && contentEditableRef.current) {
                            contentEditableRef.current.innerHTML = '';
                          }
                        }}
                        onBlur={() => {
                          // Restore placeholder if user hasn't typed anything
                          if (!hasStartedTyping && contentEditableRef.current && !contentEditableRef.current.innerHTML.trim()) {
                            contentEditableRef.current.innerHTML = '<p>Write your message here...</p>';
                          }
                        }}
                        dangerouslySetInnerHTML={hasStartedTyping ? { __html: userMessage } : { __html: '<p>Write your message here...</p>' }}
                        style={{ direction: 'ltr', textAlign: 'left' }}
                      />
                      
                      {/* Original email content with clear visual separation */}
                      {quotedContent && (
                        <>
                          <div className="px-3 py-2 bg-gray-100 border-t border-gray-300 text-xs text-gray-500 font-medium">
                            {composeSubject.startsWith('Re:') ? 'Original message' : 'Forwarded message'}
                          </div>
                          <div 
                            className="w-full bg-gray-50 border-t border-gray-200 email-content-wrapper"
                            style={{ direction: 'ltr' }}
                          >
                            <div 
                              className="p-3 text-sm email-content force-ltr"
                              dangerouslySetInnerHTML={{ __html: quotedContent }}
                              contentEditable="false" 
                              style={{ 
                                direction: 'ltr',
                                textAlign: 'left',
                                unicodeBidi: 'isolate',
                                writingMode: 'horizontal-tb',
                                color: '#555',
                                borderLeft: '3px solid #ccc',
                                paddingLeft: '10px',
                                margin: '0 10px',
                              }}
                            />
                          </div>
                        </>
                      )}
                    </div>
                  ) : (
                    <Textarea
                      id="message"
                      value={composeBody}
                      onChange={(e) => setComposeBody(e.target.value)}
                      placeholder="Write your message..."
                      className="w-full mt-1 min-h-[200px] bg-white border-gray-300 text-gray-900 resize-none email-editor"
                      style={{ direction: 'ltr', textAlign: 'left' }}
                    />
                  )}
                </div>
          </div>
        </div>

        {/* Modal Footer */}
            <div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
          <div className="flex items-center gap-2">
            {/* File Input for Attachments */}
            <input
              type="file"
              id="file-attachment"
              className="hidden"
              multiple
              onChange={handleFileAttachment}
            />
            <label htmlFor="file-attachment">
              <Button 
                variant="outline" 
                size="icon"
                className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
                onClick={(e) => {
                  e.preventDefault();
                  document.getElementById('file-attachment')?.click();
                }}
              >
                <Paperclip className="h-4 w-4 text-gray-600" />
              </Button>
            </label>
          </div>
          <div className="flex items-center gap-3">
            <Button 
              variant="ghost"
              className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
                  onClick={() => setShowCompose(false)}
            >
              Cancel
            </Button>
            <Button
              className="bg-blue-600 text-white hover:bg-blue-700"
                  onClick={handleSendWithCombinedContent}
                  disabled={isSending}
            >
                  {isSending ? 'Sending...' : 'Send'}
            </Button>
          </div>
        </div>
      </div>
    </div>
      )}
    </>
  );
}