'use client';

import { useRef, useEffect, useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Paperclip, X } from 'lucide-react';
import { Textarea } from '@/components/ui/textarea';
import { decodeComposeContent, encodeComposeContent } from '@/lib/compose-mime-decoder';
import { Email } from '@/app/courrier/page';

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: Email) => void;
  onCancel: () => void;
  onBodyChange?: (body: string) => void;
  initialTo?: string;
  initialSubject?: string;
  initialBody?: string;
  initialCc?: string;
  initialBcc?: string;
  replyTo?: Email | null;
  forwardFrom?: Email | 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,
  onSend,
  onCancel,
  onBodyChange,
  initialTo,
  initialSubject,
  initialBody,
  initialCc,
  initialBcc,
  replyTo,
  forwardFrom
}: ComposeEmailProps) {
  const composeBodyRef = useRef<HTMLDivElement>(null);
  const [localContent, setLocalContent] = useState('');
  const [isInitialized, setIsInitialized] = useState(false);
  
  useEffect(() => {
    if (composeBodyRef.current && !isInitialized) {
      let content = '';
      
      if (replyTo) {
        // For replies
        content = `
          <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px; margin-bottom: 20px;"></div>
          <div class="quoted-content" contenteditable="false" style="color: #6b7280; font-size: 0.875rem;">
            <div style="margin-bottom: 10px;">
              On ${new Date(replyTo.date).toLocaleString()}, ${replyTo.from} wrote:
            </div>
            <blockquote style="margin: 0; padding-left: 1em; border-left: 2px solid #e5e7eb;">
              ${composeBody}
            </blockquote>
          </div>
        `;
      } else if (forwardFrom) {
        // For forwards
        content = `
          <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px; margin-bottom: 20px;"></div>
          <div class="quoted-content" contenteditable="false" style="color: #6b7280; font-size: 0.875rem;">
            <div style="margin-bottom: 10px;">
              ---------- Forwarded message ---------<br/>
              From: ${forwardFrom.from}<br/>
              Date: ${new Date(forwardFrom.date).toLocaleString()}<br/>
              Subject: ${forwardFrom.subject}<br/>
              To: ${forwardFrom.to}<br/>
              ${forwardFrom.cc ? `Cc: ${forwardFrom.cc}<br/>` : ''}
            </div>
            <blockquote style="margin: 0; padding-left: 1em; border-left: 2px solid #e5e7eb;">
              ${composeBody}
            </blockquote>
          </div>
        `;
      } else {
        // For new messages
        content = `
          <div class="compose-area" contenteditable="true" style="min-height: 200px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px;"></div>
        `;
      }

      composeBodyRef.current.innerHTML = content;
      setIsInitialized(true);
      
      // Place cursor at the beginning of the compose area
      const composeArea = composeBodyRef.current.querySelector('.compose-area');
      if (composeArea) {
        const range = document.createRange();
        const sel = window.getSelection();
        range.setStart(composeArea, 0);
        range.collapse(true);
        sel?.removeAllRanges();
        sel?.addRange(range);
        (composeArea as HTMLElement).focus();
      }
    }
  }, [composeBody, replyTo, forwardFrom, isInitialized]);

  const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
    if (!composeBodyRef.current) return;
    const composeArea = composeBodyRef.current.querySelector('.compose-area');
    if (composeArea) {
      const newContent = composeArea.innerHTML;
      setComposeBody(newContent);
      if (onBodyChange) {
        onBodyChange(newContent);
      }
    }
  };

  const handleFileAttachment = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) return;
    
    const newAttachments: any[] = [];
    const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB in bytes
    const oversizedFiles: string[] = [];
    
    for (const file of e.target.files) {
      if (file.size > MAX_FILE_SIZE) {
        oversizedFiles.push(file.name);
        continue;
      }

      try {
        const base64Content = await new Promise<string>((resolve) => {
          const reader = new FileReader();
          reader.onloadend = () => {
            const base64 = reader.result as string;
            resolve(base64.split(',')[1]);
          };
          reader.readAsDataURL(file);
        });

        newAttachments.push({
          name: file.name,
          type: file.type,
          content: base64Content,
          encoding: 'base64'
        });
      } catch (error) {
        console.error('Error processing attachment:', error);
      }
    }

    if (oversizedFiles.length > 0) {
      alert(`The following files exceed the 10MB size limit and were not attached:\n${oversizedFiles.join('\n')}`);
    }

    if (newAttachments.length > 0) {
      setAttachments([...attachments, ...newAttachments]);
    }
  };

  if (!showCompose) return null;

  return (
    <div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
      <div className="w-full max-w-2xl h-[90vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
        {/* Modal Header */}
        <div className="flex-none flex items-center justify-between px-6 py-3 border-b border-gray-200">
          <h3 className="text-lg font-semibold text-gray-900">
            {replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'}
          </h3>
          <Button
            variant="ghost"
            size="icon"
            className="hover:bg-gray-100 rounded-full"
            onClick={onCancel}
          >
            <X className="h-5 w-5 text-gray-500" />
          </Button>
        </div>

        {/* Modal Body */}
        <div className="flex-1 overflow-hidden">
          <div className="h-full flex flex-col p-6 space-y-4 overflow-y-auto">
            {/* To Field */}
            <div className="flex-none">
              <Label htmlFor="to">To</Label>
              <Input
                id="to"
                value={composeTo}
                onChange={(e) => setComposeTo(e.target.value)}
                placeholder="Recipients"
                className="mt-1"
              />
            </div>

            {/* Cc Field */}
            {showCc && (
              <div className="flex-none">
                <Label htmlFor="cc">Cc</Label>
                <Input
                  id="cc"
                  value={composeCc}
                  onChange={(e) => setComposeCc(e.target.value)}
                  placeholder="Carbon copy"
                  className="mt-1"
                />
              </div>
            )}

            {/* Bcc Field */}
            {showBcc && (
              <div className="flex-none">
                <Label htmlFor="bcc">Bcc</Label>
                <Input
                  id="bcc"
                  value={composeBcc}
                  onChange={(e) => setComposeBcc(e.target.value)}
                  placeholder="Blind carbon copy"
                  className="mt-1"
                />
              </div>
            )}

            {/* Subject Field */}
            <div className="flex-none">
              <Label htmlFor="subject">Subject</Label>
              <Input
                id="subject"
                value={composeSubject}
                onChange={(e) => setComposeSubject(e.target.value)}
                placeholder="Subject"
                className="mt-1"
              />
            </div>

            {/* Message Body */}
            <div className="flex-1 min-h-0">
              <div
                ref={composeBodyRef}
                onInput={handleInput}
                className="h-full"
                style={{ overflowY: 'auto' }}
              />
            </div>

            {/* Attachments */}
            {attachments.length > 0 && (
              <div className="flex-none">
                <div className="flex flex-wrap gap-2">
                  {attachments.map((attachment, index) => (
                    <div
                      key={index}
                      className="flex items-center gap-2 bg-gray-100 px-3 py-1 rounded-full text-sm"
                    >
                      <Paperclip className="h-4 w-4 text-gray-500" />
                      <span>{attachment.name}</span>
                      <button
                        onClick={() => {
                          const newAttachments = [...attachments];
                          newAttachments.splice(index, 1);
                          setAttachments(newAttachments);
                        }}
                        className="text-gray-500 hover:text-gray-700"
                      >
                        <X className="h-4 w-4" />
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Action Buttons */}
            <div className="flex-none flex items-center justify-between pt-4 border-t border-gray-200">
              <div className="flex items-center gap-2">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => {
                    const input = document.createElement('input');
                    input.type = 'file';
                    input.multiple = true;
                    input.onchange = (e) => handleFileAttachment(e as any);
                    input.click();
                  }}
                >
                  <Paperclip className="h-4 w-4 mr-2" />
                  Attach
                </Button>
                {!showCc && (
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setShowCc(true)}
                  >
                    Cc
                  </Button>
                )}
                {!showBcc && (
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setShowBcc(true)}
                  >
                    Bcc
                  </Button>
                )}
              </div>
              <div className="flex items-center gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={onCancel}
                >
                  Cancel
                </Button>
                <Button
                  size="sm"
                  onClick={handleSend}
                >
                  Send
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 