import React, { useState } from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Alert from '@mui/material/Alert';
import CircularProgress from '@mui/material/CircularProgress';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Paper from '@mui/material/Paper';
import SaveIcon from '@mui/icons-material/Save';
import RestoreIcon from '@mui/icons-material/Restore';
import { Trans, t } from '@lingui/macro';
import { useLingui } from '@lingui/react';

import useCompanySettings from '../hooks/useCompanySettings';
import ConfirmDialog, { useConfirmDialog } from '../components/shared/ConfirmDialog';
import {
  TabPanel,
  WorkTimeParametersTab,
  OrganisationHardwareTab,
  NotificationsTab,
  ArbZGDisclaimerDialog,
} from '../components/companySettings';

const CompanySettingsTab: React.FC = () => {
  const { i18n } = useLingui();
  const { confirm, dialogProps } = useConfirmDialog();
  const [activeTab, setActiveTab] = useState(0);

  const {
    settings,
    loading,
    saving,
    successMessage,
    errorMessage,
    validationWarnings,
    getUnit,
    handleChange,
    handleSave,
    handleReset,
    handleDisableArbzgToggle,
    handleConfirmDisableArbzg,
    disableArbzgDialogOpen,
    setDisableArbzgDialogOpen,
    setSuccessMessage,
    setErrorMessage,
  } = useCompanySettings({ confirm });

  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
    setActiveTab(newValue);
  };

  if (loading) {
    return (
      <Box display="flex" justifyContent="center" alignItems="center" minHeight="400px">
        <CircularProgress />
      </Box>
    );
  }

  if (!settings) {
    return (
      <Box p={3}>
        <Alert severity="error">
          <Trans>Fehler beim Laden der Einstellungen</Trans>
        </Alert>
      </Box>
    );
  }

  return (
    <Box sx={{ flex: 1, py: 3, px: 2, overflow: 'auto' }}>
      {/* Main card container */}
      <Paper
        elevation={0}
        sx={{
          maxWidth: { xs: '100%', sm: 700, md: 900 },
          mx: 'auto',
          mb: 2,
          borderRadius: 2,
          border: '1px solid',
          borderColor: 'divider',
        }}
      >
        {/* Header */}
        <Box sx={{ px: 3, pt: 3, pb: 2 }}>
          <Typography variant="h5" fontWeight="600">
            <Trans>Firmeneinstellungen</Trans>
          </Typography>
        </Box>

        {successMessage && (
          <Box sx={{ px: 3 }}>
            <Alert severity="success" onClose={() => setSuccessMessage('')} sx={{ mb: 2 }}>
              {successMessage}
            </Alert>
          </Box>
        )}

        {errorMessage && (
          <Box sx={{ px: 3 }}>
            <Alert severity="error" onClose={() => setErrorMessage('')} sx={{ mb: 2 }}>
              {errorMessage}
            </Alert>
          </Box>
        )}

        {validationWarnings.length > 0 && (
          <Box sx={{ px: 3 }}>
            <Alert severity="warning" sx={{ mb: 2 }}>
              <Typography variant="body2" fontWeight="bold" gutterBottom>
                <Trans>ArbZG-Konformitätswarnungen:</Trans>
              </Typography>
              <Box component="ul" sx={{ margin: 0, paddingLeft: '20px' }}>
                {validationWarnings.map((warning, index) => (
                  <li key={index}>
                    <Typography variant="caption">{warning}</Typography>
                  </li>
                ))}
              </Box>
            </Alert>
          </Box>
        )}

        {/* Tabs */}
        <Box sx={{ px: 3, borderBottom: '1px solid', borderColor: 'divider' }}>
          <Tabs
            value={activeTab}
            onChange={handleTabChange}
            aria-label="company settings tabs"
            sx={{
              '& .MuiTab-root': {
                textTransform: 'none',
                minWidth: 120,
              },
            }}
          >
            <Tab
              label={i18n._(t`Arbeitszeitparameter`)}
              id="company-settings-tab-0"
              aria-controls="company-settings-tabpanel-0"
            />
            <Tab
              label={i18n._(t`Organisation & Hardware`)}
              id="company-settings-tab-1"
              aria-controls="company-settings-tabpanel-1"
            />
            <Tab
              label={i18n._(t`Benachrichtigungen`)}
              id="company-settings-tab-2"
              aria-controls="company-settings-tabpanel-2"
            />
          </Tabs>
        </Box>

        {/* Tab content */}
        <Box sx={{ px: 3, pb: 3 }}>
          <TabPanel value={activeTab} index={0}>
            <WorkTimeParametersTab
              settings={settings}
              getUnit={getUnit}
              onChange={handleChange}
              onToggleArbzg={handleDisableArbzgToggle}
            />
          </TabPanel>
          <TabPanel value={activeTab} index={1}>
            <OrganisationHardwareTab settings={settings} onChange={handleChange} />
          </TabPanel>
          <TabPanel value={activeTab} index={2}>
            <NotificationsTab settings={settings} getUnit={getUnit} onChange={handleChange} />
          </TabPanel>
        </Box>

        {/* Action Buttons */}
        <Box
          sx={{
            px: 3,
            py: 2,
            borderTop: '1px solid',
            borderColor: 'divider',
            display: 'flex',
            justifyContent: 'flex-end',
            gap: 2,
          }}
        >
          <Button
            variant="outlined"
            color="inherit"
            startIcon={<RestoreIcon />}
            onClick={handleReset}
            disabled={saving}
          >
            <Trans>Zurücksetzen</Trans>
          </Button>
          <Button
            variant="contained"
            color="primary"
            startIcon={saving ? <CircularProgress size={16} /> : <SaveIcon />}
            onClick={handleSave}
            disabled={saving}
          >
            <Trans>Speichern</Trans>
          </Button>
        </Box>
      </Paper>

      {/* Disclaimer Dialog */}
      <ArbZGDisclaimerDialog
        open={disableArbzgDialogOpen}
        onClose={() => setDisableArbzgDialogOpen(false)}
        onConfirm={handleConfirmDisableArbzg}
      />

      <ConfirmDialog {...dialogProps} />
    </Box>
  );
};

export default CompanySettingsTab;