import { Button } from '@dynatrace/strato-components/buttons';
import {
  EmptyState,
  MessageContainer,
  ProgressCircle,
} from '@dynatrace/strato-components/content';
import { AppRoot } from '@dynatrace/strato-components/core';
import {
  FormField,
  Label,
  NumberInputV2,
  Select,
  Switch,
  TextInput,
} from '@dynatrace/strato-components/forms';
import { Divider, Flex } from '@dynatrace/strato-components/layouts';
import {
  showToast,
  ToastContainer,
} from '@dynatrace/strato-components/notifications';
import {
  Heading,
  Paragraph,
  Text,
} from '@dynatrace/strato-components/typography';
import {
  appSettingsObjectsClient,
  isErrorResponseError,
} from '@dynatrace-sdk/client-app-settings-v2';
import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';

// Matches the schemaId generated by "dt-app setting create" (<name>-connection).
const SCHEMA_ID = 'setting-name-connection';
const FORBIDDEN_STATUS = 403;
// Schema not yet registered on this environment (app not yet deployed).
const NOT_FOUND_STATUS = 404;

type Environment = 'development' | 'staging' | 'production';

interface SettingsValues {
  name: string;
  enabled: boolean;
  environment: Environment;
  retentionDays: number;
}

const DEFAULT_VALUES: SettingsValues = {
  name: '',
  enabled: true,
  environment: 'production',
  retentionDays: 30,
};

// `undefined` means "still loading" — no indicator is rendered for that state.
type SaveState = 'saving' | 'saved' | 'unsavedChanges' | undefined;

/** Section block: title + optional description line + divider, then fields. */
const SettingsSection = ({
  title,
  description,
  children,
}: {
  title: string;
  description?: string;
  children: React.ReactNode;
}) => (
  <Flex flexDirection="column" gap={16}>
    <Flex flexDirection="column" gap={4}>
      <Heading level={6}>{title}</Heading>
      {description && <Paragraph>{description}</Paragraph>}
    </Flex>
    <Divider />
    {children}
  </Flex>
);

const SettingNameSettingsWidget = () => {
  const [values, setValues] = useState<SettingsValues>(DEFAULT_VALUES);
  const [savedValues, setSavedValues] =
    useState<SettingsValues>(DEFAULT_VALUES);
  const [objectId, setObjectId] = useState<string>();
  const [version, setVersion] = useState<string>();
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [loadError, setLoadError] = useState(false);
  const [hasReadAccess, setHasReadAccess] = useState(true);
  const [isReadonly, setIsReadonly] = useState(false);

  useEffect(() => {
    loadSettings();
  }, []);

  const loadSettings = async () => {
    setIsLoading(true);
    setLoadError(false);
    try {
      // Default response fields are only "objectId" and "version" — addFields opts in the rest.
      const { items } = await appSettingsObjectsClient.getAppSettingsObjects({
        schemaId: SCHEMA_ID,
        addFields: 'value,resourceContext',
      });

      // "multiObject": false means at most one object is ever persisted for this schema.
      const [object] = items;
      if (object) {
        const loadedValues = {
          ...DEFAULT_VALUES,
          ...(object.value as Partial<SettingsValues>),
        };
        setValues(loadedValues);
        setSavedValues(loadedValues);
        setObjectId(object.objectId);
        setVersion(object.version);
        setIsReadonly(
          object.resourceContext?.operations.includes('write') === false,
        );
      }
    } catch (error) {
      if (
        isErrorResponseError(error) &&
        error.response.status === FORBIDDEN_STATUS
      ) {
        setHasReadAccess(false);
      } else if (
        isErrorResponseError(error) &&
        error.response.status === NOT_FOUND_STATUS
      ) {
        // Schema not registered yet — treat as no object; first Save will fail until deployed.
      } else {
        setLoadError(true);
      }
    } finally {
      setIsLoading(false);
    }
  };

  const isDirty = JSON.stringify(values) !== JSON.stringify(savedValues);
  const saveState: SaveState = isLoading
    ? undefined
    : isSaving
      ? 'saving'
      : isDirty
        ? 'unsavedChanges'
        : 'saved';

  const save = async () => {
    setIsSaving(true);
    try {
      if (objectId) {
        // The locking token is the object's "version" field — app-settings-v2 has no "updateToken".
        const updated =
          await appSettingsObjectsClient.putAppSettingsObjectByObjectId({
            objectId,
            optimisticLockingVersion: version ?? '',
            body: { value: values },
          });
        setVersion(updated.version);
      } else {
        // No object exists yet for this schema — create instead of update.
        const created = await appSettingsObjectsClient.postAppSettingsObject({
          body: { schemaId: SCHEMA_ID, value: values },
        });
        if (created) {
          setObjectId(created.objectId);
          setVersion(created.version);
        }
      }
      setSavedValues(values);
      showToast({ title: 'Settings saved', type: 'success' });
    } catch {
      // Keep the typed values — losing input on a transient save failure is the worst outcome.
      showToast({ title: 'Failed to save settings', type: 'critical' });
    } finally {
      setIsSaving(false);
    }
  };

  const discard = () => setValues(savedValues);

  return (
    // Dev-mode padding prevents the widget from sticking to the window edges during local dev.
    <Flex
      flexDirection="column"
      gap={16}
      style={
        process.env.NODE_ENV !== 'production' ? { padding: '16px' } : undefined
      }
    >
      <ToastContainer />
      <Flex
        flexDirection="row"
        alignItems="center"
        justifyContent="space-between"
        gap={8}
      >
        <Heading level={4}>[Settings Template]</Heading>
        <SaveIndicator saveState={saveState} isReadonly={isReadonly} />
      </Flex>
      <Paragraph>
        This is a template for new settings widgets. Replace this text with a
        description of what these settings control.
      </Paragraph>
      <Divider />
      {!hasReadAccess ? (
        <EmptyState>
          <EmptyState.VisualPreset context="generic" type="no-permission" />
          <EmptyState.Title>Missing permission</EmptyState.Title>
          <EmptyState.Details>
            You do not have permission to view these settings.
          </EmptyState.Details>
        </EmptyState>
      ) : (
        <Flex flexDirection="column" gap={16}>
          {isReadonly && (
            <MessageContainer variant="warning">
              <MessageContainer.Title>Read-only</MessageContainer.Title>
              <MessageContainer.Description>
                You do not have permission to change these settings.
              </MessageContainer.Description>
            </MessageContainer>
          )}
          {isLoading ? (
            <Flex flexDirection="row" justifyContent="center">
              <ProgressCircle aria-label="Loading settings" />
            </Flex>
          ) : loadError ? (
            <MessageContainer variant="critical">
              <MessageContainer.Title>
                Unable to load settings
              </MessageContainer.Title>
              <MessageContainer.Description>
                Reload the widget to try again. No changes have been saved.
              </MessageContainer.Description>
            </MessageContainer>
          ) : (
            <Flex flexDirection="column" gap={16}>
              {isDirty && !isReadonly && (
                <MessageContainer variant="primary">
                  <MessageContainer.Title>
                    Unsaved changes
                  </MessageContainer.Title>
                  <MessageContainer.Description>
                    Save your changes or discard them.
                  </MessageContainer.Description>
                  <MessageContainer.Actions>
                    <Flex flexDirection="row" gap={8}>
                      <Button
                        variant="emphasized"
                        color="primary"
                        onClick={save}
                        loading={isSaving}
                      >
                        Save
                      </Button>
                      <Button onClick={discard} disabled={isSaving}>
                        Discard
                      </Button>
                    </Flex>
                  </MessageContainer.Actions>
                </MessageContainer>
              )}
              {/* Sections are separated by a larger gap to create visual breathing room. */}
              <Flex flexDirection="column" gap={32}>
                <SettingsSection
                  title="General"
                  description="Example section — replace this title and fields with your own."
                >
                  <FormField>
                    <Label>Name</Label>
                    <TextInput
                      value={values.name}
                      onChange={(value) =>
                        setValues({ ...values, name: value })
                      }
                      disabled={isReadonly}
                      placeholder="Enter a name"
                    />
                  </FormField>
                  <FormField>
                    <Label>Enabled</Label>
                    <Switch
                      value={values.enabled}
                      onChange={(checked) =>
                        setValues({ ...values, enabled: checked })
                      }
                      disabled={isReadonly}
                    />
                  </FormField>
                </SettingsSection>
                <SettingsSection
                  title="Advanced"
                  description="Example section — add more fields or remove this section entirely."
                >
                  <FormField>
                    <Label>Environment</Label>
                    <Select
                      value={values.environment}
                      onChange={(value) =>
                        setValues({
                          ...values,
                          environment: value ?? DEFAULT_VALUES.environment,
                        })
                      }
                      disabled={isReadonly}
                    >
                      <Select.Content>
                        <Select.Option value="development">
                          Development
                        </Select.Option>
                        <Select.Option value="staging">Staging</Select.Option>
                        <Select.Option value="production">
                          Production
                        </Select.Option>
                      </Select.Content>
                    </Select>
                  </FormField>
                  <FormField>
                    <Label>Retention (days)</Label>
                    <NumberInputV2
                      value={values.retentionDays}
                      onChange={(value) =>
                        setValues({
                          ...values,
                          retentionDays: value ?? DEFAULT_VALUES.retentionDays,
                        })
                      }
                      disabled={isReadonly}
                      min={0}
                      step={1}
                    />
                  </FormField>
                </SettingsSection>
              </Flex>
            </Flex>
          )}
        </Flex>
      )}
    </Flex>
  );
};

/** Maps the computed save state to the title bar indicator; suppressed entirely when read-only. */
const SaveIndicator = ({
  saveState,
  isReadonly,
}: {
  saveState: SaveState;
  isReadonly: boolean;
}) => {
  if (isReadonly || saveState === undefined) {
    return undefined;
  }

  if (saveState === 'saving') {
    return (
      <Flex flexDirection="row" alignItems="center" gap={8}>
        <ProgressCircle size="small" aria-label="Saving" />
        <Text textStyle="small">Saving…</Text>
      </Flex>
    );
  }

  return (
    <Text textStyle="small">
      {saveState === 'saved' ? 'All changes saved' : 'Unsaved changes'}
    </Text>
  );
};

// Settings widgets are their own entry point — they mount themselves into `#root`.
// The guard keeps the module importable from tests, where no `#root` element exists.
const rootElement = document.getElementById('root');
if (rootElement) {
  createRoot(rootElement).render(
    <AppRoot>
      <SettingNameSettingsWidget />
    </AppRoot>,
  );
}

export default SettingNameSettingsWidget;