import React, { useState } from 'react';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import type { MessageDescriptor } from '@lingui/core';

import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import styled from 'styled-components';
import { QRCodeSVG } from 'qrcode.react';

const LocalDialog = styled(Dialog)`
  .MuiPaper-root {
    min-width: 800px;
    max-width: 800px;
    min-height: 400px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
  }

  .MuiDialogContent-root {
    overflow-y: auto;
  }
`;

const actionButtonStyles = { 
  backgroundColor: '#EDEDED',
  '&:hover': {
    backgroundColor: '#E0E0E0',
  },
};

const qrTabStyles = {
  fontSize: 20,
  textTransform: 'none',
  fontWeight: 500,
  color: '#73797E',
  '&.Mui-selected': {
    color: '#0099FF',
    fontWeight: 500,
  },
  '&:hover': {
    backgroundColor: 'rgba(21, 101, 192, 0.05)',
  },
} as const;

type NFCBarcodePreviewProps = {
  open: boolean;
  text?: MessageDescriptor;
  internalUrl?: string;
  externalUrl?: string;
  internalTabTitle?: MessageDescriptor;
  externalTabTitle?: MessageDescriptor;
  internalHeading?: MessageDescriptor;
  externalHeading?: MessageDescriptor;
  internalText?: MessageDescriptor | React.ReactNode;
  externalText?: MessageDescriptor | React.ReactNode;
  qrSize?: number;
  onClose: () => void;
  onDownloadInternal: () => void;
  onDownloadExternal: () => void;
  downloadInternalDisabled?: boolean;
  downloadExternalDisabled?: boolean;
};

export default function NFCBarcodePreview({
  open,
  text,
  internalUrl = '',
  externalUrl = '',
  internalTabTitle = msg`QR-Code für TASKO-App`,
  externalTabTitle = msg`QR-Code für externe Nutzung`,
  internalHeading = msg`Hinweis zur QR-Code-Nutzung`,
  externalHeading = msg`Hinweis zur QR-Code-Nutzung`,
  internalText = msg`Dieser QR-Code ist exklusiv für die Nutzung innerhalb der TASKO-App reserviert. Der Scan mit der TASKO-App führt direkt zu dieser Aufgabe.`,
  externalText,
  qrSize = 220,
  onClose,
  onDownloadInternal,
  onDownloadExternal,
  downloadInternalDisabled = false,
  downloadExternalDisabled = false,
}: NFCBarcodePreviewProps) {
  const [activeTab, setActiveTab] = useState(0);
  const { i18n } = useLingui();

  const showingInternal = activeTab === 0;
  const currentUrl = showingInternal ? internalUrl : externalUrl;
  const currentQrId = showingInternal ? 'nfc-qr-internal' : 'nfc-qr-external';
  const currentHeading = i18n._(showingInternal ? internalHeading : externalHeading);
  const defaultExternalText = (
    <>
      <DialogContentText sx={{ mb: 1.5 }}>
        <Trans>
          Dieser QR-Code ist für die <strong>Nutzung ohne TASKO-App-Login</strong> via Smartphone-Kamera
          vorgesehen. Aufgaben lassen sich so direkt erfassen.
        </Trans>
      </DialogContentText>
      <DialogContentText sx={{ mb: 1.5 }}>
        <Trans>
          Bitte aktivieren Sie rechts die Option „<strong>Extern erreichbar</strong>“.
        </Trans>
      </DialogContentText>
    </>
  );
  const currentText = showingInternal ? internalText : externalText ?? defaultExternalText;
  const currentDownload = showingInternal ? onDownloadInternal : onDownloadExternal;
  const currentDisabled = showingInternal
    ? downloadInternalDisabled || !internalUrl
    : downloadExternalDisabled || !externalUrl;

  const isMessageDescriptor = (
    value: MessageDescriptor | React.ReactNode
  ): value is MessageDescriptor => {
    return (
      typeof value === 'object' &&
      value !== null &&
      !React.isValidElement(value) &&
      'id' in value
    );
  };

  const renderText = (value: MessageDescriptor | React.ReactNode) => {
    if (isMessageDescriptor(value) || typeof value === 'string') {
      const normalizedText = (isMessageDescriptor(value) ? i18n._(value) : value).replace(/\\n/g, '\n');
      const paragraphs = normalizedText
        .split(/\n\s*\n/)
        .map((p) => p.trim())
        .filter((p) => p.length > 0);

      return paragraphs.map((paragraph, idx) => (
        <DialogContentText key={idx} sx={{ mb: 1.5 }}>
          {paragraph}
        </DialogContentText>
      ));
    }

    return value;
  };

  return (
    <LocalDialog open={open} onClose={onClose}>
      <DialogContent>
        {!!text && <DialogContentText sx={{ whiteSpace: 'pre-line' }}>{i18n._(text)}</DialogContentText>}

        <Box sx={{ borderBottom: 1, borderColor: 'divider', mt: 1 }}>
          <Tabs
            value={activeTab}
            onChange={(_, val) => setActiveTab(val)}
            variant='fullWidth'
            sx={{
              '& .MuiTabs-indicator': {
                backgroundColor: '#0099FF',
                height: 3,
              },
            }}
          >
            <Tab label={i18n._(internalTabTitle)} sx={qrTabStyles} />
            <Tab label={i18n._(externalTabTitle)} sx={qrTabStyles} />
          </Tabs>
        </Box>

        <div
          style={{
            display: 'flex',
            gap: 28,
            alignItems: 'flex-start',
            paddingTop: 22,
            flexWrap: 'wrap',
            justifyContent: 'center',
          }}
        >
          <div style={{ minWidth: 260, display: 'flex', justifyContent: 'center' }}>
            {currentUrl && (
              <QRCodeSVG id={currentQrId} value={currentUrl} size={qrSize} includeMargin={true} />
            )}
          </div>

          <div style={{ maxWidth: 380, minWidth: 280 }}>
            <div style={{ fontWeight: 700, marginBottom: 10 }}>{currentHeading}</div>
            <div style={{ marginBottom: 16 }}>
              {renderText(currentText)}
            </div>
          </div>
        </div>
      </DialogContent>

      <DialogActions sx={{ justifyContent: 'flex-end', gap: 7, px: 5, pb: 2, pt: 1 }}>
        <Button
          onClick={onClose}
          sx={{
            ...actionButtonStyles,
            color: '#E20202',
            minWidth: 150,
          }}
        >
          <Trans>Close</Trans>
        </Button>
        <Button
          onClick={currentDownload}
          disabled={currentDisabled}
          sx={{
            ...actionButtonStyles,
            color: '#73797E',
            minWidth: 150,
          }}
        >
          <Trans>Download</Trans>
        </Button>
      </DialogActions>
    </LocalDialog>
  );
}