import { useCallback, useEffect } from "react";
import { useTranslation } from "react-i18next";
import {
  TextInput,
  Stack,
  Paper,
  Text,
  Loader,
  Group,
  Alert,
  Switch,
  Divider,
} from "@mantine/core";
import WarningIcon from "@mui/icons-material/Warning";
import { alert } from "@app/components/toast";
import RestartConfirmationModal from "@app/components/shared/config/RestartConfirmationModal";
import { useRestartServer } from "@app/components/shared/config/useRestartServer";
import { useAdminSettings } from "@app/hooks/useAdminSettings";
import { useSettingsDirty } from "@app/hooks/useSettingsDirty";
import PendingBadge from "@app/components/shared/config/PendingBadge";
import { SettingsStickyFooter } from "@app/components/shared/config/SettingsStickyFooter";
import { useLoginRequired } from "@app/hooks/useLoginRequired";
import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
import LoginAgreementEditor from "@app/components/shared/config/configSections/LoginAgreementEditor";

interface LegalSettingsData {
  termsAndConditions?: string;
  privacyPolicy?: string;
  accessibilityStatement?: string;
  cookiePolicy?: string;
  impressum?: string;
  loginAgreement?: {
    enabled?: boolean;
    showInAnonymousMode?: boolean;
    fallbackText?: string;
  };
}

export default function AdminLegalSection() {
  const { t } = useTranslation();
  const { loginEnabled, validateLoginEnabled } = useLoginRequired();
  const {
    restartModalOpened,
    showRestartModal,
    closeRestartModal,
    restartServer,
  } = useRestartServer();

  const {
    settings,
    setSettings,
    loading,
    saving,
    fetchSettings,
    saveSettings,
    isFieldPending,
  } = useAdminSettings<LegalSettingsData>({
    sectionName: "legal",
    // The flat legal URL fields save through the section endpoint as before; the nested
    // loginAgreement object is flattened to dotted keys sent via the global settings endpoint
    // (updateSettingsTransactional), which merges into the existing node. Saving a partial
    // nested object through the section endpoint would replace the whole loginAgreement node
    // and drop the sibling keys the UI didn't touch (e.g. fallbackText). fallbackText is not
    // edited here, so it is deliberately omitted and left untouched.
    saveTransformer: (current: LegalSettingsData) => {
      const { loginAgreement, ...flat } = current;
      const deltaSettings: Record<string, unknown> = {};
      if (loginAgreement) {
        deltaSettings["legal.loginAgreement.enabled"] =
          loginAgreement.enabled ?? false;
        deltaSettings["legal.loginAgreement.showInAnonymousMode"] =
          loginAgreement.showInAnonymousMode ?? true;
      }
      return { sectionData: flat, deltaSettings };
    },
  });

  useEffect(() => {
    if (loginEnabled) {
      fetchSettings();
    }
  }, [loginEnabled]);

  const { isDirty, resetToSnapshot, markSaved } = useSettingsDirty(
    settings,
    loading,
  );
  const handleSave = async () => {
    if (!validateLoginEnabled()) {
      return;
    }
    try {
      markSaved();
      await saveSettings();
      showRestartModal();
    } catch (_error) {
      alert({
        alertType: "error",
        title: t("admin.error", "Error"),
        body: t("admin.settings.saveError", "Failed to save settings"),
      });
    }
  };

  const handleDiscard = useCallback(() => {
    const original = resetToSnapshot();
    setSettings(original);
  }, [resetToSnapshot, setSettings]);

  const actualLoading = loginEnabled ? loading : false;

  if (actualLoading) {
    return (
      <Stack align="center" justify="center" h={200}>
        <Loader size="lg" />
      </Stack>
    );
  }

  return (
    <div className="settings-section-container">
      <Stack gap="lg" className="settings-section-content">
        <LoginRequiredBanner show={!loginEnabled} />
        <div>
          <Text fw={600} size="lg">
            {t("admin.settings.legal.title", "Legal Documents")}
          </Text>
          <Text size="sm" c="dimmed">
            {t(
              "admin.settings.legal.description",
              "Configure links to legal documents and policies.",
            )}
          </Text>
        </div>

        {/* Legal Disclaimer */}
        <Alert
          icon={<WarningIcon style={{ fontSize: 18 }} />}
          title={t(
            "admin.settings.legal.disclaimer.title",
            "Legal Responsibility Warning",
          )}
          color="yellow"
          variant="light"
        >
          <Text size="sm">
            {t(
              "admin.settings.legal.disclaimer.message",
              "By customizing these legal documents, you assume full responsibility for ensuring compliance with all applicable laws and regulations, including but not limited to GDPR and other EU data protection requirements. Only modify these settings if: (1) you are operating a personal/private instance, (2) you are outside EU jurisdiction and understand your local legal obligations, or (3) you have obtained proper legal counsel and accept sole responsibility for all user data and legal compliance. Stirling-PDF and its developers assume no liability for your legal obligations.",
            )}
          </Text>
        </Alert>

        <Paper withBorder p="md" radius="md">
          <Stack gap="md">
            <div>
              <TextInput
                label={
                  <Group gap="xs">
                    <span>
                      {t(
                        "admin.settings.legal.termsAndConditions.label",
                        "Terms and Conditions",
                      )}
                    </span>
                    <PendingBadge show={isFieldPending("termsAndConditions")} />
                  </Group>
                }
                description={t(
                  "admin.settings.legal.termsAndConditions.description",
                  "URL or filename to terms and conditions",
                )}
                value={settings.termsAndConditions || ""}
                onChange={(e) =>
                  setSettings({
                    ...settings,
                    termsAndConditions: e.target.value,
                  })
                }
                placeholder="https://example.com/terms"
                disabled={!loginEnabled}
              />
            </div>

            <div>
              <TextInput
                label={
                  <Group gap="xs">
                    <span>
                      {t(
                        "admin.settings.legal.privacyPolicy.label",
                        "Privacy Policy",
                      )}
                    </span>
                    <PendingBadge show={isFieldPending("privacyPolicy")} />
                  </Group>
                }
                description={t(
                  "admin.settings.legal.privacyPolicy.description",
                  "URL or filename to privacy policy",
                )}
                value={settings.privacyPolicy || ""}
                onChange={(e) =>
                  setSettings({ ...settings, privacyPolicy: e.target.value })
                }
                placeholder="https://example.com/privacy"
                disabled={!loginEnabled}
              />
            </div>

            <div>
              <TextInput
                label={
                  <Group gap="xs">
                    <span>
                      {t(
                        "admin.settings.legal.accessibilityStatement.label",
                        "Accessibility Statement",
                      )}
                    </span>
                    <PendingBadge
                      show={isFieldPending("accessibilityStatement")}
                    />
                  </Group>
                }
                description={t(
                  "admin.settings.legal.accessibilityStatement.description",
                  "URL or filename to accessibility statement",
                )}
                value={settings.accessibilityStatement || ""}
                onChange={(e) =>
                  setSettings({
                    ...settings,
                    accessibilityStatement: e.target.value,
                  })
                }
                placeholder="https://example.com/accessibility"
                disabled={!loginEnabled}
              />
            </div>

            <div>
              <TextInput
                label={
                  <Group gap="xs">
                    <span>
                      {t(
                        "admin.settings.legal.cookiePolicy.label",
                        "Cookie Policy",
                      )}
                    </span>
                    <PendingBadge show={isFieldPending("cookiePolicy")} />
                  </Group>
                }
                description={t(
                  "admin.settings.legal.cookiePolicy.description",
                  "URL or filename to cookie policy",
                )}
                value={settings.cookiePolicy || ""}
                onChange={(e) =>
                  setSettings({ ...settings, cookiePolicy: e.target.value })
                }
                placeholder="https://example.com/cookies"
                disabled={!loginEnabled}
              />
            </div>

            <div>
              <TextInput
                label={
                  <Group gap="xs">
                    <span>
                      {t("admin.settings.legal.impressum.label", "Impressum")}
                    </span>
                    <PendingBadge show={isFieldPending("impressum")} />
                  </Group>
                }
                description={t(
                  "admin.settings.legal.impressum.description",
                  "URL or filename to impressum (required in some jurisdictions)",
                )}
                value={settings.impressum || ""}
                onChange={(e) =>
                  setSettings({ ...settings, impressum: e.target.value })
                }
                placeholder="https://example.com/impressum"
                disabled={!loginEnabled}
              />
            </div>
          </Stack>
        </Paper>

        <Paper withBorder p="md" radius="md">
          <Stack gap="md">
            <div>
              <Text fw={600}>
                {t(
                  "admin.settings.legal.loginAgreement.title",
                  "Login Agreement",
                )}
              </Text>
              <Text size="sm" c="dimmed">
                {t(
                  "admin.settings.legal.loginAgreement.description",
                  "Show a disclaimer users must accept after logging in. The text follows each user's language.",
                )}
              </Text>
            </div>

            <Switch
              label={t(
                "admin.settings.legal.loginAgreement.enabled.label",
                "Enable login agreement",
              )}
              checked={settings.loginAgreement?.enabled ?? false}
              onChange={(e) =>
                setSettings({
                  ...settings,
                  loginAgreement: {
                    ...settings.loginAgreement,
                    enabled: e.currentTarget.checked,
                  },
                })
              }
              disabled={!loginEnabled}
            />

            <Switch
              label={t(
                "admin.settings.legal.loginAgreement.anonymous.label",
                "Show in anonymous (no-login) mode",
              )}
              checked={settings.loginAgreement?.showInAnonymousMode ?? true}
              onChange={(e) =>
                setSettings({
                  ...settings,
                  loginAgreement: {
                    ...settings.loginAgreement,
                    showInAnonymousMode: e.currentTarget.checked,
                  },
                })
              }
              disabled={!loginEnabled}
            />

            <Text size="xs" c="dimmed">
              {t(
                "admin.settings.legal.loginAgreement.restartNote",
                "Enabling or disabling the agreement applies after a restart, like other settings. Text edits below apply immediately.",
              )}
            </Text>

            <Divider />

            <LoginAgreementEditor disabled={!loginEnabled} />
          </Stack>
        </Paper>
      </Stack>

      <SettingsStickyFooter
        isDirty={isDirty}
        saving={saving}
        loginEnabled={loginEnabled}
        onSave={handleSave}
        onDiscard={handleDiscard}
      />

      {/* Restart Confirmation Modal */}
      <RestartConfirmationModal
        opened={restartModalOpened}
        onClose={closeRestartModal}
        onRestart={restartServer}
      />
    </div>
  );
}
