import React, { useState } from "react";
import MessageList from "./DashboardChatAreaMessageList";

import InputArea from "./DashboardChatAreaInput";
import ConnectedFiles from "./DashboardChatAreaConnectedFiles";
import { DashboardChatAreaProps } from "./dashboardChatAreaTypes";
import styles from './DashboardChatAreaStyles/DashboardChat.module.css';

const DashboardChatArea: React.FC<DashboardChatAreaProps> = ({ 
  workflowState,
  workflowActions
}) => {
  const [selectedFile, setSelectedFile] = useState<any>(null);
  const [attachedFiles, setAttachedFiles] = useState<any[]>([]);

  return (
    <div className={styles.chat_grid}>
      {/* Top Left: Message List */}
      <div className={`${styles.quadrant} ${styles.messages_quadrant}`}>
                <MessageList 
          workflowState={workflowState}
        />
      </div>

      {/*Top Right: File Preview (disabled for now)
      <div className={`${styles.quadrant} ${styles.file_preview_quadrant}`}>
        <FilePreview selectedFile={selectedFile} />
      </div>
      */}

      {/* Bottom Left: Input Area */}
      <div className={`${styles.quadrant} ${styles.input_quadrant}`}>
        <InputArea
          workflowState={workflowState}
          workflowActions={workflowActions}
          attachedFiles={attachedFiles}
          onAttachedFilesChange={setAttachedFiles}
        />
      </div>

      {/* Bottom Right: Connected Files */}
      <div className={`${styles.quadrant} ${styles.connected_files_quadrant}`}>
        <ConnectedFiles 
          onFileSelect={setSelectedFile}
          selectedFile={selectedFile}
          attachedFiles={attachedFiles}
          onRemoveFile={(fileId) => {
            // If the removed file is currently selected, clear the selection
            if (selectedFile?.id === fileId) {
              setSelectedFile(null);
            }
            // Remove the file from attached files
            setAttachedFiles(files => files.filter(f => f.id !== fileId));
          }}
        />
      </div>
    </div>
  );
};

export default DashboardChatArea;