// =====================================================
// CreateNewDashboardDialog.tsx
// Neues Board: nur Name ODER aus Template klonen (Autocomplete)
// - Bei Template: Name wird vom Template übernommen (Feld disabled)
// Trigger mit subtiler IconButton-UX
// Modern/minimal UI (Outlined-Fields)
// =====================================================

import React, { useEffect, useMemo, useState } from 'react';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import { Trans, t } from '@lingui/macro';
import { i18n } from '@lingui/core';
import Autocomplete from '@mui/material/Autocomplete';
import AddOutlinedIcon from '@mui/icons-material/AddOutlined';
import axios from 'B/axios';

type SharedTemplate = { id: number; name: string };

interface CreateNewDashboardDialogProps {
  /**
   * Optional: Parent kontrolliert Öffnen/Schließen (z. B. SettingDialog).
   * Wenn gesetzt, sollte hideTrigger=true verwendet werden.
   */
  open?: boolean;
  /** Callback bei Close (Cancel oder nach erfolgreichem Submit). */
  onClose?: () => void;
  /** Unterdrückt den IconButton-Trigger, damit externe Trigger genutzt werden können. */
  hideTrigger?: boolean;
}

const CreateNewDashboardDialog: React.FC<CreateNewDashboardDialogProps> = ({
  open: openProp,
  onClose,
  hideTrigger = false,
}) => {
  const isControlled = typeof openProp === 'boolean';
  const [internalOpen, setInternalOpen] = useState(false);
  const open = isControlled ? !!openProp : internalOpen;

  // Name + Template
  const [dashName, setDashName] = useState('');
  const [templates, setTemplates] = useState<SharedTemplate[]>([]);
  const [selectedTemplate, setSelectedTemplate] = useState<SharedTemplate | null>(null);

  // UI-State
  const [loadingTemplates, setLoadingTemplates] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [loadError, setLoadError] = useState<string | null>(null);

  // Wenn Template gewählt ist, reicht das für Submit; sonst Name nötig
  const isReadyToSubmit = useMemo(
    () => !!selectedTemplate || dashName.trim().length > 0,
    [selectedTemplate, dashName]
  );

  // Templates beim Öffnen laden
  useEffect(() => {
    if (!open) return;

    let mounted = true;
    (async () => {
      try {
        setLoadingTemplates(true);
        setLoadError(null);
        const res = await axios.get<SharedTemplate[]>('/dashboard/shared');
        if (!mounted) return;
        setTemplates(Array.isArray(res.data) ? res.data : []);
      } catch (err) {
        if (!mounted) return;
        setTemplates([]);
        setLoadError(i18n._(t`Could not load templates.`));
      } finally {
        if (mounted) setLoadingTemplates(false);
      }
    })();

    return () => {
      mounted = false;
    };
  }, [open]);

  const resetState = () => {
    setDashName('');
    setSelectedTemplate(null);
    setSubmitting(false);
  };

  const handleClose = () => {
    resetState();
    if (!isControlled) setInternalOpen(false);
    onClose?.();
  };

  const handleSubmit = async () => {
    if (!isReadyToSubmit || submitting) return;

    try {
      setSubmitting(true);

      if (selectedTemplate) {
        await axios.post('/dashboard/clone', { fromDashboardId: selectedTemplate.id });
        window.location.reload();
        return;
      }

      await axios.post('/dashboard/create', { name: dashName.trim() });
      window.location.reload();
    } catch (err) {
      try {
        if (!selectedTemplate) {
          await axios.post('/create-dash-config', { dashName: dashName.trim() });
          window.location.reload();
        } else {
          setSubmitting(false);
        }
      } catch {
        setSubmitting(false);
      }
    }
  };

  return (
    <>
      {!hideTrigger && !isControlled && (
        <Tooltip title={i18n._(t`Create new dashboard`)}>
          <IconButton
            aria-label={i18n._(t`Create new dashboard`)}
            onClick={() => setInternalOpen(true)}
            size="small"
          >
            <AddOutlinedIcon />
          </IconButton>
        </Tooltip>
      )}

      <Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm">
        <DialogTitle>
          <Trans>Create new dashboard</Trans>
        </DialogTitle>

        <DialogContent>
          <TextField
            margin="dense"
            label={<Trans>Dashboard name</Trans>}
            variant="outlined"
            fullWidth
            value={dashName}
            onChange={(e) => setDashName(e.target.value)}
            autoFocus={!selectedTemplate}
            disabled={!!selectedTemplate}
            helperText={
              selectedTemplate
                ? i18n._(t`The name will be taken from the selected template.`)
                : undefined
            }
          />

          <Divider style={{ margin: '12px 0' }} />

          <Autocomplete
            options={templates}
            loading={loadingTemplates}
            getOptionLabel={(opt) => opt?.name ?? ''}
            value={selectedTemplate}
            onChange={(_, val) => setSelectedTemplate(val)}
            clearOnEscape
            disableClearable={false}
            renderInput={(params) => (
              <TextField
                {...params}
                variant="outlined"
                margin="dense"
                label={<Trans>Template (Shared)</Trans>}
                placeholder={i18n._(t`Search template…`)}
                helperText={
                  loadError
                    ? loadError
                    : i18n._(t`Optional. If selected, the dashboard will be cloned from this template.`)
                }
              />
            )}
            noOptionsText={loadingTemplates ? i18n._(t`Loading…`) : i18n._(t`No templates`)}
          />
        </DialogContent>

        <DialogActions>
          <Button onClick={handleClose} color="primary">
            <Trans>Cancel</Trans>
          </Button>
          <Button
            onClick={handleSubmit}
            color="primary"
            variant="contained"
            disableElevation
            disabled={!isReadyToSubmit || submitting}
          >
            <Trans>Create dashboard</Trans>
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
};

export default CreateNewDashboardDialog;