import { Flex, FlexItem, Grid, Text } from "../../../components/wp";
import { __ } from "@wordpress/i18n";
import type { useCheckConnection, useConnect, useReauthorize } from "../../../api/hooks";
import { AdminButton } from "../../../components/common";
import { ConnectConsentNote } from "../../connection/components";
import { AdminPanel, adminLayoutStyles as sharedStyles, badgeStyle } from "../../../layouts/admin";
import type { ConnectionDetails, Renderable } from "../../../types";
import { DATE_TIME_FORMAT_PRESETS, formatDateTime, formatLocale } from "../../../utils";

interface ConnectionSettingsPanelProps {
  checkConnection: ReturnType<typeof useCheckConnection>;
  connect: ReturnType<typeof useConnect>;
  connection: ConnectionDetails;
  reauthorize: ReturnType<typeof useReauthorize>;
}

interface ConnectionRowProps {
  label: string;
  value?: string | number | null;
  code?: boolean;
  children?: Renderable;
}

const ConnectionRow = ({ label, value, code = false, children }: ConnectionRowProps) => {
  const fallbackValue = value || "-";

  return (
    <Grid style={sharedStyles.detailRow} templateColumns="minmax(150px, 220px) minmax(0, 1fr)">
      <dt style={sharedStyles.detailTerm}>{label}</dt>
      <dd style={sharedStyles.detailValue}>
        {children ?? (code ? <code>{fallbackValue}</code> : fallbackValue)}
      </dd>
    </Grid>
  );
};

export const ConnectionSettingsPanel = ({
  checkConnection,
  connect,
  connection,
  reauthorize,
}: ConnectionSettingsPanelProps) => {
  // "failed" only exists once a store token does, so it needs Reauthorize, not first-install Connect.
  const hasStoreToken = connection.status !== "not_connected";

  return (
    <AdminPanel
      description={__(
        "This store contacts Market Sync only after you connect it. This section shows the current Market Sync state and lets you connect or refresh authorization.",
        "market-sync",
      )}
      kicker={__("Connection", "market-sync")}
      title={__("Authorization state", "market-sync")}
    >
      <dl style={sharedStyles.detailList}>
        <ConnectionRow label={__("Connection status", "market-sync")}>
          <Text as="span" style={badgeStyle(connection.isConnected ? "success" : "warning")}>
            {connection.label || "-"}
          </Text>
        </ConnectionRow>
        <ConnectionRow
          label={__("SaaS Base URL", "market-sync")}
          value={connection.saasBaseUrl}
          code
        />
        <ConnectionRow label={__("Domain", "market-sync")} value={connection.store} />
        <ConnectionRow label={__("Currency", "market-sync")} value={connection.currency || "-"} />
        <ConnectionRow
          label={__("Locale", "market-sync")}
          value={formatLocale(connection.locale)}
        />
        <ConnectionRow
          label={__("Plugin version", "market-sync")}
          value={connection.pluginVersion || "-"}
        />
        <ConnectionRow
          label={__("WooCommerce version", "market-sync")}
          value={connection.wooVersion || "-"}
        />
        <ConnectionRow
          label={__("Connected at", "market-sync")}
          value={formatDateTime(connection.connectedAt, DATE_TIME_FORMAT_PRESETS.ADMIN)}
        />
        <ConnectionRow
          label={__("Last error", "market-sync")}
          value={connection.lastError || "-"}
        />
      </dl>

      {!hasStoreToken && (
        <Flex direction="column" justify="flex-start" style={{ marginBottom: 16 }}>
          <FlexItem>
            <ConnectConsentNote />
          </FlexItem>
          <FlexItem>
            <AdminButton
              isLoading={connect.isPending}
              loadingText={__("Connecting...", "market-sync")}
              onClick={() => connect.mutate()}
              variant="primary"
            >
              {__("Connect store", "market-sync")}
            </AdminButton>
          </FlexItem>
        </Flex>
      )}

      <Flex justify="flex-start" wrap>
        <Flex justify="flex-start">
          <FlexItem>
            <AdminButton
              isLoading={checkConnection.isPending}
              loadingText={__("Checking...", "market-sync")}
              onClick={() => checkConnection.mutate()}
              variant="secondary"
            >
              {__("Check connection status", "market-sync")}
            </AdminButton>
          </FlexItem>
          {hasStoreToken && (
            <FlexItem>
              <AdminButton
                isLoading={reauthorize.isPending}
                loadingText={__("Reauthorizing...", "market-sync")}
                onClick={() => reauthorize.mutate()}
                variant="secondary"
              >
                {__("Reauthorize", "market-sync")}
              </AdminButton>
            </FlexItem>
          )}
        </Flex>
        {hasStoreToken && (
          <Text className="description">
            {__("Generates a new store token and invalidates the previous token.", "market-sync")}
          </Text>
        )}
      </Flex>
    </AdminPanel>
  );
};