// resources/assets/ts/ContactsPage/components/NotizenDateiTab/NotizenDateiTab.tsx

import React, { useState } from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import {
  Add as AddIcon,
  NoteAdd as NoteAddIcon,
  Upload as UploadIcon,
} from '@mui/icons-material';
import NotizenList from './NotizenList';
import DateiList from './DateiList';
import DateiUpload from './DateiUpload';
import NotizenDialog from './NotizenDialog';
import AlleNotizenDatei from './AlleNotizenDatei';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';

interface NotizenDateiTabProps {
  contactId: number;
  csrfToken: string;
  currentUser: string;
}

type ContentView = 'list' | 'upload';
type FilterTab = 'alle' | 'notizen' | 'dateien';

const NotizenDateiTab: React.FC<NotizenDateiTabProps> = ({
  contactId,
  csrfToken,
  currentUser,
}) => {
  const { i18n } = useLingui();
  const [contentView, setContentView] = useState<ContentView>('list');
  const [filterTab, setFilterTab] = useState<FilterTab>('alle');
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [notizenDialogOpen, setNotizenDialogOpen] = useState(false);
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const handleMenuSelect = (action: 'notiz' | 'datei') => {
    if (action === 'notiz') {
      setNotizenDialogOpen(true);
    } else {
      setContentView('upload');
    }
    handleMenuClose();
  };

  const handleNotizenSuccess = () => {
    setNotizenDialogOpen(false);
    setContentView('list');
    setFilterTab('notizen');
    setRefreshTrigger(prev => prev + 1);
  };

  const handleFileUploadSuccess = () => {
    setContentView('list');
    setFilterTab('dateien');
    setRefreshTrigger(prev => prev + 1);
  };

  const handleFilterChange = (event: React.SyntheticEvent, newValue: FilterTab) => {
    setFilterTab(newValue);
  };

  return (
    <Box sx={{ width: '100%', height: '600px' }}>
      {/* Header with Action Button and Filters */}
      <Box sx={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center',
        mb: 2,
        gap: 2,
      }}>
        {/* Filter Tabs - Only show in list view */}
        {contentView === 'list' && (
          <Tabs
            value={filterTab}
            onChange={handleFilterChange}
            aria-label={i18n._(msg`filter tabs`)}
          >
            <Tab label={i18n._(msg`All`)} value="alle" />
            <Tab label={i18n._(msg`Notes`)} value="notizen" />
            <Tab label={i18n._(msg`Files`)} value="dateien" />
          </Tabs>
        )}

        {/* Back button when in upload view */}
        {contentView === 'upload' && (
          <Button
            variant="outlined"
            onClick={() => setContentView('list')}
            startIcon={<AddIcon sx={{ transform: 'rotate(45deg)' }} />}
          >
            <Trans>Back to list</Trans>
          </Button>
        )}

        {/* Spacer */}
        <Box sx={{ flexGrow: 1 }} />

        {/* Hinzufügen Button - Only show in list view */}
        {contentView === 'list' && (
          <>
            <Button
              variant="contained"
              startIcon={<AddIcon />}
              onClick={handleMenuClick}
              sx={{ minWidth: 150, textTransform: 'none' }}
            >
              <Trans>Add</Trans>
            </Button>

            <Menu
              anchorEl={anchorEl}
              open={Boolean(anchorEl)}
              onClose={handleMenuClose}
            >
              <MenuItem onClick={() => handleMenuSelect('notiz')}>
                <NoteAddIcon sx={{ mr: 1 }} />
                <Trans>Add note</Trans>
              </MenuItem>
              <MenuItem onClick={() => handleMenuSelect('datei')}>
                <UploadIcon sx={{ mr: 1 }} />
                <Trans>Upload file</Trans>
              </MenuItem>
            </Menu>
          </>
        )}
      </Box>

      {/* Content Area */}
      <Box sx={{ height: 'calc(100% - 60px)', overflow: 'auto' }}>
        {contentView === 'list' ? (
          <Box sx={{ height: '100%' }}>
            {/* ✅ Alle tab - mixed timeline */}
            {filterTab === 'alle' && (
              <AlleNotizenDatei
                contactId={contactId}
                csrfToken={csrfToken}
                currentUser={currentUser}
                refreshTrigger={refreshTrigger}
              />
            )}
            
            {/* Notizen only tab */}
            {filterTab === 'notizen' && (
              <NotizenList
                contactId={contactId}
                csrfToken={csrfToken}
                currentUser={currentUser}
                refreshTrigger={refreshTrigger}
              />
            )}
            
            {/* Dateien only tab */}
            {filterTab === 'dateien' && (
              <DateiList
                contactId={contactId}
                csrfToken={csrfToken}
                currentUser={currentUser}
                refreshTrigger={refreshTrigger}
              />
            )}
          </Box>
        ) : (
          <DateiUpload
            contactId={contactId}
            csrfToken={csrfToken}
            onSuccess={handleFileUploadSuccess}
            onCancel={() => setContentView('list')}
          />
        )}
      </Box>

      {/* Notizen Dialog - for creating new notizen */}
      <NotizenDialog
        open={notizenDialogOpen}
        onClose={() => setNotizenDialogOpen(false)}
        onSuccess={handleNotizenSuccess}
        contactId={contactId}
        csrfToken={csrfToken}
        currentUser={currentUser}
      />
    </Box>
  );
};

export default NotizenDateiTab;