import React from 'react';
import { Grid } from '@mantine/core';
import FileSourceButtons from '@app/components/fileManager/FileSourceButtons';
import FileDetails from '@app/components/fileManager/FileDetails';
import SearchInput from '@app/components/fileManager/SearchInput';
import FileListArea from '@app/components/fileManager/FileListArea';
import FileActions from '@app/components/fileManager/FileActions';
import HiddenFileInput from '@app/components/fileManager/HiddenFileInput';
import { useFileManagerContext } from '@app/contexts/FileManagerContext';

const DesktopLayout: React.FC = () => {
  const {
    activeSource,
    recentFiles,
    modalHeight,
  } = useFileManagerContext();

  return (
    <Grid gutter="xs" h="100%" grow={false} style={{ flexWrap: 'nowrap', minWidth: 0 }}>
      {/* Column 1: File Sources */}
      <Grid.Col span="content" p="lg" style={{
        minWidth: '13.625rem',
        width: '13.625rem',
        flexShrink: 0,
        height: '100%',
      }} data-tour="file-sources">
        <FileSourceButtons />
      </Grid.Col>

      {/* Column 2: File List */}
      <Grid.Col span="auto" style={{
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        minHeight: 0,
        minWidth: 0,
        flex: '1 1 0px'
      }}>
        <div style={{
          flex: 1,
          display: 'flex',
          flexDirection: 'column',
          backgroundColor: 'var(--bg-file-list)',
          border: '1px solid var(--mantine-color-gray-2)',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
          overflow: 'hidden'
        }}>
          {activeSource === 'recent' && (
            <>
              <div style={{
                flexShrink: 0,
                borderBottom: '1px solid var(--mantine-color-gray-3)'
              }}>
                <SearchInput />
              </div>
              <div style={{
                flexShrink: 0,
                borderBottom: '1px solid var(--mantine-color-gray-3)'
              }}>
                <FileActions />
              </div>
            </>
          )}

          <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
            <FileListArea
              scrollAreaHeight={activeSource === 'recent' && recentFiles.length > 0
                ? `calc(${modalHeight} - 7rem)`
                : '100%'}
              scrollAreaStyle={{
                height: activeSource === 'recent' && recentFiles.length > 0
                  ? `calc(${modalHeight} - 7rem)`
                  : '100%',
                backgroundColor: 'transparent',
                border: 'none',
                borderRadius: 0
              }}
            />
          </div>
        </div>
      </Grid.Col>

      {/* Column 3: File Details */}
      <Grid.Col p="xl" span="content" style={{
        minWidth: '25rem',
        width: '25rem',
        flexShrink: 0,
        height: '100%',
        maxWidth: '18rem'
      }}>
        <div style={{ height: '100%', overflow: 'hidden' }}>
          <FileDetails />
        </div>
      </Grid.Col>

      {/* Hidden file input for local file selection */}
      <HiddenFileInput />
    </Grid>
  );
};

export default DesktopLayout;