import React from "react";
import { useNavigation } from "../../context/NavigationContext";
import { SettingsRow, SettingsSection } from "../settings-row";
import { useAppConfig } from "../../context/AppConfigContext";

export interface AccountSectionProps {
  /** Fires when the user closes the surrounding settings surface (dialog). */
  onClose: () => void;
  /**
   * Open the in-app profile dialog/screen. Apps wire this to whatever
   * UI shell they use for profile editing. The `tab` argument signals
   * which sub-tab to land on (`"profile"` for personal info, `"security"`
   * for master-password change).
   */
  onOpenProfile?: (tab?: "profile" | "security") => void;
  /**
   * Override the Server Configuration row. Default behavior navigates
   * to `routes.serverConfig` from `AppConfig`. Pass `null` to hide the
   * row entirely (apps with no self-hosted concept).
   */
  onOpenServerConfig?: (() => void) | null;
}

/**
 * Generic ACCOUNT section used inside the settings dialog. Rows:
 *   • Profile (delegates to `onOpenProfile?.("profile")`)
 *   • Master Password (delegates to `onOpenProfile?.("security")`)
 *   • Server Configuration (default navigates to `routes.serverConfig`)
 */
export function AccountSection({
  onClose,
  onOpenProfile,
  onOpenServerConfig,
}: AccountSectionProps) {
  const router = useNavigation();
  const { routes } = useAppConfig();

  const handleServerConfig =
    onOpenServerConfig === undefined
      ? () => {
          onClose();
          router.push(routes.serverConfig);
        }
      : onOpenServerConfig;

  return (
    <SettingsSection title="ACCOUNT">
      <SettingsRow
        icon="person-outline"
        label="Profile"
        onPress={() => {
          onClose();
          onOpenProfile?.("profile");
        }}
        showChevron
      />
      <SettingsRow
        icon="key-outline"
        label="Master Password"
        onPress={() => {
          onClose();
          onOpenProfile?.("security");
        }}
        showChevron
      />
      {handleServerConfig ? (
        <SettingsRow
          icon="server-outline"
          label="Server Configuration"
          onPress={handleServerConfig}
          showChevron
        />
      ) : null}
    </SettingsSection>
  );
}