import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import Chip from '@mui/material/Chip';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import AddIcon from '@mui/icons-material/Add';
import EditIcon from '@mui/icons-material/Edit';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import PoolIcon from '@mui/icons-material/Pool';
import { Trans, t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { extractErrorMessage } from '../utils/errorHandler';
import { useBecken } from '../hooks/useBecken';
import { useFeatureFlag } from '../hooks/useFeatureFlag';
import LoadingState from '../components/shared/LoadingState';
import EmptyState from '../components/shared/EmptyState';
import DepartmentSelector from '../components/shared/DepartmentSelector';
import ConfirmDialog, { useConfirmDialog } from '../components/shared/ConfirmDialog';
import BeckenModal from '../components/class/BeckenModal';
import BeckenSwimLaneView from '../components/class/BeckenSwimLaneView';
import type { Becken } from '../types/class';
import type { Department } from '../types/shift';

const getUrlParam = (key: string): string | null =>
  new URLSearchParams(window.location.search).get(key);

const setUrlParam = (key: string, value: string | number): void => {
  const params = new URLSearchParams(window.location.search);
  params.set(key, String(value));
  const newUrl: string = `${window.location.pathname}?${params.toString()}${window.location.hash}`;
  window.history.replaceState(null, '', newUrl);
};

const BeckenTab: React.FC = () => {
  const { i18n } = useLingui();
  const { enabled: flagEnabled, loading: flagLoading } = useFeatureFlag('classes_v1');
  const { confirm, dialogProps } = useConfirmDialog();

  const [departments, setDepartments] = useState<Department[]>([]);
  const [selectedDepartment, setSelectedDepartment] = useState<number | ''>(() => {
    const urlDept: string | null = getUrlParam('department');
    return urlDept ? parseInt(urlDept, 10) : '';
  });

  const { becken, loading, save, remove } = useBecken(selectedDepartment);
  const [modalOpen, setModalOpen] = useState<boolean>(false);
  const [editing, setEditing] = useState<Becken | null>(null);
  const [subTab, setSubTab] = useState<0 | 1>(0);

  useEffect(() => {
    if (!flagEnabled) return;
    const load = async (): Promise<void> => {
      try {
        const response = await axios.get('/zeiterfassung/departments');
        const deps: Department[] = Array.isArray(response.data) ? response.data : [];
        setDepartments(deps);
        if (deps.length > 0 && selectedDepartment === '') {
          const firstId: number = deps[0].ber_id;
          setSelectedDepartment(firstId);
          setUrlParam('department', firstId);
        }
      } catch (err) {
        console.error('Failed to load departments', err);
      }
    };
    load();
  }, [flagEnabled, selectedDepartment]);

  const handleDepartmentChange = (id: number | ''): void => {
    setSelectedDepartment(id);
    if (id !== '') setUrlParam('department', id);
  };

  const handleCreate = (): void => {
    setEditing(null);
    setModalOpen(true);
  };

  const handleEdit = (b: Becken): void => {
    setEditing(b);
    setModalOpen(true);
  };

  const handleDelete = async (b: Becken): Promise<void> => {
    const ok: boolean = await confirm({
      title: i18n._(t`Becken löschen`),
      message: i18n._(t`Möchten Sie das Becken "${b.zb_name}" wirklich löschen?`),
      color: 'error',
    });
    if (!ok) return;
    await remove(b.zb_id);
  };

  if (flagLoading) {
    return <LoadingState />;
  }

  if (!flagEnabled) {
    return (
      <Paper sx={{ p: 4, m: 3 }}>
        <Typography variant="body1" color="text.secondary">
          <Trans>Klassen sind deaktiviert.</Trans>
        </Typography>
      </Paper>
    );
  }

  return (
    <Box sx={{ flex: 1, p: 3 }}>
      <Paper sx={{ p: 3, mb: 2 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
          <Typography variant="h5" fontWeight={600} sx={{ flex: 1 }}>
            <Trans>Becken</Trans>
          </Typography>
          <DepartmentSelector
            departments={departments}
            selectedDepartment={selectedDepartment}
            onSelect={handleDepartmentChange}
            required
          />
          {subTab === 0 && (
            <Button
              variant="contained"
              color="primary"
              startIcon={<AddIcon />}
              onClick={handleCreate}
              disabled={selectedDepartment === ''}
            >
              <Trans>Neues Becken</Trans>
            </Button>
          )}
        </Box>
        <Tabs
          value={subTab}
          onChange={(_e, val: 0 | 1) => setSubTab(val)}
          sx={{ mt: 2, borderBottom: 1, borderColor: 'divider' }}
        >
          <Tab label={i18n._(t`Becken verwalten`)} value={0} />
          <Tab label={i18n._(t`Wochenübersicht`)} value={1} />
        </Tabs>
      </Paper>

      {subTab === 1 && selectedDepartment !== '' && typeof selectedDepartment === 'number' && (
        <BeckenSwimLaneView berId={selectedDepartment} />
      )}

      {subTab === 0 && loading && <LoadingState />}

      {subTab === 0 && !loading && selectedDepartment !== '' && becken.length === 0 && (
        <EmptyState
          icon={PoolIcon}
          title={i18n._(t`Keine Becken vorhanden`)}
          message={i18n._(t`Legen Sie das erste Becken für diesen Bereich an.`)}
          actionLabel={i18n._(t`Neues Becken`)}
          onAction={handleCreate}
        />
      )}

      {subTab === 0 && !loading && becken.length > 0 && (
        <Box
          sx={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
            gap: 2,
          }}
        >
          {becken.map((b: Becken) => (
            <Paper
              key={b.zb_id}
              sx={{
                p: 2,
                display: 'flex',
                flexDirection: 'column',
                gap: 1,
                borderLeft: '4px solid',
                borderLeftColor: b.zb_color || '#0099ff',
                cursor: 'pointer',
                transition: 'all 0.2s ease',
                '&:hover': {
                  boxShadow: 3,
                },
              }}
              onClick={() => handleEdit(b)}
            >
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                <Box
                  sx={{
                    width: 16,
                    height: 16,
                    borderRadius: '50%',
                    backgroundColor: b.zb_color || '#0099ff',
                    flexShrink: 0,
                  }}
                />
                <Typography variant="subtitle1" fontWeight={600} sx={{ flex: 1 }}>
                  {b.zb_name}
                </Typography>
                {b.zb_active ? (
                  <Chip size="small" label={i18n._(t`Aktiv`)} color="success" variant="outlined" />
                ) : (
                  <Chip size="small" label={i18n._(t`Inaktiv`)} variant="outlined" />
                )}
              </Box>
              {b.zb_short_code && (
                <Typography variant="body2" color="text.secondary">
                  <Trans>Kürzel</Trans>: <strong>{b.zb_short_code}</strong>
                </Typography>
              )}
              <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 1 }}>
                <IconButton
                  size="small"
                  onClick={(e) => {
                    e.stopPropagation();
                    handleEdit(b);
                  }}
                >
                  <EditIcon fontSize="small" />
                </IconButton>
                <IconButton
                  size="small"
                  color="error"
                  onClick={(e) => {
                    e.stopPropagation();
                    handleDelete(b);
                  }}
                >
                  <DeleteOutlineIcon fontSize="small" />
                </IconButton>
              </Box>
            </Paper>
          ))}
        </Box>
      )}

      <BeckenModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        initial={editing}
        onSave={save}
      />

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

export default BeckenTab;